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