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