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