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