0525f9d15da456e78560e220e1c6eada90433df5
[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: (@navbarCollapseDesktopWidth)) {
11     a[id]:empty::before,
12     a[name]:empty::before {
13         display: inline-block;
14         position: relative;
15         content: '';
16         padding-top: @navbarHeight;
17         margin-top: -@navbarHeight;
18         vertical-align: top;
19     }
21 }
23 @media (min-width: 980px) and (max-width: 1199px) {
24     // Wider form labels.
25     .form-item .form-label,
26     .mform .fitem div.fitemtitle,
27     .userprofile dl.list dt,
28     .form-horizontal .control-label {
29         width: @horizontalComponentOffset980 - 20px;
30     }
31     .form-item .form-setting,
32     .form-item .form-description,
33     .mform .fitem .felement,
34     #page-mod-forum-search .c1,
35     .mform .fdescription.required,
36     .userprofile dl.list dd,
37     .form-horizontal .controls {
38         margin-left: @horizontalComponentOffset980;
39     }
40     #page-mod-forum-search.dir-lrt .c1 {
41         margin-right: @horizontalComponentOffset980;
42     }
43     .path-admin .buttons,
44     .form-buttons {
45         padding-left: @horizontalComponentOffset980;
46     }
47 }
49 @media (max-width: 767px) {
50     .file-picker .fp-repo-area {
51         width: 100%;
52         height: auto;
53         max-height: 220px;
54         float: none;
55         border: 0;
56     }
57     .file-picker .fp-repo-items {
58         width: 100%;
59         float: none;
60         margin-left: 0;
61     }
62     .file-picker .fp-login-form .fp-login-input label {
63         text-align: left;
64     }
65     .file-picker .fp-content form td {
66         display: block;
67         width: 100%;
68         text-align: left;
69     }
70     .fp-content .mdl-right {
71         text-align: left;
72     }
74     .fp-repo-items .fp-navbar {
75         border-top: 1px solid rgb(187, 187, 187);
76     }
78     .fp-formset div {
79         height: auto;
80     }
81 }
83 @media (min-width: 1200px) {
84     // Editor on question page
85     .path-question {
86         #id_answerhdr div.fitem_feditor {
87             padding-right: 6px;
88         }
89     }
90     // Login page.
91     .loginbox.twocolumns .loginpanel {
92         margin-left: 0;
93     }
94     .loginbox.twocolumns .loginpanel,
95     .loginbox.twocolumns .signuppanel {
96         width: 48.717948717948715%;
97         *width: 48.664757228587014%;
98     }
99     // Wider form labels.
100     .form-item .form-label,
101     .mform .fitem div.fitemtitle,
102     .userprofile dl.list dt,
103     .form-horizontal .control-label {
104         width: @horizontalComponentOffset1200 - 20px;
105     }
106     .form-item .form-setting,
107     .form-item .form-description,
108     .mform .fitem .felement,
109     #page-mod-forum-search .c1,
110     .mform .fdescription.required,
111     .userprofile dl.list dd,
112     .form-horizontal .controls {
113         margin-left: @horizontalComponentOffset1200;
114     }
115     .path-admin .buttons,
116     .form-buttons {
117         padding-left: @horizontalComponentOffset1200;
118     }
120     // Core empty block regions.
121     .fluid-span (@columns) {
122         .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
123     }
124     .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
125     .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
126         #region-main.span8 {
127             /** increase the span size by 1 **/
128             .fluid-span(9);
129         }
130         #block-region-side-pre.span4 {
131             /** decrease the span size by 1 **/
132             .fluid-span(3);
133         }
134     }
137 @media (min-width: 980px) {
138     .loginbox.twocolumns .loginpanel {
139         margin-left: 0;
140     }
141     .loginbox.twocolumns .loginpanel,
142     .loginbox.twocolumns .signuppanel {
143         width: 48.617948717948715%;
144         *width: 48.664757228587014%;
145     }
148 @media (min-width: 768px) and (max-width: 979px) {
149     // Login page.
150     .loginbox.twocolumns .loginpanel {
151         margin-left: 0;
152     }
153     .loginbox.twocolumns .loginpanel,
154     .loginbox.twocolumns .signuppanel {
155         width: 48.61878453038674%;
156         *width: 48.56559304102504%;
157     }
158     // Core empty block regions.
159     .fluid-span (@columns) {
160         .fluid-span-full(@columns, @fluidGridColumnWidth768, @fluidGridGutterWidth768);
161     }
162     .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
163     .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
164         #region-main.span8 {
165             /** increase the span size by 1 **/
166             .fluid-span(9);
167         }
168         #block-region-side-pre.span4 {
169             /** decrease the span size by 1 **/
170             .fluid-span(3);
171         }
172     }
175 @media (max-width: 767px) {
176     .loginbox.twocolumns .loginpanel,
177     .loginbox.twocolumns .signuppanel {
178         display: block;
179         float: none;
180         width: 100%;
181         margin-left: 0;
182         .box-sizing(border-box);
183     }
184     #page-mod-quiz-edit div.quizcontents,
185     .questionbankwindow.block {
186         width: 100%;
187         float: none;
188     }
189     #page-mod-quiz-edit #block-region-side-pre,
190     #page-mod-quiz-edit #block-region-side-post {
191         clear: both;
192     }
196 @media (max-width: 480px) {
197     // make tabs act like nav-stacked
198     // (mostly) copied from bootstrap/navs.less
199     .nav-tabs > li {
200         float: none;
201     }
202     .nav-tabs > li > a {
203         margin-right: 0; // no need for the gap between nav items
204     }
205     .nav-tabs {
206         border-bottom: 0;
207     }
208     .nav-tabs > li > a {
209         border: 1px solid #ddd;
210         .border-radius(0);
211     }
212     .nav-tabs > .active > a,
213     .nav-tabs > .active > a:hover {
214         border: 1px solid #ddd;
215     }
216     .nav-tabs > li:first-child > a {
217         .border-top-radius(4px);
218     }
219     .nav-tabs > li:last-child > a {
220         .border-bottom-radius(4px);
221     }
222     .nav-tabs > li > a:hover,
223     .nav-tabs > li > a:focus {
224         border-color: #ddd;
225         z-index: 2;
226     }
227     .fp-content-center {
228         display: block;
229     }
230     .course-content ul.topics li.section,
231     .course-content ul.topics li.section .content,
232     .course-content ul.weeks li.section .content,
233     .course-content ul.weeks li.section,
234     .course-content ul.section {
235         margin-right: 0;
236         margin-left: 0;
237         padding: 0;
238     }
239     .activityinstance {
240         display: block;
241     }
242     .editing .course-content .section .activity {
243         margin-bottom: 0.2em;
244         padding-bottom: 0.2em;
245         border-bottom: thin solid #eee;
246     }
247     .course-content .section .activity .commands {
248         text-align: right;
249     }
250     /** Handles display of the activity chooser on small screens **/
251     .jsenabled .choosercontainer #chooseform .alloptions {
252         max-width: 100%;
253     }
254     .jsenabled .choosercontainer #chooseform .instruction,
255     .jsenabled .choosercontainer #chooseform .typesummary {
256         position: static;
257     }
258     .que .info {
259         float: none;
260         width: auto;
261     }
262     .que .content {
263         margin: 0;
264     }
265     .path-mod-choice .horizontal  .choices .option {
266         display: block;
267     }
268     .path-mod-forum .forumsearch #search {
269         width: 120px;
270     }
271     .path-mod-forum .forumheaderlist .picture {
272         display: none;
273     }
276 // Stuart's 2,1,3 layout
277 @media (min-width: 768px) {
278     .row-fluid .desktop-first-column {
279         margin-left: 0;
280     }
281     #page-navbar .breadcrumb-button {
282         display: inline;
283     }
286 @media (max-width: 767px) {
287     .row-fluid .desktop-first-column {
288         clear: both;
289     }
291 // Forms
292 @media (max-width: 767px) {
293     // Remove the horizontal form styles
294     .form-item .form-label,
295     .mform .fitem div.fitemtitle {
296         // copied from .control-label {
297         float: none;
298         width: auto;
299         padding-top: 0;
300         text-align: left;
301     }
302     .form-item .form-label label {
303         display: inline-block;
304         margin-right: .5em;
305     }
306     .form-item .form-setting .form-checkbox {
307         margin-top: 0;
308     }
309     .form-label span.form-shortname {
310         display: inline-block;
311     }
312     .form-item .form-setting,
313     .mform .fitem .felement,
314     .path-backup .mform .fitem .felement,
315     .mform .fdescription.required,
316     .form-item .form-description {
317         margin-left: 0;
318     }
319     table#form td.submit,
320     .form-buttons,
321     #fitem_id_submitbutton,
322     .fp-content-center form + div,
323     #fgroup_id_buttonar,
324     .form-horizontal .form-actions,
325     .fitem_fsubmit .felement.fsubmit {
326         padding-left: 10px;
327         padding-right: 10px;
328     }
329     #helppopupbox {
330         /* stylelint-disable declaration-no-important */
331         width: auto !important;
332         left: 0 !important;
333         /* stylelint-enable declaration-no-important */
334     }
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     }
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:hover,
356         .dropdown-submenu a:focus,
357         .dropdown-submenu a:active,
358         .dropdown-menu > li > a:hover,
359         .dropdown-menu > li > a:focus,
360         .dropdown-submenu:hover > a,
361         .dropdown-submenu:focus > a {
362             background-image: none;
363             color: @grayDark;
364         }
365     }
366     .nav-collapse.in {
367         height: auto;
368         .usermenu .moodle-actionmenu[data-enhanced] {
369             .toggle-display {
370                 display: none;
371             }
372             .menu {
373                 display: block;
375                 li {
376                     margin: 0 0.5em;
377                 }
378             }
379         }
380     }
381     .path-mod-data .box > table > tbody > tr > td {
382         display: block;
383     }
384     .path-mod-forum .forumheaderlist {
385         thead .header {
386             font-weight: normal;
387             font-size: round(@fontSizeSmall);
388         }
389         .discussion {
390             .author,
391             .replies,
392             .lastpost {
393                 font-size: round(@fontSizeSmall);
394             }
395             .replies .unread a {
396                 padding: 0;
397             }
398         }
399     }
401     .navbar {
402         .nav-collapse.in {
403             border-top: 1px solid @navbarBorder;
404             &.pull-left,
405             &.pull-right {
406                 float: none;
407             }
408             > .nav {
409                 margin: 0;
411                 // Add padding to first-level links.
412                 > li > a {
413                     padding-left: 20px;
414                     border-radius: 0;
415                 }
416                 .dropdown-menu {
417                     margin: 0 0 0 15px;
418                     li > a {
419                         border-radius: 0;
420                     }
421                 }
422             }
424             .nav,
425             .nav .dropdown-menu {
426                 .dropdown-submenu {
427                     .dropdown-toggle {
428                         &:after {
429                             display: inline-block;
430                             float: none;
431                             .caret();
432                             border-top-color: @navbarBorder;
433                             margin-left: 4px;
434                             margin-top: 8px;
435                         }
436                     }
438                     &.open {
439                         > a {
440                             background-color: @navbarBackground;
441                         }
442                     }
444                     // Suppress showing of submenu menu content on hover.
445                     &:hover {
446                         .dropdown-menu {
447                             display: none;
448                         }
449                         &.open {
450                             > a {
451                                 background-color: @navbarBackground;
452                             }
453                             > .dropdown-menu,
454                             .open > .dropdown-menu {
455                                 display: block;
456                             }
457                         }
458                     }
459                 }
460                 .divider {
461                     width: auto;
462                     display: block;
463                     height: 0;
464                     margin: 4px 1px;
465                     border-left: 0 none;
466                     border-right: 0 none;
467                     border-top: 1px solid @navbarBorder;
468                     border-bottom: 1px solid @navbarBackgroundHighlight;
469                 }
470             }
471         }
472     }
474     .navbar-inverse {
475         .nav-collapse.in {
476             border-top-color: @navbarInverseBorder;
477             .nav,
478             .nav .dropdown-menu {
479                 .dropdown-submenu {
480                     .dropdown-toggle {
481                         &:after {
482                             border-top-color: @navbarInverseBorder;
483                         }
484                     }
485                     &.open {
486                         > a {
487                             background-color: @navbarInverseBackground;
488                         }
489                     }
491                     &:hover {
492                         &.open {
493                             > a {
494                                 background-color: @navbarInverseBackground;
495                             }
496                         }
497                     }
498                 }
499                 .divider {
500                     width: auto;
501                     display: block;
502                     height: 0;
503                     margin: 4px 1px;
504                     border-top: 1px solid @navbarInverseBackground;
505                     border-bottom: 1px solid lighten(@navbarInverseBackground, 25%);
506                 }
507             }
508             .nav {
509                 > li > a {
510                     &:hover,
511                     &:focus {
512                         color: @navbarInverseLinkColorHover;
513                     }
514                 }
515             }
516             .dropdown-menu a {
517                 &:hover,
518                 &:focus {
519                     color: @navbarInverseLinkColorHover;
520                 }
521                 > li > a {
522                     &:hover,
523                     &:focus {
524                         color: @navbarInverseLinkColorHover;
525                     }
526                 }
527             }
528             .dropdown-submenu a {
529                 &:hover,
530                 &:focus,
531                 &:active {
532                     color: @navbarInverseLinkColorHover;
533                 }
534             }
535         }
536     }
539 @media (max-width: 767px) {
540     // Resize, reflow file-picker on small devices
541     #filesskin .yui3-panel,
542     #filesskin .file-picker.fp-generallayout {
543         width: 100%;
544         left: 0;
545     }
546     .userprofile dl.list {
547         // copied from dl-horizontal in bootstrap/repsonsive.less
548         dt {
549             float: none;
550             clear: none;
551             width: auto;
552             text-align: left;
553         }
554         dd {
555             margin-left: 0;
556         }
557     }
558     // Reset the alignment for required label to display inline on mobile devices
559     #page-mod-wiki-create .mform .fitem div.fitemtitle {
560         float: left;
561     }
563     // GRID & CONTAINERS
564     // -----------------
565     // Remove width from containers
566     .container {
567         width: auto;
568     }
569     // Fluid rows
570     .row-fluid {
571         width: 100%;
572     }
573     .row-fluid .span8.pull-right,
574     .row-fluid .span9.pull-right {
575         float: none;
576     }
577     // Undo negative margin on rows and thumbnails
578     .row {
579         margin-left: 0;
580     }
581     // Make all grid-sized elements block level again
582     [class*="span"],
583     .row-fluid [class*="span"] {
584         float: none;
585         display: block;
586         width: 100%;
587         margin-left: 0;
588         .box-sizing(border-box);
589     }
591     // We need to specify a more specific selector to reset the width for
592     // cases when we have content in the side-pre blockregion but not in the
593     // side-post blockregion as there are more specific selectors in
594     // core.less which take precedence which break responsiveness.
595     .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
596     .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
597         #block-region-side-pre.span4,
598         #region-main.span8 {
599             .fluid-span(12);
600         }
601     }
603     .row-fluid .span12 {
604         width: 100%;
605         .box-sizing(border-box);
606     }
607     .row-fluid [class*="offset"]:first-child {
608         margin-left: 0;
609     }
610     div[role=main] {
611         margin-bottom: 1em;
612     }
613     .coursebox {
614         .info {
615             .name {
616                 a {
617                     background-position: 0 13px;
618                 }
619             }
620         }
621     }
622     .category-browse {
623         .coursebox {
624             .info {
625                 .name {
626                     a {
627                         background-position: 0 13px;
628                     }
629                 }
630             }
631         }
632     }
635 // All widths between 1200px and 1600px
636 @media (min-width: 1200px) and (max-width: 1600px) {
637     .fluid-span (@columns) {
638         .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
639     }
640     // CSS for the course management pages.
641     #course-category-listings.columns-3 {
642         background-color: @tableBackground;
643         border: 0;
645         #category-listing,
646         #course-listing {
647             .fluid-span(6);
648             margin-left: @fluidGridGutterWidth1200;
649             *margin-left: @fluidGridGutterWidth1200 - (.5 / @gridRowWidth * 100 * 1%);
650             &:first-child {
651                 margin-left: 0;
652             }
653         }
654         #course-detail {
655             .fluid-span(12);
656             margin: 1em 0 0;
657         }
658     }
661 // All widths up to 1199px.
662 @media (max-width: 1199px) {
664     // Editor on question pages
665     .path-question {
666         #id_answerhdr div.fitem {
667             padding-right: 6px;
668             padding-left: 4px;
669         }
670     }
671     // CSS for the course management pages.
672     #course-category-listings.columns-3 {
673         background-color: @tableBackground;
674         border: 0;
675         #category-listing,
676         #course-listing,
677         #course-detail {
678             .fluid-span(12);
679             margin: 0 0 1em 0;
680         }
681     }
683     #page-mod-forum-discuss .discussioncontrols {
684         text-align: right;
685         .discussioncontrol {
686             float: none;
687             width: auto;
688             display: inline-block;
689             margin: 0 3px 0.5em;
690             select,
691             input {
692                 margin-bottom: 0;
693             }
694             &.movediscussion {
695                 margin-right: 0;
696                 padding-right: 0;
697             }
698         }
699     }
703 // File Picker.
704 @media (max-width: 768px) {
705     .fp-forminset .control-group .controls {
706         margin-left: 0;
707     }