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