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