weekly release 2.8dev
[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 }
8903b17b
BB
53}
54
d61c96b6
DW
55@media (max-width: 873px) {
56 .file-picker .fp-repo-area {
57 width: 100%;
58 height: auto;
59 max-height: 220px;
60 y-scroll: auto;
61 float: none;
62 border: 0px;
63 }
64 .file-picker .fp-repo-items {
65 width: 100%;
66 float: none;
67 }
68 .file-picker .fp-login-form .fp-login-input label {
69 text-align: left;
70 }
71 .dir-rtl .file-picker .fp-login-form .fp-login-input label {
72 text-align: right;
73 }
74 .file-picker .fp-content form td {
75 display: block;
76 width: 100%;
77 text-align: left;
78 }
79 .dir-rtl .file-picker .fp-content form td {
80 text-align: right;
81 }
82 .fp-content .mdl-right {
83 text-align: left;
84 }
85 .dir-rtl .fp-content .mdl-right {
86 text-align: right;
87 }
88
89 .fp-repo-items .fp-navbar {
90 border-top: 1px solid rgb(187, 187, 187);
91 }
2eab90fa
JF
92
93 .dir-rtl {
94 .userprofile dl.list dt,
95 .userprofile dl.list dd {
96 float: none;
97 text-align: right;
98 margin-right: 0;
99 }
100 }
101
88d366e5
JF
102 .fp-formset div {
103 height: auto;
104 }
d61c96b6
DW
105}
106
8903b17b 107@media (min-width: 1200px) {
1d20cf37
JF
108 // Editor on question page
109 .path-question {
110 #id_answerhdr div.fitem_feditor {
111 padding-right: 6px;
112 }
113 }
d8037b26 114 // Login page.
8903b17b
BB
115 .loginbox.twocolumns .loginpanel {
116 margin-left: 0;
117 }
118 .loginbox.twocolumns .loginpanel,
119 .loginbox.twocolumns .signuppanel {
120 width: 48.717948717948715%;
121 *width: 48.664757228587014%;
122 }
bfb1c6d4
JF
123 // Wider form labels.
124 .form-item .form-label,
125 .mform .fitem div.fitemtitle,
126 .userprofile dl.list dt,
127 .form-horizontal .control-label {
128 width: @horizontalComponentOffset1200 - 20px;
129 }
130 .form-item .form-setting,
131 .form-item .form-description,
132 .mform .fitem .felement,
133 #page-mod-forum-search .c1,
134 .mform .fdescription.required,
135 .userprofile dl.list dd,
136 .form-horizontal .controls {
137 margin-left: @horizontalComponentOffset1200;
138 }
8d223d71
NK
139 .dir-rtl {
140 .form-item .form-setting,
141 .form-item .form-description,
142 .mform .fitem .felement,
143 .mform .fdescription.required,
144 .userprofile dl.list dd,
145 .form-horizontal .controls {
2eab90fa 146 margin-right: (@horizontalComponentOffset1200 - 100px);
8d223d71
NK
147 }
148 #page-mod-forum-search .c1 {
149 margin-right: @horizontalComponentOffset1200;
150 }
293a1894
NK
151 .form-item .form-label,
152 .mform .fitem div.fitemtitle,
153 .userprofile dl.list dt,
154 .form-horizontal .control-label {
2eab90fa 155 width: (@horizontalComponentOffset1200 - 120px);
293a1894
NK
156 }
157
8d223d71 158 }
bfb1c6d4
JF
159 .path-admin .buttons,
160 .form-buttons {
161 padding-left: @horizontalComponentOffset1200;
162 }
8d223d71
NK
163 .dir-rtl {
164 .path-admin .buttons,
165 .form-buttons {
166 padding-right: @horizontalComponentOffset1200;
167 }
168 }
bfb1c6d4 169
d8037b26
GB
170 // Core empty block regions.
171 .fluid-span (@columns) {
172 .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
173 }
174 .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
175 .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
176 #region-main.span8 {
177 /** increase the span size by 1 **/
178 .fluid-span(9);
179 }
180 #block-region-side-pre.span4 {
181 /** decrease the span size by 1 **/
182 .fluid-span(3);
183 }
184 }
8903b17b
BB
185}
186
187@media (min-width: 980px) {
188 .loginbox.twocolumns .loginpanel {
189 margin-left: 0;
190 }
191 .loginbox.twocolumns .loginpanel,
192 .loginbox.twocolumns .signuppanel {
193 width: 48.617948717948715%;
194 *width: 48.664757228587014%;
195 }
196}
197
198@media (min-width: 768px) and (max-width: 979px) {
d8037b26 199 // Login page.
8903b17b
BB
200 .loginbox.twocolumns .loginpanel {
201 margin-left: 0;
202 }
203 .loginbox.twocolumns .loginpanel,
204 .loginbox.twocolumns .signuppanel {
205 width: 48.61878453038674%;
206 *width: 48.56559304102504%;
207 }
d8037b26
GB
208 // Core empty block regions.
209 .fluid-span (@columns) {
210 .fluid-span-full(@columns, @fluidGridColumnWidth768, @fluidGridGutterWidth768);
211 }
212 .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
213 .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
214 #region-main.span8 {
215 /** increase the span size by 1 **/
216 .fluid-span(9);
217 }
218 #block-region-side-pre.span4 {
219 /** decrease the span size by 1 **/
220 .fluid-span(3);
221 }
222 }
8903b17b
BB
223}
224
225@media (max-width: 767px) {
226 .loginbox.twocolumns .loginpanel,
227 .loginbox.twocolumns .signuppanel {
228 display: block;
229 float: none;
230 width: 100%;
231 margin-left: 0;
232 .box-sizing(border-box);
233 }
b23a3205
JF
234 #page-mod-quiz-edit div.quizcontents,
235 .questionbankwindow.block {
236 width: 100%;
237 float: none;
238 }
239 #page-mod-quiz-edit #block-region-side-pre,
240 #page-mod-quiz-edit #block-region-side-post {
241 clear: both;
242 }
243
8903b17b 244 }
8903b17b
BB
245
246@media (max-width: 480px) {
9c2ec10b
DS
247 // make tabs act like nav-stacked
248 // (mostly) copied from bootstrap/navs.less
249 .nav-tabs > li {
8903b17b
BB
250 float: none;
251 }
9c2ec10b
DS
252 .nav-tabs > li > a {
253 margin-right: 0; // no need for the gap between nav items
254 }
255 .nav-tabs {
256 border-bottom: 0;
257 }
258 .nav-tabs > li > a {
8903b17b
BB
259 border: 1px solid #ddd;
260 .border-radius(0);
261 }
9c2ec10b
DS
262 .nav-tabs > .active > a,
263 .nav-tabs > .active > a:hover {
264 border: 1px solid #ddd;
265 }
266 .nav-tabs > li:first-child > a {
8903b17b
BB
267 .border-top-radius(4px);
268 }
9c2ec10b 269 .nav-tabs > li:last-child > a {
8903b17b
BB
270 .border-bottom-radius(4px);
271 }
9c2ec10b
DS
272 .nav-tabs > li > a:hover,
273 .nav-tabs > li > a:focus {
8903b17b
BB
274 border-color: #ddd;
275 z-index: 2;
276 }
8903b17b
BB
277 .fp-content-center {
278 display: block;
279 vertical-align: top;
280 }
8903b17b
BB
281 .course-content ul.topics li.section,
282 .course-content ul.topics li.section .content,
283 .course-content ul.weeks li.section .content,
284 .course-content ul.weeks li.section,
285 .course-content ul.section {
286 margin-right: 0;
287 margin-left: 0;
288 padding: 0;
289 }
290 .activityinstance {
291 display: block;
292 }
293 .editing .course-content .section .activity {
294 margin-bottom: 0.2em;
295 padding-bottom: 0.2em;
296 border-bottom: thin solid #eee;
297 }
298 .course-content .section .activity .commands {
8903b17b
BB
299 text-align: right;
300 }
4c512690
SH
301 /** Handles display of the activity chooser on small screens **/
302 .jsenabled .choosercontainer #chooseform .alloptions {
303 max-width: 100%;
8903b17b 304 }
4c512690
SH
305 .jsenabled .choosercontainer #chooseform .instruction,
306 .jsenabled .choosercontainer #chooseform .typesummary {
307 position:static;
8903b17b
BB
308 }
309 .que .info {
310 float: none;
311 width: auto;
312 }
313 .que .content {
314 margin: 0;
315 }
316 .path-mod-choice .horizontal .choices .option {
317 display: block;
318 }
319 .path-mod-forum .forumsearch #search {
320 width: 120px;
321 }
41d64830
JF
322 .path-mod-forum .forumheaderlist .picture {
323 display: none;
324 }
8903b17b
BB
325}
326
327// Stuart's 2,1,3 layout
328@media (min-width : 768px) {
329 .row-fluid .desktop-first-column {
330 margin-left: 0;
331 }
c72106b2
RW
332 #page-navbar .breadcrumb-button {
333 display: inline;
334 }
8903b17b
BB
335}
336@media (max-width : 767px) {
337 .row-fluid .desktop-first-column {
338 clear: right;
339 }
340}
341// Forms
342@media (max-width: 767px) {
343 // Remove the horizontal form styles
344 .form-item .form-label,
345 .mform .fitem div.fitemtitle {
346 // copied from .control-label {
347 float: none;
348 width: auto;
349 padding-top: 0;
350 text-align: left;
351 }
352 .form-item .form-label label{
353 display: inline-block;
354 margin-right: .5em;
355 }
356 .form-item .form-setting .form-checkbox {
357 margin-top: 0;
358 }
359 .form-label span.form-shortname {
360 display: inline-block;
361 }
362 .form-item .form-setting,
363 .mform .fitem .felement,
364 .path-backup .mform .fitem .felement,
365 .mform .fdescription.required,
366 .form-item .form-description {
367 margin-left: 0;
368 }
369 table#form td.submit,
370 .form-buttons,
371 #fitem_id_submitbutton,
372 .fp-content-center form + div,
373 #fgroup_id_buttonar,
374 .form-horizontal .form-actions,
375 .fitem_fsubmit .felement.fsubmit {
376 padding-left: 10px;
377 padding-right: 10px;
378 }
379 #helppopupbox {
380 width: auto !important;
381 left: 0 !important;
382 }
383}
384// Shrink calender when short on space in block
385@media (min-width : 768px) and (max-width: 979px) {
386 .block_calendar_month .content,
387 .block .minicalendar td {
388 padding-left: 0;
389 padding-right: 0;
390 }
391}
392
5d752f4b
NK
393.dir-rtl {
394 .dropdown-menu {
395 right:0;
396 left:auto;
a36f97f7 397 margin-right: 0px;
5d752f4b 398 }
a36f97f7 399 .navbar .nav > li > .dropdown-menu:before {
5d752f4b
NK
400 right:9px;
401 left:auto;
402 }
a36f97f7 403 .navbar .nav > li > .dropdown-menu:after {
5d752f4b
NK
404 right: 10px;
405 left:auto;
406 }
a36f97f7
JC
407 .dropdown-submenu > a:after {
408 margin-right: 0;
409 margin-left: -10px;
410 float: left;
5d752f4b
NK
411 border-right-color: #ccc;
412 border-left-color: transparent;
413 border-width: 5px 5px 5px 0px;
414 }
a36f97f7 415 .dropdown-submenu > .dropdown-menu {
5d752f4b
NK
416 right:100%;
417 left:auto;
418 }
419}
420
8903b17b
BB
421@media (max-width: 979px) {
422 .nav-collapse {
423 height: 0;
424 .nav > li > a {
425 color: @grayDark;
426 }
427 .nav > li > a:hover,
428 .nav > li > a:focus,
429 .dropdown-menu a:hover,
430 .dropdown-menu a:focus,
431 .dropdown-submenu a:focus,
432 .dropdown-submenu a:hover,
433 .dropdown-submenu a:active,
434 .dropdown-menu > li > a:hover,
435 .dropdown-menu > li > a:focus,
436 {
437 background-image: none;
438 color: @grayDark;
439 }
440 }
441 .nav-collapse.active {
442 height: auto;
443 }
7e7e8fd3
AB
444 .path-mod-data .box > table > tbody > tr > td {
445 display: block;
446 }
9c53c70c
AB
447 .path-mod-forum .forumheaderlist {
448 thead .header {
449 font-weight: normal;
450 font-size: round(@fontSizeSmall);
451 }
452 .discussion {
453 .author, .replies, .lastpost {
454 font-size: round(@fontSizeSmall);
455 }
456 .replies .unread a {
457 padding: 0;
458 }
459 }
460 }
8903b17b
BB
461}
462
d8037b26 463@media (max-width: 767px) {
8903b17b
BB
464// Resize, reflow file-picker on small devices
465 #filesskin .yui3-panel,
466 #filesskin .file-picker.fp-generallayout {
467 width: 100%;
468 left: 0;
469 }
470 .userprofile dl.list {
471 // copied from dl-horizontal in bootstrap/repsonsive.less
472 dt {
473 float: none;
474 clear: none;
475 width: auto;
476 text-align: left;
477 }
478 dd {
479 margin-left: 0;
480 }
481 }
47e00c34
RW
482 // Reset the alignment for required label to display inline on mobile devices
483 #page-mod-wiki-create .mform .fitem div.fitemtitle {
484 float: left;
485 }
486
8903b17b
BB
487 // GRID & CONTAINERS
488 // -----------------
489 // Remove width from containers
490 .container {
491 width: auto;
492 }
493 // Fluid rows
494 .row-fluid {
495 width: 100%;
496 }
497 .row-fluid .span8.pull-right,
498 .row-fluid .span9.pull-right {
499 float: none;
500 }
501 // Undo negative margin on rows and thumbnails
502 .row {
503 margin-left: 0;
504 }
505 // Make all grid-sized elements block level again
506 [class*="span"],
507 .row-fluid [class*="span"] {
508 float: none;
509 display: block;
510 width: 100%;
511 margin-left: 0;
512 .box-sizing(border-box);
513 }
338021b9 514
d8037b26
GB
515 // We need to specify a more specific selector to reset the width for
516 // cases when we have content in the side-pre blockregion but not in the
517 // side-post blockregion as there are more specific selectors in
518 // core.less which take precedence which break responsiveness.
519 .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
520 .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
521 #block-region-side-pre.span4,
522 #region-main.span8 {
523 .fluid-span(12);
524 }
525 }
338021b9 526
8903b17b
BB
527 .row-fluid .span12 {
528 width: 100%;
529 .box-sizing(border-box);
530 }
531 .row-fluid [class*="offset"]:first-child {
532 margin-left: 0;
533 }
534 div[role=main] {
f6606495 535 margin-bottom: 1em;
8903b17b 536 }
759e970f
AB
537 .coursebox {
538 .info {
539 .name {
540 a {
541 background-position: 0 13px;
542 }
543 }
544 }
545 }
546 .category-browse {
547 .coursebox {
548 .info {
549 .name {
550 a {
551 background-position: 0 13px;
552 }
553 }
554 }
555 }
556 }
8903b17b 557}
5dc361e1
SH
558
559// All widths between 1200px and 1600px
560@media (min-width: 1200px) and (max-width: 1600px) {
d8037b26
GB
561 .fluid-span (@columns) {
562 .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
563 }
5dc361e1
SH
564 // CSS for the course management pages.
565 #course-category-listings.columns-3 {
e514c722 566 background-color: @tableBackground;
5dc361e1
SH
567 border:0;
568
569 #category-listing,
570 #course-listing {
571 .fluid-span(6);
d8037b26
GB
572 margin-left: @fluidGridGutterWidth1200;
573 *margin-left: @fluidGridGutterWidth1200 - (.5 / @gridRowWidth * 100 * 1%);
5dc361e1
SH
574 &:first-child {
575 margin-left: 0;
576 }
577 }
578 #course-detail {
579 .fluid-span(12);
580 margin: 1em 0 0;
581 }
582 }
5dc361e1
SH
583}
584
585// All widths up to 1199px.
586@media (max-width: 1199px) {
1d20cf37
JF
587
588 // Editor on question pages
589 .path-question {
590 #id_answerhdr div.fitem {
591 padding-right: 6px;
592 padding-left: 4px;
593 }
594 }
5dc361e1
SH
595 // CSS for the course management pages.
596 #course-category-listings.columns-3 {
e514c722 597 background-color: @tableBackground;
5dc361e1
SH
598 border:0;
599 #category-listing,
600 #course-listing,
601 #course-detail {
602 .fluid-span(12);
603 margin: 0 0 1em 0;
604 }
605 }
35620f63
SH
606
607 #page-mod-forum-discuss .discussioncontrols {
608 text-align: right;
609 .discussioncontrol {
610 float: none;
611 width: auto;
612 display: inline-block;
613 margin: 0 3px 0.5em;
614 select,
615 input {
616 margin-bottom: 0;
617 }
618 &.movediscussion {
619 margin-right: 0;
620 padding-right: 0;
621 }
622 }
623 }
624
625 #page-mod-forum-discuss.dir-rtl .discussioncontrols {
626 text-align: left;
627 }
338021b9 628}
88d366e5
JF
629
630
631// File Picker.
632@media (max-width: 768px) {
633 .fp-forminset .control-group .controls {
634 margin-left: 0;
635 }
636 .dir-rtl .fp-formset .control-group {
637 label.control-label {
638 text-align: right;
639 float: none;
640 }
641 }
642 .dir-rtl .fp-forminset .control-group {
643 label.control-label {
644 text-align: right;
645 float: none;
646 }
647 .controls {
648 margin-right: 0;
649 }
650 }
d8037b26 651}