a201eccc6aaf47bea716935ca45d2f66431da7cd
[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                 .description {
257                     background-color: @white;
258                     clear: both;
259                 }
260                 .commands {
261                     a {
262                         margin: 0 3px;
263                     }
264                 }
265             }
266         }
267     }
270 // Calendar export.
271 #page-calendar-export {
272     .indent {
273         padding-left: 20px;
274     }
277 // Block minicalendar.
278 .block {
279     .minicalendar {
280         max-width: 280px;
281         margin: 0 auto;
282         width: 100%;
283         th,
284         td {
285             padding: 2px;
286             font-size: 0.8em;
287             text-align: center;
288         }
289         td {
290             &.weekend {
291                 .muted;
292             }
293             a {
294                 width: 100%;
295                 height: 100%;
296                 display: block;
297             }
298             &.duration_global {
299                 border-top: 1px solid @calendarEventGlobalColor;
300                 border-bottom: 1px solid @calendarEventGlobalColor;
301                 &.duration_finish {
302                     background-color: @calendarEventGlobalColor;
303                 }
304             }
305             &.duration_category {
306                 border-top: 1px solid @calendarEventCategoryColor;
307                 border-bottom: 1px solid @calendarEventCategoryColor;
308                 &.duration_finish {
309                     background-color: @calendarEventCategoryColor;
310                 }
311             }
312             &.duration_course {
313                 border-top: 1px solid @calendarEventCourseColor;
314                 border-bottom: 1px solid @calendarEventCourseColor;
315                 &.duration_finish {
316                     background-color: @calendarEventCourseColor;
317                 }
318             }
319             &.duration_group {
320                 border-top: 1px solid @calendarEventGroupColor;
321                 border-bottom: 1px solid @calendarEventGroupColor;
322                 &.duration_finish {
323                     background-color: @calendarEventGroupColor;
324                 }
325             }
326             &.duration_user {
327                 border-top: 1px solid @calendarEventUserColor;
328                 border-bottom: 1px solid @calendarEventUserColor;
329                 &.duration_finish {
330                     background-color: @calendarEventUserColor;
331                 }
332             }
333         }
334         caption {
335             font-size: inherit;
336             font-weight: inherit;
337             line-height: inherit;
338             text-align: center;
339         }
340     }
341     .calendar-controls {
342         .previous,
343         .current,
344         .next {
345             display: block;
346             float: left;
347         }
348         .previous {
349             text-align: left;
350             width: 12%;
351         }
352         .current {
353             text-align: center;
354             width: 76%;
355         }
356         .next {
357             text-align: right;
358             width: 12%;
359         }
360     }
361     .calendar_filters {
362         ul {
363             list-style: none;
364             margin: 0;
365         }
366         li {
367             margin-bottom: 0.2em;
368             span {
369                 img {
370                     margin: 0 0.25em;
371                 }
372                 .icon {
373                     padding: 0 0.2em;
374                 }
375             }
376             .icon {
377                 padding: 0;
378                 margin-left: 0.25em;
379             }
381             > a {
382                 &:hover {
383                     text-decoration: none;
385                     .eventname {
386                         text-decoration: underline;
387                     }
388                 }
389             }
390         }
391     }
392     .content {
393         h3 {
394             &.eventskey {
395                 margin-top: 0.5em;
396             }
397         }
398     }
401 @media (min-width: 768px) {
402     #page-calender-view {
403         .container-fluid {
404             min-width: 1024px;
405         }
406     }
409 .calendarwrapper {
410     position: relative;
413 .summary-modal-container {
414     .description-content {
415         > p {
416             margin: 0;
417         }
418     }