Merge branch 'MDL-42711-master' of git://github.com/nebgor/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     }
54 }
56 @media (max-width: 873px) {
57     .file-picker .fp-repo-area {
58         width: 100%;
59         height: auto;
60         max-height: 220px;
61         y-scroll: auto;
62         float: none;
63         border: 0px;
64     }
65     .file-picker .fp-repo-items {
66         width: 100%;
67         float: none;
68     }
69     .file-picker .fp-login-form .fp-login-input label {
70         text-align: left;
71     }
72     .dir-rtl .file-picker .fp-login-form .fp-login-input label {
73         text-align: right;
74     }
75     .file-picker .fp-content form td {
76         display: block;
77         width: 100%;
78         text-align: left;
79     }
80     .dir-rtl .file-picker .fp-content form td {
81         text-align: right;
82     }
83     .fp-content .mdl-right {
84         text-align: left;
85     }
86     .dir-rtl .fp-content .mdl-right {
87         text-align: right;
88     }
90     .fp-repo-items .fp-navbar {
91         border-top: 1px solid rgb(187, 187, 187);
92     }
93 }
95 // login page
96 @media (min-width: 1200px) {
97     .loginbox.twocolumns .loginpanel {
98         margin-left: 0;
99     }
100     .loginbox.twocolumns .loginpanel,
101     .loginbox.twocolumns .signuppanel {
102         width: 48.717948717948715%;
103        *width: 48.664757228587014%;
104    }
105     // Wider form labels.
106     .form-item .form-label,
107     .mform .fitem div.fitemtitle,
108     .userprofile dl.list dt,
109     .form-horizontal .control-label {
110         width: @horizontalComponentOffset1200 - 20px;
111     }
112     .form-item .form-setting,
113     .form-item .form-description,
114     .mform .fitem .felement,
115     #page-mod-forum-search .c1,
116     .mform .fdescription.required,
117     .userprofile dl.list dd,
118     .form-horizontal .controls {
119         margin-left: @horizontalComponentOffset1200;
120     }
121     .dir-rtl {
122         .form-item .form-setting,
123         .form-item .form-description,
124         .mform .fitem .felement,
125         .mform .fdescription.required,
126         .userprofile dl.list dd,
127         .form-horizontal .controls {
128             margin-right: @horizontalComponentOffset1200;
129         }
130         #page-mod-forum-search .c1 {
131             margin-right: @horizontalComponentOffset1200;
132         }
133     }
134     .path-admin .buttons,
135     .form-buttons {
136         padding-left: @horizontalComponentOffset1200;
137     }
138     .dir-rtl {
139         .path-admin .buttons,
140         .form-buttons {
141             padding-right: @horizontalComponentOffset1200;
142         }
143     }
147 @media (min-width: 980px) {
148     .loginbox.twocolumns .loginpanel {
149         margin-left: 0;
150     }
151     .loginbox.twocolumns .loginpanel,
152     .loginbox.twocolumns .signuppanel {
153         width: 48.617948717948715%;
154        *width: 48.664757228587014%;
155    }
158 @media (min-width: 768px) and (max-width: 979px) {
159     .loginbox.twocolumns .loginpanel {
160           margin-left: 0;
161     }
162     .loginbox.twocolumns .loginpanel,
163     .loginbox.twocolumns .signuppanel {
164         width: 48.61878453038674%;
165         *width: 48.56559304102504%;
166     }
169 @media (max-width: 767px) {
170      .loginbox.twocolumns .loginpanel,
171      .loginbox.twocolumns .signuppanel {
172          display: block;
173          float: none;
174          width: 100%;
175          margin-left: 0;
176          .box-sizing(border-box);
177      }
178  }
180 @media (max-width: 480px) {
181     // make tabs act like nav-stacked
182     // (mostly) copied from bootstrap/navs.less
183     .nav-tabs > li {
184         float: none;
185     }
186     .nav-tabs > li > a {
187         margin-right: 0; // no need for the gap between nav items
188     }
189     .nav-tabs {
190         border-bottom: 0;
191     }
192     .nav-tabs > li > a {
193         border: 1px solid #ddd;
194         .border-radius(0);
195     }
196     .nav-tabs > .active > a,
197     .nav-tabs > .active > a:hover {
198         border: 1px solid #ddd;
199     }
200     .nav-tabs > li:first-child > a {
201         .border-top-radius(4px);
202     }
203     .nav-tabs > li:last-child > a {
204         .border-bottom-radius(4px);
205     }
206     .nav-tabs > li > a:hover,
207     .nav-tabs > li > a:focus {
208         border-color: #ddd;
209         z-index: 2;
210     }
211     .fp-content-center {
212         display: block;
213         vertical-align: top;
214     }
215     .course-content ul.topics li.section,
216     .course-content ul.topics li.section .content,
217     .course-content ul.weeks li.section .content,
218     .course-content ul.weeks li.section,
219     .course-content ul.section {
220         margin-right: 0;
221         margin-left: 0;
222         padding: 0;
223     }
224     .activityinstance {
225         display: block;
226     }
227     .editing .course-content .section .activity {
228         margin-bottom: 0.2em;
229         padding-bottom: 0.2em;
230         border-bottom: thin solid #eee;
231     }
232     .course-content .section .activity .commands {
233         text-align: right;
234     }
235     /** Handles display of the activity chooser on small screens **/
236     .jsenabled .choosercontainer #chooseform .alloptions {
237         max-width: 100%;
238     }
239     .jsenabled .choosercontainer #chooseform .instruction,
240     .jsenabled .choosercontainer #chooseform .typesummary {
241         position:static;
242     }
243     .que .info {
244         float: none;
245         width: auto;
246     }
247     .que .content {
248         margin: 0;
249     }
250     .path-mod-choice .horizontal  .choices .option {
251         display: block;
252     }
253     .path-mod-forum .forumsearch #search {
254         width: 120px;
255     }
256     .path-mod-forum .forumheaderlist .picture {
257         display: none;
258     }
261 // Stuart's 2,1,3 layout
262 @media (min-width : 768px) {
263   .row-fluid .desktop-first-column {
264       margin-left: 0;
265   }
266   #page-navbar .breadcrumb-button {
267       display: inline;
268   }
270 @media (max-width : 767px) {
271   .row-fluid .desktop-first-column {
272       clear: right;
273   }
275 // Forms
276 @media (max-width: 767px) {
277   // Remove the horizontal form styles
278     .form-item .form-label,
279     .mform .fitem div.fitemtitle {
280     // copied from .control-label {
281       float: none;
282       width: auto;
283       padding-top: 0;
284       text-align: left;
285     }
286     .form-item .form-label label{
287         display: inline-block;
288         margin-right: .5em;
289     }
290     .form-item .form-setting .form-checkbox {
291         margin-top: 0;
292     }
293     .form-label span.form-shortname {
294         display: inline-block;
295     }
296     .form-item .form-setting,
297     .mform .fitem .felement,
298     .path-backup .mform .fitem .felement,
299     .mform .fdescription.required,
300     .form-item .form-description {
301       margin-left: 0;
302     }
303     table#form td.submit,
304     .form-buttons,
305     #fitem_id_submitbutton,
306     .fp-content-center form + div,
307     #fgroup_id_buttonar,
308     .form-horizontal .form-actions,
309     .fitem_fsubmit .felement.fsubmit {
310       padding-left: 10px;
311       padding-right: 10px;
312     }
313     #helppopupbox {
314         width: auto !important;
315         left: 0 !important;
316     }
318 // Shrink calender when short on space in block
319 @media (min-width : 768px) and (max-width: 979px) {
320     .block_calendar_month .content,
321     .block .minicalendar td {
322         padding-left: 0;
323         padding-right: 0;
324     }
327 @media (max-width: 979px) {
328     .nav-collapse {
329          height: 0;
330         .nav > li > a {
331             color: @grayDark;
332         }
333         .nav > li > a:hover,
334         .nav > li > a:focus,
335         .dropdown-menu a:hover,
336         .dropdown-menu a:focus,
337         .dropdown-submenu a:focus,
338         .dropdown-submenu a:hover,
339         .dropdown-submenu a:active,
340         .dropdown-menu > li > a:hover,
341         .dropdown-menu > li > a:focus,
342         {
343             background-image: none;
344             color: @grayDark;
345         }
346     }
347     .nav-collapse.active {
348         height: auto;
349     }
350     .path-mod-data .box > table > tbody > tr > td {
351         display: block;
352     }
353     .path-mod-forum .forumheaderlist {
354         thead .header {
355             font-weight: normal;
356             font-size: round(@fontSizeSmall);
357         }
358         .discussion {
359             .author, .replies, .lastpost {
360                 font-size: round(@fontSizeSmall);
361             }
362             .replies .unread a {
363                 padding: 0;
364             }
365         }
366     }
369 @media (max-width: 768px) {
370 // Resize, reflow file-picker on small devices
371    #filesskin .yui3-panel,
372    #filesskin .file-picker.fp-generallayout {
373         width: 100%;
374         left: 0;
375     }
376     .userprofile dl.list {
377     // copied from dl-horizontal in bootstrap/repsonsive.less
378         dt {
379           float: none;
380           clear: none;
381           width: auto;
382           text-align: left;
383         }
384         dd {
385           margin-left: 0;
386         }
387     }
388     // Reset the alignment for required label to display inline on mobile devices
389     #page-mod-wiki-create .mform .fitem div.fitemtitle {
390         float: left;
391     }
393   // GRID & CONTAINERS
394   // -----------------
395   // Remove width from containers
396   .container {
397     width: auto;
398   }
399   // Fluid rows
400   .row-fluid {
401     width: 100%;
402   }
403   .row-fluid .span8.pull-right,
404   .row-fluid .span9.pull-right {
405     float: none;
406   }
407   // Undo negative margin on rows and thumbnails
408   .row {
409     margin-left: 0;
410   }
411   // Make all grid-sized elements block level again
412   [class*="span"],
413   .row-fluid [class*="span"] {
414     float: none;
415     display: block;
416     width: 100%;
417     margin-left: 0;
418     .box-sizing(border-box);
419   }
421   // We need to specify a more specific selector to reset the width for
422   // cases when we have content in the side-pre blockregion but not in the
423   // side-post blockregion as there are more specific selectors in
424   // core.less which take precedence which break responsiveness.
425   .empty-region-side-post.used-region-side-pre {
426       #block-region-side-pre.span4,
427       #region-main.span8.span8 {
428         .fluid-span(12);
429       }
430   }
432   .row-fluid .span12 {
433     width: 100%;
434     .box-sizing(border-box);
435   }
436   .row-fluid [class*="offset"]:first-child {
437     margin-left: 0;
438   }
439   div[role=main] {
440       margin-bottom: 1em;
441   }
442     .coursebox {
443         .info {
444             .name {
445                 a {
446                     background-position: 0 13px;
447                 }
448             }
449         }
450     }
451     .category-browse {
452         .coursebox {
453             .info {
454                 .name {
455                     a {
456                         background-position: 0 13px;
457                     }
458                 }
459             }
460         }
461     }
464 // All widths between 1200px and 1600px
465 @media (min-width: 1200px) and (max-width: 1600px) {
466     // CSS for the course management pages.
467     #course-category-listings.columns-3 {
468         background-color:transparent;
469         border:0;
471         #category-listing,
472         #course-listing {
473             .fluid-span(6);
474             margin-left: @fluidGridGutterWidth;
475             *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
476             &:first-child {
477                 margin-left: 0;
478             }
479         }
480         #course-detail {
481             .fluid-span(12);
482             margin: 1em 0 0;
483         }
484     }
488 // All widths up to 1199px.
489 @media (max-width: 1199px) {
490     // CSS for the course management pages.
491     #course-category-listings.columns-3 {
492         background-color:transparent;
493         border:0;
494         #category-listing,
495         #course-listing,
496         #course-detail {
497             .fluid-span(12);
498             margin: 0 0 1em 0;
499         }
500     }