weekly release 2.8dev
[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 {
162 .event {
163 width: 100%;
164 border-spacing: 0;
165 border-collapse: separate;
166 position: relative;
167 padding: 19px;
168 margin-bottom: 20px;
169 background-color: lighten(@wellBackground, 3%);
170 border: 1px solid darken(@wellBackground, 7%);
171 .border-radius(@baseBorderRadius);
172 .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
173 .picture {
174 vertical-align: text-top;
175 }
176 .topic {
177 .name {
178 font-size: @fontSizeLarge;
179 font-weight: 200;
180 line-height: 24px;
181 float: left;
182 }
183 .name,
184 .course {
185 margin-bottom: 5px;
186 }
187 .date {
188 float: right;
189 }
190 }
191 .course,
192 .subscription {
193 float: left;
194 clear: left;
195 }
196 .side {
197 width: 22px;
198 }
199 .description {
200 background-color: @white;
201 padding: 5px;
202 .commands {
203 position: absolute;
204 right: 0;
205 top: 0;
206 margin: 3px;
207 }
208 }
209 .commands {
210 a {
211 margin: 0 3px;
212 }
213 }
214 }
215 }
216 }
8903b17b 217}
afd87a0b
ME
218
219// RTL overrides for main calendar.
220.dir-rtl.path-calendar {
221 .cal_courses_flt {
712e5f22 222 float: right;
afd87a0b
ME
223 label {
224 margin-left: .45em;
225 margin-right: 0;
226 }
227 }
228 .maincalendar {
229 .calendar_event_course,
230 .calendar_event_global,
231 .calendar_event_group,
232 .calendar_event_user {
233 border-left-width: 1px;
234 border-right-width: 12px;
235 }
236 .calendar-controls {
237 .next {
238 text-align: left;
239 }
240 .previous {
241 text-align: right;
242 }
243 }
244 .calendartable {
245 td, li {
246 text-align: right;
247 }
248 li {
249 padding-right: 10px;
250 padding-left: 5px;
251 }
252 }
253 .header {
254 .buttons {
255 float: left;
256 }
257 }
258 .eventlist {
259 .event {
260 .topic {
261 .name {
262 float: right;
263 }
264 .date {
265 float: left;
266 }
267 }
268 .description {
269 .commands {
270 right: inherit;
271 left: 0;
272 }
273 }
274 .course,
275 .subscription {
276 float: right;
277 clear: right;
278 }
279 }
280 }
281 }
8903b17b 282}
afd87a0b
ME
283// Calendar export.
284#page-calendar-export {
285 .indent {
286 padding-left: 20px;
287 }
8903b17b 288}
afd87a0b
ME
289
290// Block minicalendar.
291.block {
292 .minicalendar {
293 max-width: 280px;
294 margin: 0 auto;
295 width: 100%;
296 th, td {
297 padding: 2px;
298 font-size: 0.8em;
299 text-align: center;
300 }
301 td {
302 &.weekend {
53bbd369 303 .muted;
afd87a0b
ME
304 }
305 }
306 }
307 .calendar-event-panel {
308 background-color: @grayLighter;
309 border: 1px solid @grayLighter;
310 .yui3-overlay-content {
311 padding: 19px;
312 background-color: lighten(@wellBackground, 3%);
313 border: 1px solid darken(@wellBackground, 7%);
314 .border-radius(@baseBorderRadius);
315 .box-shadow(inset 0 1px 1px rgba(0 ,0 ,0 , .05));
316 h2 {
317 &.eventtitle {
afd87a0b
ME
318 line-height: 1.2;
319 font-size: 18px;
320 }
321 }
322 .eventcontent {
323 img {
324 padding-right: 5px;
325 }
326 }
327 }
328 }
329 .calendar-controls {
330 .previous,
331 .current,
332 .next {
333 display: block;
334 float: left;
335 }
336 .previous {
337 text-align: left;
338 width: 12%;
339 }
340 .current {
341 text-align: center;
342 width: 76%;
343 }
344 .next {
345 text-align: right;
346 width: 12%;
347 }
348 }
349 .calendar_filters {
350 ul {
351 list-style: none;
352 margin: 0;
353 }
354 li {
355 margin-bottom: 0.2em;
356 span {
357 img {
358 padding: 0 0.2em;
359 }
360 }
361 }
362 .eventname {
363 padding-left: 0.2em;
364 }
365 }
366 .content {
367 h3 {
368 &.eventskey {
369 margin-top: 0.5em;
370 }
371 }
372 }
8903b17b 373}
afd87a0b
ME
374
375// RTL overrides for block minicalendar.
376.dir-rtl {
377 .block {
378 .calendar_filters {
379 .eventname {
380 padding-right: 0.2em;
381 padding-left: 0;
382 }
383 }
384 .calendar-event-panel {
385 .yui3-overlay-content {
386 .eventcontent {
387 img {
388 padding-right: 0;
389 padding-left: 5px;
390 }
391 }
392 }
393 }
394 }
8903b17b 395}
afd87a0b 396
310845b9 397@media (min-width: 768px) {
afd87a0b
ME
398 #page-calender-view {
399 .container-fluid {
400 min-width: 1024px;
401 }
3e9406bc 402 }
310845b9 403}