weekly release 4.0dev
[moodle.git] / theme / boost / scss / moodle / calendar.scss
1 /* calendar.less */
3 // Calendar colour variables defined.
4 $calendarEventCategoryColor: #e0cbe0 !default; // Pale purple.
5 $calendarEventCourseColor: #ffd3bd !default; // Pale red.
6 $calendarEventGlobalColor: #d6f8cd !default; // Pale green.
7 $calendarEventGroupColor: #fee7ae !default; // Pale yellow.
8 $calendarEventUserColor: #dce7ec !default; // Pale blue.
9 $calendarEventOtherColor: #ced4da !default; // Pale gray.
11 // Border colours for the event colour indicators.
12 $calendarEventCategoryBorder: 2px solid #9e619f !default; // Purple.
13 $calendarEventCourseBorder: 2px solid #d34600 !default; // Red-orange.
14 $calendarEventGlobalBorder: 2px solid #2b8713 !default; // Green.
15 $calendarEventGroupBorder: 2px solid #9a6e02 !default; // Dark orange.
16 $calendarEventUserBorder: 2px solid #4e7c91 !default; // Blue.
17 $calendarEventOtherBorder: 2px solid #687889 !default; // Gray.
19 // This will be the colour of mini-calendar links, hide/show filter icons, edit/delete icon buttons.
20 $calendarEventColor: #0d5ca1 !default;
22 // Calendar event background colours defined.
23 .calendar_event_category {
24     background-color: $calendarEventCategoryColor;
25     .commands a {
26         color: $calendarEventColor;
27     }
28 }
29 .calendar_event_course {
30     background-color: $calendarEventCourseColor;
31     .commands a {
32         color: $calendarEventColor;
33     }
34 }
36 .calendar_event_site {
37     background-color: $calendarEventGlobalColor;
38     .commands a {
39         color: $calendarEventColor;
40     }
41 }
43 .calendar_event_group {
44     background-color: $calendarEventGroupColor;
45     .commands a {
46         color: $calendarEventColor;
47     }
48 }
50 .calendar_event_user {
51     background-color: $calendarEventUserColor;
52     .commands a {
53         color: $calendarEventColor;
54     }
55 }
57 .calendar_event_other {
58     background-color: $calendarEventOtherColor;
59     .commands a {
60         color: $calendarEventColor;
61     }
62 }
64 // Calendar restyling.
65 .path-calendar {
66     .calendartable {
67         width: 100%;
68         table-layout: fixed;
70         th,
71         td {
72             width: 14%;
73             vertical-align: top;
74             text-align: center;
75             border: 0;
76         }
77     }
79     .calendar-controls {
80         .previous,
81         .next,
82         .current {
83             display: block;
84             float: left;
85             width: 12%;
86         }
88         .previous {
89             text-align: left;
90             border: 1px solid transparent;
91         }
93         .current {
94             text-align: center;
95             width: 76%;
96         }
98         .next {
99             text-align: right;
100             border: 1px solid transparent;
101         }
103         .drop-target {
104             box-sizing: border-box;
105             border: 1px dashed $primary;
106         }
107     }
109     .filters {
110         table {
111             border-collapse: separate;
112             border-spacing: 2px;
113             width: 100%;
114         }
115     }
117     .maincalendar {
118         vertical-align: top;
119         padding: 0;
121         .bottom {
122             text-align: center;
123             padding: 5px 0 0 0;
124         }
126         .heightcontainer {
127             height: 100%;
128             position: relative;
129         }
131         .calendarmonth {
132             width: 98%;
133             margin: 10px auto;
135             ul {
136                 margin: 0;
137                 padding: 0;
139                 li {
140                     list-style-type: none;
142                     > a {
143                         @include text-truncate;
144                         max-width: 100%;
145                         display: inline-block;
147                         &:hover {
148                             text-decoration: $link-decoration;
150                             .eventname {
151                                 text-decoration: $link-hover-decoration;
152                             }
153                         }
154                     }
156                     .icon {
157                         margin-left: 0.25em;
158                         margin-right: 0.25em;
159                         vertical-align: initial;
160                     }
162                     .calendar-circle {
163                         width: 12px;
164                         height: 12px;
165                         border-radius: 6px;
166                         vertical-align: middle;
167                         display: inline-block;
169                         &.calendar_event_category {
170                             background-color: $calendarEventCategoryColor;
171                             border: $calendarEventCategoryBorder;
172                         }
173                         &.calendar_event_course {
174                             background-color: $calendarEventCourseColor;
175                             border: $calendarEventCourseBorder;
176                         }
178                         &.calendar_event_site {
179                             background-color: $calendarEventGlobalColor;
180                             border: $calendarEventGlobalBorder;
181                         }
183                         &.calendar_event_group {
184                             background-color: $calendarEventGroupColor;
185                             border: $calendarEventGroupBorder;
186                         }
188                         &.calendar_event_user {
189                             background-color: $calendarEventUserColor;
190                             border: $calendarEventUserBorder;
191                         }
193                         &.calendar_event_other {
194                             background-color: $calendarEventOtherColor;
195                             border: $calendarEventOtherBorder;
196                         }
197                     }
198                 }
199             }
201             td {
202                 height: 5em;
203             }
205             .clickable:hover {
206                 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);
207             }
208         }
210         .calendar-controls {
211             .previous,
212             .next {
213                 width: 30%;
214             }
216             .current {
217                 width: 39.95%;
218             }
219         }
221         .controls {
222             width: 98%;
223             margin: 10px auto;
224         }
226         .calendar_event_category,
227         .calendar_event_course,
228         .calendar_event_site,
229         .calendar_event_group,
230         .calendar_event_user {
231             &:hover {
232                 a {
233                     color: $link-hover-color;
234                     text-decoration: $link-hover-decoration;
235                 }
236             }
237         }
239         .calendar_event_category {
240             border-color: $calendarEventCategoryColor;
241         }
243         .calendar_event_course {
244             border-color: $calendarEventCourseColor;
245         }
247         .calendar_event_site {
248             border-color: $calendarEventGlobalColor;
249         }
251         .calendar_event_group {
252             border-color: $calendarEventGroupColor;
253         }
255         .calendar_event_user {
256             border-color: $calendarEventUserColor;
257         }
259         .calendar_event_other {
260             border-color: $calendarEventOtherColor;
261         }
263         .calendartable {
264             td,
265             li {
266                 padding: 0 4px 4px 4px;
267             }
269             li {
270                 text-align: left;
271             }
272         }
274         .header {
275             overflow: hidden;
277             .buttons {
278                 float: right;
279             }
280         }
282         .event {
283             .card-header img {
284                 vertical-align: baseline;
285             }
287             .location {
288                 word-break: break-all;
289                 overflow-wrap: break-word;
290             }
291         }
293     }
296 // Calendar export.
297 #page-calendar-export {
298     .indent {
299         padding-left: 20px;
300     }
303 // Block minicalendar.
304 .block {
305     .minicalendar {
306         max-width: 280px;
307         margin: 0 auto;
308         width: 100%;
310         th,
311         td {
312             padding: 2px;
313             font-size: 0.8em;
314             text-align: center;
315         }
317         td {
318             &.weekend {
319                 color: $text-muted;
320             }
322             a {
323                 width: 100%;
324                 height: 100%;
325                 display: block;
326                 color: $calendarEventColor;
327             }
329             &.duration_global {
330                 border-top: 1px solid $calendarEventGlobalColor;
331                 border-bottom: 1px solid $calendarEventGlobalColor;
333                 &.duration_finish {
334                     background-color: $calendarEventGlobalColor;
335                 }
336             }
338             &.duration_category {
339                 border-top: 1px solid $calendarEventCategoryColor;
340                 border-bottom: 1px solid $calendarEventCategoryColor;
342                 &.duration_finish {
343                     background-color: $calendarEventCategoryColor;
344                 }
345             }
347             &.duration_course {
348                 border-top: 1px solid $calendarEventCourseColor;
349                 border-bottom: 1px solid $calendarEventCourseColor;
351                 &.duration_finish {
352                     background-color: $calendarEventCourseColor;
353                 }
354             }
356             &.duration_group {
357                 border-top: 1px solid $calendarEventGroupColor;
358                 border-bottom: 1px solid $calendarEventGroupColor;
360                 &.duration_finish {
361                     background-color: $calendarEventGroupColor;
362                 }
363             }
365             &.duration_user {
366                 border-top: 1px solid $calendarEventUserColor;
367                 border-bottom: 1px solid $calendarEventUserColor;
369                 &.duration_finish {
370                     background-color: $calendarEventUserColor;
371                 }
372             }
374             &.duration_other {
375                 border-top: 1px solid $calendarEventOtherColor;
376                 border-bottom: 1px solid $calendarEventOtherColor;
378                 &.duration_finish {
379                     background-color: $calendarEventOtherColor;
380                 }
381             }
382         }
384         caption {
385             font-size: inherit;
386             font-weight: inherit;
387             line-height: inherit;
388             text-align: center;
389         }
390     }
392     .calendar-controls {
393         .previous,
394         .current,
395         .next {
396             display: block;
397             float: left;
398         }
400         .previous {
401             text-align: left;
402             width: 12%;
403         }
405         .current {
406             text-align: center;
407             width: 76%;
408         }
410         .next {
411             text-align: right;
412             width: 12%;
413         }
414     }
416     .calendar_filters {
417         ul {
418             list-style: none;
419             margin: 0;
420             padding: 0;
421         }
423         li {
424             margin-bottom: 0.2em;
426             span {
427                 &.calendar_event_category {
428                     i {
429                         color: $calendarEventColor;
430                     }
431                 }
432                 &.calendar_event_course {
433                     i {
434                         color: $calendarEventColor;
435                     }
436                 }
437                 &.calendar_event_site {
438                     i {
439                         color: $calendarEventColor;
440                     }
441                 }
442                 &.calendar_event_group {
443                     i {
444                         color: $calendarEventColor;
445                     }
446                 }
447                 &.calendar_event_user {
448                     i {
449                         color: $calendarEventColor;
450                     }
451                 }
452                 &.calendar_event_other {
453                     i {
454                         color: $calendarEventColor;
455                     }
456                 }
457                 img {
458                     padding: 0 0.2em;
459                     margin: 0;
460                 }
461             }
462             .icon {
463                 vertical-align: initial;
464                 margin: 0 0.1rem 0 0.4rem;
465             }
467             > a {
468                 &:hover {
469                     text-decoration: $link-decoration;
471                     .eventname {
472                         text-decoration: $link-hover-decoration;
473                     }
474                 }
475             }
476         }
477     }
479     .content {
480         h3 {
481             &.eventskey {
482                 margin-top: 0.5em;
483             }
484         }
485     }
488 /* Display month name above the calendar */
489 table.calendartable caption {
490     caption-side: top;
493 @media (min-width: 768px) {
494     #page-calender-view {
495         .container-fluid {
496             min-width: 1024px;
497         }
498     }
501 .calendarwrapper {
502     position: relative;
505 .day-popover-content {
506     &:empty + .day-popover-alternate {
507         display: block;
508     }
511 .location-content {
512     overflow-wrap: break-word;
515 .description-content {
516     overflow-wrap: break-word;
517     > p {
518         margin: 0;
519     }
522 .cal_courses_flt {
523     color: $gray-600;