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