MDL-52167 admin: format dependencies in search results
[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 */
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     .form-item .form-dependenton,
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     }
41     #page-mod-forum-search.dir-lrt .c1 {
42         margin-right: @horizontalComponentOffset980;
43     }
44     .path-admin .buttons,
45     .form-buttons {
46         padding-left: @horizontalComponentOffset980;
47     }
48 }
50 @media (max-width: 767px) {
51     .file-picker .fp-repo-area {
52         width: 100%;
53         height: auto;
54         max-height: 220px;
55         float: none;
56         border: 0;
57     }
58     .file-picker .fp-repo-items {
59         width: 100%;
60         float: none;
61         margin-left: 0;
62     }
63     .file-picker .fp-login-form .fp-login-input label {
64         text-align: left;
65     }
66     .file-picker .fp-content form td {
67         display: block;
68         width: 100%;
69         text-align: left;
70     }
71     .fp-content .mdl-right {
72         text-align: left;
73     }
75     .fp-repo-items .fp-navbar {
76         border-top: 1px solid rgb(187, 187, 187);
77     }
79     .fp-formset div {
80         height: auto;
81     }
82 }
84 @media (min-width: 1200px) {
85     // Editor on question page
86     .path-question {
87         #id_answerhdr div.fitem_feditor {
88             padding-right: 6px;
89         }
90     }
91     // Login page.
92     .loginbox.twocolumns .loginpanel {
93         margin-left: 0;
94     }
95     .loginbox.twocolumns .loginpanel,
96     .loginbox.twocolumns .signuppanel {
97         width: 48.717948717948715%;
98         *width: 48.664757228587014%;
99     }
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,
109     .form-item .form-dependenton,
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     }
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     }
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%;
146         *width: 48.664757228587014%;
147     }
150 @media (min-width: 768px) and (max-width: 979px) {
151     // Login page.
152     .loginbox.twocolumns .loginpanel {
153         margin-left: 0;
154     }
155     .loginbox.twocolumns .loginpanel,
156     .loginbox.twocolumns .signuppanel {
157         width: 48.61878453038674%;
158         *width: 48.56559304102504%;
159     }
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     }
177 @media (max-width: 767px) {
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,
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     }
198 @media (max-width: 480px) {
199     .navbar {
200         .mdl-popover {
201             .mdl-popover-container {
202                 position: fixed;
203                 width: 100%;
204                 height: ~"calc(100% - 52px)";
205                 top: 52px;
207                 &::before,
208                 &::after {
209                     display: none;
210                 }
211             }
212         }
213     }
215     // make tabs act like nav-stacked
216     // (mostly) copied from bootstrap/navs.less
217     .nav-tabs > li {
218         float: none;
219     }
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 {
227         border: 1px solid #ddd;
228         .border-radius(0);
229     }
230     .nav-tabs > .active > a,
231     .nav-tabs > .active > a:hover {
232         border: 1px solid #ddd;
233     }
234     .nav-tabs > li:first-child > a {
235         .border-top-radius(4px);
236     }
237     .nav-tabs > li:last-child > a {
238         .border-bottom-radius(4px);
239     }
240     .nav-tabs > li > a:hover,
241     .nav-tabs > li > a:focus {
242         border-color: #ddd;
243         z-index: 2;
244     }
245     .fp-content-center {
246         display: block;
247     }
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 {
266         text-align: right;
267     }
268     /** Handles display of the activity chooser on small screens **/
269     .jsenabled .choosercontainer #chooseform .alloptions {
270         max-width: 100%;
271     }
272     .jsenabled .choosercontainer #chooseform .instruction,
273     .jsenabled .choosercontainer #chooseform .typesummary {
274         position: static;
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     }
289     .path-mod-forum .forumheaderlist .picture {
290         display: none;
291     }
294 // Stuart's 2,1,3 layout
295 @media (min-width: 768px) {
296     .row-fluid .desktop-first-column {
297         margin-left: 0;
298     }
299     #page-navbar .breadcrumb-button {
300         display: inline;
301     }
304 @media (max-width: 767px) {
305     .row-fluid .desktop-first-column {
306         clear: both;
307     }
309 // Forms
310 @media (max-width: 767px) {
311     // Remove the horizontal form styles
312     .form-item .form-label,
313     .mform .fitem div.fitemtitle {
314         // copied from .control-label {
315         float: none;
316         width: auto;
317         padding-top: 0;
318         text-align: left;
319     }
320     .form-item .form-label label {
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,
334     .form-item .form-description,
335     .form-item .form-dependenton {
336         margin-left: 0;
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 {
345         padding-left: 10px;
346         padding-right: 10px;
347     }
348     #helppopupbox {
349         /* stylelint-disable declaration-no-important */
350         width: auto !important;
351         left: 0 !important;
352         /* stylelint-enable declaration-no-important */
353     }
355 // Shrink calender when short on space in block
356 @media (min-width: 768px) and (max-width: 979px) {
357     .block_calendar_month .content,
358     .block .minicalendar td {
359         padding-left: 0;
360         padding-right: 0;
361     }
364 @media (max-width: 979px) {
365     .nav-collapse {
366         height: 0;
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,
374         .dropdown-submenu a:hover,
375         .dropdown-submenu a:focus,
376         .dropdown-submenu a:active,
377         .dropdown-menu > li > a:hover,
378         .dropdown-menu > li > a:focus,
379         .dropdown-submenu:hover > a,
380         .dropdown-submenu:focus > a {
381             background-image: none;
382             color: @grayDark;
383         }
384     }
385     .nav-collapse.in {
386         height: auto;
387         .usermenu .moodle-actionmenu[data-enhanced] {
388             .toggle-display {
389                 display: none;
390             }
391             .menu {
392                 display: block;
394                 li {
395                     margin: 0 0.5em;
396                 }
397             }
398         }
399     }
400     .path-mod-data .box > table > tbody > tr > td {
401         display: block;
402     }
403     .path-mod-forum .forumheaderlist {
404         thead .header {
405             font-weight: normal;
406             font-size: round(@fontSizeSmall);
407         }
408         .discussion {
409             .author,
410             .replies,
411             .lastpost {
412                 font-size: round(@fontSizeSmall);
413             }
414             .replies .unread a {
415                 padding: 0;
416             }
417         }
418     }
420     .navbar {
421         .nav-collapse.in {
422             border-top: 1px solid @navbarBorder;
423             &.pull-left,
424             &.pull-right {
425                 float: none;
426             }
427             > .nav {
428                 margin: 0;
430                 // Add padding to first-level links.
431                 > li > a {
432                     padding-left: 20px;
433                     border-radius: 0;
434                 }
435                 .dropdown-menu {
436                     margin: 0 0 0 15px;
437                     li > a {
438                         border-radius: 0;
439                     }
440                 }
441             }
443             .nav,
444             .nav .dropdown-menu {
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                     }
457                     &.open {
458                         > a {
459                             background-color: @navbarBackground;
460                         }
461                     }
463                     // Suppress showing of submenu menu content on hover.
464                     &:hover {
465                         .dropdown-menu {
466                             display: none;
467                         }
468                         &.open {
469                             > a {
470                                 background-color: @navbarBackground;
471                             }
472                             > .dropdown-menu,
473                             .open > .dropdown-menu {
474                                 display: block;
475                             }
476                         }
477                     }
478                 }
479                 .divider {
480                     width: auto;
481                     display: block;
482                     height: 0;
483                     margin: 4px 1px;
484                     border-left: 0 none;
485                     border-right: 0 none;
486                     border-top: 1px solid @navbarBorder;
487                     border-bottom: 1px solid @navbarBackgroundHighlight;
488                 }
489             }
490         }
491     }
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;
502                         }
503                     }
504                     &.open {
505                         > a {
506                             background-color: @navbarInverseBackground;
507                         }
508                     }
510                     &:hover {
511                         &.open {
512                             > a {
513                                 background-color: @navbarInverseBackground;
514                             }
515                         }
516                     }
517                 }
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                 }
526             }
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             }
554         }
555     }
558 @media (max-width: 767px) {
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     }
597     // Resize, reflow file-picker on small devices
598     #filesskin .yui3-panel,
599     #filesskin .file-picker.fp-generallayout {
600         width: 100%;
601         left: 0;
602     }
603     .userprofile dl.list {
604         // copied from dl-horizontal in bootstrap/repsonsive.less
605         dt {
606             float: none;
607             clear: none;
608             width: auto;
609             text-align: left;
610         }
611         dd {
612             margin-left: 0;
613         }
614     }
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     }
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     }
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     }
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     }
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     }
692 // All widths between 1200px and 1600px
693 @media (min-width: 1200px) and (max-width: 1600px) {
694     .fluid-span (@columns) {
695         .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
696     }
697     // CSS for the course management pages.
698     #course-category-listings.columns-3 {
699         background-color: @tableBackground;
700         border: 0;
702         #category-listing,
703         #course-listing {
704             .fluid-span(6);
705             margin-left: @fluidGridGutterWidth1200;
706             *margin-left: @fluidGridGutterWidth1200 - (.5 / @gridRowWidth * 100 * 1%);
707             &:first-child {
708                 margin-left: 0;
709             }
710         }
711         #course-detail {
712             .fluid-span(12);
713             margin: 1em 0 0;
714         }
715     }
718 // All widths up to 1199px.
719 @media (max-width: 1199px) {
721     // Editor on question pages
722     .path-question {
723         #id_answerhdr div.fitem {
724             padding-right: 6px;
725             padding-left: 4px;
726         }
727     }
728     // CSS for the course management pages.
729     #course-category-listings.columns-3 {
730         background-color: @tableBackground;
731         border: 0;
732         #category-listing,
733         #course-listing,
734         #course-detail {
735             .fluid-span(12);
736             margin: 0 0 1em 0;
737         }
738     }
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     }
760 // File Picker.
761 @media (max-width: 768px) {
762     .fp-forminset .control-group .controls {
763         margin-left: 0;
764     }