Merge branch 'MDL-69418-master' of https://github.com/dmitriim/moodle
[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                     .badge {
163                         &.badge-circle {
164                             width: 12px;
165                             height: 12px;
166                             border-radius: 6px;
167                             vertical-align: middle;
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                 }
200             }
202             td {
203                 height: 5em;
204             }
206             .clickable:hover {
207                 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);
208             }
209         }
211         .calendar-controls {
212             .previous,
213             .next {
214                 width: 30%;
215             }
217             .current {
218                 width: 39.95%;
219             }
220         }
222         .controls {
223             width: 98%;
224             margin: 10px auto;
225         }
227         .calendar_event_category,
228         .calendar_event_course,
229         .calendar_event_site,
230         .calendar_event_group,
231         .calendar_event_user {
232             &:hover {
233                 a {
234                     color: $link-hover-color;
235                     text-decoration: $link-hover-decoration;
236                 }
237             }
238         }
240         .calendar_event_category {
241             border-color: $calendarEventCategoryColor;
242         }
244         .calendar_event_course {
245             border-color: $calendarEventCourseColor;
246         }
248         .calendar_event_site {
249             border-color: $calendarEventGlobalColor;
250         }
252         .calendar_event_group {
253             border-color: $calendarEventGroupColor;
254         }
256         .calendar_event_user {
257             border-color: $calendarEventUserColor;
258         }
260         .calendar_event_other {
261             border-color: $calendarEventOtherColor;
262         }
264         .calendartable {
265             td,
266             li {
267                 padding: 0 4px 4px 4px;
268             }
270             li {
271                 text-align: left;
272             }
273         }
275         .header {
276             overflow: hidden;
278             .buttons {
279                 float: right;
280             }
281         }
283         .event {
284             .card-header img {
285                 vertical-align: baseline;
286             }
288             .location {
289                 word-break: break-all;
290                 overflow-wrap: break-word;
291             }
292         }
294     }
297 // Calendar export.
298 #page-calendar-export {
299     .indent {
300         padding-left: 20px;
301     }
304 // Block minicalendar.
305 .block {
306     .minicalendar {
307         max-width: 280px;
308         margin: 0 auto;
309         width: 100%;
311         th,
312         td {
313             padding: 2px;
314             font-size: 0.8em;
315             text-align: center;
316         }
318         td {
319             &.weekend {
320                 color: $text-muted;
321             }
323             a {
324                 width: 100%;
325                 height: 100%;
326                 display: block;
327                 color: $calendarEventColor;
328             }
330             &.duration_global {
331                 border-top: 1px solid $calendarEventGlobalColor;
332                 border-bottom: 1px solid $calendarEventGlobalColor;
334                 &.duration_finish {
335                     background-color: $calendarEventGlobalColor;
336                 }
337             }
339             &.duration_category {
340                 border-top: 1px solid $calendarEventCategoryColor;
341                 border-bottom: 1px solid $calendarEventCategoryColor;
343                 &.duration_finish {
344                     background-color: $calendarEventCategoryColor;
345                 }
346             }
348             &.duration_course {
349                 border-top: 1px solid $calendarEventCourseColor;
350                 border-bottom: 1px solid $calendarEventCourseColor;
352                 &.duration_finish {
353                     background-color: $calendarEventCourseColor;
354                 }
355             }
357             &.duration_group {
358                 border-top: 1px solid $calendarEventGroupColor;
359                 border-bottom: 1px solid $calendarEventGroupColor;
361                 &.duration_finish {
362                     background-color: $calendarEventGroupColor;
363                 }
364             }
366             &.duration_user {
367                 border-top: 1px solid $calendarEventUserColor;
368                 border-bottom: 1px solid $calendarEventUserColor;
370                 &.duration_finish {
371                     background-color: $calendarEventUserColor;
372                 }
373             }
375             &.duration_other {
376                 border-top: 1px solid $calendarEventOtherColor;
377                 border-bottom: 1px solid $calendarEventOtherColor;
379                 &.duration_finish {
380                     background-color: $calendarEventOtherColor;
381                 }
382             }
383         }
385         caption {
386             font-size: inherit;
387             font-weight: inherit;
388             line-height: inherit;
389             text-align: center;
390         }
391     }
393     .calendar-controls {
394         .previous,
395         .current,
396         .next {
397             display: block;
398             float: left;
399         }
401         .previous {
402             text-align: left;
403             width: 12%;
404         }
406         .current {
407             text-align: center;
408             width: 76%;
409         }
411         .next {
412             text-align: right;
413             width: 12%;
414         }
415     }
417     .calendar_filters {
418         ul {
419             list-style: none;
420             margin: 0;
421             padding: 0;
422         }
424         li {
425             margin-bottom: 0.2em;
427             span {
428                 &.calendar_event_category {
429                     i {
430                         color: $calendarEventColor;
431                     }
432                 }
433                 &.calendar_event_course {
434                     i {
435                         color: $calendarEventColor;
436                     }
437                 }
438                 &.calendar_event_site {
439                     i {
440                         color: $calendarEventColor;
441                     }
442                 }
443                 &.calendar_event_group {
444                     i {
445                         color: $calendarEventColor;
446                     }
447                 }
448                 &.calendar_event_user {
449                     i {
450                         color: $calendarEventColor;
451                     }
452                 }
453                 &.calendar_event_other {
454                     i {
455                         color: $calendarEventColor;
456                     }
457                 }
458                 img {
459                     padding: 0 0.2em;
460                     margin: 0;
461                 }
462             }
463             .icon {
464                 vertical-align: initial;
465                 margin: 0 0.1rem 0 0.4rem;
466             }
468             > a {
469                 &:hover {
470                     text-decoration: $link-decoration;
472                     .eventname {
473                         text-decoration: $link-hover-decoration;
474                     }
475                 }
476             }
477         }
478     }
480     .content {
481         h3 {
482             &.eventskey {
483                 margin-top: 0.5em;
484             }
485         }
486     }
489 /* Display month name above the calendar */
490 table.calendartable caption {
491     caption-side: top;
494 @media (min-width: 768px) {
495     #page-calender-view {
496         .container-fluid {
497             min-width: 1024px;
498         }
499     }
502 .calendarwrapper {
503     position: relative;
506 .day-popover-content {
507     &:empty + .day-popover-alternate {
508         display: block;
509     }
512 .location-content {
513     overflow-wrap: break-word;
516 .description-content {
517     overflow-wrap: break-word;
518     > p {
519         margin: 0;
520     }
523 .cal_courses_flt {
524     color: #868e96;