weekly release 3.0dev
[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 {
35fe9b8a 338 clear: both;
8903b17b
BB
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 }
affa8c03 441 .nav-collapse.in {
8903b17b 442 height: auto;
6da0e4cf
JC
443 .usermenu .moodle-actionmenu[data-enhanced] {
444 .toggle-display {
445 display: none;
446 }
447 .menu {
448 display: block;
449
450 li {
451 margin: 0 0.5em;
452 }
453 }
454 }
8903b17b 455 }
7e7e8fd3
AB
456 .path-mod-data .box > table > tbody > tr > td {
457 display: block;
458 }
9c53c70c
AB
459 .path-mod-forum .forumheaderlist {
460 thead .header {
461 font-weight: normal;
462 font-size: round(@fontSizeSmall);
463 }
464 .discussion {
465 .author, .replies, .lastpost {
466 font-size: round(@fontSizeSmall);
467 }
468 .replies .unread a {
469 padding: 0;
470 }
471 }
472 }
cb9c6a7d
JC
473
474 .navbar {
affa8c03 475 .nav-collapse.in {
cb9c6a7d 476 border-top: 1px solid @navbarBorder;
cb9c6a7d
JC
477 &.pull-left,
478 &.pull-right {
479 float: none;
480 }
481 > .nav {
482 margin: 0;
483
484 // Add padding to first-level links.
485 > li > a {
486 padding-left: 20px;
487 border-radius: 0px;
488 }
489 .dropdown-menu {
490 margin: 0px 0px 0px 15px;
491 li > a {
492 border-radius: 0px;
493 }
494 }
495 }
496
affa8c03
JC
497 .nav,
498 .nav .dropdown-menu {
cb9c6a7d
JC
499 .dropdown-submenu {
500 .dropdown-toggle {
501 &:after {
502 display: inline-block;
503 float: none;
504 .caret();
505 border-top-color: @navbarBorder;
506 margin-left: 4px;
507 margin-top: 8px;
508 }
509 }
510
511 &.open {
512 > a {
513 background-color: @navbarBackground;
514 }
515 }
516
517 // Suppress showing of submenu menu content on hover.
518 &:hover {
519 .dropdown-menu {
520 display: none;
521 }
522 &.open {
523 > a {
524 background: @navbarBackground;
525 }
526 > .dropdown-menu,
527 .open > .dropdown-menu {
528 display: block;
529 }
530 }
531 }
532 }
1ee45d68
JC
533 .divider {
534 width: auto;
535 display: block;
536 height: 0px;
537 margin: 4px 1px;
538 border-left: 0px none;
539 border-right: 0px none;
540 border-top: 1px solid @navbarBorder;
541 border-bottom: 1px solid @navbarBackgroundHighlight;
542 }
cb9c6a7d
JC
543 }
544 }
53324831 545 &.navbar-inverse {
affa8c03 546 .nav-collapse.in {
53324831
JC
547 border-top-color: @navbarInverseBorder;
548 .nav,
549 .nav .dropdown-menu {
550 .dropdown-submenu {
551 .dropdown-toggle {
552 &:after {
553 border-top-color: @navbarInverseBorder;
554 }
555 }
556 &.open {
557 > a {
558 background-color: @navbarInverseBackground;
559 }
560 }
561
562 &:hover {
563 &.open {
564 > a {
565 background: @navbarInverseBackground;
566 }
567 }
568 }
569 }
570 }
571 }
572 }
cb9c6a7d 573 }
cfbd8125 574
53324831
JC
575 .dir-rtl {
576 .navbar {
affa8c03 577 .nav-collapse.in {
53324831
JC
578 > .nav {
579 margin: 0;
580 > li > a {
581 padding-left: 0px;
582 padding-right: 20px;
583 }
584 .dropdown-menu {
585 margin: 0px 15px 0px 0px;
586 }
587 }
588 .dropdown-menu {
589 > li {
590 > a {
591 padding: 9px 15px;
592 }
593 }
594 }
595 .nav,
596 .nav .dropdown-menu {
597 .dropdown-submenu {
598 .dropdown-toggle {
599 &:after {
600 margin-left: 0px;
601 margin-right: 4px;
602 }
603 }
604 }
605 }
606 }
607 }
608 }
609
8903b17b
BB
610}
611
d8037b26 612@media (max-width: 767px) {
8903b17b
BB
613// Resize, reflow file-picker on small devices
614 #filesskin .yui3-panel,
615 #filesskin .file-picker.fp-generallayout {
616 width: 100%;
617 left: 0;
618 }
619 .userprofile dl.list {
620 // copied from dl-horizontal in bootstrap/repsonsive.less
621 dt {
622 float: none;
623 clear: none;
624 width: auto;
625 text-align: left;
626 }
627 dd {
628 margin-left: 0;
629 }
630 }
47e00c34
RW
631 // Reset the alignment for required label to display inline on mobile devices
632 #page-mod-wiki-create .mform .fitem div.fitemtitle {
633 float: left;
634 }
635
8903b17b
BB
636 // GRID & CONTAINERS
637 // -----------------
638 // Remove width from containers
639 .container {
640 width: auto;
641 }
642 // Fluid rows
643 .row-fluid {
644 width: 100%;
645 }
646 .row-fluid .span8.pull-right,
647 .row-fluid .span9.pull-right {
648 float: none;
649 }
650 // Undo negative margin on rows and thumbnails
651 .row {
652 margin-left: 0;
653 }
654 // Make all grid-sized elements block level again
655 [class*="span"],
656 .row-fluid [class*="span"] {
657 float: none;
658 display: block;
659 width: 100%;
660 margin-left: 0;
661 .box-sizing(border-box);
662 }
338021b9 663
d8037b26
GB
664 // We need to specify a more specific selector to reset the width for
665 // cases when we have content in the side-pre blockregion but not in the
666 // side-post blockregion as there are more specific selectors in
667 // core.less which take precedence which break responsiveness.
668 .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
669 .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
670 #block-region-side-pre.span4,
671 #region-main.span8 {
672 .fluid-span(12);
673 }
674 }
338021b9 675
8903b17b
BB
676 .row-fluid .span12 {
677 width: 100%;
678 .box-sizing(border-box);
679 }
680 .row-fluid [class*="offset"]:first-child {
681 margin-left: 0;
682 }
683 div[role=main] {
f6606495 684 margin-bottom: 1em;
8903b17b 685 }
759e970f
AB
686 .coursebox {
687 .info {
688 .name {
689 a {
690 background-position: 0 13px;
691 }
692 }
693 }
694 }
695 .category-browse {
696 .coursebox {
697 .info {
698 .name {
699 a {
700 background-position: 0 13px;
701 }
702 }
703 }
704 }
705 }
8903b17b 706}
5dc361e1
SH
707
708// All widths between 1200px and 1600px
709@media (min-width: 1200px) and (max-width: 1600px) {
d8037b26
GB
710 .fluid-span (@columns) {
711 .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
712 }
5dc361e1
SH
713 // CSS for the course management pages.
714 #course-category-listings.columns-3 {
e514c722 715 background-color: @tableBackground;
5dc361e1
SH
716 border:0;
717
718 #category-listing,
719 #course-listing {
720 .fluid-span(6);
d8037b26
GB
721 margin-left: @fluidGridGutterWidth1200;
722 *margin-left: @fluidGridGutterWidth1200 - (.5 / @gridRowWidth * 100 * 1%);
5dc361e1
SH
723 &:first-child {
724 margin-left: 0;
725 }
726 }
727 #course-detail {
728 .fluid-span(12);
729 margin: 1em 0 0;
730 }
731 }
5dc361e1
SH
732}
733
734// All widths up to 1199px.
735@media (max-width: 1199px) {
1d20cf37
JF
736
737 // Editor on question pages
738 .path-question {
739 #id_answerhdr div.fitem {
740 padding-right: 6px;
741 padding-left: 4px;
742 }
743 }
5dc361e1
SH
744 // CSS for the course management pages.
745 #course-category-listings.columns-3 {
e514c722 746 background-color: @tableBackground;
5dc361e1
SH
747 border:0;
748 #category-listing,
749 #course-listing,
750 #course-detail {
751 .fluid-span(12);
752 margin: 0 0 1em 0;
753 }
754 }
35620f63
SH
755
756 #page-mod-forum-discuss .discussioncontrols {
757 text-align: right;
758 .discussioncontrol {
759 float: none;
760 width: auto;
761 display: inline-block;
762 margin: 0 3px 0.5em;
763 select,
764 input {
765 margin-bottom: 0;
766 }
767 &.movediscussion {
768 margin-right: 0;
769 padding-right: 0;
770 }
771 }
772 }
773
774 #page-mod-forum-discuss.dir-rtl .discussioncontrols {
775 text-align: left;
776 }
338021b9 777}
88d366e5
JF
778
779
780// File Picker.
781@media (max-width: 768px) {
782 .fp-forminset .control-group .controls {
783 margin-left: 0;
784 }
785 .dir-rtl .fp-formset .control-group {
786 label.control-label {
787 text-align: right;
788 float: none;
789 }
790 }
791 .dir-rtl .fp-forminset .control-group {
792 label.control-label {
793 text-align: right;
794 float: none;
795 }
796 .controls {
797 margin-right: 0;
798 }
799 }
d8037b26 800}