MDL-54708 message: add backend APIs for notifications popover
[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) {
9c2ec10b
DS
197 // make tabs act like nav-stacked
198 // (mostly) copied from bootstrap/navs.less
199 .nav-tabs > li {
8903b17b
BB
200 float: none;
201 }
9c2ec10b
DS
202 .nav-tabs > li > a {
203 margin-right: 0; // no need for the gap between nav items
204 }
205 .nav-tabs {
206 border-bottom: 0;
207 }
208 .nav-tabs > li > a {
8903b17b
BB
209 border: 1px solid #ddd;
210 .border-radius(0);
211 }
9c2ec10b
DS
212 .nav-tabs > .active > a,
213 .nav-tabs > .active > a:hover {
214 border: 1px solid #ddd;
215 }
216 .nav-tabs > li:first-child > a {
8903b17b
BB
217 .border-top-radius(4px);
218 }
9c2ec10b 219 .nav-tabs > li:last-child > a {
8903b17b
BB
220 .border-bottom-radius(4px);
221 }
9c2ec10b
DS
222 .nav-tabs > li > a:hover,
223 .nav-tabs > li > a:focus {
8903b17b
BB
224 border-color: #ddd;
225 z-index: 2;
226 }
8903b17b
BB
227 .fp-content-center {
228 display: block;
8903b17b 229 }
8903b17b
BB
230 .course-content ul.topics li.section,
231 .course-content ul.topics li.section .content,
232 .course-content ul.weeks li.section .content,
233 .course-content ul.weeks li.section,
234 .course-content ul.section {
235 margin-right: 0;
236 margin-left: 0;
237 padding: 0;
238 }
239 .activityinstance {
240 display: block;
241 }
242 .editing .course-content .section .activity {
243 margin-bottom: 0.2em;
244 padding-bottom: 0.2em;
245 border-bottom: thin solid #eee;
246 }
247 .course-content .section .activity .commands {
8903b17b
BB
248 text-align: right;
249 }
4c512690
SH
250 /** Handles display of the activity chooser on small screens **/
251 .jsenabled .choosercontainer #chooseform .alloptions {
252 max-width: 100%;
8903b17b 253 }
4c512690
SH
254 .jsenabled .choosercontainer #chooseform .instruction,
255 .jsenabled .choosercontainer #chooseform .typesummary {
418b9328 256 position: static;
8903b17b
BB
257 }
258 .que .info {
259 float: none;
260 width: auto;
261 }
262 .que .content {
263 margin: 0;
264 }
265 .path-mod-choice .horizontal .choices .option {
266 display: block;
267 }
268 .path-mod-forum .forumsearch #search {
269 width: 120px;
270 }
41d64830
JF
271 .path-mod-forum .forumheaderlist .picture {
272 display: none;
273 }
8903b17b
BB
274}
275
276// Stuart's 2,1,3 layout
0e878352 277@media (min-width: 768px) {
d3a93557
DP
278 .row-fluid .desktop-first-column {
279 margin-left: 0;
280 }
281 #page-navbar .breadcrumb-button {
282 display: inline;
283 }
8903b17b 284}
c2d3fe21 285
0e878352 286@media (max-width: 767px) {
d3a93557
DP
287 .row-fluid .desktop-first-column {
288 clear: both;
289 }
8903b17b
BB
290}
291// Forms
292@media (max-width: 767px) {
d3a93557 293 // Remove the horizontal form styles
8903b17b
BB
294 .form-item .form-label,
295 .mform .fitem div.fitemtitle {
d3a93557
DP
296 // copied from .control-label {
297 float: none;
298 width: auto;
299 padding-top: 0;
300 text-align: left;
8903b17b 301 }
0e878352 302 .form-item .form-label label {
8903b17b
BB
303 display: inline-block;
304 margin-right: .5em;
305 }
306 .form-item .form-setting .form-checkbox {
307 margin-top: 0;
308 }
309 .form-label span.form-shortname {
310 display: inline-block;
311 }
312 .form-item .form-setting,
313 .mform .fitem .felement,
314 .path-backup .mform .fitem .felement,
315 .mform .fdescription.required,
316 .form-item .form-description {
d3a93557 317 margin-left: 0;
8903b17b
BB
318 }
319 table#form td.submit,
320 .form-buttons,
321 #fitem_id_submitbutton,
322 .fp-content-center form + div,
323 #fgroup_id_buttonar,
324 .form-horizontal .form-actions,
325 .fitem_fsubmit .felement.fsubmit {
d3a93557
DP
326 padding-left: 10px;
327 padding-right: 10px;
8903b17b
BB
328 }
329 #helppopupbox {
eb695207 330 /* stylelint-disable declaration-no-important */
8903b17b
BB
331 width: auto !important;
332 left: 0 !important;
eb695207 333 /* stylelint-enable declaration-no-important */
8903b17b
BB
334 }
335}
336// Shrink calender when short on space in block
0e878352 337@media (min-width: 768px) and (max-width: 979px) {
8903b17b
BB
338 .block_calendar_month .content,
339 .block .minicalendar td {
340 padding-left: 0;
341 padding-right: 0;
342 }
343}
344
345@media (max-width: 979px) {
346 .nav-collapse {
d3a93557 347 height: 0;
8903b17b
BB
348 .nav > li > a {
349 color: @grayDark;
350 }
351 .nav > li > a:hover,
352 .nav > li > a:focus,
353 .dropdown-menu a:hover,
354 .dropdown-menu a:focus,
8903b17b 355 .dropdown-submenu a:hover,
e763d961 356 .dropdown-submenu a:focus,
8903b17b
BB
357 .dropdown-submenu a:active,
358 .dropdown-menu > li > a:hover,
359 .dropdown-menu > li > a:focus,
e763d961 360 .dropdown-submenu:hover > a,
0e878352 361 .dropdown-submenu:focus > a {
8903b17b
BB
362 background-image: none;
363 color: @grayDark;
364 }
365 }
affa8c03 366 .nav-collapse.in {
8903b17b 367 height: auto;
6da0e4cf
JC
368 .usermenu .moodle-actionmenu[data-enhanced] {
369 .toggle-display {
370 display: none;
371 }
372 .menu {
373 display: block;
374
375 li {
376 margin: 0 0.5em;
377 }
378 }
379 }
8903b17b 380 }
7e7e8fd3
AB
381 .path-mod-data .box > table > tbody > tr > td {
382 display: block;
383 }
9c53c70c
AB
384 .path-mod-forum .forumheaderlist {
385 thead .header {
386 font-weight: normal;
387 font-size: round(@fontSizeSmall);
388 }
389 .discussion {
0e878352
DP
390 .author,
391 .replies,
392 .lastpost {
9c53c70c
AB
393 font-size: round(@fontSizeSmall);
394 }
395 .replies .unread a {
396 padding: 0;
397 }
398 }
399 }
cb9c6a7d
JC
400
401 .navbar {
affa8c03 402 .nav-collapse.in {
cb9c6a7d 403 border-top: 1px solid @navbarBorder;
cb9c6a7d
JC
404 &.pull-left,
405 &.pull-right {
406 float: none;
407 }
408 > .nav {
409 margin: 0;
410
411 // Add padding to first-level links.
412 > li > a {
413 padding-left: 20px;
0163c590 414 border-radius: 0;
cb9c6a7d
JC
415 }
416 .dropdown-menu {
0163c590 417 margin: 0 0 0 15px;
cb9c6a7d 418 li > a {
0163c590 419 border-radius: 0;
cb9c6a7d
JC
420 }
421 }
422 }
423
affa8c03
JC
424 .nav,
425 .nav .dropdown-menu {
cb9c6a7d
JC
426 .dropdown-submenu {
427 .dropdown-toggle {
428 &:after {
429 display: inline-block;
430 float: none;
431 .caret();
432 border-top-color: @navbarBorder;
433 margin-left: 4px;
434 margin-top: 8px;
435 }
436 }
437
438 &.open {
439 > a {
440 background-color: @navbarBackground;
441 }
442 }
443
444 // Suppress showing of submenu menu content on hover.
445 &:hover {
446 .dropdown-menu {
447 display: none;
448 }
449 &.open {
450 > a {
0163c590 451 background-color: @navbarBackground;
cb9c6a7d
JC
452 }
453 > .dropdown-menu,
454 .open > .dropdown-menu {
455 display: block;
456 }
457 }
458 }
459 }
1ee45d68
JC
460 .divider {
461 width: auto;
462 display: block;
0163c590 463 height: 0;
1ee45d68 464 margin: 4px 1px;
0163c590
ME
465 border-left: 0 none;
466 border-right: 0 none;
1ee45d68
JC
467 border-top: 1px solid @navbarBorder;
468 border-bottom: 1px solid @navbarBackgroundHighlight;
469 }
cb9c6a7d
JC
470 }
471 }
0163c590
ME
472 }
473
474 .navbar-inverse {
475 .nav-collapse.in {
476 border-top-color: @navbarInverseBorder;
477 .nav,
478 .nav .dropdown-menu {
479 .dropdown-submenu {
480 .dropdown-toggle {
481 &:after {
482 border-top-color: @navbarInverseBorder;
53324831 483 }
0163c590
ME
484 }
485 &.open {
486 > a {
487 background-color: @navbarInverseBackground;
488 }
489 }
490
491 &:hover {
53324831
JC
492 &.open {
493 > a {
494 background-color: @navbarInverseBackground;
495 }
496 }
53324831
JC
497 }
498 }
0163c590
ME
499 .divider {
500 width: auto;
501 display: block;
502 height: 0;
503 margin: 4px 1px;
504 border-top: 1px solid @navbarInverseBackground;
505 border-bottom: 1px solid lighten(@navbarInverseBackground, 25%);
506 }
53324831 507 }
37cbded0 508 .nav {
509 > li > a {
510 &:hover,
511 &:focus {
512 color: @navbarInverseLinkColorHover;
513 }
514 }
515 }
516 .dropdown-menu a {
517 &:hover,
518 &:focus {
519 color: @navbarInverseLinkColorHover;
520 }
521 > li > a {
522 &:hover,
523 &:focus {
524 color: @navbarInverseLinkColorHover;
525 }
526 }
527 }
528 .dropdown-submenu a {
529 &:hover,
530 &:focus,
531 &:active {
532 color: @navbarInverseLinkColorHover;
533 }
534 }
53324831 535 }
cb9c6a7d 536 }
8903b17b
BB
537}
538
d8037b26 539@media (max-width: 767px) {
d3a93557
DP
540 // Resize, reflow file-picker on small devices
541 #filesskin .yui3-panel,
542 #filesskin .file-picker.fp-generallayout {
8903b17b
BB
543 width: 100%;
544 left: 0;
545 }
546 .userprofile dl.list {
d3a93557 547 // copied from dl-horizontal in bootstrap/repsonsive.less
8903b17b 548 dt {
d3a93557
DP
549 float: none;
550 clear: none;
551 width: auto;
552 text-align: left;
8903b17b
BB
553 }
554 dd {
d3a93557 555 margin-left: 0;
8903b17b
BB
556 }
557 }
47e00c34
RW
558 // Reset the alignment for required label to display inline on mobile devices
559 #page-mod-wiki-create .mform .fitem div.fitemtitle {
560 float: left;
561 }
562
d3a93557
DP
563 // GRID & CONTAINERS
564 // -----------------
565 // Remove width from containers
566 .container {
567 width: auto;
568 }
569 // Fluid rows
570 .row-fluid {
571 width: 100%;
572 }
573 .row-fluid .span8.pull-right,
574 .row-fluid .span9.pull-right {
575 float: none;
576 }
577 // Undo negative margin on rows and thumbnails
578 .row {
579 margin-left: 0;
580 }
581 // Make all grid-sized elements block level again
582 [class*="span"],
583 .row-fluid [class*="span"] {
584 float: none;
585 display: block;
586 width: 100%;
587 margin-left: 0;
588 .box-sizing(border-box);
589 }
338021b9 590
d8037b26
GB
591 // We need to specify a more specific selector to reset the width for
592 // cases when we have content in the side-pre blockregion but not in the
593 // side-post blockregion as there are more specific selectors in
594 // core.less which take precedence which break responsiveness.
595 .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
596 .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
597 #block-region-side-pre.span4,
598 #region-main.span8 {
599 .fluid-span(12);
600 }
601 }
338021b9 602
d3a93557
DP
603 .row-fluid .span12 {
604 width: 100%;
605 .box-sizing(border-box);
606 }
607 .row-fluid [class*="offset"]:first-child {
608 margin-left: 0;
609 }
610 div[role=main] {
611 margin-bottom: 1em;
612 }
759e970f
AB
613 .coursebox {
614 .info {
615 .name {
616 a {
617 background-position: 0 13px;
618 }
619 }
620 }
621 }
622 .category-browse {
623 .coursebox {
624 .info {
625 .name {
626 a {
627 background-position: 0 13px;
628 }
629 }
630 }
631 }
632 }
8903b17b 633}
5dc361e1
SH
634
635// All widths between 1200px and 1600px
636@media (min-width: 1200px) and (max-width: 1600px) {
d8037b26
GB
637 .fluid-span (@columns) {
638 .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
639 }
5dc361e1
SH
640 // CSS for the course management pages.
641 #course-category-listings.columns-3 {
e514c722 642 background-color: @tableBackground;
418b9328 643 border: 0;
5dc361e1
SH
644
645 #category-listing,
646 #course-listing {
647 .fluid-span(6);
d8037b26
GB
648 margin-left: @fluidGridGutterWidth1200;
649 *margin-left: @fluidGridGutterWidth1200 - (.5 / @gridRowWidth * 100 * 1%);
5dc361e1
SH
650 &:first-child {
651 margin-left: 0;
652 }
653 }
654 #course-detail {
655 .fluid-span(12);
656 margin: 1em 0 0;
657 }
658 }
5dc361e1
SH
659}
660
661// All widths up to 1199px.
662@media (max-width: 1199px) {
1d20cf37
JF
663
664 // Editor on question pages
665 .path-question {
666 #id_answerhdr div.fitem {
667 padding-right: 6px;
668 padding-left: 4px;
669 }
670 }
5dc361e1
SH
671 // CSS for the course management pages.
672 #course-category-listings.columns-3 {
e514c722 673 background-color: @tableBackground;
418b9328 674 border: 0;
5dc361e1
SH
675 #category-listing,
676 #course-listing,
677 #course-detail {
678 .fluid-span(12);
679 margin: 0 0 1em 0;
680 }
681 }
35620f63
SH
682
683 #page-mod-forum-discuss .discussioncontrols {
684 text-align: right;
685 .discussioncontrol {
686 float: none;
687 width: auto;
688 display: inline-block;
689 margin: 0 3px 0.5em;
690 select,
691 input {
692 margin-bottom: 0;
693 }
694 &.movediscussion {
695 margin-right: 0;
696 padding-right: 0;
697 }
698 }
699 }
338021b9 700}
88d366e5
JF
701
702
703// File Picker.
704@media (max-width: 768px) {
705 .fp-forminset .control-group .controls {
706 margin-left: 0;
707 }
d8037b26 708}