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