MDL-39158 Increase form label width on wider screens
[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     // Wider form labels.
18     .form-item .form-label,
19     .mform .fitem div.fitemtitle,
20     .userprofile dl.list dt,
21     .form-horizontal .control-label {
22         width: @horizontalComponentOffset980 - 20px;
23     }
24     .form-item .form-setting,
25     .form-item .form-description,
26     .mform .fitem .felement,
27     #page-mod-forum-search .c1,
28     .mform .fdescription.required,
29     .userprofile dl.list dd,
30     .form-horizontal .controls {
31         margin-left: @horizontalComponentOffset980;
32     }
33     .path-admin .buttons,
34     .form-buttons {
35         padding-left: @horizontalComponentOffset980;
36     }
38 }
40 // login page
41 @media (min-width: 1200px) {
42     .loginbox.twocolumns .loginpanel {
43         margin-left: 0;
44     }
45     .loginbox.twocolumns .loginpanel,
46     .loginbox.twocolumns .signuppanel {
47         width: 48.717948717948715%;
48        *width: 48.664757228587014%;
49    }
50 }
52 @media (min-width: 980px) {
53     .loginbox.twocolumns .loginpanel {
54         margin-left: 0;
55     }
56     .loginbox.twocolumns .loginpanel,
57     .loginbox.twocolumns .signuppanel {
58         width: 48.617948717948715%;
59        *width: 48.664757228587014%;
60    }
61 }
63 @media (min-width: 768px) and (max-width: 979px) {
64     .loginbox.twocolumns .loginpanel {
65           margin-left: 0;
66     }
67     .loginbox.twocolumns .loginpanel,
68     .loginbox.twocolumns .signuppanel {
69         width: 48.61878453038674%;
70         *width: 48.56559304102504%;
71     }
72 }
74 @media (max-width: 767px) {
75      .loginbox.twocolumns .loginpanel,
76      .loginbox.twocolumns .signuppanel {
77          display: block;
78          float: none;
79          width: 100%;
80          margin-left: 0;
81          .box-sizing(border-box);
82      }
83  }
85 @media (max-width: 480px) {
86     // copied from tabs.less stacked-navs
87     .tabtree > ul {
88         border: none;
89     }
90     .tabtree > ul > li {
91         float: none;
92     }
93     .tabtree > ul > li > a {
94         border: 1px solid #ddd;
95         .border-radius(0);
96     }
97     .tabtree > ul > li.first > a {
98         .border-top-radius(4px);
99     }
100     .tabtree > ul > li.last > a,
101     .tabtree > ul > li.last > a:hover {
102         border: 1px solid #ddd;
103         .border-bottom-radius(4px);
104     }
105     .tabtree > ul > li > a:hover,
106     .tabtree > ul > li > a:focus {
107         border-color: #ddd;
108         z-index: 2;
109     }
110     .file-picker .fp-repo-items,
111     .file-picker .fp-repo-area {
112         position: relative;
113         display: block;
114         width: auto;
115         top: 0;
116         bottom: 0;
117         border: none;
118         margin: 0;
119     }
120     .file-picker .fp-content {
121         width: 100%;
122         height: 100%;
123     }
124     .fp-content-center {
125         display: block;
126         vertical-align: top;
127     }
128     .fp-upload-form td.mdl-right,
129     .fp-upload-form td.mdl-left,
130     .fp-login-form .input,
131     .file-picker .fp-login-form .fp-login-input label,
132     .file-picker td.label {
133         display: block;
134         text-align: left;
135     }
136     .file-picker .fp-login-form table,
137     .file-picker td,
138     .file-picker td.label,
139     .file-picker .fp-upload-form table {
140             margin: 0;
141             padding: 0;
142     }
143     .course-content ul.topics li.section,
144     .course-content ul.topics li.section .content,
145     .course-content ul.weeks li.section .content,
146     .course-content ul.weeks li.section,
147     .course-content ul.section {
148         margin-right: 0;
149         margin-left: 0;
150         padding: 0;
151     }
152     .activityinstance {
153         display: block;
154     }
155     .editing .course-content .section .activity {
156         margin-bottom: 0.2em;
157         padding-bottom: 0.2em;
158         border-bottom: thin solid #eee;
159     }
160     .course-content .section .activity .commands {
161         display: block;
162         text-align: right;
163     }
164     .jsenabled .visibleifjs.addresourcemodchooser {
165         display: none;
166     }
167     .jsenabled .hiddenifjs.addresourcedropdown {
168         display: block;
169         .iconhelp {
170             display: inline-block;
171             padding: 6px;
172             vertical-align: top;
173         }
174         div.urlselect {
175             display: block;
176             form {
177                 margin: 0;
178             }
179         }
180     }
181     .que .info {
182         float: none;
183         width: auto;
184     }
185     .que .content {
186         margin: 0;
187     }
188     .path-mod-choice .horizontal  .choices .option {
189         display: block;
190     }
191     .path-mod-forum .forumsearch #search {
192         width: 120px;
193     }
196 // Stuart's 2,1,3 layout
197 @media (min-width : 768px) {
198   .row-fluid .desktop-first-column {
199       margin-left: 0;
200   }
202 @media (max-width : 767px) {
203   .row-fluid .desktop-first-column {
204       clear: right;
205   }
207 // Forms
208 @media (max-width: 767px) {
209   // Remove the horizontal form styles
210     .form-item .form-label,
211     .mform .fitem div.fitemtitle {
212     // copied from .control-label {
213       float: none;
214       width: auto;
215       padding-top: 0;
216       text-align: left;
217     }
218     .form-item .form-label label{
219         display: inline-block;
220         margin-right: .5em;
221     }
222     .form-item .form-setting .form-checkbox {
223         margin-top: 0;
224     }
225     .form-label span.form-shortname {
226         display: inline-block;
227     }
228     .form-item .form-setting,
229     .mform .fitem .felement,
230     .path-backup .mform .fitem .felement,
231     .mform .fdescription.required,
232     .form-item .form-description {
233       margin-left: 0;
234     }
235     table#form td.submit,
236     .form-buttons,
237     #fitem_id_submitbutton,
238     .fp-content-center form + div,
239     #fgroup_id_buttonar,
240     .form-horizontal .form-actions,
241     .fitem_fsubmit .felement.fsubmit {
242       padding-left: 10px;
243       padding-right: 10px;
244     }
245     #helppopupbox {
246         width: auto !important;
247         left: 0 !important;
248     }
250 // Shrink calender when short on space in block
251 @media (min-width : 768px) and (max-width: 979px) {
252     .block_calendar_month .content,
253     .block .minicalendar td {
254         padding-left: 0;
255         padding-right: 0;
256     }
257     // Wider form labels.
258     .form-item .form-label,
259     .mform .fitem div.fitemtitle,
260     .userprofile dl.list dt,
261     .form-horizontal .control-label {
262         width: @horizontalComponentOffset768 - 20px;
263     }
264     .form-item .form-setting,
265     .form-item .form-description,
266     .mform .fitem .felement,
267     #page-mod-forum-search .c1,
268     .mform .fdescription.required,
269     .userprofile dl.list dd,
270     .form-horizontal .controls {
271         margin-left: @horizontalComponentOffset768;
272     }
273     .path-admin .buttons,
274     .form-buttons {
275         padding-left: @horizontalComponentOffset768;
276     }
279 @media (max-width: 979px) {
280     .nav-collapse {
281          height: 0;
282         .nav > li > a {
283             color: @grayDark;
284         }
285         .nav > li > a:hover,
286         .nav > li > a:focus,
287         .dropdown-menu a:hover,
288         .dropdown-menu a:focus,
289         .dropdown-submenu a:focus,
290         .dropdown-submenu a:hover,
291         .dropdown-submenu a:active,
292         .dropdown-menu > li > a:hover,
293         .dropdown-menu > li > a:focus,
294         {
295             background-image: none;
296             color: @grayDark;
297         }
298     }
299     .nav-collapse.active {
300         height: auto;
301     }
305 @media (max-width: 768px) {
306 // Resize, reflow file-picker on small devices
307    #filesskin .yui3-panel,
308    #filesskin .file-picker.fp-generallayout {
309         width: 100%;
310         left: 0;
311     }
312     .userprofile dl.list {
313     // copied from dl-horizontal in bootstrap/repsonsive.less
314         dt {
315           float: none;
316           clear: none;
317           width: auto;
318           text-align: left;
319         }
320         dd {
321           margin-left: 0;
322         }
323     }
324 // Hide broken drag'n'drop options on touch devices MDL-38371
325 // Not a great workaround, landscape iPads are wider than this,
326 // and a resized window on a netbook could be smaller, but best
327 // we can do with CSS. There might be a JS-based solution.
328     .section .side,
329     .editing_move {
330         display: none;
331     }
332     .activityinstance > a {
333         display: block;
334     }
336   // GRID & CONTAINERS
337   // -----------------
338   // Remove width from containers
339   .container {
340     width: auto;
341   }
342   // Fluid rows
343   .row-fluid {
344     width: 100%;
345   }
346   .row-fluid .span8.pull-right,
347   .row-fluid .span9.pull-right {
348     float: none;
349   }
350   // Undo negative margin on rows and thumbnails
351   .row {
352     margin-left: 0;
353   }
354   // Make all grid-sized elements block level again
355   [class*="span"],
356   .row-fluid [class*="span"] {
357     float: none;
358     display: block;
359     width: 100%;
360     margin-left: 0;
361     .box-sizing(border-box);
362   }
363   .row-fluid .span12 {
364     width: 100%;
365     .box-sizing(border-box);
366   }
367   .row-fluid [class*="offset"]:first-child {
368     margin-left: 0;
369   }
370   div[role=main] {
371       margin-bottom: 2em;
372   }