Merge branch 'MDL-40674_master' of https://github.com/nadavkav/moodle
[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     // Login page.
109     .loginbox.twocolumns .loginpanel {
110         margin-left: 0;
111     }
112     .loginbox.twocolumns .loginpanel,
113     .loginbox.twocolumns .signuppanel {
114         width: 48.717948717948715%;
115        *width: 48.664757228587014%;
116    }
117     // Wider form labels.
118     .form-item .form-label,
119     .mform .fitem div.fitemtitle,
120     .userprofile dl.list dt,
121     .form-horizontal .control-label {
122         width: @horizontalComponentOffset1200 - 20px;
123     }
124     .form-item .form-setting,
125     .form-item .form-description,
126     .mform .fitem .felement,
127     #page-mod-forum-search .c1,
128     .mform .fdescription.required,
129     .userprofile dl.list dd,
130     .form-horizontal .controls {
131         margin-left: @horizontalComponentOffset1200;
132     }
133     .dir-rtl {
134         .form-item .form-setting,
135         .form-item .form-description,
136         .mform .fitem .felement,
137         .mform .fdescription.required,
138         .userprofile dl.list dd,
139         .form-horizontal .controls {
140             margin-right: (@horizontalComponentOffset1200 - 100px);
141         }
142         #page-mod-forum-search .c1 {
143             margin-right: @horizontalComponentOffset1200;
144         }
145         .form-item .form-label,
146         .mform .fitem div.fitemtitle,
147         .userprofile dl.list dt,
148         .form-horizontal .control-label {
149             width: (@horizontalComponentOffset1200 - 120px);
150         }
152     }
153     .path-admin .buttons,
154     .form-buttons {
155         padding-left: @horizontalComponentOffset1200;
156     }
157     .dir-rtl {
158         .path-admin .buttons,
159         .form-buttons {
160             padding-right: @horizontalComponentOffset1200;
161         }
162     }
164     // Core empty block regions.
165     .fluid-span (@columns) {
166         .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
167     }
168     .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
169     .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
170         #region-main.span8 {
171             /** increase the span size by 1 **/
172             .fluid-span(9);
173         }
174         #block-region-side-pre.span4 {
175             /** decrease the span size by 1 **/
176             .fluid-span(3);
177         }
178     }
181 @media (min-width: 980px) {
182     .loginbox.twocolumns .loginpanel {
183         margin-left: 0;
184     }
185     .loginbox.twocolumns .loginpanel,
186     .loginbox.twocolumns .signuppanel {
187         width: 48.617948717948715%;
188        *width: 48.664757228587014%;
189    }
192 @media (min-width: 768px) and (max-width: 979px) {
193     // Login page.
194     .loginbox.twocolumns .loginpanel {
195           margin-left: 0;
196     }
197     .loginbox.twocolumns .loginpanel,
198     .loginbox.twocolumns .signuppanel {
199         width: 48.61878453038674%;
200         *width: 48.56559304102504%;
201     }
202     // Core empty block regions.
203     .fluid-span (@columns) {
204         .fluid-span-full(@columns, @fluidGridColumnWidth768, @fluidGridGutterWidth768);
205     }
206     .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
207     .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
208         #region-main.span8 {
209             /** increase the span size by 1 **/
210             .fluid-span(9);
211         }
212         #block-region-side-pre.span4 {
213             /** decrease the span size by 1 **/
214             .fluid-span(3);
215         }
216     }
219 @media (max-width: 767px) {
220      .loginbox.twocolumns .loginpanel,
221      .loginbox.twocolumns .signuppanel {
222          display: block;
223          float: none;
224          width: 100%;
225          margin-left: 0;
226          .box-sizing(border-box);
227      }
228  }
230 @media (max-width: 480px) {
231     // make tabs act like nav-stacked
232     // (mostly) copied from bootstrap/navs.less
233     .nav-tabs > li {
234         float: none;
235     }
236     .nav-tabs > li > a {
237         margin-right: 0; // no need for the gap between nav items
238     }
239     .nav-tabs {
240         border-bottom: 0;
241     }
242     .nav-tabs > li > a {
243         border: 1px solid #ddd;
244         .border-radius(0);
245     }
246     .nav-tabs > .active > a,
247     .nav-tabs > .active > a:hover {
248         border: 1px solid #ddd;
249     }
250     .nav-tabs > li:first-child > a {
251         .border-top-radius(4px);
252     }
253     .nav-tabs > li:last-child > a {
254         .border-bottom-radius(4px);
255     }
256     .nav-tabs > li > a:hover,
257     .nav-tabs > li > a:focus {
258         border-color: #ddd;
259         z-index: 2;
260     }
261     .fp-content-center {
262         display: block;
263         vertical-align: top;
264     }
265     .course-content ul.topics li.section,
266     .course-content ul.topics li.section .content,
267     .course-content ul.weeks li.section .content,
268     .course-content ul.weeks li.section,
269     .course-content ul.section {
270         margin-right: 0;
271         margin-left: 0;
272         padding: 0;
273     }
274     .activityinstance {
275         display: block;
276     }
277     .editing .course-content .section .activity {
278         margin-bottom: 0.2em;
279         padding-bottom: 0.2em;
280         border-bottom: thin solid #eee;
281     }
282     .course-content .section .activity .commands {
283         text-align: right;
284     }
285     /** Handles display of the activity chooser on small screens **/
286     .jsenabled .choosercontainer #chooseform .alloptions {
287         max-width: 100%;
288     }
289     .jsenabled .choosercontainer #chooseform .instruction,
290     .jsenabled .choosercontainer #chooseform .typesummary {
291         position:static;
292     }
293     .que .info {
294         float: none;
295         width: auto;
296     }
297     .que .content {
298         margin: 0;
299     }
300     .path-mod-choice .horizontal  .choices .option {
301         display: block;
302     }
303     .path-mod-forum .forumsearch #search {
304         width: 120px;
305     }
306     .path-mod-forum .forumheaderlist .picture {
307         display: none;
308     }
311 // Stuart's 2,1,3 layout
312 @media (min-width : 768px) {
313   .row-fluid .desktop-first-column {
314       margin-left: 0;
315   }
316   #page-navbar .breadcrumb-button {
317       display: inline;
318   }
320 @media (max-width : 767px) {
321   .row-fluid .desktop-first-column {
322       clear: right;
323   }
325 // Forms
326 @media (max-width: 767px) {
327   // Remove the horizontal form styles
328     .form-item .form-label,
329     .mform .fitem div.fitemtitle {
330     // copied from .control-label {
331       float: none;
332       width: auto;
333       padding-top: 0;
334       text-align: left;
335     }
336     .form-item .form-label label{
337         display: inline-block;
338         margin-right: .5em;
339     }
340     .form-item .form-setting .form-checkbox {
341         margin-top: 0;
342     }
343     .form-label span.form-shortname {
344         display: inline-block;
345     }
346     .form-item .form-setting,
347     .mform .fitem .felement,
348     .path-backup .mform .fitem .felement,
349     .mform .fdescription.required,
350     .form-item .form-description {
351       margin-left: 0;
352     }
353     table#form td.submit,
354     .form-buttons,
355     #fitem_id_submitbutton,
356     .fp-content-center form + div,
357     #fgroup_id_buttonar,
358     .form-horizontal .form-actions,
359     .fitem_fsubmit .felement.fsubmit {
360       padding-left: 10px;
361       padding-right: 10px;
362     }
363     #helppopupbox {
364         width: auto !important;
365         left: 0 !important;
366     }
368 // Shrink calender when short on space in block
369 @media (min-width : 768px) and (max-width: 979px) {
370     .block_calendar_month .content,
371     .block .minicalendar td {
372         padding-left: 0;
373         padding-right: 0;
374     }
377 .dir-rtl {
378     .dropdown-menu {
379         right:0;
380         left:auto;
381     }
382     .navbar .nav>li>.dropdown-menu:before {
383         right:9px;
384         left:auto;
385     }
386     .navbar .nav>li>.dropdown-menu:after {
387         right: 10px;
388         left:auto;
389     }
390     .dropdown-submenu>a:after {
391         margin-right: -10px;
392         margin-left: 0;
393         border-right-color: #ccc;
394         border-left-color: transparent;
395         border-width: 5px 5px 5px 0px;
396     }
397     .dropdown-submenu>.dropdown-menu {
398         right:100%;
399         left:auto;
400     }
403 @media (max-width: 979px) {
404     .nav-collapse {
405          height: 0;
406         .nav > li > a {
407             color: @grayDark;
408         }
409         .nav > li > a:hover,
410         .nav > li > a:focus,
411         .dropdown-menu a:hover,
412         .dropdown-menu a:focus,
413         .dropdown-submenu a:focus,
414         .dropdown-submenu a:hover,
415         .dropdown-submenu a:active,
416         .dropdown-menu > li > a:hover,
417         .dropdown-menu > li > a:focus,
418         {
419             background-image: none;
420             color: @grayDark;
421         }
422     }
423     .nav-collapse.active {
424         height: auto;
425     }
426     .path-mod-data .box > table > tbody > tr > td {
427         display: block;
428     }
429     .path-mod-forum .forumheaderlist {
430         thead .header {
431             font-weight: normal;
432             font-size: round(@fontSizeSmall);
433         }
434         .discussion {
435             .author, .replies, .lastpost {
436                 font-size: round(@fontSizeSmall);
437             }
438             .replies .unread a {
439                 padding: 0;
440             }
441         }
442     }
445 @media (max-width: 767px) {
446 // Resize, reflow file-picker on small devices
447    #filesskin .yui3-panel,
448    #filesskin .file-picker.fp-generallayout {
449         width: 100%;
450         left: 0;
451     }
452     .userprofile dl.list {
453     // copied from dl-horizontal in bootstrap/repsonsive.less
454         dt {
455           float: none;
456           clear: none;
457           width: auto;
458           text-align: left;
459         }
460         dd {
461           margin-left: 0;
462         }
463     }
464     // Reset the alignment for required label to display inline on mobile devices
465     #page-mod-wiki-create .mform .fitem div.fitemtitle {
466         float: left;
467     }
469   // GRID & CONTAINERS
470   // -----------------
471   // Remove width from containers
472   .container {
473     width: auto;
474   }
475   // Fluid rows
476   .row-fluid {
477     width: 100%;
478   }
479   .row-fluid .span8.pull-right,
480   .row-fluid .span9.pull-right {
481     float: none;
482   }
483   // Undo negative margin on rows and thumbnails
484   .row {
485     margin-left: 0;
486   }
487   // Make all grid-sized elements block level again
488   [class*="span"],
489   .row-fluid [class*="span"] {
490     float: none;
491     display: block;
492     width: 100%;
493     margin-left: 0;
494     .box-sizing(border-box);
495   }
497     // We need to specify a more specific selector to reset the width for
498     // cases when we have content in the side-pre blockregion but not in the
499     // side-post blockregion as there are more specific selectors in
500     // core.less which take precedence which break responsiveness.
501     .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
502     .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
503         #block-region-side-pre.span4,
504         #region-main.span8 {
505             .fluid-span(12);
506         }
507     }
509   .row-fluid .span12 {
510     width: 100%;
511     .box-sizing(border-box);
512   }
513   .row-fluid [class*="offset"]:first-child {
514     margin-left: 0;
515   }
516   div[role=main] {
517       margin-bottom: 1em;
518   }
519     .coursebox {
520         .info {
521             .name {
522                 a {
523                     background-position: 0 13px;
524                 }
525             }
526         }
527     }
528     .category-browse {
529         .coursebox {
530             .info {
531                 .name {
532                     a {
533                         background-position: 0 13px;
534                     }
535                 }
536             }
537         }
538     }
541 // All widths between 1200px and 1600px
542 @media (min-width: 1200px) and (max-width: 1600px) {
543     .fluid-span (@columns) {
544         .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
545     }
546     // CSS for the course management pages.
547     #course-category-listings.columns-3 {
548         background-color: @tableBackground;
549         border:0;
551         #category-listing,
552         #course-listing {
553             .fluid-span(6);
554             margin-left: @fluidGridGutterWidth1200;
555             *margin-left: @fluidGridGutterWidth1200 - (.5 / @gridRowWidth * 100 * 1%);
556             &:first-child {
557                 margin-left: 0;
558             }
559         }
560         #course-detail {
561             .fluid-span(12);
562             margin: 1em 0 0;
563         }
564     }
567 // All widths up to 1199px.
568 @media (max-width: 1199px) {
569     // CSS for the course management pages.
570     #course-category-listings.columns-3 {
571         background-color: @tableBackground;
572         border:0;
573         #category-listing,
574         #course-listing,
575         #course-detail {
576             .fluid-span(12);
577             margin: 0 0 1em 0;
578         }
579     }
581     #page-mod-forum-discuss .discussioncontrols {
582         text-align: right;
583         .discussioncontrol {
584             float: none;
585             width: auto;
586             display: inline-block;
587             margin: 0 3px 0.5em;
588             select,
589             input {
590                 margin-bottom: 0;
591             }
592             &.movediscussion {
593                 margin-right: 0;
594                 padding-right: 0;
595             }
596         }
597     }
599    #page-mod-forum-discuss.dir-rtl .discussioncontrols {
600        text-align: left;
601    }
605 // File Picker.
606 @media (max-width: 768px) {
607     .fp-forminset .control-group .controls {
608         margin-left: 0;
609     }
610     .dir-rtl .fp-formset .control-group {
611         label.control-label {
612             text-align: right;
613             float: none;
614         }
615     }
616     .dir-rtl .fp-forminset .control-group {
617         label.control-label {
618             text-align: right;
619             float: none;
620         }
621         .controls {
622             margin-right: 0;
623         }
624     }