MDL-47242 theme_bootstrapbase: inverted color and RTL fixes
[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             &.pull-left,
466             &.pull-right {
467                 float: none;
468             }
469             > .nav {
470                 margin: 0;
472                 // Add padding to first-level links.
473                 > li > a {
474                     padding-left: 20px;
475                     border-radius: 0px;
476                 }
477                 .dropdown-menu {
478                     margin: 0px 0px 0px 15px;
479                     li > a {
480                         border-radius: 0px;
481                     }
482                 }
483             }
485             .nav, .nav .dropdown-menu {
486                 .dropdown-submenu {
487                     .dropdown-toggle {
488                         &:after {
489                             display: inline-block;
490                             float: none;
491                             .caret();
492                             border-top-color: @navbarBorder;
493                             margin-left: 4px;
494                             margin-top: 8px;
495                         }
496                     }
498                     &.open {
499                         > a {
500                             background-color: @navbarBackground;
501                         }
502                     }
504                     // Suppress showing of submenu menu content on hover.
505                     &:hover {
506                         .dropdown-menu {
507                             display: none;
508                         }
509                         &.open {
510                             > a {
511                                 background: @navbarBackground;
512                             }
513                             > .dropdown-menu,
514                             .open > .dropdown-menu {
515                                 display: block;
516                             }
517                         }
518                     }
519                 }
520                 .divider {
521                     width: auto;
522                     display: block;
523                     height: 0px;
524                     margin: 4px 1px;
525                     border-left: 0px none;
526                     border-right: 0px none;
527                     border-top: 1px solid @navbarBorder;
528                     border-bottom: 1px solid @navbarBackgroundHighlight;
529                 }
530             }
531         }
533         &.navbar-inverse {
534             .nav-collapse.active {
535                 border-top-color: @navbarInverseBorder;
536                 .nav,
537                 .nav .dropdown-menu {
538                     .dropdown-submenu {
539                         .dropdown-toggle {
540                             &:after {
541                                 border-top-color: @navbarInverseBorder;
542                             }
543                         }
544                         &.open {
545                             > a {
546                                 background-color: @navbarInverseBackground;
547                             }
548                         }
550                         &:hover {
551                             &.open {
552                                 > a {
553                                     background: @navbarInverseBackground;
554                                 }
555                             }
556                         }
557                     }
558                 }
559             }
560         }
561     }
562     
563     .dir-rtl {
564         .navbar {
565             .nav-collapse.active {
566                 > .nav {
567                     margin: 0;
568                     > li > a {
569                         padding-left: 0px;
570                         padding-right: 20px;
571                     }
572                     .dropdown-menu {
573                         margin: 0px 15px 0px 0px;
574                     }
575                 }
576                 .dropdown-menu {
577                     > li {
578                         > a {
579                             padding: 9px 15px;
580                         }
581                     }
582                 }
583                 .nav,
584                 .nav .dropdown-menu {
585                     .dropdown-submenu {
586                         .dropdown-toggle {
587                             &:after {
588                                 margin-left: 0px;
589                                 margin-right: 4px;
590                             }
591                         }
592                     }
593                 }
594             }
595         }
596     }
600 @media (max-width: 767px) {
601 // Resize, reflow file-picker on small devices
602    #filesskin .yui3-panel,
603    #filesskin .file-picker.fp-generallayout {
604         width: 100%;
605         left: 0;
606     }
607     .userprofile dl.list {
608     // copied from dl-horizontal in bootstrap/repsonsive.less
609         dt {
610           float: none;
611           clear: none;
612           width: auto;
613           text-align: left;
614         }
615         dd {
616           margin-left: 0;
617         }
618     }
619     // Reset the alignment for required label to display inline on mobile devices
620     #page-mod-wiki-create .mform .fitem div.fitemtitle {
621         float: left;
622     }
624   // GRID & CONTAINERS
625   // -----------------
626   // Remove width from containers
627   .container {
628     width: auto;
629   }
630   // Fluid rows
631   .row-fluid {
632     width: 100%;
633   }
634   .row-fluid .span8.pull-right,
635   .row-fluid .span9.pull-right {
636     float: none;
637   }
638   // Undo negative margin on rows and thumbnails
639   .row {
640     margin-left: 0;
641   }
642   // Make all grid-sized elements block level again
643   [class*="span"],
644   .row-fluid [class*="span"] {
645     float: none;
646     display: block;
647     width: 100%;
648     margin-left: 0;
649     .box-sizing(border-box);
650   }
652     // We need to specify a more specific selector to reset the width for
653     // cases when we have content in the side-pre blockregion but not in the
654     // side-post blockregion as there are more specific selectors in
655     // core.less which take precedence which break responsiveness.
656     .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
657     .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
658         #block-region-side-pre.span4,
659         #region-main.span8 {
660             .fluid-span(12);
661         }
662     }
664   .row-fluid .span12 {
665     width: 100%;
666     .box-sizing(border-box);
667   }
668   .row-fluid [class*="offset"]:first-child {
669     margin-left: 0;
670   }
671   div[role=main] {
672       margin-bottom: 1em;
673   }
674     .coursebox {
675         .info {
676             .name {
677                 a {
678                     background-position: 0 13px;
679                 }
680             }
681         }
682     }
683     .category-browse {
684         .coursebox {
685             .info {
686                 .name {
687                     a {
688                         background-position: 0 13px;
689                     }
690                 }
691             }
692         }
693     }
696 // All widths between 1200px and 1600px
697 @media (min-width: 1200px) and (max-width: 1600px) {
698     .fluid-span (@columns) {
699         .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
700     }
701     // CSS for the course management pages.
702     #course-category-listings.columns-3 {
703         background-color: @tableBackground;
704         border:0;
706         #category-listing,
707         #course-listing {
708             .fluid-span(6);
709             margin-left: @fluidGridGutterWidth1200;
710             *margin-left: @fluidGridGutterWidth1200 - (.5 / @gridRowWidth * 100 * 1%);
711             &:first-child {
712                 margin-left: 0;
713             }
714         }
715         #course-detail {
716             .fluid-span(12);
717             margin: 1em 0 0;
718         }
719     }
722 // All widths up to 1199px.
723 @media (max-width: 1199px) {
725     // Editor on question pages
726     .path-question {
727         #id_answerhdr div.fitem {
728             padding-right: 6px;
729             padding-left: 4px;
730         }
731     }
732     // CSS for the course management pages.
733     #course-category-listings.columns-3 {
734         background-color: @tableBackground;
735         border:0;
736         #category-listing,
737         #course-listing,
738         #course-detail {
739             .fluid-span(12);
740             margin: 0 0 1em 0;
741         }
742     }
744     #page-mod-forum-discuss .discussioncontrols {
745         text-align: right;
746         .discussioncontrol {
747             float: none;
748             width: auto;
749             display: inline-block;
750             margin: 0 3px 0.5em;
751             select,
752             input {
753                 margin-bottom: 0;
754             }
755             &.movediscussion {
756                 margin-right: 0;
757                 padding-right: 0;
758             }
759         }
760     }
762    #page-mod-forum-discuss.dir-rtl .discussioncontrols {
763        text-align: left;
764    }
768 // File Picker.
769 @media (max-width: 768px) {
770     .fp-forminset .control-group .controls {
771         margin-left: 0;
772     }
773     .dir-rtl .fp-formset .control-group {
774         label.control-label {
775             text-align: right;
776             float: none;
777         }
778     }
779     .dir-rtl .fp-forminset .control-group {
780         label.control-label {
781             text-align: right;
782             float: none;
783         }
784         .controls {
785             margin-right: 0;
786         }
787     }