Merge branch 'wip-mdl-39955' of git://github.com/rajeshtaneja/moodle
[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 }
bfb1c6d4
JF
17}
18
19@media (min-width: 980px) and (max-width: 1199px) {
31614004
DS
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 }
8d223d71
NK
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 }
31614004
DS
49 .path-admin .buttons,
50 .form-buttons {
51 padding-left: @horizontalComponentOffset980;
52 }
53
8903b17b
BB
54}
55
56// login page
57@media (min-width: 1200px) {
58 .loginbox.twocolumns .loginpanel {
59 margin-left: 0;
60 }
61 .loginbox.twocolumns .loginpanel,
62 .loginbox.twocolumns .signuppanel {
63 width: 48.717948717948715%;
64 *width: 48.664757228587014%;
65 }
bfb1c6d4
JF
66 // Wider form labels.
67 .form-item .form-label,
68 .mform .fitem div.fitemtitle,
69 .userprofile dl.list dt,
70 .form-horizontal .control-label {
71 width: @horizontalComponentOffset1200 - 20px;
72 }
73 .form-item .form-setting,
74 .form-item .form-description,
75 .mform .fitem .felement,
76 #page-mod-forum-search .c1,
77 .mform .fdescription.required,
78 .userprofile dl.list dd,
79 .form-horizontal .controls {
80 margin-left: @horizontalComponentOffset1200;
81 }
8d223d71
NK
82 .dir-rtl {
83 .form-item .form-setting,
84 .form-item .form-description,
85 .mform .fitem .felement,
86 .mform .fdescription.required,
87 .userprofile dl.list dd,
88 .form-horizontal .controls {
89 margin-right: @horizontalComponentOffset1200;
90 }
91 #page-mod-forum-search .c1 {
92 margin-right: @horizontalComponentOffset1200;
93 }
94 }
bfb1c6d4
JF
95 .path-admin .buttons,
96 .form-buttons {
97 padding-left: @horizontalComponentOffset1200;
98 }
8d223d71
NK
99 .dir-rtl {
100 .path-admin .buttons,
101 .form-buttons {
102 padding-right: @horizontalComponentOffset1200;
103 }
104 }
bfb1c6d4 105
8903b17b
BB
106}
107
108@media (min-width: 980px) {
109 .loginbox.twocolumns .loginpanel {
110 margin-left: 0;
111 }
112 .loginbox.twocolumns .loginpanel,
113 .loginbox.twocolumns .signuppanel {
114 width: 48.617948717948715%;
115 *width: 48.664757228587014%;
116 }
117}
118
119@media (min-width: 768px) and (max-width: 979px) {
120 .loginbox.twocolumns .loginpanel {
121 margin-left: 0;
122 }
123 .loginbox.twocolumns .loginpanel,
124 .loginbox.twocolumns .signuppanel {
125 width: 48.61878453038674%;
126 *width: 48.56559304102504%;
127 }
128}
129
130@media (max-width: 767px) {
131 .loginbox.twocolumns .loginpanel,
132 .loginbox.twocolumns .signuppanel {
133 display: block;
134 float: none;
135 width: 100%;
136 margin-left: 0;
137 .box-sizing(border-box);
138 }
139 }
8903b17b
BB
140
141@media (max-width: 480px) {
9c2ec10b
DS
142 // make tabs act like nav-stacked
143 // (mostly) copied from bootstrap/navs.less
144 .nav-tabs > li {
8903b17b
BB
145 float: none;
146 }
9c2ec10b
DS
147 .nav-tabs > li > a {
148 margin-right: 0; // no need for the gap between nav items
149 }
150 .nav-tabs {
151 border-bottom: 0;
152 }
153 .nav-tabs > li > a {
8903b17b
BB
154 border: 1px solid #ddd;
155 .border-radius(0);
156 }
9c2ec10b
DS
157 .nav-tabs > .active > a,
158 .nav-tabs > .active > a:hover {
159 border: 1px solid #ddd;
160 }
161 .nav-tabs > li:first-child > a {
8903b17b
BB
162 .border-top-radius(4px);
163 }
9c2ec10b 164 .nav-tabs > li:last-child > a {
8903b17b
BB
165 .border-bottom-radius(4px);
166 }
9c2ec10b
DS
167 .nav-tabs > li > a:hover,
168 .nav-tabs > li > a:focus {
8903b17b
BB
169 border-color: #ddd;
170 z-index: 2;
171 }
172 .file-picker .fp-repo-items,
173 .file-picker .fp-repo-area {
174 position: relative;
175 display: block;
176 width: auto;
177 top: 0;
178 bottom: 0;
179 border: none;
180 margin: 0;
181 }
182 .file-picker .fp-content {
183 width: 100%;
184 height: 100%;
185 }
186 .fp-content-center {
187 display: block;
188 vertical-align: top;
189 }
190 .fp-upload-form td.mdl-right,
191 .fp-upload-form td.mdl-left,
192 .fp-login-form .input,
193 .file-picker .fp-login-form .fp-login-input label,
194 .file-picker td.label {
195 display: block;
196 text-align: left;
197 }
198 .file-picker .fp-login-form table,
199 .file-picker td,
200 .file-picker td.label,
201 .file-picker .fp-upload-form table {
202 margin: 0;
203 padding: 0;
204 }
205 .course-content ul.topics li.section,
206 .course-content ul.topics li.section .content,
207 .course-content ul.weeks li.section .content,
208 .course-content ul.weeks li.section,
209 .course-content ul.section {
210 margin-right: 0;
211 margin-left: 0;
212 padding: 0;
213 }
214 .activityinstance {
215 display: block;
216 }
217 .editing .course-content .section .activity {
218 margin-bottom: 0.2em;
219 padding-bottom: 0.2em;
220 border-bottom: thin solid #eee;
221 }
222 .course-content .section .activity .commands {
223 display: block;
224 text-align: right;
225 }
226 .jsenabled .visibleifjs.addresourcemodchooser {
227 display: none;
228 }
229 .jsenabled .hiddenifjs.addresourcedropdown {
230 display: block;
231 .iconhelp {
232 display: inline-block;
233 padding: 6px;
234 vertical-align: top;
235 }
236 div.urlselect {
237 display: block;
238 form {
239 margin: 0;
240 }
241 }
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 }
41d64830
JF
256 .path-mod-forum .forumheaderlist .picture {
257 display: none;
258 }
8903b17b
BB
259}
260
261// Stuart's 2,1,3 layout
262@media (min-width : 768px) {
263 .row-fluid .desktop-first-column {
264 margin-left: 0;
265 }
c72106b2
RW
266 #page-navbar .breadcrumb-button {
267 display: inline;
268 }
8903b17b
BB
269}
270@media (max-width : 767px) {
271 .row-fluid .desktop-first-column {
272 clear: right;
273 }
274}
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 }
317}
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 }
325}
326
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
351}
352
353@media (max-width: 768px) {
354// Resize, reflow file-picker on small devices
355 #filesskin .yui3-panel,
356 #filesskin .file-picker.fp-generallayout {
357 width: 100%;
358 left: 0;
359 }
360 .userprofile dl.list {
361 // copied from dl-horizontal in bootstrap/repsonsive.less
362 dt {
363 float: none;
364 clear: none;
365 width: auto;
366 text-align: left;
367 }
368 dd {
369 margin-left: 0;
370 }
371 }
47e00c34
RW
372 // Reset the alignment for required label to display inline on mobile devices
373 #page-mod-wiki-create .mform .fitem div.fitemtitle {
374 float: left;
375 }
376
8903b17b
BB
377// Hide broken drag'n'drop options on touch devices MDL-38371
378// Not a great workaround, landscape iPads are wider than this,
379// and a resized window on a netbook could be smaller, but best
380// we can do with CSS. There might be a JS-based solution.
381 .section .side,
382 .editing_move {
383 display: none;
384 }
385 .activityinstance > a {
386 display: block;
387 }
388
389 // GRID & CONTAINERS
390 // -----------------
391 // Remove width from containers
392 .container {
393 width: auto;
394 }
395 // Fluid rows
396 .row-fluid {
397 width: 100%;
398 }
399 .row-fluid .span8.pull-right,
400 .row-fluid .span9.pull-right {
401 float: none;
402 }
403 // Undo negative margin on rows and thumbnails
404 .row {
405 margin-left: 0;
406 }
407 // Make all grid-sized elements block level again
408 [class*="span"],
409 .row-fluid [class*="span"] {
410 float: none;
411 display: block;
412 width: 100%;
413 margin-left: 0;
414 .box-sizing(border-box);
415 }
416 .row-fluid .span12 {
417 width: 100%;
418 .box-sizing(border-box);
419 }
420 .row-fluid [class*="offset"]:first-child {
421 margin-left: 0;
422 }
423 div[role=main] {
424 margin-bottom: 2em;
425 }
426}