weekly release 3.0dev
[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
48296457 55@media (max-width: 767px) {
d61c96b6
DW
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;
48296457 67 margin-left: 0;
d61c96b6
DW
68 }
69 .file-picker .fp-login-form .fp-login-input label {
70 text-align: left;
71 }
72 .dir-rtl .file-picker .fp-login-form .fp-login-input label {
73 text-align: right;
74 }
75 .file-picker .fp-content form td {
76 display: block;
77 width: 100%;
78 text-align: left;
79 }
80 .dir-rtl .file-picker .fp-content form td {
81 text-align: right;
82 }
83 .fp-content .mdl-right {
84 text-align: left;
85 }
86 .dir-rtl .fp-content .mdl-right {
87 text-align: right;
88 }
89
90 .fp-repo-items .fp-navbar {
91 border-top: 1px solid rgb(187, 187, 187);
92 }
2eab90fa
JF
93
94 .dir-rtl {
95 .userprofile dl.list dt,
96 .userprofile dl.list dd {
97 float: none;
98 text-align: right;
99 margin-right: 0;
100 }
101 }
102
88d366e5
JF
103 .fp-formset div {
104 height: auto;
105 }
d61c96b6
DW
106}
107
8903b17b 108@media (min-width: 1200px) {
1d20cf37
JF
109 // Editor on question page
110 .path-question {
111 #id_answerhdr div.fitem_feditor {
112 padding-right: 6px;
113 }
114 }
d8037b26 115 // Login page.
8903b17b
BB
116 .loginbox.twocolumns .loginpanel {
117 margin-left: 0;
118 }
119 .loginbox.twocolumns .loginpanel,
120 .loginbox.twocolumns .signuppanel {
121 width: 48.717948717948715%;
122 *width: 48.664757228587014%;
123 }
bfb1c6d4
JF
124 // Wider form labels.
125 .form-item .form-label,
126 .mform .fitem div.fitemtitle,
127 .userprofile dl.list dt,
128 .form-horizontal .control-label {
129 width: @horizontalComponentOffset1200 - 20px;
130 }
131 .form-item .form-setting,
132 .form-item .form-description,
133 .mform .fitem .felement,
134 #page-mod-forum-search .c1,
135 .mform .fdescription.required,
136 .userprofile dl.list dd,
137 .form-horizontal .controls {
138 margin-left: @horizontalComponentOffset1200;
139 }
8d223d71
NK
140 .dir-rtl {
141 .form-item .form-setting,
142 .form-item .form-description,
143 .mform .fitem .felement,
144 .mform .fdescription.required,
145 .userprofile dl.list dd,
146 .form-horizontal .controls {
2eab90fa 147 margin-right: (@horizontalComponentOffset1200 - 100px);
8d223d71
NK
148 }
149 #page-mod-forum-search .c1 {
150 margin-right: @horizontalComponentOffset1200;
151 }
293a1894
NK
152 .form-item .form-label,
153 .mform .fitem div.fitemtitle,
154 .userprofile dl.list dt,
155 .form-horizontal .control-label {
2eab90fa 156 width: (@horizontalComponentOffset1200 - 120px);
293a1894
NK
157 }
158
8d223d71 159 }
bfb1c6d4
JF
160 .path-admin .buttons,
161 .form-buttons {
162 padding-left: @horizontalComponentOffset1200;
163 }
8d223d71
NK
164 .dir-rtl {
165 .path-admin .buttons,
166 .form-buttons {
167 padding-right: @horizontalComponentOffset1200;
168 }
169 }
bfb1c6d4 170
d8037b26
GB
171 // Core empty block regions.
172 .fluid-span (@columns) {
173 .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
174 }
175 .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
176 .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
177 #region-main.span8 {
178 /** increase the span size by 1 **/
179 .fluid-span(9);
180 }
181 #block-region-side-pre.span4 {
182 /** decrease the span size by 1 **/
183 .fluid-span(3);
184 }
185 }
8903b17b
BB
186}
187
188@media (min-width: 980px) {
189 .loginbox.twocolumns .loginpanel {
190 margin-left: 0;
191 }
192 .loginbox.twocolumns .loginpanel,
193 .loginbox.twocolumns .signuppanel {
194 width: 48.617948717948715%;
195 *width: 48.664757228587014%;
196 }
197}
198
199@media (min-width: 768px) and (max-width: 979px) {
d8037b26 200 // Login page.
8903b17b
BB
201 .loginbox.twocolumns .loginpanel {
202 margin-left: 0;
203 }
204 .loginbox.twocolumns .loginpanel,
205 .loginbox.twocolumns .signuppanel {
206 width: 48.61878453038674%;
207 *width: 48.56559304102504%;
208 }
d8037b26
GB
209 // Core empty block regions.
210 .fluid-span (@columns) {
211 .fluid-span-full(@columns, @fluidGridColumnWidth768, @fluidGridGutterWidth768);
212 }
213 .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
214 .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
215 #region-main.span8 {
216 /** increase the span size by 1 **/
217 .fluid-span(9);
218 }
219 #block-region-side-pre.span4 {
220 /** decrease the span size by 1 **/
221 .fluid-span(3);
222 }
223 }
8903b17b
BB
224}
225
226@media (max-width: 767px) {
227 .loginbox.twocolumns .loginpanel,
228 .loginbox.twocolumns .signuppanel {
229 display: block;
230 float: none;
231 width: 100%;
232 margin-left: 0;
233 .box-sizing(border-box);
234 }
b23a3205
JF
235 #page-mod-quiz-edit div.quizcontents,
236 .questionbankwindow.block {
237 width: 100%;
238 float: none;
239 }
240 #page-mod-quiz-edit #block-region-side-pre,
241 #page-mod-quiz-edit #block-region-side-post {
242 clear: both;
243 }
244
8903b17b 245 }
8903b17b
BB
246
247@media (max-width: 480px) {
9c2ec10b
DS
248 // make tabs act like nav-stacked
249 // (mostly) copied from bootstrap/navs.less
250 .nav-tabs > li {
8903b17b
BB
251 float: none;
252 }
9c2ec10b
DS
253 .nav-tabs > li > a {
254 margin-right: 0; // no need for the gap between nav items
255 }
256 .nav-tabs {
257 border-bottom: 0;
258 }
259 .nav-tabs > li > a {
8903b17b
BB
260 border: 1px solid #ddd;
261 .border-radius(0);
262 }
9c2ec10b
DS
263 .nav-tabs > .active > a,
264 .nav-tabs > .active > a:hover {
265 border: 1px solid #ddd;
266 }
267 .nav-tabs > li:first-child > a {
8903b17b
BB
268 .border-top-radius(4px);
269 }
9c2ec10b 270 .nav-tabs > li:last-child > a {
8903b17b
BB
271 .border-bottom-radius(4px);
272 }
9c2ec10b
DS
273 .nav-tabs > li > a:hover,
274 .nav-tabs > li > a:focus {
8903b17b
BB
275 border-color: #ddd;
276 z-index: 2;
277 }
8903b17b
BB
278 .fp-content-center {
279 display: block;
280 vertical-align: top;
281 }
8903b17b
BB
282 .course-content ul.topics li.section,
283 .course-content ul.topics li.section .content,
284 .course-content ul.weeks li.section .content,
285 .course-content ul.weeks li.section,
286 .course-content ul.section {
287 margin-right: 0;
288 margin-left: 0;
289 padding: 0;
290 }
291 .activityinstance {
292 display: block;
293 }
294 .editing .course-content .section .activity {
295 margin-bottom: 0.2em;
296 padding-bottom: 0.2em;
297 border-bottom: thin solid #eee;
298 }
299 .course-content .section .activity .commands {
8903b17b
BB
300 text-align: right;
301 }
4c512690
SH
302 /** Handles display of the activity chooser on small screens **/
303 .jsenabled .choosercontainer #chooseform .alloptions {
304 max-width: 100%;
8903b17b 305 }
4c512690
SH
306 .jsenabled .choosercontainer #chooseform .instruction,
307 .jsenabled .choosercontainer #chooseform .typesummary {
308 position:static;
8903b17b
BB
309 }
310 .que .info {
311 float: none;
312 width: auto;
313 }
314 .que .content {
315 margin: 0;
316 }
317 .path-mod-choice .horizontal .choices .option {
318 display: block;
319 }
320 .path-mod-forum .forumsearch #search {
321 width: 120px;
322 }
41d64830
JF
323 .path-mod-forum .forumheaderlist .picture {
324 display: none;
325 }
8903b17b
BB
326}
327
328// Stuart's 2,1,3 layout
329@media (min-width : 768px) {
330 .row-fluid .desktop-first-column {
331 margin-left: 0;
332 }
c72106b2
RW
333 #page-navbar .breadcrumb-button {
334 display: inline;
335 }
8903b17b
BB
336}
337@media (max-width : 767px) {
338 .row-fluid .desktop-first-column {
35fe9b8a 339 clear: both;
8903b17b
BB
340 }
341}
342// Forms
343@media (max-width: 767px) {
344 // Remove the horizontal form styles
345 .form-item .form-label,
346 .mform .fitem div.fitemtitle {
347 // copied from .control-label {
348 float: none;
349 width: auto;
350 padding-top: 0;
351 text-align: left;
352 }
353 .form-item .form-label label{
354 display: inline-block;
355 margin-right: .5em;
356 }
357 .form-item .form-setting .form-checkbox {
358 margin-top: 0;
359 }
360 .form-label span.form-shortname {
361 display: inline-block;
362 }
363 .form-item .form-setting,
364 .mform .fitem .felement,
365 .path-backup .mform .fitem .felement,
366 .mform .fdescription.required,
367 .form-item .form-description {
368 margin-left: 0;
369 }
370 table#form td.submit,
371 .form-buttons,
372 #fitem_id_submitbutton,
373 .fp-content-center form + div,
374 #fgroup_id_buttonar,
375 .form-horizontal .form-actions,
376 .fitem_fsubmit .felement.fsubmit {
377 padding-left: 10px;
378 padding-right: 10px;
379 }
380 #helppopupbox {
381 width: auto !important;
382 left: 0 !important;
383 }
384}
385// Shrink calender when short on space in block
386@media (min-width : 768px) and (max-width: 979px) {
387 .block_calendar_month .content,
388 .block .minicalendar td {
389 padding-left: 0;
390 padding-right: 0;
391 }
392}
393
5d752f4b
NK
394.dir-rtl {
395 .dropdown-menu {
396 right:0;
397 left:auto;
a36f97f7 398 margin-right: 0px;
5d752f4b 399 }
a36f97f7 400 .navbar .nav > li > .dropdown-menu:before {
5d752f4b
NK
401 right:9px;
402 left:auto;
403 }
a36f97f7 404 .navbar .nav > li > .dropdown-menu:after {
5d752f4b
NK
405 right: 10px;
406 left:auto;
407 }
a36f97f7
JC
408 .dropdown-submenu > a:after {
409 margin-right: 0;
410 margin-left: -10px;
411 float: left;
5d752f4b
NK
412 border-right-color: #ccc;
413 border-left-color: transparent;
414 border-width: 5px 5px 5px 0px;
415 }
a36f97f7 416 .dropdown-submenu > .dropdown-menu {
5d752f4b
NK
417 right:100%;
418 left:auto;
419 }
420}
421
8903b17b
BB
422@media (max-width: 979px) {
423 .nav-collapse {
424 height: 0;
425 .nav > li > a {
426 color: @grayDark;
427 }
428 .nav > li > a:hover,
429 .nav > li > a:focus,
430 .dropdown-menu a:hover,
431 .dropdown-menu a:focus,
432 .dropdown-submenu a:focus,
433 .dropdown-submenu a:hover,
434 .dropdown-submenu a:active,
435 .dropdown-menu > li > a:hover,
436 .dropdown-menu > li > a:focus,
437 {
438 background-image: none;
439 color: @grayDark;
440 }
441 }
affa8c03 442 .nav-collapse.in {
8903b17b 443 height: auto;
6da0e4cf
JC
444 .usermenu .moodle-actionmenu[data-enhanced] {
445 .toggle-display {
446 display: none;
447 }
448 .menu {
449 display: block;
450
451 li {
452 margin: 0 0.5em;
453 }
454 }
455 }
8903b17b 456 }
7e7e8fd3
AB
457 .path-mod-data .box > table > tbody > tr > td {
458 display: block;
459 }
9c53c70c
AB
460 .path-mod-forum .forumheaderlist {
461 thead .header {
462 font-weight: normal;
463 font-size: round(@fontSizeSmall);
464 }
465 .discussion {
466 .author, .replies, .lastpost {
467 font-size: round(@fontSizeSmall);
468 }
469 .replies .unread a {
470 padding: 0;
471 }
472 }
473 }
cb9c6a7d
JC
474
475 .navbar {
affa8c03 476 .nav-collapse.in {
cb9c6a7d 477 border-top: 1px solid @navbarBorder;
cb9c6a7d
JC
478 &.pull-left,
479 &.pull-right {
480 float: none;
481 }
482 > .nav {
483 margin: 0;
484
485 // Add padding to first-level links.
486 > li > a {
487 padding-left: 20px;
0163c590 488 border-radius: 0;
cb9c6a7d
JC
489 }
490 .dropdown-menu {
0163c590 491 margin: 0 0 0 15px;
cb9c6a7d 492 li > a {
0163c590 493 border-radius: 0;
cb9c6a7d
JC
494 }
495 }
496 }
497
affa8c03
JC
498 .nav,
499 .nav .dropdown-menu {
cb9c6a7d
JC
500 .dropdown-submenu {
501 .dropdown-toggle {
502 &:after {
503 display: inline-block;
504 float: none;
505 .caret();
506 border-top-color: @navbarBorder;
507 margin-left: 4px;
508 margin-top: 8px;
509 }
510 }
511
512 &.open {
513 > a {
514 background-color: @navbarBackground;
515 }
516 }
517
518 // Suppress showing of submenu menu content on hover.
519 &:hover {
520 .dropdown-menu {
521 display: none;
522 }
523 &.open {
524 > a {
0163c590 525 background-color: @navbarBackground;
cb9c6a7d
JC
526 }
527 > .dropdown-menu,
528 .open > .dropdown-menu {
529 display: block;
530 }
531 }
532 }
533 }
1ee45d68
JC
534 .divider {
535 width: auto;
536 display: block;
0163c590 537 height: 0;
1ee45d68 538 margin: 4px 1px;
0163c590
ME
539 border-left: 0 none;
540 border-right: 0 none;
1ee45d68
JC
541 border-top: 1px solid @navbarBorder;
542 border-bottom: 1px solid @navbarBackgroundHighlight;
543 }
cb9c6a7d
JC
544 }
545 }
0163c590
ME
546 }
547
548 .navbar-inverse {
549 .nav-collapse.in {
550 border-top-color: @navbarInverseBorder;
551 .nav,
552 .nav .dropdown-menu {
553 .dropdown-submenu {
554 .dropdown-toggle {
555 &:after {
556 border-top-color: @navbarInverseBorder;
53324831 557 }
0163c590
ME
558 }
559 &.open {
560 > a {
561 background-color: @navbarInverseBackground;
562 }
563 }
564
565 &:hover {
53324831
JC
566 &.open {
567 > a {
568 background-color: @navbarInverseBackground;
569 }
570 }
53324831
JC
571 }
572 }
0163c590
ME
573 .divider {
574 width: auto;
575 display: block;
576 height: 0;
577 margin: 4px 1px;
578 border-top: 1px solid @navbarInverseBackground;
579 border-bottom: 1px solid lighten(@navbarInverseBackground, 25%);
580 }
53324831
JC
581 }
582 }
cb9c6a7d 583 }
cfbd8125 584
53324831
JC
585 .dir-rtl {
586 .navbar {
affa8c03 587 .nav-collapse.in {
53324831
JC
588 > .nav {
589 margin: 0;
590 > li > a {
0163c590 591 padding-left: 0;
53324831
JC
592 padding-right: 20px;
593 }
594 .dropdown-menu {
0163c590 595 margin: 0 15px 0 0;
53324831
JC
596 }
597 }
598 .dropdown-menu {
599 > li {
600 > a {
601 padding: 9px 15px;
602 }
603 }
604 }
605 .nav,
606 .nav .dropdown-menu {
607 .dropdown-submenu {
608 .dropdown-toggle {
609 &:after {
0163c590 610 margin-left: 0;
53324831
JC
611 margin-right: 4px;
612 }
613 }
614 }
615 }
616 }
617 }
618 }
8903b17b
BB
619}
620
d8037b26 621@media (max-width: 767px) {
8903b17b
BB
622// Resize, reflow file-picker on small devices
623 #filesskin .yui3-panel,
624 #filesskin .file-picker.fp-generallayout {
625 width: 100%;
626 left: 0;
627 }
628 .userprofile dl.list {
629 // copied from dl-horizontal in bootstrap/repsonsive.less
630 dt {
631 float: none;
632 clear: none;
633 width: auto;
634 text-align: left;
635 }
636 dd {
637 margin-left: 0;
638 }
639 }
47e00c34
RW
640 // Reset the alignment for required label to display inline on mobile devices
641 #page-mod-wiki-create .mform .fitem div.fitemtitle {
642 float: left;
643 }
644
8903b17b
BB
645 // GRID & CONTAINERS
646 // -----------------
647 // Remove width from containers
648 .container {
649 width: auto;
650 }
651 // Fluid rows
652 .row-fluid {
653 width: 100%;
654 }
655 .row-fluid .span8.pull-right,
656 .row-fluid .span9.pull-right {
657 float: none;
658 }
659 // Undo negative margin on rows and thumbnails
660 .row {
661 margin-left: 0;
662 }
663 // Make all grid-sized elements block level again
664 [class*="span"],
665 .row-fluid [class*="span"] {
666 float: none;
667 display: block;
668 width: 100%;
669 margin-left: 0;
670 .box-sizing(border-box);
671 }
338021b9 672
d8037b26
GB
673 // We need to specify a more specific selector to reset the width for
674 // cases when we have content in the side-pre blockregion but not in the
675 // side-post blockregion as there are more specific selectors in
676 // core.less which take precedence which break responsiveness.
677 .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
678 .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
679 #block-region-side-pre.span4,
680 #region-main.span8 {
681 .fluid-span(12);
682 }
683 }
338021b9 684
8903b17b
BB
685 .row-fluid .span12 {
686 width: 100%;
687 .box-sizing(border-box);
688 }
689 .row-fluid [class*="offset"]:first-child {
690 margin-left: 0;
691 }
692 div[role=main] {
f6606495 693 margin-bottom: 1em;
8903b17b 694 }
759e970f
AB
695 .coursebox {
696 .info {
697 .name {
698 a {
699 background-position: 0 13px;
700 }
701 }
702 }
703 }
704 .category-browse {
705 .coursebox {
706 .info {
707 .name {
708 a {
709 background-position: 0 13px;
710 }
711 }
712 }
713 }
714 }
8903b17b 715}
5dc361e1
SH
716
717// All widths between 1200px and 1600px
718@media (min-width: 1200px) and (max-width: 1600px) {
d8037b26
GB
719 .fluid-span (@columns) {
720 .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
721 }
5dc361e1
SH
722 // CSS for the course management pages.
723 #course-category-listings.columns-3 {
e514c722 724 background-color: @tableBackground;
5dc361e1
SH
725 border:0;
726
727 #category-listing,
728 #course-listing {
729 .fluid-span(6);
d8037b26
GB
730 margin-left: @fluidGridGutterWidth1200;
731 *margin-left: @fluidGridGutterWidth1200 - (.5 / @gridRowWidth * 100 * 1%);
5dc361e1
SH
732 &:first-child {
733 margin-left: 0;
734 }
735 }
736 #course-detail {
737 .fluid-span(12);
738 margin: 1em 0 0;
739 }
740 }
5dc361e1
SH
741}
742
743// All widths up to 1199px.
744@media (max-width: 1199px) {
1d20cf37
JF
745
746 // Editor on question pages
747 .path-question {
748 #id_answerhdr div.fitem {
749 padding-right: 6px;
750 padding-left: 4px;
751 }
752 }
5dc361e1
SH
753 // CSS for the course management pages.
754 #course-category-listings.columns-3 {
e514c722 755 background-color: @tableBackground;
5dc361e1
SH
756 border:0;
757 #category-listing,
758 #course-listing,
759 #course-detail {
760 .fluid-span(12);
761 margin: 0 0 1em 0;
762 }
763 }
35620f63
SH
764
765 #page-mod-forum-discuss .discussioncontrols {
766 text-align: right;
767 .discussioncontrol {
768 float: none;
769 width: auto;
770 display: inline-block;
771 margin: 0 3px 0.5em;
772 select,
773 input {
774 margin-bottom: 0;
775 }
776 &.movediscussion {
777 margin-right: 0;
778 padding-right: 0;
779 }
780 }
781 }
782
783 #page-mod-forum-discuss.dir-rtl .discussioncontrols {
784 text-align: left;
785 }
338021b9 786}
88d366e5
JF
787
788
789// File Picker.
790@media (max-width: 768px) {
791 .fp-forminset .control-group .controls {
792 margin-left: 0;
793 }
794 .dir-rtl .fp-formset .control-group {
795 label.control-label {
796 text-align: right;
797 float: none;
798 }
799 }
800 .dir-rtl .fp-forminset .control-group {
801 label.control-label {
802 text-align: right;
803 float: none;
804 }
805 .controls {
806 margin-right: 0;
807 }
808 }
d8037b26 809}