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 }
4c512690
SH
236 /** Handles display of the activity chooser on small screens **/
237 .jsenabled .choosercontainer #chooseform .alloptions {
238 max-width: 100%;
8903b17b 239 }
4c512690
SH
240 .jsenabled .choosercontainer #chooseform .instruction,
241 .jsenabled .choosercontainer #chooseform .typesummary {
242 position:static;
8903b17b
BB
243 }
244 .que .info {
245 float: none;
246 width: auto;
247 }
248 .que .content {
249 margin: 0;
250 }
251 .path-mod-choice .horizontal .choices .option {
252 display: block;
253 }
254 .path-mod-forum .forumsearch #search {
255 width: 120px;
256 }
41d64830
JF
257 .path-mod-forum .forumheaderlist .picture {
258 display: none;
259 }
8903b17b
BB
260}
261
262// Stuart's 2,1,3 layout
263@media (min-width : 768px) {
264 .row-fluid .desktop-first-column {
265 margin-left: 0;
266 }
c72106b2
RW
267 #page-navbar .breadcrumb-button {
268 display: inline;
269 }
8903b17b
BB
270}
271@media (max-width : 767px) {
272 .row-fluid .desktop-first-column {
273 clear: right;
274 }
275}
276// Forms
277@media (max-width: 767px) {
278 // Remove the horizontal form styles
279 .form-item .form-label,
280 .mform .fitem div.fitemtitle {
281 // copied from .control-label {
282 float: none;
283 width: auto;
284 padding-top: 0;
285 text-align: left;
286 }
287 .form-item .form-label label{
288 display: inline-block;
289 margin-right: .5em;
290 }
291 .form-item .form-setting .form-checkbox {
292 margin-top: 0;
293 }
294 .form-label span.form-shortname {
295 display: inline-block;
296 }
297 .form-item .form-setting,
298 .mform .fitem .felement,
299 .path-backup .mform .fitem .felement,
300 .mform .fdescription.required,
301 .form-item .form-description {
302 margin-left: 0;
303 }
304 table#form td.submit,
305 .form-buttons,
306 #fitem_id_submitbutton,
307 .fp-content-center form + div,
308 #fgroup_id_buttonar,
309 .form-horizontal .form-actions,
310 .fitem_fsubmit .felement.fsubmit {
311 padding-left: 10px;
312 padding-right: 10px;
313 }
314 #helppopupbox {
315 width: auto !important;
316 left: 0 !important;
317 }
318}
319// Shrink calender when short on space in block
320@media (min-width : 768px) and (max-width: 979px) {
321 .block_calendar_month .content,
322 .block .minicalendar td {
323 padding-left: 0;
324 padding-right: 0;
325 }
326}
327
328@media (max-width: 979px) {
329 .nav-collapse {
330 height: 0;
331 .nav > li > a {
332 color: @grayDark;
333 }
334 .nav > li > a:hover,
335 .nav > li > a:focus,
336 .dropdown-menu a:hover,
337 .dropdown-menu a:focus,
338 .dropdown-submenu a:focus,
339 .dropdown-submenu a:hover,
340 .dropdown-submenu a:active,
341 .dropdown-menu > li > a:hover,
342 .dropdown-menu > li > a:focus,
343 {
344 background-image: none;
345 color: @grayDark;
346 }
347 }
348 .nav-collapse.active {
349 height: auto;
350 }
351
352}
353
354@media (max-width: 768px) {
355// Resize, reflow file-picker on small devices
356 #filesskin .yui3-panel,
357 #filesskin .file-picker.fp-generallayout {
358 width: 100%;
359 left: 0;
360 }
361 .userprofile dl.list {
362 // copied from dl-horizontal in bootstrap/repsonsive.less
363 dt {
364 float: none;
365 clear: none;
366 width: auto;
367 text-align: left;
368 }
369 dd {
370 margin-left: 0;
371 }
372 }
47e00c34
RW
373 // Reset the alignment for required label to display inline on mobile devices
374 #page-mod-wiki-create .mform .fitem div.fitemtitle {
375 float: left;
376 }
377
8903b17b
BB
378// Hide broken drag'n'drop options on touch devices MDL-38371
379// Not a great workaround, landscape iPads are wider than this,
380// and a resized window on a netbook could be smaller, but best
381// we can do with CSS. There might be a JS-based solution.
382 .section .side,
383 .editing_move {
384 display: none;
385 }
386 .activityinstance > a {
387 display: block;
388 }
389
390 // GRID & CONTAINERS
391 // -----------------
392 // Remove width from containers
393 .container {
394 width: auto;
395 }
396 // Fluid rows
397 .row-fluid {
398 width: 100%;
399 }
400 .row-fluid .span8.pull-right,
401 .row-fluid .span9.pull-right {
402 float: none;
403 }
404 // Undo negative margin on rows and thumbnails
405 .row {
406 margin-left: 0;
407 }
408 // Make all grid-sized elements block level again
409 [class*="span"],
410 .row-fluid [class*="span"] {
411 float: none;
412 display: block;
413 width: 100%;
414 margin-left: 0;
415 .box-sizing(border-box);
416 }
417 .row-fluid .span12 {
418 width: 100%;
419 .box-sizing(border-box);
420 }
421 .row-fluid [class*="offset"]:first-child {
422 margin-left: 0;
423 }
424 div[role=main] {
425 margin-bottom: 2em;
426 }
427}