MDL-39158 Increase form label width on wider screens
[moodle.git] / theme / bootstrapbase / less / moodle / responsive.less
CommitLineData
8903b17b
BB
1/* responsive.less */
2
3// Should probably be moved to relevant .less files
4// after 4095 selector issue is solved
5
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 }
31614004
DS
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 }
37
8903b17b
BB
38}
39
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}
51
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}
62
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}
73
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 }
8903b17b
BB
84
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 }
194}
195
196// Stuart's 2,1,3 layout
197@media (min-width : 768px) {
198 .row-fluid .desktop-first-column {
199 margin-left: 0;
200 }
201}
202@media (max-width : 767px) {
203 .row-fluid .desktop-first-column {
204 clear: right;
205 }
206}
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 }
249}
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 }
31614004
DS
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 }
8903b17b
BB
277}
278
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 }
302
303}
304
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 }
335
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 }
373}