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