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