Merge branch 'MDL-60655-master' of git://github.com/junpataleta/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;
99         }
101         .calendarmonth {
102             ul {
103                 margin: 0;
104                 padding: 0;
106                 li {
107                     list-style-type: none;
109                     > a {
110                         @include text-truncate;
111                         max-width: 100%;
112                         display: inline-block;
113                     }
115                     .icon {
116                         margin-left: 0.25em;
117                         margin-right: 0.25em;
118                         vertical-align: initial;
119                     }
121                     .badge {
122                         &.badge-circle {
123                             width: 12px;
124                             height: 12px;
125                             border-radius: 6px;
126                             vertical-align: middle;
128                             &.calendar_event_category {
129                                 background-color: $calendarEventCategoryColor;
130                             }
131                             &.calendar_event_course {
132                                 background-color: $calendarEventCourseColor;
133                             }
135                             &.calendar_event_site {
136                                 background-color: $calendarEventGlobalColor;
137                             }
139                             &.calendar_event_group {
140                                 background-color: $calendarEventGroupColor;
141                             }
143                             &.calendar_event_user {
144                                 background-color: $calendarEventUserColor;
145                             }
146                         }
147                     }
148                 }
149             }
151             td {
152                 height: 5em;
153             }
155             .clickable:hover {
156                 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);
157             }
158         }
160         .calendar-controls {
161             .previous,
162             .next {
163                 width: 30%;
164             }
166             .current {
167                 width: 39.95%;
168             }
169         }
171         .controls {
172             width: 98%;
173             margin: 10px auto;
174         }
176         .calendar_event_category,
177         .calendar_event_course,
178         .calendar_event_site,
179         .calendar_event_group,
180         .calendar_event_user {
181             &:hover {
182                 a {
183                     color: $link-hover-color;
184                     text-decoration: $link-hover-decoration;
185                 }
186             }
187         }
189         .calendar_event_category {
190             border-color: $calendarEventCategoryColor;
191         }
193         .calendar_event_course {
194             border-color: $calendarEventCourseColor;
195         }
197         .calendar_event_site {
198             border-color: $calendarEventGlobalColor;
199         }
201         .calendar_event_group {
202             border-color: $calendarEventGroupColor;
203         }
205         .calendar_event_user {
206             border-color: $calendarEventUserColor;
207         }
209         .calendar-controls {
210             .current {
211                 @extend .h2;
212             }
213         }
215         .calendartable {
216             td,
217             li {
218                 padding: 0 4px 4px 4px;
219             }
221             li {
222                 text-align: left;
223             }
224         }
226         .header {
227             overflow: hidden;
229             .buttons {
230                 float: right;
231             }
232         }
234         .event .card-header img {
235             vertical-align: baseline;
236         }
238     }
241 // Calendar export.
242 #page-calendar-export {
243     .indent {
244         padding-left: 20px;
245     }
248 // Block minicalendar.
249 .block {
250     .minicalendar {
251         max-width: 280px;
252         margin: 0 auto;
253         width: 100%;
255         th,
256         td {
257             padding: 2px;
258             font-size: 0.8em;
259             text-align: center;
260         }
262         td {
263             &.weekend {
264                 @extend .text-muted;
265             }
267             a {
268                 width: 100%;
269                 height: 100%;
270                 display: block;
271             }
273             &.duration_global {
274                 border-top: 1px solid $calendarEventGlobalColor;
275                 border-bottom: 1px solid $calendarEventGlobalColor;
277                 &.duration_finish {
278                     background-color: $calendarEventGlobalColor;
279                 }
280             }
282             &.duration_category {
283                 border-top: 1px solid $calendarEventCategoryColor;
284                 border-bottom: 1px solid $calendarEventCategoryColor;
286                 &.duration_finish {
287                     background-color: $calendarEventCategoryColor;
288                 }
289             }
291             &.duration_course {
292                 border-top: 1px solid $calendarEventCourseColor;
293                 border-bottom: 1px solid $calendarEventCourseColor;
295                 &.duration_finish {
296                     background-color: $calendarEventCourseColor;
297                 }
298             }
300             &.duration_group {
301                 border-top: 1px solid $calendarEventGroupColor;
302                 border-bottom: 1px solid $calendarEventGroupColor;
304                 &.duration_finish {
305                     background-color: $calendarEventGroupColor;
306                 }
307             }
309             &.duration_user {
310                 border-top: 1px solid $calendarEventUserColor;
311                 border-bottom: 1px solid $calendarEventUserColor;
313                 &.duration_finish {
314                     background-color: $calendarEventUserColor;
315                 }
316             }
317         }
319         caption {
320             font-size: inherit;
321             font-weight: inherit;
322             line-height: inherit;
323             text-align: center;
324         }
325     }
327     .calendar-controls {
328         .previous,
329         .current,
330         .next {
331             display: block;
332             float: left;
333         }
335         .previous {
336             text-align: left;
337             width: 12%;
338         }
340         .current {
341             text-align: center;
342             width: 76%;
343         }
345         .next {
346             text-align: right;
347             width: 12%;
348         }
349     }
351     .calendar_filters {
352         ul {
353             list-style: none;
354             margin: 0;
355             padding: 0;
356         }
358         li {
359             margin-bottom: 0.2em;
361             span {
362                 img {
363                     padding: 0 0.2em;
364                     margin: 0;
365                 }
366             }
367             .icon {
368                 vertical-align: initial;
369             }
370         }
371     }
373     .content {
374         h3 {
375             &.eventskey {
376                 margin-top: 0.5em;
377             }
378         }
379     }
382 /* Display month name above the calendar */
383 table.calendartable caption {
384     caption-side: top;
387 @media (min-width: 768px) {
388     #page-calender-view {
389         .container-fluid {
390             min-width: 1024px;
391         }
392     }
395 .calendarwrapper {
396     position: relative;
399 .day-popover-content {
400     &:empty + .day-popover-alternate {
401         display: block;
402     }