MDL-42682 theme_bootstrapbase: fixed forum search alignment
[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 {
8903b17b
BB
233 text-align: right;
234 }
4c512690
SH
235 /** Handles display of the activity chooser on small screens **/
236 .jsenabled .choosercontainer #chooseform .alloptions {
237 max-width: 100%;
8903b17b 238 }
4c512690
SH
239 .jsenabled .choosercontainer #chooseform .instruction,
240 .jsenabled .choosercontainer #chooseform .typesummary {
241 position:static;
8903b17b
BB
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 }
7e7e8fd3
AB
350 .path-mod-data .box > table > tbody > tr > td {
351 display: block;
352 }
9c53c70c
AB
353 .path-mod-forum .forumheaderlist {
354 thead .header {
355 font-weight: normal;
356 font-size: round(@fontSizeSmall);
357 }
358 .discussion {
359 .author, .replies, .lastpost {
360 font-size: round(@fontSizeSmall);
361 }
362 .replies .unread a {
363 padding: 0;
364 }
365 }
366 }
8903b17b
BB
367}
368
369@media (max-width: 768px) {
370// Resize, reflow file-picker on small devices
371 #filesskin .yui3-panel,
372 #filesskin .file-picker.fp-generallayout {
373 width: 100%;
374 left: 0;
375 }
376 .userprofile dl.list {
377 // copied from dl-horizontal in bootstrap/repsonsive.less
378 dt {
379 float: none;
380 clear: none;
381 width: auto;
382 text-align: left;
383 }
384 dd {
385 margin-left: 0;
386 }
387 }
47e00c34
RW
388 // Reset the alignment for required label to display inline on mobile devices
389 #page-mod-wiki-create .mform .fitem div.fitemtitle {
390 float: left;
391 }
392
8903b17b
BB
393 // GRID & CONTAINERS
394 // -----------------
395 // Remove width from containers
396 .container {
397 width: auto;
398 }
399 // Fluid rows
400 .row-fluid {
401 width: 100%;
402 }
403 .row-fluid .span8.pull-right,
404 .row-fluid .span9.pull-right {
405 float: none;
406 }
407 // Undo negative margin on rows and thumbnails
408 .row {
409 margin-left: 0;
410 }
411 // Make all grid-sized elements block level again
412 [class*="span"],
413 .row-fluid [class*="span"] {
414 float: none;
415 display: block;
416 width: 100%;
417 margin-left: 0;
418 .box-sizing(border-box);
419 }
338021b9
DS
420
421 // We need to specify a more specific selector to reset the width for
422 // cases when we have content in the side-pre blockregion but not in the
423 // side-post blockregion as there are more specific selectors in
424 // core.less which take precedence which break responsiveness.
425 .empty-region-side-post.used-region-side-pre {
426 #block-region-side-pre.span4,
427 #region-main.span8.span8 {
428 .fluid-span(12);
429 }
430 }
431
8903b17b
BB
432 .row-fluid .span12 {
433 width: 100%;
434 .box-sizing(border-box);
435 }
436 .row-fluid [class*="offset"]:first-child {
437 margin-left: 0;
438 }
439 div[role=main] {
f6606495 440 margin-bottom: 1em;
8903b17b 441 }
759e970f
AB
442 .coursebox {
443 .info {
444 .name {
445 a {
446 background-position: 0 13px;
447 }
448 }
449 }
450 }
451 .category-browse {
452 .coursebox {
453 .info {
454 .name {
455 a {
456 background-position: 0 13px;
457 }
458 }
459 }
460 }
461 }
8903b17b 462}
5dc361e1
SH
463
464// All widths between 1200px and 1600px
465@media (min-width: 1200px) and (max-width: 1600px) {
466 // CSS for the course management pages.
467 #course-category-listings.columns-3 {
468 background-color:transparent;
469 border:0;
470
471 #category-listing,
472 #course-listing {
473 .fluid-span(6);
474 margin-left: @fluidGridGutterWidth;
475 *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
476 &:first-child {
477 margin-left: 0;
478 }
479 }
480 #course-detail {
481 .fluid-span(12);
482 margin: 1em 0 0;
483 }
484 }
485
486}
487
488// All widths up to 1199px.
489@media (max-width: 1199px) {
490 // CSS for the course management pages.
491 #course-category-listings.columns-3 {
492 background-color:transparent;
493 border:0;
494 #category-listing,
495 #course-listing,
496 #course-detail {
497 .fluid-span(12);
498 margin: 0 0 1em 0;
499 }
500 }
338021b9 501}