MDL-25505 Tasks: Fix for scheduled task bug on the last day of the month.
[moodle.git] / theme / bootstrapbase / less / moodle / responsive.less
CommitLineData
8903b17b
BB
1/* responsive.less */
2
3// Should probably be moved to relevant .less files
4// after 4095 selector issue is solved
5
6@media (min-width: 980px) {
7 .dir-rtl .navbar .nav.pull-right,
8 .dir-rtl .navbar .logininfo {
9 float: left;
10 }
11 .dir-rtl .navbar .nav {
12 float: right;
13 & > li {
14 float: right;
15 }
16 }
bfb1c6d4
JF
17}
18
19@media (min-width: 980px) and (max-width: 1199px) {
31614004
DS
20 // Wider form labels.
21 .form-item .form-label,
22 .mform .fitem div.fitemtitle,
23 .userprofile dl.list dt,
24 .form-horizontal .control-label {
25 width: @horizontalComponentOffset980 - 20px;
26 }
27 .form-item .form-setting,
28 .form-item .form-description,
29 .mform .fitem .felement,
30 #page-mod-forum-search .c1,
31 .mform .fdescription.required,
32 .userprofile dl.list dd,
33 .form-horizontal .controls {
34 margin-left: @horizontalComponentOffset980;
35 }
8d223d71
NK
36 .dir-rtl {
37 .form-item .form-setting,
38 .form-item .form-description,
39 .mform .fitem .felement,
40 .mform .fdescription.required,
41 .userprofile dl.list dd,
42 .form-horizontal .controls {
43 margin-right: @horizontalComponentOffset980;
44 }
45 }
46 #page-mod-forum-search.dir-lrt .c1 {
47 margin-right: @horizontalComponentOffset980;
48 }
31614004
DS
49 .path-admin .buttons,
50 .form-buttons {
51 padding-left: @horizontalComponentOffset980;
52 }
8903b17b
BB
53}
54
d61c96b6
DW
55@media (max-width: 873px) {
56 .file-picker .fp-repo-area {
57 width: 100%;
58 height: auto;
59 max-height: 220px;
60 y-scroll: auto;
61 float: none;
62 border: 0px;
63 }
64 .file-picker .fp-repo-items {
65 width: 100%;
66 float: none;
67 }
68 .file-picker .fp-login-form .fp-login-input label {
69 text-align: left;
70 }
71 .dir-rtl .file-picker .fp-login-form .fp-login-input label {
72 text-align: right;
73 }
74 .file-picker .fp-content form td {
75 display: block;
76 width: 100%;
77 text-align: left;
78 }
79 .dir-rtl .file-picker .fp-content form td {
80 text-align: right;
81 }
82 .fp-content .mdl-right {
83 text-align: left;
84 }
85 .dir-rtl .fp-content .mdl-right {
86 text-align: right;
87 }
88
89 .fp-repo-items .fp-navbar {
90 border-top: 1px solid rgb(187, 187, 187);
91 }
2eab90fa
JF
92
93 .dir-rtl {
94 .userprofile dl.list dt,
95 .userprofile dl.list dd {
96 float: none;
97 text-align: right;
98 margin-right: 0;
99 }
100 }
101
88d366e5
JF
102 .fp-formset div {
103 height: auto;
104 }
d61c96b6
DW
105}
106
8903b17b
BB
107@media (min-width: 1200px) {
108 .loginbox.twocolumns .loginpanel {
109 margin-left: 0;
110 }
111 .loginbox.twocolumns .loginpanel,
112 .loginbox.twocolumns .signuppanel {
113 width: 48.717948717948715%;
114 *width: 48.664757228587014%;
115 }
bfb1c6d4
JF
116 // Wider form labels.
117 .form-item .form-label,
118 .mform .fitem div.fitemtitle,
119 .userprofile dl.list dt,
120 .form-horizontal .control-label {
121 width: @horizontalComponentOffset1200 - 20px;
122 }
123 .form-item .form-setting,
124 .form-item .form-description,
125 .mform .fitem .felement,
126 #page-mod-forum-search .c1,
127 .mform .fdescription.required,
128 .userprofile dl.list dd,
129 .form-horizontal .controls {
130 margin-left: @horizontalComponentOffset1200;
131 }
8d223d71
NK
132 .dir-rtl {
133 .form-item .form-setting,
134 .form-item .form-description,
135 .mform .fitem .felement,
136 .mform .fdescription.required,
137 .userprofile dl.list dd,
138 .form-horizontal .controls {
2eab90fa 139 margin-right: (@horizontalComponentOffset1200 - 100px);
8d223d71
NK
140 }
141 #page-mod-forum-search .c1 {
142 margin-right: @horizontalComponentOffset1200;
143 }
293a1894
NK
144 .form-item .form-label,
145 .mform .fitem div.fitemtitle,
146 .userprofile dl.list dt,
147 .form-horizontal .control-label {
2eab90fa 148 width: (@horizontalComponentOffset1200 - 120px);
293a1894
NK
149 }
150
8d223d71 151 }
bfb1c6d4
JF
152 .path-admin .buttons,
153 .form-buttons {
154 padding-left: @horizontalComponentOffset1200;
155 }
8d223d71
NK
156 .dir-rtl {
157 .path-admin .buttons,
158 .form-buttons {
159 padding-right: @horizontalComponentOffset1200;
160 }
161 }
bfb1c6d4 162
8903b17b
BB
163}
164
165@media (min-width: 980px) {
166 .loginbox.twocolumns .loginpanel {
167 margin-left: 0;
168 }
169 .loginbox.twocolumns .loginpanel,
170 .loginbox.twocolumns .signuppanel {
171 width: 48.617948717948715%;
172 *width: 48.664757228587014%;
173 }
174}
175
176@media (min-width: 768px) and (max-width: 979px) {
177 .loginbox.twocolumns .loginpanel {
178 margin-left: 0;
179 }
180 .loginbox.twocolumns .loginpanel,
181 .loginbox.twocolumns .signuppanel {
182 width: 48.61878453038674%;
183 *width: 48.56559304102504%;
184 }
185}
186
187@media (max-width: 767px) {
188 .loginbox.twocolumns .loginpanel,
189 .loginbox.twocolumns .signuppanel {
190 display: block;
191 float: none;
192 width: 100%;
193 margin-left: 0;
194 .box-sizing(border-box);
195 }
196 }
8903b17b
BB
197
198@media (max-width: 480px) {
9c2ec10b
DS
199 // make tabs act like nav-stacked
200 // (mostly) copied from bootstrap/navs.less
201 .nav-tabs > li {
8903b17b
BB
202 float: none;
203 }
9c2ec10b
DS
204 .nav-tabs > li > a {
205 margin-right: 0; // no need for the gap between nav items
206 }
207 .nav-tabs {
208 border-bottom: 0;
209 }
210 .nav-tabs > li > a {
8903b17b
BB
211 border: 1px solid #ddd;
212 .border-radius(0);
213 }
9c2ec10b
DS
214 .nav-tabs > .active > a,
215 .nav-tabs > .active > a:hover {
216 border: 1px solid #ddd;
217 }
218 .nav-tabs > li:first-child > a {
8903b17b
BB
219 .border-top-radius(4px);
220 }
9c2ec10b 221 .nav-tabs > li:last-child > a {
8903b17b
BB
222 .border-bottom-radius(4px);
223 }
9c2ec10b
DS
224 .nav-tabs > li > a:hover,
225 .nav-tabs > li > a:focus {
8903b17b
BB
226 border-color: #ddd;
227 z-index: 2;
228 }
8903b17b
BB
229 .fp-content-center {
230 display: block;
231 vertical-align: top;
232 }
8903b17b
BB
233 .course-content ul.topics li.section,
234 .course-content ul.topics li.section .content,
235 .course-content ul.weeks li.section .content,
236 .course-content ul.weeks li.section,
237 .course-content ul.section {
238 margin-right: 0;
239 margin-left: 0;
240 padding: 0;
241 }
242 .activityinstance {
243 display: block;
244 }
245 .editing .course-content .section .activity {
246 margin-bottom: 0.2em;
247 padding-bottom: 0.2em;
248 border-bottom: thin solid #eee;
249 }
250 .course-content .section .activity .commands {
8903b17b
BB
251 text-align: right;
252 }
4c512690
SH
253 /** Handles display of the activity chooser on small screens **/
254 .jsenabled .choosercontainer #chooseform .alloptions {
255 max-width: 100%;
8903b17b 256 }
4c512690
SH
257 .jsenabled .choosercontainer #chooseform .instruction,
258 .jsenabled .choosercontainer #chooseform .typesummary {
259 position:static;
8903b17b
BB
260 }
261 .que .info {
262 float: none;
263 width: auto;
264 }
265 .que .content {
266 margin: 0;
267 }
268 .path-mod-choice .horizontal .choices .option {
269 display: block;
270 }
271 .path-mod-forum .forumsearch #search {
272 width: 120px;
273 }
41d64830
JF
274 .path-mod-forum .forumheaderlist .picture {
275 display: none;
276 }
8903b17b
BB
277}
278
279// Stuart's 2,1,3 layout
280@media (min-width : 768px) {
281 .row-fluid .desktop-first-column {
282 margin-left: 0;
283 }
c72106b2
RW
284 #page-navbar .breadcrumb-button {
285 display: inline;
286 }
8903b17b
BB
287}
288@media (max-width : 767px) {
289 .row-fluid .desktop-first-column {
290 clear: right;
291 }
292}
293// Forms
294@media (max-width: 767px) {
295 // Remove the horizontal form styles
296 .form-item .form-label,
297 .mform .fitem div.fitemtitle {
298 // copied from .control-label {
299 float: none;
300 width: auto;
301 padding-top: 0;
302 text-align: left;
303 }
304 .form-item .form-label label{
305 display: inline-block;
306 margin-right: .5em;
307 }
308 .form-item .form-setting .form-checkbox {
309 margin-top: 0;
310 }
311 .form-label span.form-shortname {
312 display: inline-block;
313 }
314 .form-item .form-setting,
315 .mform .fitem .felement,
316 .path-backup .mform .fitem .felement,
317 .mform .fdescription.required,
318 .form-item .form-description {
319 margin-left: 0;
320 }
321 table#form td.submit,
322 .form-buttons,
323 #fitem_id_submitbutton,
324 .fp-content-center form + div,
325 #fgroup_id_buttonar,
326 .form-horizontal .form-actions,
327 .fitem_fsubmit .felement.fsubmit {
328 padding-left: 10px;
329 padding-right: 10px;
330 }
331 #helppopupbox {
332 width: auto !important;
333 left: 0 !important;
334 }
335}
336// Shrink calender when short on space in block
337@media (min-width : 768px) and (max-width: 979px) {
338 .block_calendar_month .content,
339 .block .minicalendar td {
340 padding-left: 0;
341 padding-right: 0;
342 }
343}
344
345@media (max-width: 979px) {
346 .nav-collapse {
347 height: 0;
348 .nav > li > a {
349 color: @grayDark;
350 }
351 .nav > li > a:hover,
352 .nav > li > a:focus,
353 .dropdown-menu a:hover,
354 .dropdown-menu a:focus,
355 .dropdown-submenu a:focus,
356 .dropdown-submenu a:hover,
357 .dropdown-submenu a:active,
358 .dropdown-menu > li > a:hover,
359 .dropdown-menu > li > a:focus,
360 {
361 background-image: none;
362 color: @grayDark;
363 }
364 }
365 .nav-collapse.active {
366 height: auto;
367 }
7e7e8fd3
AB
368 .path-mod-data .box > table > tbody > tr > td {
369 display: block;
370 }
9c53c70c
AB
371 .path-mod-forum .forumheaderlist {
372 thead .header {
373 font-weight: normal;
374 font-size: round(@fontSizeSmall);
375 }
376 .discussion {
377 .author, .replies, .lastpost {
378 font-size: round(@fontSizeSmall);
379 }
380 .replies .unread a {
381 padding: 0;
382 }
383 }
384 }
8903b17b
BB
385}
386
387@media (max-width: 768px) {
388// Resize, reflow file-picker on small devices
389 #filesskin .yui3-panel,
390 #filesskin .file-picker.fp-generallayout {
391 width: 100%;
392 left: 0;
393 }
394 .userprofile dl.list {
395 // copied from dl-horizontal in bootstrap/repsonsive.less
396 dt {
397 float: none;
398 clear: none;
399 width: auto;
400 text-align: left;
401 }
402 dd {
403 margin-left: 0;
404 }
405 }
47e00c34
RW
406 // Reset the alignment for required label to display inline on mobile devices
407 #page-mod-wiki-create .mform .fitem div.fitemtitle {
408 float: left;
409 }
410
8903b17b
BB
411 // GRID & CONTAINERS
412 // -----------------
413 // Remove width from containers
414 .container {
415 width: auto;
416 }
417 // Fluid rows
418 .row-fluid {
419 width: 100%;
420 }
421 .row-fluid .span8.pull-right,
422 .row-fluid .span9.pull-right {
423 float: none;
424 }
425 // Undo negative margin on rows and thumbnails
426 .row {
427 margin-left: 0;
428 }
429 // Make all grid-sized elements block level again
430 [class*="span"],
431 .row-fluid [class*="span"] {
432 float: none;
433 display: block;
434 width: 100%;
435 margin-left: 0;
436 .box-sizing(border-box);
437 }
338021b9
DS
438
439 // We need to specify a more specific selector to reset the width for
440 // cases when we have content in the side-pre blockregion but not in the
441 // side-post blockregion as there are more specific selectors in
442 // core.less which take precedence which break responsiveness.
443 .empty-region-side-post.used-region-side-pre {
444 #block-region-side-pre.span4,
445 #region-main.span8.span8 {
446 .fluid-span(12);
447 }
448 }
449
8903b17b
BB
450 .row-fluid .span12 {
451 width: 100%;
452 .box-sizing(border-box);
453 }
454 .row-fluid [class*="offset"]:first-child {
455 margin-left: 0;
456 }
457 div[role=main] {
f6606495 458 margin-bottom: 1em;
8903b17b 459 }
759e970f
AB
460 .coursebox {
461 .info {
462 .name {
463 a {
464 background-position: 0 13px;
465 }
466 }
467 }
468 }
469 .category-browse {
470 .coursebox {
471 .info {
472 .name {
473 a {
474 background-position: 0 13px;
475 }
476 }
477 }
478 }
479 }
8903b17b 480}
5dc361e1
SH
481
482// All widths between 1200px and 1600px
483@media (min-width: 1200px) and (max-width: 1600px) {
484 // CSS for the course management pages.
485 #course-category-listings.columns-3 {
486 background-color:transparent;
487 border:0;
488
489 #category-listing,
490 #course-listing {
491 .fluid-span(6);
492 margin-left: @fluidGridGutterWidth;
493 *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
494 &:first-child {
495 margin-left: 0;
496 }
497 }
498 #course-detail {
499 .fluid-span(12);
500 margin: 1em 0 0;
501 }
502 }
503
504}
505
506// All widths up to 1199px.
507@media (max-width: 1199px) {
508 // CSS for the course management pages.
509 #course-category-listings.columns-3 {
510 background-color:transparent;
511 border:0;
512 #category-listing,
513 #course-listing,
514 #course-detail {
515 .fluid-span(12);
516 margin: 0 0 1em 0;
517 }
518 }
35620f63
SH
519
520 #page-mod-forum-discuss .discussioncontrols {
521 text-align: right;
522 .discussioncontrol {
523 float: none;
524 width: auto;
525 display: inline-block;
526 margin: 0 3px 0.5em;
527 select,
528 input {
529 margin-bottom: 0;
530 }
531 &.movediscussion {
532 margin-right: 0;
533 padding-right: 0;
534 }
535 }
536 }
537
538 #page-mod-forum-discuss.dir-rtl .discussioncontrols {
539 text-align: left;
540 }
338021b9 541}
88d366e5
JF
542
543
544// File Picker.
545@media (max-width: 768px) {
546 .fp-forminset .control-group .controls {
547 margin-left: 0;
548 }
549 .dir-rtl .fp-formset .control-group {
550 label.control-label {
551 text-align: right;
552 float: none;
553 }
554 }
555 .dir-rtl .fp-forminset .control-group {
556 label.control-label {
557 text-align: right;
558 float: none;
559 }
560 .controls {
561 margin-right: 0;
562 }
563 }
564}