Merge branch 'MDL-60576-master' of git://github.com/andrewnicols/moodle
[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%;
35         th,
36         td {
37             width: 14%;
38             vertical-align: top;
39             text-align: center;
40             border: 0;
41         }
42     }
44     .calendar-controls {
45         .previous,
46         .next,
47         .current {
48             display: block;
49             float: left;
50             width: 12%;
51         }
53         .previous {
54             text-align: left;
55             border: 1px solid transparent;
56         }
58         .current {
59             text-align: center;
60             width: 76%;
61         }
63         .next {
64             text-align: right;
65             border: 1px solid transparent;
66         }
68         .drop-target {
69             box-sizing: border-box;
70             border: 1px dashed $brand-primary;
71         }
72     }
74     .filters {
75         table {
76             border-collapse: separate;
77             border-spacing: 2px;
78             width: 100%;
79         }
80     }
82     .maincalendar {
83         vertical-align: top;
84         padding: 0;
86         .bottom {
87             text-align: center;
88             padding: 5px 0 0 0;
89         }
91         .heightcontainer {
92             height: 100%;
93             position: relative;
94         }
96         .calendarmonth {
97             width: 98%;
98             margin: 10px auto;
100             ul {
101                 margin: 0;
102                 padding: 0;
104                 li {
105                     list-style-type: none;
107                     > a {
108                         @include text-truncate;
109                         max-width: 100%;
110                         display: inline-block;
112                         &:hover {
113                             text-decoration: $link-decoration;
115                             .eventname {
116                                 text-decoration: $link-hover-decoration;
117                             }
118                         }
119                     }
121                     .icon {
122                         margin-left: 0.25em;
123                         margin-right: 0.25em;
124                         vertical-align: initial;
125                     }
127                     .badge {
128                         &.badge-circle {
129                             width: 12px;
130                             height: 12px;
131                             border-radius: 6px;
132                             vertical-align: middle;
134                             &.calendar_event_category {
135                                 background-color: $calendarEventCategoryColor;
136                             }
137                             &.calendar_event_course {
138                                 background-color: $calendarEventCourseColor;
139                             }
141                             &.calendar_event_site {
142                                 background-color: $calendarEventGlobalColor;
143                             }
145                             &.calendar_event_group {
146                                 background-color: $calendarEventGroupColor;
147                             }
149                             &.calendar_event_user {
150                                 background-color: $calendarEventUserColor;
151                             }
152                         }
153                     }
154                 }
155             }
157             td {
158                 height: 5em;
159             }
161             .clickable:hover {
162                 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);
163             }
164         }
166         .calendar-controls {
167             .previous,
168             .next {
169                 width: 30%;
170             }
172             .current {
173                 width: 39.95%;
174             }
175         }
177         .controls {
178             width: 98%;
179             margin: 10px auto;
180         }
182         .calendar_event_category,
183         .calendar_event_course,
184         .calendar_event_site,
185         .calendar_event_group,
186         .calendar_event_user {
187             &:hover {
188                 a {
189                     color: $link-hover-color;
190                     text-decoration: $link-hover-decoration;
191                 }
192             }
193         }
195         .calendar_event_category {
196             border-color: $calendarEventCategoryColor;
197         }
199         .calendar_event_course {
200             border-color: $calendarEventCourseColor;
201         }
203         .calendar_event_site {
204             border-color: $calendarEventGlobalColor;
205         }
207         .calendar_event_group {
208             border-color: $calendarEventGroupColor;
209         }
211         .calendar_event_user {
212             border-color: $calendarEventUserColor;
213         }
215         .calendar-controls {
216             .current {
217                 @extend .h2;
218             }
219         }
221         .calendartable {
222             td,
223             li {
224                 padding: 0 4px 4px 4px;
225             }
227             li {
228                 text-align: left;
229             }
230         }
232         .header {
233             overflow: hidden;
235             .buttons {
236                 float: right;
237             }
238         }
240         .event .card-header img {
241             vertical-align: baseline;
242         }
244     }
247 // Calendar export.
248 #page-calendar-export {
249     .indent {
250         padding-left: 20px;
251     }
254 // Block minicalendar.
255 .block {
256     .minicalendar {
257         max-width: 280px;
258         margin: 0 auto;
259         width: 100%;
261         th,
262         td {
263             padding: 2px;
264             font-size: 0.8em;
265             text-align: center;
266         }
268         td {
269             &.weekend {
270                 @extend .text-muted;
271             }
273             a {
274                 width: 100%;
275                 height: 100%;
276                 display: block;
277             }
279             &.duration_global {
280                 border-top: 1px solid $calendarEventGlobalColor;
281                 border-bottom: 1px solid $calendarEventGlobalColor;
283                 &.duration_finish {
284                     background-color: $calendarEventGlobalColor;
285                 }
286             }
288             &.duration_category {
289                 border-top: 1px solid $calendarEventCategoryColor;
290                 border-bottom: 1px solid $calendarEventCategoryColor;
292                 &.duration_finish {
293                     background-color: $calendarEventCategoryColor;
294                 }
295             }
297             &.duration_course {
298                 border-top: 1px solid $calendarEventCourseColor;
299                 border-bottom: 1px solid $calendarEventCourseColor;
301                 &.duration_finish {
302                     background-color: $calendarEventCourseColor;
303                 }
304             }
306             &.duration_group {
307                 border-top: 1px solid $calendarEventGroupColor;
308                 border-bottom: 1px solid $calendarEventGroupColor;
310                 &.duration_finish {
311                     background-color: $calendarEventGroupColor;
312                 }
313             }
315             &.duration_user {
316                 border-top: 1px solid $calendarEventUserColor;
317                 border-bottom: 1px solid $calendarEventUserColor;
319                 &.duration_finish {
320                     background-color: $calendarEventUserColor;
321                 }
322             }
323         }
325         caption {
326             font-size: inherit;
327             font-weight: inherit;
328             line-height: inherit;
329             text-align: center;
330         }
331     }
333     .calendar-controls {
334         .previous,
335         .current,
336         .next {
337             display: block;
338             float: left;
339         }
341         .previous {
342             text-align: left;
343             width: 12%;
344         }
346         .current {
347             text-align: center;
348             width: 76%;
349         }
351         .next {
352             text-align: right;
353             width: 12%;
354         }
355     }
357     .calendar_filters {
358         ul {
359             list-style: none;
360             margin: 0;
361             padding: 0;
362         }
364         li {
365             margin-bottom: 0.2em;
367             span {
368                 img {
369                     padding: 0 0.2em;
370                     margin: 0;
371                 }
372             }
373             .icon {
374                 vertical-align: initial;
375             }
377             > a {
378                 &:hover {
379                     text-decoration: $link-decoration;
381                     .eventname {
382                         text-decoration: $link-hover-decoration;
383                     }
384                 }
385             }
386         }
387     }
389     .content {
390         h3 {
391             &.eventskey {
392                 margin-top: 0.5em;
393             }
394         }
395     }
398 /* Display month name above the calendar */
399 table.calendartable caption {
400     caption-side: top;
403 @media (min-width: 768px) {
404     #page-calender-view {
405         .container-fluid {
406             min-width: 1024px;
407         }
408     }
411 .calendarwrapper {
412     position: relative;
415 .day-popover-content {
416     &:empty + .day-popover-alternate {
417         display: block;
418     }