MDL-54708 message: add notification popover to nav bar
[moodle.git] / theme / bootstrapbase / less / moodle / responsive.less
1 /* responsive.less */
3 // Should probably be moved to relevant .less files
4 // after 4095 selector issue is solved
6 // TODO: MDL-55142 remove browser hacks in this file:
7 /* stylelint-disable declaration-block-no-duplicate-properties, no-browser-hacks */
9 @media (min-width: (@navbarCollapseDesktopWidth)) {
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     }
21 }
23 @media (min-width: 980px) and (max-width: 1199px) {
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     }
40     #page-mod-forum-search.dir-lrt .c1 {
41         margin-right: @horizontalComponentOffset980;
42     }
43     .path-admin .buttons,
44     .form-buttons {
45         padding-left: @horizontalComponentOffset980;
46     }
47 }
49 @media (max-width: 767px) {
50     .file-picker .fp-repo-area {
51         width: 100%;
52         height: auto;
53         max-height: 220px;
54         float: none;
55         border: 0;
56     }
57     .file-picker .fp-repo-items {
58         width: 100%;
59         float: none;
60         margin-left: 0;
61     }
62     .file-picker .fp-login-form .fp-login-input label {
63         text-align: left;
64     }
65     .file-picker .fp-content form td {
66         display: block;
67         width: 100%;
68         text-align: left;
69     }
70     .fp-content .mdl-right {
71         text-align: left;
72     }
74     .fp-repo-items .fp-navbar {
75         border-top: 1px solid rgb(187, 187, 187);
76     }
78     .fp-formset div {
79         height: auto;
80     }
81 }
83 @media (min-width: 1200px) {
84     // Editor on question page
85     .path-question {
86         #id_answerhdr div.fitem_feditor {
87             padding-right: 6px;
88         }
89     }
90     // Login page.
91     .loginbox.twocolumns .loginpanel {
92         margin-left: 0;
93     }
94     .loginbox.twocolumns .loginpanel,
95     .loginbox.twocolumns .signuppanel {
96         width: 48.717948717948715%;
97         *width: 48.664757228587014%;
98     }
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     }
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     }
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%;
144         *width: 48.664757228587014%;
145     }
148 @media (min-width: 768px) and (max-width: 979px) {
149     // Login page.
150     .loginbox.twocolumns .loginpanel {
151         margin-left: 0;
152     }
153     .loginbox.twocolumns .loginpanel,
154     .loginbox.twocolumns .signuppanel {
155         width: 48.61878453038674%;
156         *width: 48.56559304102504%;
157     }
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     }
175 @media (max-width: 767px) {
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,
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     }
196 @media (max-width: 480px) {
197     .navbar {
198         .mdl-popover {
199             .mdl-popover-container {
200                 position: fixed;
201                 width: 100%;
202                 height: ~"calc(100% - 52px)";
203                 top: 52px;
205                 &::before,
206                 &::after {
207                     display: none;
208                 }
209             }
210         }
211     }
213     // make tabs act like nav-stacked
214     // (mostly) copied from bootstrap/navs.less
215     .nav-tabs > li {
216         float: none;
217     }
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 {
225         border: 1px solid #ddd;
226         .border-radius(0);
227     }
228     .nav-tabs > .active > a,
229     .nav-tabs > .active > a:hover {
230         border: 1px solid #ddd;
231     }
232     .nav-tabs > li:first-child > a {
233         .border-top-radius(4px);
234     }
235     .nav-tabs > li:last-child > a {
236         .border-bottom-radius(4px);
237     }
238     .nav-tabs > li > a:hover,
239     .nav-tabs > li > a:focus {
240         border-color: #ddd;
241         z-index: 2;
242     }
243     .fp-content-center {
244         display: block;
245     }
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 {
264         text-align: right;
265     }
266     /** Handles display of the activity chooser on small screens **/
267     .jsenabled .choosercontainer #chooseform .alloptions {
268         max-width: 100%;
269     }
270     .jsenabled .choosercontainer #chooseform .instruction,
271     .jsenabled .choosercontainer #chooseform .typesummary {
272         position: static;
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     }
287     .path-mod-forum .forumheaderlist .picture {
288         display: none;
289     }
292 // Stuart's 2,1,3 layout
293 @media (min-width: 768px) {
294     .row-fluid .desktop-first-column {
295         margin-left: 0;
296     }
297     #page-navbar .breadcrumb-button {
298         display: inline;
299     }
302 @media (max-width: 767px) {
303     .row-fluid .desktop-first-column {
304         clear: both;
305     }
307 // Forms
308 @media (max-width: 767px) {
309     // Remove the horizontal form styles
310     .form-item .form-label,
311     .mform .fitem div.fitemtitle {
312         // copied from .control-label {
313         float: none;
314         width: auto;
315         padding-top: 0;
316         text-align: left;
317     }
318     .form-item .form-label label {
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 {
333         margin-left: 0;
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 {
342         padding-left: 10px;
343         padding-right: 10px;
344     }
345     #helppopupbox {
346         /* stylelint-disable declaration-no-important */
347         width: auto !important;
348         left: 0 !important;
349         /* stylelint-enable declaration-no-important */
350     }
352 // Shrink calender when short on space in block
353 @media (min-width: 768px) and (max-width: 979px) {
354     .block_calendar_month .content,
355     .block .minicalendar td {
356         padding-left: 0;
357         padding-right: 0;
358     }
361 @media (max-width: 979px) {
362     .nav-collapse {
363         height: 0;
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,
371         .dropdown-submenu a:hover,
372         .dropdown-submenu a:focus,
373         .dropdown-submenu a:active,
374         .dropdown-menu > li > a:hover,
375         .dropdown-menu > li > a:focus,
376         .dropdown-submenu:hover > a,
377         .dropdown-submenu:focus > a {
378             background-image: none;
379             color: @grayDark;
380         }
381     }
382     .nav-collapse.in {
383         height: auto;
384         .usermenu .moodle-actionmenu[data-enhanced] {
385             .toggle-display {
386                 display: none;
387             }
388             .menu {
389                 display: block;
391                 li {
392                     margin: 0 0.5em;
393                 }
394             }
395         }
396     }
397     .path-mod-data .box > table > tbody > tr > td {
398         display: block;
399     }
400     .path-mod-forum .forumheaderlist {
401         thead .header {
402             font-weight: normal;
403             font-size: round(@fontSizeSmall);
404         }
405         .discussion {
406             .author,
407             .replies,
408             .lastpost {
409                 font-size: round(@fontSizeSmall);
410             }
411             .replies .unread a {
412                 padding: 0;
413             }
414         }
415     }
417     .navbar {
418         .nav-collapse.in {
419             border-top: 1px solid @navbarBorder;
420             &.pull-left,
421             &.pull-right {
422                 float: none;
423             }
424             > .nav {
425                 margin: 0;
427                 // Add padding to first-level links.
428                 > li > a {
429                     padding-left: 20px;
430                     border-radius: 0;
431                 }
432                 .dropdown-menu {
433                     margin: 0 0 0 15px;
434                     li > a {
435                         border-radius: 0;
436                     }
437                 }
438             }
440             .nav,
441             .nav .dropdown-menu {
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                     }
454                     &.open {
455                         > a {
456                             background-color: @navbarBackground;
457                         }
458                     }
460                     // Suppress showing of submenu menu content on hover.
461                     &:hover {
462                         .dropdown-menu {
463                             display: none;
464                         }
465                         &.open {
466                             > a {
467                                 background-color: @navbarBackground;
468                             }
469                             > .dropdown-menu,
470                             .open > .dropdown-menu {
471                                 display: block;
472                             }
473                         }
474                     }
475                 }
476                 .divider {
477                     width: auto;
478                     display: block;
479                     height: 0;
480                     margin: 4px 1px;
481                     border-left: 0 none;
482                     border-right: 0 none;
483                     border-top: 1px solid @navbarBorder;
484                     border-bottom: 1px solid @navbarBackgroundHighlight;
485                 }
486             }
487         }
488     }
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;
499                         }
500                     }
501                     &.open {
502                         > a {
503                             background-color: @navbarInverseBackground;
504                         }
505                     }
507                     &:hover {
508                         &.open {
509                             > a {
510                                 background-color: @navbarInverseBackground;
511                             }
512                         }
513                     }
514                 }
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                 }
523             }
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             }
551         }
552     }
555 @media (max-width: 767px) {
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     }
594     // Resize, reflow file-picker on small devices
595     #filesskin .yui3-panel,
596     #filesskin .file-picker.fp-generallayout {
597         width: 100%;
598         left: 0;
599     }
600     .userprofile dl.list {
601         // copied from dl-horizontal in bootstrap/repsonsive.less
602         dt {
603             float: none;
604             clear: none;
605             width: auto;
606             text-align: left;
607         }
608         dd {
609             margin-left: 0;
610         }
611     }
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     }
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     }
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     }
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     }
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     }
689 // All widths between 1200px and 1600px
690 @media (min-width: 1200px) and (max-width: 1600px) {
691     .fluid-span (@columns) {
692         .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
693     }
694     // CSS for the course management pages.
695     #course-category-listings.columns-3 {
696         background-color: @tableBackground;
697         border: 0;
699         #category-listing,
700         #course-listing {
701             .fluid-span(6);
702             margin-left: @fluidGridGutterWidth1200;
703             *margin-left: @fluidGridGutterWidth1200 - (.5 / @gridRowWidth * 100 * 1%);
704             &:first-child {
705                 margin-left: 0;
706             }
707         }
708         #course-detail {
709             .fluid-span(12);
710             margin: 1em 0 0;
711         }
712     }
715 // All widths up to 1199px.
716 @media (max-width: 1199px) {
718     // Editor on question pages
719     .path-question {
720         #id_answerhdr div.fitem {
721             padding-right: 6px;
722             padding-left: 4px;
723         }
724     }
725     // CSS for the course management pages.
726     #course-category-listings.columns-3 {
727         background-color: @tableBackground;
728         border: 0;
729         #category-listing,
730         #course-listing,
731         #course-detail {
732             .fluid-span(12);
733             margin: 0 0 1em 0;
734         }
735     }
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     }
757 // File Picker.
758 @media (max-width: 768px) {
759     .fp-forminset .control-group .controls {
760         margin-left: 0;
761     }