e8de3c2708da1b5a716100bcca33efa1403f2eea
[moodle.git] / theme / boost / scss / moodle / calendar.scss
1 /* calendar.less */
3 // Calendar colour variables defined.
4 $calendarEventCategoryColor: #d8bfd8 !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 // Calendar event background colours defined.
12 .calendar_event_category {
13     background-color: $calendarEventCategoryColor;
14 }
15 .calendar_event_course {
16     background-color: $calendarEventCourseColor;
17 }
19 .calendar_event_site {
20     background-color: $calendarEventGlobalColor;
21 }
23 .calendar_event_group {
24     background-color: $calendarEventGroupColor;
25 }
27 .calendar_event_user {
28     background-color: $calendarEventUserColor;
29 }
31 .calendar_event_other {
32     background-color: $calendarEventOtherColor;
33 }
35 // Calendar restyling.
36 .path-calendar {
37     .calendartable {
38         width: 100%;
39         table-layout: fixed;
41         th,
42         td {
43             width: 14%;
44             vertical-align: top;
45             text-align: center;
46             border: 0;
47         }
48     }
50     .calendar-controls {
51         .previous,
52         .next,
53         .current {
54             display: block;
55             float: left;
56             width: 12%;
57         }
59         .previous {
60             text-align: left;
61             border: 1px solid transparent;
62         }
64         .current {
65             text-align: center;
66             width: 76%;
67         }
69         .next {
70             text-align: right;
71             border: 1px solid transparent;
72         }
74         .drop-target {
75             box-sizing: border-box;
76             border: 1px dashed $primary;
77         }
78     }
80     .filters {
81         table {
82             border-collapse: separate;
83             border-spacing: 2px;
84             width: 100%;
85         }
86     }
88     .maincalendar {
89         vertical-align: top;
90         padding: 0;
92         .bottom {
93             text-align: center;
94             padding: 5px 0 0 0;
95         }
97         .heightcontainer {
98             height: 100%;
99             position: relative;
100         }
102         .calendarmonth {
103             width: 98%;
104             margin: 10px auto;
106             ul {
107                 margin: 0;
108                 padding: 0;
110                 li {
111                     list-style-type: none;
113                     > a {
114                         @include text-truncate;
115                         max-width: 100%;
116                         display: inline-block;
118                         &:hover {
119                             text-decoration: $link-decoration;
121                             .eventname {
122                                 text-decoration: $link-hover-decoration;
123                             }
124                         }
125                     }
127                     .icon {
128                         margin-left: 0.25em;
129                         margin-right: 0.25em;
130                         vertical-align: initial;
131                     }
133                     .badge {
134                         &.badge-circle {
135                             width: 12px;
136                             height: 12px;
137                             border-radius: 6px;
138                             vertical-align: middle;
140                             &.calendar_event_category {
141                                 background-color: $calendarEventCategoryColor;
142                             }
143                             &.calendar_event_course {
144                                 background-color: $calendarEventCourseColor;
145                             }
147                             &.calendar_event_site {
148                                 background-color: $calendarEventGlobalColor;
149                             }
151                             &.calendar_event_group {
152                                 background-color: $calendarEventGroupColor;
153                             }
155                             &.calendar_event_user {
156                                 background-color: $calendarEventUserColor;
157                             }
159                             &.calendar_event_other {
160                                 background-color: $calendarEventOtherColor;
161                             }
162                         }
163                     }
164                 }
165             }
167             td {
168                 height: 5em;
169             }
171             .clickable:hover {
172                 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);
173             }
174         }
176         .calendar-controls {
177             .previous,
178             .next {
179                 width: 30%;
180             }
182             .current {
183                 width: 39.95%;
184             }
185         }
187         .controls {
188             width: 98%;
189             margin: 10px auto;
190         }
192         .calendar_event_category,
193         .calendar_event_course,
194         .calendar_event_site,
195         .calendar_event_group,
196         .calendar_event_user {
197             &:hover {
198                 a {
199                     color: $link-hover-color;
200                     text-decoration: $link-hover-decoration;
201                 }
202             }
203         }
205         .calendar_event_category {
206             border-color: $calendarEventCategoryColor;
207         }
209         .calendar_event_course {
210             border-color: $calendarEventCourseColor;
211         }
213         .calendar_event_site {
214             border-color: $calendarEventGlobalColor;
215         }
217         .calendar_event_group {
218             border-color: $calendarEventGroupColor;
219         }
221         .calendar_event_user {
222             border-color: $calendarEventUserColor;
223         }
225         .calendar_event_other {
226             border-color: $calendarEventOtherColor;
227         }
229         .calendartable {
230             td,
231             li {
232                 padding: 0 4px 4px 4px;
233             }
235             li {
236                 text-align: left;
237             }
238         }
240         .header {
241             overflow: hidden;
243             .buttons {
244                 float: right;
245             }
246         }
248         .event {
249             .card-header img {
250                 vertical-align: baseline;
251             }
253             .location {
254                 word-break: break-all;
255                 overflow-wrap: break-word;
256             }
257         }
259     }
262 // Calendar export.
263 #page-calendar-export {
264     .indent {
265         padding-left: 20px;
266     }
269 // Block minicalendar.
270 .block {
271     .minicalendar {
272         max-width: 280px;
273         margin: 0 auto;
274         width: 100%;
276         th,
277         td {
278             padding: 2px;
279             font-size: 0.8em;
280             text-align: center;
281         }
283         td {
284             &.weekend {
285                 color: $text-muted;
286             }
288             a {
289                 width: 100%;
290                 height: 100%;
291                 display: block;
292             }
294             &.duration_global {
295                 border-top: 1px solid $calendarEventGlobalColor;
296                 border-bottom: 1px solid $calendarEventGlobalColor;
298                 &.duration_finish {
299                     background-color: $calendarEventGlobalColor;
300                 }
301             }
303             &.duration_category {
304                 border-top: 1px solid $calendarEventCategoryColor;
305                 border-bottom: 1px solid $calendarEventCategoryColor;
307                 &.duration_finish {
308                     background-color: $calendarEventCategoryColor;
309                 }
310             }
312             &.duration_course {
313                 border-top: 1px solid $calendarEventCourseColor;
314                 border-bottom: 1px solid $calendarEventCourseColor;
316                 &.duration_finish {
317                     background-color: $calendarEventCourseColor;
318                 }
319             }
321             &.duration_group {
322                 border-top: 1px solid $calendarEventGroupColor;
323                 border-bottom: 1px solid $calendarEventGroupColor;
325                 &.duration_finish {
326                     background-color: $calendarEventGroupColor;
327                 }
328             }
330             &.duration_user {
331                 border-top: 1px solid $calendarEventUserColor;
332                 border-bottom: 1px solid $calendarEventUserColor;
334                 &.duration_finish {
335                     background-color: $calendarEventUserColor;
336                 }
337             }
339             &.duration_other {
340                 border-top: 1px solid $calendarEventOtherColor;
341                 border-bottom: 1px solid $calendarEventOtherColor;
343                 &.duration_finish {
344                     background-color: $calendarEventOtherColor;
345                 }
346             }
347         }
349         caption {
350             font-size: inherit;
351             font-weight: inherit;
352             line-height: inherit;
353             text-align: center;
354         }
355     }
357     .calendar-controls {
358         .previous,
359         .current,
360         .next {
361             display: block;
362             float: left;
363         }
365         .previous {
366             text-align: left;
367             width: 12%;
368         }
370         .current {
371             text-align: center;
372             width: 76%;
373         }
375         .next {
376             text-align: right;
377             width: 12%;
378         }
379     }
381     .calendar_filters {
382         ul {
383             list-style: none;
384             margin: 0;
385             padding: 0;
386         }
388         li {
389             margin-bottom: 0.2em;
391             span {
392                 img {
393                     padding: 0 0.2em;
394                     margin: 0;
395                 }
396             }
397             .icon {
398                 vertical-align: initial;
399                 margin: 0 0.1rem 0 0.4rem;
400             }
402             > a {
403                 &:hover {
404                     text-decoration: $link-decoration;
406                     .eventname {
407                         text-decoration: $link-hover-decoration;
408                     }
409                 }
410             }
411         }
412     }
414     .content {
415         h3 {
416             &.eventskey {
417                 margin-top: 0.5em;
418             }
419         }
420     }
423 /* Display month name above the calendar */
424 table.calendartable caption {
425     caption-side: top;
428 @media (min-width: 768px) {
429     #page-calender-view {
430         .container-fluid {
431             min-width: 1024px;
432         }
433     }
436 .calendarwrapper {
437     position: relative;
440 .day-popover-content {
441     &:empty + .day-popover-alternate {
442         display: block;
443     }
446 .location-content {
447     overflow-wrap: break-word;
450 .description-content {
451     overflow-wrap: break-word;
452     > p {
453         margin: 0;
454     }
457 .cal_courses_flt {
458     color: $gray-600;