weekly release 2.6dev
[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
d61c96b6
DW
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 }
89
90 .fp-repo-items .fp-navbar {
91 border-top: 1px solid rgb(187, 187, 187);
92 }
93}
94
8903b17b
BB
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 }
bfb1c6d4
JF
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 }
8d223d71
NK
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 }
bfb1c6d4
JF
134 .path-admin .buttons,
135 .form-buttons {
136 padding-left: @horizontalComponentOffset1200;
137 }
8d223d71
NK
138 .dir-rtl {
139 .path-admin .buttons,
140 .form-buttons {
141 padding-right: @horizontalComponentOffset1200;
142 }
143 }
bfb1c6d4 144
8903b17b
BB
145}
146
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 }
156}
157
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 }
167}
168
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 }
8903b17b
BB
179
180@media (max-width: 480px) {
9c2ec10b
DS
181 // make tabs act like nav-stacked
182 // (mostly) copied from bootstrap/navs.less
183 .nav-tabs > li {
8903b17b
BB
184 float: none;
185 }
9c2ec10b
DS
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 {
8903b17b
BB
193 border: 1px solid #ddd;
194 .border-radius(0);
195 }
9c2ec10b
DS
196 .nav-tabs > .active > a,
197 .nav-tabs > .active > a:hover {
198 border: 1px solid #ddd;
199 }
200 .nav-tabs > li:first-child > a {
8903b17b
BB
201 .border-top-radius(4px);
202 }
9c2ec10b 203 .nav-tabs > li:last-child > a {
8903b17b
BB
204 .border-bottom-radius(4px);
205 }
9c2ec10b
DS
206 .nav-tabs > li > a:hover,
207 .nav-tabs > li > a:focus {
8903b17b
BB
208 border-color: #ddd;
209 z-index: 2;
210 }
8903b17b
BB
211 .fp-content-center {
212 display: block;
213 vertical-align: top;
214 }
8903b17b
BB
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 display: block;
234 text-align: right;
235 }
236 .jsenabled .visibleifjs.addresourcemodchooser {
237 display: none;
238 }
239 .jsenabled .hiddenifjs.addresourcedropdown {
240 display: block;
241 .iconhelp {
242 display: inline-block;
243 padding: 6px;
244 vertical-align: top;
245 }
246 div.urlselect {
247 display: block;
248 form {
249 margin: 0;
250 }
251 }
252 }
253 .que .info {
254 float: none;
255 width: auto;
256 }
257 .que .content {
258 margin: 0;
259 }
260 .path-mod-choice .horizontal .choices .option {
261 display: block;
262 }
263 .path-mod-forum .forumsearch #search {
264 width: 120px;
265 }
41d64830
JF
266 .path-mod-forum .forumheaderlist .picture {
267 display: none;
268 }
8903b17b
BB
269}
270
271// Stuart's 2,1,3 layout
272@media (min-width : 768px) {
273 .row-fluid .desktop-first-column {
274 margin-left: 0;
275 }
c72106b2
RW
276 #page-navbar .breadcrumb-button {
277 display: inline;
278 }
8903b17b
BB
279}
280@media (max-width : 767px) {
281 .row-fluid .desktop-first-column {
282 clear: right;
283 }
284}
285// Forms
286@media (max-width: 767px) {
287 // Remove the horizontal form styles
288 .form-item .form-label,
289 .mform .fitem div.fitemtitle {
290 // copied from .control-label {
291 float: none;
292 width: auto;
293 padding-top: 0;
294 text-align: left;
295 }
296 .form-item .form-label label{
297 display: inline-block;
298 margin-right: .5em;
299 }
300 .form-item .form-setting .form-checkbox {
301 margin-top: 0;
302 }
303 .form-label span.form-shortname {
304 display: inline-block;
305 }
306 .form-item .form-setting,
307 .mform .fitem .felement,
308 .path-backup .mform .fitem .felement,
309 .mform .fdescription.required,
310 .form-item .form-description {
311 margin-left: 0;
312 }
313 table#form td.submit,
314 .form-buttons,
315 #fitem_id_submitbutton,
316 .fp-content-center form + div,
317 #fgroup_id_buttonar,
318 .form-horizontal .form-actions,
319 .fitem_fsubmit .felement.fsubmit {
320 padding-left: 10px;
321 padding-right: 10px;
322 }
323 #helppopupbox {
324 width: auto !important;
325 left: 0 !important;
326 }
327}
328// Shrink calender when short on space in block
329@media (min-width : 768px) and (max-width: 979px) {
330 .block_calendar_month .content,
331 .block .minicalendar td {
332 padding-left: 0;
333 padding-right: 0;
334 }
335}
336
337@media (max-width: 979px) {
338 .nav-collapse {
339 height: 0;
340 .nav > li > a {
341 color: @grayDark;
342 }
343 .nav > li > a:hover,
344 .nav > li > a:focus,
345 .dropdown-menu a:hover,
346 .dropdown-menu a:focus,
347 .dropdown-submenu a:focus,
348 .dropdown-submenu a:hover,
349 .dropdown-submenu a:active,
350 .dropdown-menu > li > a:hover,
351 .dropdown-menu > li > a:focus,
352 {
353 background-image: none;
354 color: @grayDark;
355 }
356 }
357 .nav-collapse.active {
358 height: auto;
359 }
360
361}
362
363@media (max-width: 768px) {
364// Resize, reflow file-picker on small devices
365 #filesskin .yui3-panel,
366 #filesskin .file-picker.fp-generallayout {
367 width: 100%;
368 left: 0;
369 }
370 .userprofile dl.list {
371 // copied from dl-horizontal in bootstrap/repsonsive.less
372 dt {
373 float: none;
374 clear: none;
375 width: auto;
376 text-align: left;
377 }
378 dd {
379 margin-left: 0;
380 }
381 }
47e00c34
RW
382 // Reset the alignment for required label to display inline on mobile devices
383 #page-mod-wiki-create .mform .fitem div.fitemtitle {
384 float: left;
385 }
386
8903b17b
BB
387// Hide broken drag'n'drop options on touch devices MDL-38371
388// Not a great workaround, landscape iPads are wider than this,
389// and a resized window on a netbook could be smaller, but best
390// we can do with CSS. There might be a JS-based solution.
391 .section .side,
392 .editing_move {
393 display: none;
394 }
395 .activityinstance > a {
396 display: block;
397 }
398
399 // GRID & CONTAINERS
400 // -----------------
401 // Remove width from containers
402 .container {
403 width: auto;
404 }
405 // Fluid rows
406 .row-fluid {
407 width: 100%;
408 }
409 .row-fluid .span8.pull-right,
410 .row-fluid .span9.pull-right {
411 float: none;
412 }
413 // Undo negative margin on rows and thumbnails
414 .row {
415 margin-left: 0;
416 }
417 // Make all grid-sized elements block level again
418 [class*="span"],
419 .row-fluid [class*="span"] {
420 float: none;
421 display: block;
422 width: 100%;
423 margin-left: 0;
424 .box-sizing(border-box);
425 }
426 .row-fluid .span12 {
427 width: 100%;
428 .box-sizing(border-box);
429 }
430 .row-fluid [class*="offset"]:first-child {
431 margin-left: 0;
432 }
433 div[role=main] {
434 margin-bottom: 2em;
435 }
436}