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