75f8a95cf3859ad28dbe93a5906aac9edc2cc1a2
[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: right;
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     }
444     .path-mod-data .box > table > tbody > tr > td {
445         display: block;
446     }
447     .path-mod-forum .forumheaderlist {
448         thead .header {
449             font-weight: normal;
450             font-size: round(@fontSizeSmall);
451         }
452         .discussion {
453             .author, .replies, .lastpost {
454                 font-size: round(@fontSizeSmall);
455             }
456             .replies .unread a {
457                 padding: 0;
458             }
459         }
460     }
462     .navbar {
463         .nav-collapse.active {
464             border-top: 1px solid @navbarBorder;
465             box-shadow: 0px -8px 24px rgba(0, 0, 0, 0.125);
466             &.pull-left,
467             &.pull-right {
468                 float: none;
469             }
470             > .nav {
471                 margin: 0;
473                 // Add padding to first-level links.
474                 > li > a {
475                     padding-left: 20px;
476                     border-radius: 0px;
477                 }
478                 .dropdown-menu {
479                     margin: 0px 0px 0px 15px;
480                     li > a {
481                         border-radius: 0px;
482                     }
483                 }
484             }
486             .nav, .nav .dropdown-menu {
487                 .dropdown-submenu {
488                     .dropdown-toggle {
489                         &:after {
490                             display: inline-block;
491                             float: none;
492                             .caret();
493                             border-top-color: @navbarBorder;
494                             margin-left: 4px;
495                             margin-top: 8px;
496                         }
497                     }
499                     &.open {
500                         > a {
501                             background-color: @navbarBackground;
502                         }
503                     }
505                     // Suppress showing of submenu menu content on hover.
506                     &:hover {
507                         .dropdown-menu {
508                             display: none;
509                         }
510                         &.open {
511                             > a {
512                                 background: @navbarBackground;
513                             }
514                             > .dropdown-menu,
515                             .open > .dropdown-menu {
516                                 display: block;
517                             }
518                         }
519                     }
520                 }
521                 .divider {
522                     width: auto;
523                     display: block;
524                     height: 0px;
525                     margin: 4px 1px;
526                     border-left: 0px none;
527                     border-right: 0px none;
528                     border-top: 1px solid @navbarBorder;
529                     border-bottom: 1px solid @navbarBackgroundHighlight;
530                 }
531             }
532         }
533     }
536 @media (max-width: 767px) {
537 // Resize, reflow file-picker on small devices
538    #filesskin .yui3-panel,
539    #filesskin .file-picker.fp-generallayout {
540         width: 100%;
541         left: 0;
542     }
543     .userprofile dl.list {
544     // copied from dl-horizontal in bootstrap/repsonsive.less
545         dt {
546           float: none;
547           clear: none;
548           width: auto;
549           text-align: left;
550         }
551         dd {
552           margin-left: 0;
553         }
554     }
555     // Reset the alignment for required label to display inline on mobile devices
556     #page-mod-wiki-create .mform .fitem div.fitemtitle {
557         float: left;
558     }
560   // GRID & CONTAINERS
561   // -----------------
562   // Remove width from containers
563   .container {
564     width: auto;
565   }
566   // Fluid rows
567   .row-fluid {
568     width: 100%;
569   }
570   .row-fluid .span8.pull-right,
571   .row-fluid .span9.pull-right {
572     float: none;
573   }
574   // Undo negative margin on rows and thumbnails
575   .row {
576     margin-left: 0;
577   }
578   // Make all grid-sized elements block level again
579   [class*="span"],
580   .row-fluid [class*="span"] {
581     float: none;
582     display: block;
583     width: 100%;
584     margin-left: 0;
585     .box-sizing(border-box);
586   }
588     // We need to specify a more specific selector to reset the width for
589     // cases when we have content in the side-pre blockregion but not in the
590     // side-post blockregion as there are more specific selectors in
591     // core.less which take precedence which break responsiveness.
592     .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
593     .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
594         #block-region-side-pre.span4,
595         #region-main.span8 {
596             .fluid-span(12);
597         }
598     }
600   .row-fluid .span12 {
601     width: 100%;
602     .box-sizing(border-box);
603   }
604   .row-fluid [class*="offset"]:first-child {
605     margin-left: 0;
606   }
607   div[role=main] {
608       margin-bottom: 1em;
609   }
610     .coursebox {
611         .info {
612             .name {
613                 a {
614                     background-position: 0 13px;
615                 }
616             }
617         }
618     }
619     .category-browse {
620         .coursebox {
621             .info {
622                 .name {
623                     a {
624                         background-position: 0 13px;
625                     }
626                 }
627             }
628         }
629     }
632 // All widths between 1200px and 1600px
633 @media (min-width: 1200px) and (max-width: 1600px) {
634     .fluid-span (@columns) {
635         .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
636     }
637     // CSS for the course management pages.
638     #course-category-listings.columns-3 {
639         background-color: @tableBackground;
640         border:0;
642         #category-listing,
643         #course-listing {
644             .fluid-span(6);
645             margin-left: @fluidGridGutterWidth1200;
646             *margin-left: @fluidGridGutterWidth1200 - (.5 / @gridRowWidth * 100 * 1%);
647             &:first-child {
648                 margin-left: 0;
649             }
650         }
651         #course-detail {
652             .fluid-span(12);
653             margin: 1em 0 0;
654         }
655     }
658 // All widths up to 1199px.
659 @media (max-width: 1199px) {
661     // Editor on question pages
662     .path-question {
663         #id_answerhdr div.fitem {
664             padding-right: 6px;
665             padding-left: 4px;
666         }
667     }
668     // CSS for the course management pages.
669     #course-category-listings.columns-3 {
670         background-color: @tableBackground;
671         border:0;
672         #category-listing,
673         #course-listing,
674         #course-detail {
675             .fluid-span(12);
676             margin: 0 0 1em 0;
677         }
678     }
680     #page-mod-forum-discuss .discussioncontrols {
681         text-align: right;
682         .discussioncontrol {
683             float: none;
684             width: auto;
685             display: inline-block;
686             margin: 0 3px 0.5em;
687             select,
688             input {
689                 margin-bottom: 0;
690             }
691             &.movediscussion {
692                 margin-right: 0;
693                 padding-right: 0;
694             }
695         }
696     }
698    #page-mod-forum-discuss.dir-rtl .discussioncontrols {
699        text-align: left;
700    }
704 // File Picker.
705 @media (max-width: 768px) {
706     .fp-forminset .control-group .controls {
707         margin-left: 0;
708     }
709     .dir-rtl .fp-formset .control-group {
710         label.control-label {
711             text-align: right;
712             float: none;
713         }
714     }
715     .dir-rtl .fp-forminset .control-group {
716         label.control-label {
717             text-align: right;
718             float: none;
719         }
720         .controls {
721             margin-right: 0;
722         }
723     }