MDL-37624 calendar: Added location support
[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.
10 // Calendar event background colours defined.
11 .calendar_event_category {
12     background-color: $calendarEventCategoryColor;
13 }
14 .calendar_event_course {
15     background-color: $calendarEventCourseColor;
16 }
18 .calendar_event_site {
19     background-color: $calendarEventGlobalColor;
20 }
22 .calendar_event_group {
23     background-color: $calendarEventGroupColor;
24 }
26 .calendar_event_user {
27     background-color: $calendarEventUserColor;
28 }
30 // Calendar restyling.
31 .path-calendar {
32     .calendartable {
33         width: 100%;
34         table-layout: fixed;
36         th,
37         td {
38             width: 14%;
39             vertical-align: top;
40             text-align: center;
41             border: 0;
42         }
43     }
45     .calendar-controls {
46         .previous,
47         .next,
48         .current {
49             display: block;
50             float: left;
51             width: 12%;
52         }
54         .previous {
55             text-align: left;
56             border: 1px solid transparent;
57         }
59         .current {
60             text-align: center;
61             width: 76%;
62         }
64         .next {
65             text-align: right;
66             border: 1px solid transparent;
67         }
69         .drop-target {
70             box-sizing: border-box;
71             border: 1px dashed $brand-primary;
72         }
73     }
75     .filters {
76         table {
77             border-collapse: separate;
78             border-spacing: 2px;
79             width: 100%;
80         }
81     }
83     .maincalendar {
84         vertical-align: top;
85         padding: 0;
87         .bottom {
88             text-align: center;
89             padding: 5px 0 0 0;
90         }
92         .heightcontainer {
93             height: 100%;
94             position: relative;
95         }
97         .calendarmonth {
98             width: 98%;
99             margin: 10px auto;
101             ul {
102                 margin: 0;
103                 padding: 0;
105                 li {
106                     list-style-type: none;
108                     > a {
109                         @include text-truncate;
110                         max-width: 100%;
111                         display: inline-block;
113                         &:hover {
114                             text-decoration: $link-decoration;
116                             .eventname {
117                                 text-decoration: $link-hover-decoration;
118                             }
119                         }
120                     }
122                     .icon {
123                         margin-left: 0.25em;
124                         margin-right: 0.25em;
125                         vertical-align: initial;
126                     }
128                     .badge {
129                         &.badge-circle {
130                             width: 12px;
131                             height: 12px;
132                             border-radius: 6px;
133                             vertical-align: middle;
135                             &.calendar_event_category {
136                                 background-color: $calendarEventCategoryColor;
137                             }
138                             &.calendar_event_course {
139                                 background-color: $calendarEventCourseColor;
140                             }
142                             &.calendar_event_site {
143                                 background-color: $calendarEventGlobalColor;
144                             }
146                             &.calendar_event_group {
147                                 background-color: $calendarEventGroupColor;
148                             }
150                             &.calendar_event_user {
151                                 background-color: $calendarEventUserColor;
152                             }
153                         }
154                     }
155                 }
156             }
158             td {
159                 height: 5em;
160             }
162             .clickable:hover {
163                 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);
164             }
165         }
167         .calendar-controls {
168             .previous,
169             .next {
170                 width: 30%;
171             }
173             .current {
174                 width: 39.95%;
175             }
176         }
178         .controls {
179             width: 98%;
180             margin: 10px auto;
181         }
183         .calendar_event_category,
184         .calendar_event_course,
185         .calendar_event_site,
186         .calendar_event_group,
187         .calendar_event_user {
188             &:hover {
189                 a {
190                     color: $link-hover-color;
191                     text-decoration: $link-hover-decoration;
192                 }
193             }
194         }
196         .calendar_event_category {
197             border-color: $calendarEventCategoryColor;
198         }
200         .calendar_event_course {
201             border-color: $calendarEventCourseColor;
202         }
204         .calendar_event_site {
205             border-color: $calendarEventGlobalColor;
206         }
208         .calendar_event_group {
209             border-color: $calendarEventGroupColor;
210         }
212         .calendar_event_user {
213             border-color: $calendarEventUserColor;
214         }
216         .calendar-controls {
217             .current {
218                 @extend .h2;
219             }
220         }
222         .calendartable {
223             td,
224             li {
225                 padding: 0 4px 4px 4px;
226             }
228             li {
229                 text-align: left;
230             }
231         }
233         .header {
234             overflow: hidden;
236             .buttons {
237                 float: right;
238             }
239         }
241         .event {
242             .card-header img {
243                 vertical-align: baseline;
244             }
246             .location {
247                 word-break: break-all;
248                 overflow-wrap: break-word;
249             }
250         }
252     }
255 // Calendar export.
256 #page-calendar-export {
257     .indent {
258         padding-left: 20px;
259     }
262 // Block minicalendar.
263 .block {
264     .minicalendar {
265         max-width: 280px;
266         margin: 0 auto;
267         width: 100%;
269         th,
270         td {
271             padding: 2px;
272             font-size: 0.8em;
273             text-align: center;
274         }
276         td {
277             &.weekend {
278                 @extend .text-muted;
279             }
281             a {
282                 width: 100%;
283                 height: 100%;
284                 display: block;
285             }
287             &.duration_global {
288                 border-top: 1px solid $calendarEventGlobalColor;
289                 border-bottom: 1px solid $calendarEventGlobalColor;
291                 &.duration_finish {
292                     background-color: $calendarEventGlobalColor;
293                 }
294             }
296             &.duration_category {
297                 border-top: 1px solid $calendarEventCategoryColor;
298                 border-bottom: 1px solid $calendarEventCategoryColor;
300                 &.duration_finish {
301                     background-color: $calendarEventCategoryColor;
302                 }
303             }
305             &.duration_course {
306                 border-top: 1px solid $calendarEventCourseColor;
307                 border-bottom: 1px solid $calendarEventCourseColor;
309                 &.duration_finish {
310                     background-color: $calendarEventCourseColor;
311                 }
312             }
314             &.duration_group {
315                 border-top: 1px solid $calendarEventGroupColor;
316                 border-bottom: 1px solid $calendarEventGroupColor;
318                 &.duration_finish {
319                     background-color: $calendarEventGroupColor;
320                 }
321             }
323             &.duration_user {
324                 border-top: 1px solid $calendarEventUserColor;
325                 border-bottom: 1px solid $calendarEventUserColor;
327                 &.duration_finish {
328                     background-color: $calendarEventUserColor;
329                 }
330             }
331         }
333         caption {
334             font-size: inherit;
335             font-weight: inherit;
336             line-height: inherit;
337             text-align: center;
338         }
339     }
341     .calendar-controls {
342         .previous,
343         .current,
344         .next {
345             display: block;
346             float: left;
347         }
349         .previous {
350             text-align: left;
351             width: 12%;
352         }
354         .current {
355             text-align: center;
356             width: 76%;
357         }
359         .next {
360             text-align: right;
361             width: 12%;
362         }
363     }
365     .calendar_filters {
366         ul {
367             list-style: none;
368             margin: 0;
369             padding: 0;
370         }
372         li {
373             margin-bottom: 0.2em;
375             span {
376                 img {
377                     padding: 0 0.2em;
378                     margin: 0;
379                 }
380             }
381             .icon {
382                 vertical-align: initial;
383                 margin: 0 0.1rem 0 0.4rem;
384             }
386             > a {
387                 &:hover {
388                     text-decoration: $link-decoration;
390                     .eventname {
391                         text-decoration: $link-hover-decoration;
392                     }
393                 }
394             }
395         }
396     }
398     .content {
399         h3 {
400             &.eventskey {
401                 margin-top: 0.5em;
402             }
403         }
404     }
407 /* Display month name above the calendar */
408 table.calendartable caption {
409     caption-side: top;
412 @media (min-width: 768px) {
413     #page-calender-view {
414         .container-fluid {
415             min-width: 1024px;
416         }
417     }
420 .calendarwrapper {
421     position: relative;
424 .day-popover-content {
425     &:empty + .day-popover-alternate {
426         display: block;
427     }
430 .summary-modal-container {
431     .description-content {
432         > p {
433             margin: 0;
434         }
435     }
437     .location-content {
438         overflow-wrap: break-word;
439     }