MDL-37624 calendar: Added location support
[moodle.git] / theme / bootstrapbase / less / moodle / calendar.less
1 /* calendar.less */
3 // Calendar colour variables defined.
4 @calendarEventCategoryColor: #d8bfd8; // Pale purple.
5 @calendarEventCourseColor: #ffd3bd; // Pale red.
6 @calendarEventGlobalColor: #d6f8cd; // Pale green.
7 @calendarEventGroupColor:  #fee7ae; // Pale yellow.
8 @calendarEventUserColor:   #dce7ec; // 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 }
17 .calendar_event_site {
18     background-color: @calendarEventGlobalColor;
19 }
20 .calendar_event_group {
21     background-color: @calendarEventGroupColor;
22 }
23 .calendar_event_user {
24     background-color: @calendarEventUserColor;
25 }
27 // Calendar restyling.
28 .path-calendar {
29     .calendartable {
30         width: 100%;
31         table-layout: fixed;
32         th,
33         td {
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;
50             border: 1px solid transparent;
51             box-sizing: border-box;
52         }
53         .current {
54             text-align: center;
55             width: 76%;
56         }
57         .next {
58             text-align: right;
59             border: 1px solid transparent;
60             box-sizing: border-box;
61         }
62         .drop-target {
63             box-sizing: border-box;
64             border: 1px dashed @blue;
65         }
66     }
67     .filters {
68         table {
69             border-collapse: separate;
70             border-spacing: 2px;
71             width: 100%;
72         }
73     }
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;
89             ul {
90                 margin: 0;
91                 padding: 0;
92                 li {
93                     list-style-type: none;
95                     > a {
96                         .text-truncate;
97                         max-width: 100%;
98                         display: inline-block;
100                         &:hover {
101                             text-decoration: none;
103                             .eventname {
104                                 text-decoration: underline;
105                             }
106                         }
107                     }
109                     .icon {
110                         margin-left: 0.25em;
111                         margin-right: 0.25em;
112                         padding: 0;
113                         vertical-align: initial;
114                     }
116                     .badge {
117                         &.badge-circle {
118                             width: 12px;
119                             height: 12px;
120                             padding: 0;
121                             border-radius: 6px;
122                             vertical-align: middle;
124                             &.calendar_event_category {
125                                 background-color: @calendarEventCategoryColor;
126                             }
128                             &.calendar_event_course {
129                                 background-color: @calendarEventCourseColor;
130                             }
132                             &.calendar_event_site {
133                                 background-color: @calendarEventGlobalColor;
134                             }
136                             &.calendar_event_group {
137                                 background-color: @calendarEventGroupColor;
138                             }
140                             &.calendar_event_user {
141                                 background-color: @calendarEventUserColor;
142                             }
143                         }
144                     }
145                 }
146             }
147             td {
148                 height: 5em;
149             }
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             }
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         }
168         .calendar_event_category,
169         .calendar_event_course,
170         .calendar_event_site,
171         .calendar_event_group,
172         .calendar_event_user {
173             &:hover {
174                 a {
175                     color: @linkColorHover;
176                     text-decoration: underline;
177                 }
178             }
179         }
180         .calendar_event_category {
181             border-color: @calendarEventCategoryColor;
182         }
183         .calendar_event_course {
184             border-color: @calendarEventCourseColor;
185         }
186         .calendar_event_site {
187             border-color: @calendarEventGlobalColor;
188         }
189         .calendar_event_group {
190             border-color: @calendarEventGroupColor;
191         }
192         .calendar_event_user {
193             border-color: @calendarEventUserColor;
194         }
195         .calendar-controls {
196             .current {
197                 font-family: @headingsFontFamily;
198                 font-weight: @headingsFontWeight;
199                 color: @headingsColor;
200                 font-size: 25px;
201                 line-height: 1.2;
202             }
203         }
204         .calendartable {
205             td,
206             li {
207                 padding: 0 4px 4px 4px;
208             }
209             li {
210                 text-align: left;
211             }
212         }
213         .header {
214             overflow: hidden;
215             .buttons {
216                 float: right;
217             }
218         }
219         .eventlist {
220             margin: 0;
222             .event {
223                 border-spacing: 0;
224                 border-collapse: separate;
225                 position: relative;
226                 margin-bottom: 20px;
227                 list-style-type: none;
229                 > img {
230                     padding-top: 3px;
231                     float: left;
232                 }
233                 .name {
234                     font-size: @fontSizeLarge;
235                     font-weight: 200;
236                     line-height: 24px;
237                     float: left;
238                     margin: 0;
239                     margin-right: 0.5rem;
240                 }
241                 .name,
242                 .action {
243                     margin-bottom: 5px;
244                 }
245                 .date {
246                     float: right;
247                 }
248                 .subscription,
249                 .action {
250                     float: left;
251                     clear: left;
252                 }
253                 .side {
254                     width: 22px;
255                 }
256                 .location {
257                     clear: both;
258                     word-break: break-all;
259                     overflow-wrap: break-word;
260                 }
261                 .description {
262                     background-color: @white;
263                     clear: both;
264                 }
265                 .commands {
266                     a {
267                         margin: 0 3px;
268                     }
269                 }
270             }
271         }
272     }
275 // Calendar export.
276 #page-calendar-export {
277     .indent {
278         padding-left: 20px;
279     }
282 // Block minicalendar.
283 .block {
284     .minicalendar {
285         max-width: 280px;
286         margin: 0 auto;
287         width: 100%;
288         th,
289         td {
290             padding: 2px;
291             font-size: 0.8em;
292             text-align: center;
293         }
294         td {
295             &.weekend {
296                 .muted;
297             }
298             a {
299                 width: 100%;
300                 height: 100%;
301                 display: block;
302             }
303             &.duration_global {
304                 border-top: 1px solid @calendarEventGlobalColor;
305                 border-bottom: 1px solid @calendarEventGlobalColor;
306                 &.duration_finish {
307                     background-color: @calendarEventGlobalColor;
308                 }
309             }
310             &.duration_category {
311                 border-top: 1px solid @calendarEventCategoryColor;
312                 border-bottom: 1px solid @calendarEventCategoryColor;
313                 &.duration_finish {
314                     background-color: @calendarEventCategoryColor;
315                 }
316             }
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             }
338         }
339         caption {
340             font-size: inherit;
341             font-weight: inherit;
342             line-height: inherit;
343             text-align: center;
344         }
345     }
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 {
375                     margin: 0 0.25em;
376                 }
377                 .icon {
378                     padding: 0 0.2em;
379                 }
380             }
381             .icon {
382                 padding: 0;
383                 margin-left: 0.25em;
384             }
386             > a {
387                 &:hover {
388                     text-decoration: none;
390                     .eventname {
391                         text-decoration: underline;
392                     }
393                 }
394             }
395         }
396     }
397     .content {
398         h3 {
399             &.eventskey {
400                 margin-top: 0.5em;
401             }
402         }
403     }
406 @media (min-width: 768px) {
407     #page-calender-view {
408         .container-fluid {
409             min-width: 1024px;
410         }
411     }
414 .calendarwrapper {
415     position: relative;
418 .summary-modal-container {
419     .description-content {
420         > p {
421             margin: 0;
422         }
423     }
425     .location-content {
426         overflow-wrap: break-word;
427     }