weekly release 4.0dev
[moodle.git] / theme / boost / scss / moodle / calendar.scss
CommitLineData
536f0460
DW
1/* calendar.less */
2
3// Calendar colour variables defined.
2a43ce57 4$calendarEventCategoryColor: #e0cbe0 !default; // Pale purple.
7ee4a287
DW
5$calendarEventCourseColor: #ffd3bd !default; // Pale red.
6$calendarEventGlobalColor: #d6f8cd !default; // Pale green.
7$calendarEventGroupColor: #fee7ae !default; // Pale yellow.
8$calendarEventUserColor: #dce7ec !default; // Pale blue.
d268c5ba 9$calendarEventOtherColor: #ced4da !default; // Pale gray.
536f0460 10
2a43ce57
JP
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.
18
19// This will be the colour of mini-calendar links, hide/show filter icons, edit/delete icon buttons.
20$calendarEventColor: #0d5ca1 !default;
21
536f0460 22// Calendar event background colours defined.
d0e56d84
AN
23.calendar_event_category {
24 background-color: $calendarEventCategoryColor;
2a43ce57
JP
25 .commands a {
26 color: $calendarEventColor;
27 }
d0e56d84 28}
536f0460
DW
29.calendar_event_course {
30 background-color: $calendarEventCourseColor;
2a43ce57
JP
31 .commands a {
32 color: $calendarEventColor;
33 }
536f0460 34}
f4143537 35
64ff737a 36.calendar_event_site {
536f0460 37 background-color: $calendarEventGlobalColor;
2a43ce57
JP
38 .commands a {
39 color: $calendarEventColor;
40 }
536f0460 41}
f4143537 42
536f0460
DW
43.calendar_event_group {
44 background-color: $calendarEventGroupColor;
2a43ce57
JP
45 .commands a {
46 color: $calendarEventColor;
47 }
536f0460 48}
f4143537 49
536f0460
DW
50.calendar_event_user {
51 background-color: $calendarEventUserColor;
2a43ce57
JP
52 .commands a {
53 color: $calendarEventColor;
54 }
536f0460
DW
55}
56
d268c5ba
MG
57.calendar_event_other {
58 background-color: $calendarEventOtherColor;
2a43ce57
JP
59 .commands a {
60 color: $calendarEventColor;
61 }
d268c5ba
MG
62}
63
536f0460
DW
64// Calendar restyling.
65.path-calendar {
66 .calendartable {
67 width: 100%;
3ec69c2e 68 table-layout: fixed;
f4143537
DP
69
70 th,
71 td {
536f0460
DW
72 width: 14%;
73 vertical-align: top;
74 text-align: center;
75 border: 0;
76 }
77 }
f4143537 78
536f0460
DW
79 .calendar-controls {
80 .previous,
81 .next,
82 .current {
83 display: block;
84 float: left;
85 width: 12%;
86 }
f4143537 87
536f0460
DW
88 .previous {
89 text-align: left;
aefb2950 90 border: 1px solid transparent;
536f0460 91 }
f4143537 92
536f0460
DW
93 .current {
94 text-align: center;
95 width: 76%;
96 }
f4143537 97
536f0460
DW
98 .next {
99 text-align: right;
aefb2950
RW
100 border: 1px solid transparent;
101 }
102
103 .drop-target {
104 box-sizing: border-box;
4394f9e3 105 border: 1px dashed $primary;
536f0460
DW
106 }
107 }
f4143537 108
536f0460
DW
109 .filters {
110 table {
111 border-collapse: separate;
112 border-spacing: 2px;
113 width: 100%;
114 }
115 }
f4143537 116
536f0460
DW
117 .maincalendar {
118 vertical-align: top;
119 padding: 0;
f4143537 120
536f0460
DW
121 .bottom {
122 text-align: center;
123 padding: 5px 0 0 0;
124 }
f4143537 125
536f0460
DW
126 .heightcontainer {
127 height: 100%;
128 position: relative;
129 }
f4143537 130
536f0460
DW
131 .calendarmonth {
132 width: 98%;
133 margin: 10px auto;
f4143537 134
536f0460
DW
135 ul {
136 margin: 0;
a7ed05e7 137 padding: 0;
f4143537 138
536f0460
DW
139 li {
140 list-style-type: none;
a7ed05e7
AN
141
142 > a {
143 @include text-truncate;
144 max-width: 100%;
145 display: inline-block;
a1b696f9
AN
146
147 &:hover {
148 text-decoration: $link-decoration;
149
150 .eventname {
151 text-decoration: $link-hover-decoration;
152 }
153 }
a7ed05e7
AN
154 }
155
156 .icon {
157 margin-left: 0.25em;
158 margin-right: 0.25em;
159 vertical-align: initial;
160 }
161
32be54d3
LB
162 .calendar-circle {
163 width: 12px;
164 height: 12px;
165 border-radius: 6px;
166 vertical-align: middle;
167 display: inline-block;
a7ed05e7 168
32be54d3
LB
169 &.calendar_event_category {
170 background-color: $calendarEventCategoryColor;
171 border: $calendarEventCategoryBorder;
172 }
173 &.calendar_event_course {
174 background-color: $calendarEventCourseColor;
175 border: $calendarEventCourseBorder;
176 }
a7ed05e7 177
32be54d3
LB
178 &.calendar_event_site {
179 background-color: $calendarEventGlobalColor;
180 border: $calendarEventGlobalBorder;
181 }
a7ed05e7 182
32be54d3
LB
183 &.calendar_event_group {
184 background-color: $calendarEventGroupColor;
185 border: $calendarEventGroupBorder;
186 }
d268c5ba 187
32be54d3
LB
188 &.calendar_event_user {
189 background-color: $calendarEventUserColor;
190 border: $calendarEventUserBorder;
191 }
192
193 &.calendar_event_other {
194 background-color: $calendarEventOtherColor;
195 border: $calendarEventOtherBorder;
a7ed05e7
AN
196 }
197 }
536f0460
DW
198 }
199 }
f4143537 200
536f0460
DW
201 td {
202 height: 5em;
203 }
f6e8cc83
RW
204
205 .clickable:hover {
206 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);
207 }
536f0460 208 }
f4143537 209
536f0460
DW
210 .calendar-controls {
211 .previous,
212 .next {
213 width: 30%;
214 }
f4143537 215
536f0460
DW
216 .current {
217 width: 39.95%;
218 }
219 }
f4143537 220
536f0460
DW
221 .controls {
222 width: 98%;
223 margin: 10px auto;
224 }
f4143537 225
d0e56d84 226 .calendar_event_category,
536f0460 227 .calendar_event_course,
64ff737a 228 .calendar_event_site,
536f0460
DW
229 .calendar_event_group,
230 .calendar_event_user {
f6e8cc83
RW
231 &:hover {
232 a {
233 color: $link-hover-color;
234 text-decoration: $link-hover-decoration;
235 }
236 }
536f0460 237 }
f4143537 238
d0e56d84
AN
239 .calendar_event_category {
240 border-color: $calendarEventCategoryColor;
241 }
a7ed05e7 242
536f0460
DW
243 .calendar_event_course {
244 border-color: $calendarEventCourseColor;
245 }
f4143537 246
64ff737a 247 .calendar_event_site {
536f0460
DW
248 border-color: $calendarEventGlobalColor;
249 }
f4143537 250
536f0460
DW
251 .calendar_event_group {
252 border-color: $calendarEventGroupColor;
253 }
f4143537 254
536f0460
DW
255 .calendar_event_user {
256 border-color: $calendarEventUserColor;
257 }
f4143537 258
d268c5ba
MG
259 .calendar_event_other {
260 border-color: $calendarEventOtherColor;
261 }
262
536f0460 263 .calendartable {
f4143537
DP
264 td,
265 li {
a7ed05e7 266 padding: 0 4px 4px 4px;
536f0460 267 }
f4143537 268
536f0460 269 li {
536f0460
DW
270 text-align: left;
271 }
272 }
f4143537 273
536f0460
DW
274 .header {
275 overflow: hidden;
f4143537 276
536f0460
DW
277 .buttons {
278 float: right;
279 }
280 }
f4143537 281
ef4e04ee
MH
282 .event {
283 .card-header img {
284 vertical-align: baseline;
285 }
286
287 .location {
288 word-break: break-all;
289 overflow-wrap: break-word;
290 }
536f0460 291 }
7ee4a287 292
536f0460
DW
293 }
294}
295
296// Calendar export.
297#page-calendar-export {
298 .indent {
299 padding-left: 20px;
300 }
301}
302
303// Block minicalendar.
304.block {
305 .minicalendar {
306 max-width: 280px;
307 margin: 0 auto;
308 width: 100%;
f4143537
DP
309
310 th,
311 td {
536f0460
DW
312 padding: 2px;
313 font-size: 0.8em;
314 text-align: center;
315 }
f4143537 316
536f0460
DW
317 td {
318 &.weekend {
6239d808 319 color: $text-muted;
536f0460 320 }
f4143537 321
536f0460
DW
322 a {
323 width: 100%;
324 height: 100%;
325 display: block;
2a43ce57 326 color: $calendarEventColor;
536f0460 327 }
f4143537 328
536f0460
DW
329 &.duration_global {
330 border-top: 1px solid $calendarEventGlobalColor;
331 border-bottom: 1px solid $calendarEventGlobalColor;
f4143537 332
536f0460
DW
333 &.duration_finish {
334 background-color: $calendarEventGlobalColor;
335 }
336 }
f4143537 337
d0e56d84
AN
338 &.duration_category {
339 border-top: 1px solid $calendarEventCategoryColor;
340 border-bottom: 1px solid $calendarEventCategoryColor;
341
342 &.duration_finish {
343 background-color: $calendarEventCategoryColor;
344 }
345 }
346
536f0460
DW
347 &.duration_course {
348 border-top: 1px solid $calendarEventCourseColor;
349 border-bottom: 1px solid $calendarEventCourseColor;
f4143537 350
536f0460
DW
351 &.duration_finish {
352 background-color: $calendarEventCourseColor;
353 }
354 }
f4143537 355
536f0460
DW
356 &.duration_group {
357 border-top: 1px solid $calendarEventGroupColor;
358 border-bottom: 1px solid $calendarEventGroupColor;
f4143537 359
536f0460
DW
360 &.duration_finish {
361 background-color: $calendarEventGroupColor;
362 }
363 }
f4143537 364
536f0460
DW
365 &.duration_user {
366 border-top: 1px solid $calendarEventUserColor;
367 border-bottom: 1px solid $calendarEventUserColor;
f4143537 368
536f0460
DW
369 &.duration_finish {
370 background-color: $calendarEventUserColor;
371 }
372 }
d268c5ba
MG
373
374 &.duration_other {
375 border-top: 1px solid $calendarEventOtherColor;
376 border-bottom: 1px solid $calendarEventOtherColor;
377
378 &.duration_finish {
379 background-color: $calendarEventOtherColor;
380 }
381 }
536f0460 382 }
f4143537 383
536f0460
DW
384 caption {
385 font-size: inherit;
386 font-weight: inherit;
387 line-height: inherit;
388 text-align: center;
389 }
390 }
f4143537 391
536f0460
DW
392 .calendar-controls {
393 .previous,
394 .current,
395 .next {
396 display: block;
397 float: left;
398 }
f4143537 399
536f0460
DW
400 .previous {
401 text-align: left;
402 width: 12%;
403 }
f4143537 404
536f0460
DW
405 .current {
406 text-align: center;
407 width: 76%;
408 }
f4143537 409
536f0460
DW
410 .next {
411 text-align: right;
412 width: 12%;
413 }
414 }
f4143537 415
536f0460
DW
416 .calendar_filters {
417 ul {
418 list-style: none;
419 margin: 0;
13623ce8 420 padding: 0;
536f0460 421 }
f4143537 422
536f0460
DW
423 li {
424 margin-bottom: 0.2em;
f4143537 425
536f0460 426 span {
2a43ce57
JP
427 &.calendar_event_category {
428 i {
429 color: $calendarEventColor;
430 }
431 }
432 &.calendar_event_course {
433 i {
434 color: $calendarEventColor;
435 }
436 }
437 &.calendar_event_site {
438 i {
439 color: $calendarEventColor;
440 }
441 }
442 &.calendar_event_group {
443 i {
444 color: $calendarEventColor;
445 }
446 }
447 &.calendar_event_user {
448 i {
449 color: $calendarEventColor;
450 }
451 }
452 &.calendar_event_other {
453 i {
454 color: $calendarEventColor;
455 }
456 }
536f0460
DW
457 img {
458 padding: 0 0.2em;
13623ce8 459 margin: 0;
536f0460
DW
460 }
461 }
a7ed05e7
AN
462 .icon {
463 vertical-align: initial;
5726577f 464 margin: 0 0.1rem 0 0.4rem;
a7ed05e7 465 }
a1b696f9
AN
466
467 > a {
468 &:hover {
469 text-decoration: $link-decoration;
470
471 .eventname {
472 text-decoration: $link-hover-decoration;
473 }
474 }
475 }
536f0460
DW
476 }
477 }
f4143537 478
536f0460
DW
479 .content {
480 h3 {
481 &.eventskey {
482 margin-top: 0.5em;
483 }
484 }
485 }
486}
487
4125ce04
MG
488/* Display month name above the calendar */
489table.calendartable caption {
490 caption-side: top;
491}
492
536f0460
DW
493@media (min-width: 768px) {
494 #page-calender-view {
495 .container-fluid {
496 min-width: 1024px;
497 }
498 }
499}
c8b6e9ab
AN
500
501.calendarwrapper {
502 position: relative;
503}
504
505.day-popover-content {
506 &:empty + .day-popover-alternate {
507 display: block;
508 }
509}
f0fc8a19 510
a67bbe50
SL
511.location-content {
512 overflow-wrap: break-word;
513}
ef4e04ee 514
a67bbe50 515.description-content {
b919ea92 516 overflow-wrap: break-word;
a67bbe50
SL
517 > p {
518 margin: 0;
ef4e04ee 519 }
f0fc8a19 520}
fed1cc73
SL
521
522.cal_courses_flt {
aca735cd 523 color: $gray-600;
fed1cc73 524}