Merge branch 'MDL-60655-master' of git://github.com/junpataleta/moodle
[moodle.git] / theme / bootstrapbase / less / moodle / calendar.less
1 /* calendar.less */
3 // Calendar colour variables defined.
4 @calendarEventCategoryColor: #d8bfd8; // Pale purple.
5 @calendarEventCourseColor: #ffd3bd; // Pale red.
6 @calendarEventGlobalColor: #d6f8cd; // Pale green.
7 @calendarEventGroupColor:  #fee7ae; // Pale yellow.
8 @calendarEventUserColor:   #dce7ec; // Pale blue.
10 // Calendar event background colours defined.
11 .calendar_event_category {
12     background-color: @calendarEventCategoryColor;
13 }
14 .calendar_event_course {
15     background-color: @calendarEventCourseColor;
16 }
17 .calendar_event_site {
18     background-color: @calendarEventGlobalColor;
19 }
20 .calendar_event_group {
21     background-color: @calendarEventGroupColor;
22 }
23 .calendar_event_user {
24     background-color: @calendarEventUserColor;
25 }
27 // Calendar restyling.
28 .path-calendar {
29     .calendartable {
30         width: 100%;
31         table-layout: fixed;
32         th,
33         td {
34             width: 14%;
35             vertical-align: top;
36             text-align: center;
37             border: 0;
38         }
39     }
40     .calendar-controls {
41         .previous,
42         .next,
43         .current {
44             display: block;
45             float: left;
46             width: 12%;
47         }
48         .previous {
49             text-align: left;
50             border: 1px solid transparent;
51             box-sizing: border-box;
52         }
53         .current {
54             text-align: center;
55             width: 76%;
56         }
57         .next {
58             text-align: right;
59             border: 1px solid transparent;
60             box-sizing: border-box;
61         }
62         .drop-target {
63             box-sizing: border-box;
64             border: 1px dashed @blue;
65         }
66     }
67     .filters {
68         table {
69             border-collapse: separate;
70             border-spacing: 2px;
71             width: 100%;
72         }
73     }
74     .maincalendar {
75         vertical-align: top;
76         padding: 0;
77         .bottom {
78             text-align: center;
79             padding: 5px 0 0 0;
80         }
81         .heightcontainer {
82             height: 100%;
83             position: relative;
84         }
85         .calendarmonth {
86             width: 98%;
87             margin: 10px auto;
88         }
89         .calendarmonth {
90             ul {
91                 margin: 0;
92                 padding: 0;
93                 li {
94                     list-style-type: none;
96                     > a {
97                         .text-truncate;
98                         max-width: 100%;
99                         display: inline-block;
100                     }
102                     .icon {
103                         margin-left: 0.25em;
104                         margin-right: 0.25em;
105                         padding: 0;
106                         vertical-align: initial;
107                     }
109                     .badge {
110                         &.badge-circle {
111                             width: 12px;
112                             height: 12px;
113                             padding: 0;
114                             border-radius: 6px;
115                             vertical-align: middle;
117                             &.calendar_event_category {
118                                 background-color: @calendarEventCategoryColor;
119                             }
121                             &.calendar_event_course {
122                                 background-color: @calendarEventCourseColor;
123                             }
125                             &.calendar_event_site {
126                                 background-color: @calendarEventGlobalColor;
127                             }
129                             &.calendar_event_group {
130                                 background-color: @calendarEventGroupColor;
131                             }
133                             &.calendar_event_user {
134                                 background-color: @calendarEventUserColor;
135                             }
136                         }
137                     }
138                 }
139             }
140             td {
141                 height: 5em;
142             }
144             .clickable:hover {
145                 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
146             }
147         }
148         .calendar-controls {
149             .previous,
150             .next {
151                 width: 30%;
152             }
153             .current {
154                 width: 39.95%;
155             }
156         }
157         .controls {
158             width: 98%;
159             margin: 10px auto;
160         }
161         .calendar_event_category,
162         .calendar_event_course,
163         .calendar_event_site,
164         .calendar_event_group,
165         .calendar_event_user {
166             &:hover {
167                 a {
168                     color: @linkColorHover;
169                     text-decoration: underline;
170                 }
171             }
172         }
173         .calendar_event_category {
174             border-color: @calendarEventCategoryColor;
175         }
176         .calendar_event_course {
177             border-color: @calendarEventCourseColor;
178         }
179         .calendar_event_site {
180             border-color: @calendarEventGlobalColor;
181         }
182         .calendar_event_group {
183             border-color: @calendarEventGroupColor;
184         }
185         .calendar_event_user {
186             border-color: @calendarEventUserColor;
187         }
188         .calendar-controls {
189             .current {
190                 font-family: @headingsFontFamily;
191                 font-weight: @headingsFontWeight;
192                 color: @headingsColor;
193                 font-size: 25px;
194                 line-height: 1.2;
195             }
196         }
197         .calendartable {
198             td,
199             li {
200                 padding: 0 4px 4px 4px;
201             }
202             li {
203                 text-align: left;
204             }
205         }
206         .header {
207             overflow: hidden;
208             .buttons {
209                 float: right;
210             }
211         }
212         .eventlist {
213             margin: 0;
215             .event {
216                 border-spacing: 0;
217                 border-collapse: separate;
218                 position: relative;
219                 margin-bottom: 20px;
220                 list-style-type: none;
222                 > img {
223                     padding-top: 3px;
224                     float: left;
225                 }
226                 .name {
227                     font-size: @fontSizeLarge;
228                     font-weight: 200;
229                     line-height: 24px;
230                     float: left;
231                     margin: 0;
232                     margin-right: 0.5rem;
233                 }
234                 .name,
235                 .action {
236                     margin-bottom: 5px;
237                 }
238                 .date {
239                     float: right;
240                 }
241                 .subscription,
242                 .action {
243                     float: left;
244                     clear: left;
245                 }
246                 .side {
247                     width: 22px;
248                 }
249                 .description {
250                     background-color: @white;
251                     clear: both;
252                 }
253                 .commands {
254                     a {
255                         margin: 0 3px;
256                     }
257                 }
258             }
259         }
260     }
263 // Calendar export.
264 #page-calendar-export {
265     .indent {
266         padding-left: 20px;
267     }
270 // Block minicalendar.
271 .block {
272     .minicalendar {
273         max-width: 280px;
274         margin: 0 auto;
275         width: 100%;
276         th,
277         td {
278             padding: 2px;
279             font-size: 0.8em;
280             text-align: center;
281         }
282         td {
283             &.weekend {
284                 .muted;
285             }
286             a {
287                 width: 100%;
288                 height: 100%;
289                 display: block;
290             }
291             &.duration_global {
292                 border-top: 1px solid @calendarEventGlobalColor;
293                 border-bottom: 1px solid @calendarEventGlobalColor;
294                 &.duration_finish {
295                     background-color: @calendarEventGlobalColor;
296                 }
297             }
298             &.duration_category {
299                 border-top: 1px solid @calendarEventCategoryColor;
300                 border-bottom: 1px solid @calendarEventCategoryColor;
301                 &.duration_finish {
302                     background-color: @calendarEventCategoryColor;
303                 }
304             }
305             &.duration_course {
306                 border-top: 1px solid @calendarEventCourseColor;
307                 border-bottom: 1px solid @calendarEventCourseColor;
308                 &.duration_finish {
309                     background-color: @calendarEventCourseColor;
310                 }
311             }
312             &.duration_group {
313                 border-top: 1px solid @calendarEventGroupColor;
314                 border-bottom: 1px solid @calendarEventGroupColor;
315                 &.duration_finish {
316                     background-color: @calendarEventGroupColor;
317                 }
318             }
319             &.duration_user {
320                 border-top: 1px solid @calendarEventUserColor;
321                 border-bottom: 1px solid @calendarEventUserColor;
322                 &.duration_finish {
323                     background-color: @calendarEventUserColor;
324                 }
325             }
326         }
327         caption {
328             font-size: inherit;
329             font-weight: inherit;
330             line-height: inherit;
331             text-align: center;
332         }
333     }
334     .calendar-controls {
335         .previous,
336         .current,
337         .next {
338             display: block;
339             float: left;
340         }
341         .previous {
342             text-align: left;
343             width: 12%;
344         }
345         .current {
346             text-align: center;
347             width: 76%;
348         }
349         .next {
350             text-align: right;
351             width: 12%;
352         }
353     }
354     .calendar_filters {
355         ul {
356             list-style: none;
357             margin: 0;
358         }
359         li {
360             margin-bottom: 0.2em;
361             span {
362                 img {
363                     margin: 0 0.25em;
364                 }
365                 .icon {
366                     padding: 0 0.2em;
367                 }
368             }
369             .icon {
370                 padding: 0;
371                 margin-left: 0.25em;
372             }
373         }
374     }
375     .content {
376         h3 {
377             &.eventskey {
378                 margin-top: 0.5em;
379             }
380         }
381     }
384 @media (min-width: 768px) {
385     #page-calender-view {
386         .container-fluid {
387             min-width: 1024px;
388         }
389     }
392 .calendarwrapper {
393     position: relative;