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