MDL-66999 theme_boost: @extend remove .modal- styles for YUI modals
[moodle.git] / theme / boost / scss / moodle / core.scss
1 /* core.less */
3 // When we upgrade boostrap to v4 release, we will need to change this to be used by the text-white class.
4 // Because a primary colour that is both AA accessible on grey (footer) and white is not possible, we always
5 // want white default colour.
6 $bg-inverse-link-color: #fff !default;
8 #region-main {
9     overflow-x: auto;
10     overflow-y: visible;
11     border: $card-border-width solid $card-border-color;
12     @if $enable-rounded {
13         @include border-radius($card-border-radius);
14     }
15     padding: $card-spacer-x;
16     background-color: $body-bg;
17 }
19 .context-header-settings-menu,
20 .region-main-settings-menu {
21     float: right;
22     width: auto;
23     max-width: 4em;
24     height: 2em;
25     display: block;
26     margin-top: 4px;
27 }
29 .context-header-settings-menu .dropdown-toggle > .icon,
30 #region-main-settings-menu .dropdown-toggle > .icon {
31     height: 24px;
32     font-size: 24px;
33     width: auto;
34 }
35 /** Prevent user notifications overlapping with region main settings menu */
36 #user-notifications {
37     display: block;
38     overflow: hidden;
39 }
41 /** Page layout CSS starts **/
42 .layout-option-noheader #page-header,
43 .layout-option-nonavbar #page-navbar,
44 .layout-option-nofooter #page-footer,
45 .layout-option-nocourseheader .course-content-header,
46 .layout-option-nocoursefooter .course-content-footer {
47     display: none;
48 }
50 /** Page layout CSS ends **/
52 .mdl-left {
53     text-align: left;
54 }
56 .mdl-right {
57     text-align: right;
58 }
60 /*rtl:ignore*/
61 .text-ltr {
62     direction: ltr !important; /* stylelint-disable-line declaration-no-important */
63 }
65 #add,
66 #remove,
67 .centerpara,
68 .mdl-align {
69     text-align: center;
70 }
72 a.dimmed,
73 a.dimmed:link,
74 a.dimmed:visited,
75 a.dimmed_text,
76 a.dimmed_text:link,
77 a.dimmed_text:visited,
78 .dimmed_text,
79 .dimmed_text a,
80 .dimmed_text a:link,
81 .dimmed_text a:visited,
82 .usersuspended,
83 .usersuspended a,
84 .usersuspended a:link,
85 .usersuspended a:visited,
86 .dimmed_category,
87 .dimmed_category a {
88     color: $text-muted;
89 }
91 .unlist,
92 .unlist li,
93 .inline-list,
94 .inline-list li,
95 .block .list,
96 .block .list li,
97 .section li.activity,
98 .section li.movehere,
99 .tabtree li {
100     list-style: none;
101     margin: 0;
102     padding: 0;
105 .inline,
106 .inline-list li {
107     display: inline;
110 .notifytiny {
111     font-size: $font-size-xs;
114 .notifytiny li,
115 .notifytiny td {
116     font-size: 100%;
119 .red,
120 .notifyproblem {
121     color: map-get($theme-colors, 'warning');
124 .green,
125 .notifysuccess {
126     color: map-get($theme-colors, 'success');
129 .highlight {
130     color: map-get($theme-colors, 'info');
133 .fitem.advanced .text-info {
134     font-weight: bold;
137 .reportlink {
138     text-align: right;
141 a.autolink.glossary:hover {
142     cursor: help;
144 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
145 .collapsibleregioncaption {
146     white-space: nowrap;
147     min-height: $line-height-base * $font-size-base;
150 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
151     cursor: pointer;
154 .pagelayout-mydashboard #region-main {
155     border: 0;
156     padding: 0;
157     background-color: transparent;
158     margin-top: -1px;
161 .collapsibleregioncaption img {
162     vertical-align: middle;
165 .jsenabled .hiddenifjs {
166     display: none;
169 .visibleifjs {
170     display: none;
173 .jsenabled .visibleifjs {
174     display: inline;
177 .jsenabled .collapsibleregion {
178     overflow: hidden;
179     box-sizing: content-box;
182 .jsenabled .collapsed .collapsibleregioninner {
183     visibility: hidden;
186 .collapsible-actions {
187     display: none;
188     text-align: right;
191 .jsenabled .collapsible-actions {
192     display: block;
195 .collapsible-actions .collapseexpand {
196     padding-left: 20px;
197     background: url([[pix:t/collapsed]]) 2px center no-repeat;
199 /*rtl:raw:
200 .collapsible-actions .collapseexpand {
201     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
203 */
204 .collapsible-actions .collapse-all {
205     background-image: url([[pix:t/expanded]]);
208 .yui-overlay .yui-widget-bd {
209     background-color: #ffee69;
210     border: 1px solid #a6982b;
211     border-top-color: #d4c237;
212     color: #000;
213     left: 0;
214     padding: 2px 5px;
215     position: relative;
216     top: 0;
217     z-index: 1;
220 .clearer {
221     background: transparent;
222     border-width: 0;
223     clear: both;
224     display: block;
225     height: 1px;
226     margin: 0;
227     padding: 0;
230 .bold,
231 .warning,
232 .errorbox .title,
233 .pagingbar .title,
234 .pagingbar .thispage {
235     font-weight: bold;
238 img.userpicture {
239     margin-right: 0.5rem;
242 img.resize {
243     height: 1em;
244     width: 1em;
247 .action-menu .dropdown-toggle {
248     text-decoration: none;
251 .action-menu {
252     white-space: nowrap;
255 .block img.resize {
256     height: 0.9em;
257     width: 0.8em;
259 /* Icon styles */
260 img.activityicon {
261     height: 24px;
262     width: 24px;
263     vertical-align: middle;
266 .headermain {
267     font-weight: bold;
270 #maincontent {
271     display: block;
272     height: 1px;
273     overflow: hidden;
276 img.uihint {
277     cursor: help;
280 #addmembersform table {
281     margin-left: auto;
282     margin-right: auto;
285 table.flexible .emptyrow {
286     display: none;
289 form.popupform,
290 form.popupform div {
291     display: inline;
294 .arrow_button input {
295     overflow: hidden;
297 .no-overflow {
298     overflow: auto;
301 // Minimum height required for a menu in a table inside a scrollable div.
302 // Position required for table sizing inside a flex container.
303 .no-overflow > .generaltable {
304     position: relative;
305     margin-bottom: 0;
306     min-height: 10em;
308 // Accessibility features
310 // Accessibility: text 'seen' by screen readers but not visual users.
311 .accesshide {
312     @include sr-only();
315 span.hide,
316 div.hide,
317 .hidden {
318     display: none;
320 // Accessibility: Skip block link, for keyboard-only users.
321 a.skip-block,
322 a.skip {
323     position: absolute;
324     top: -1000em;
325     font-size: 0.85em;
326     text-decoration: none;
329 a.skip-block:focus,
330 a.skip-block:active,
331 a.skip:focus,
332 a.skip:active {
333     position: static;
334     display: block;
337 .skip-block-to {
338     display: block;
339     height: 1px;
340     overflow: hidden;
342 // Blogs
343 .addbloglink {
344     text-align: center;
347 .blog_entry .audience {
348     text-align: right;
349     padding-right: 4px;
352 .blog_entry .tags {
353     margin-top: 15px;
356 .blog_entry .content {
357     margin-left: 43px;
359 // Group
361 #doc-contents h1 {
362     margin: 1em 0 0 0;
365 #doc-contents ul {
366     margin: 0;
367     padding: 0;
368     width: 90%;
371 #doc-contents ul li {
372     list-style-type: none;
375 .groupmanagementtable td {
376     vertical-align: top;
379 .groupmanagementtable #existingcell,
380 .groupmanagementtable #potentialcell {
381     width: 42%;
384 .groupmanagementtable #buttonscell {
385     width: 16%;
388 .groupmanagementtable #buttonscell p.arrow_button input {
389     width: auto;
390     min-width: 80%;
391     margin: 0 auto;
392     display: block;
395 .groupmanagementtable #removeselect_wrapper,
396 .groupmanagementtable #addselect_wrapper {
397     width: 100%;
400 .groupmanagementtable #removeselect_wrapper label,
401 .groupmanagementtable #addselect_wrapper label {
402     font-weight: normal;
405 #group-usersummary {
406     width: 14em;
409 .groupselector {
410     margin-top: 3px;
411     margin-bottom: 3px;
412     display: inline-block;
415 .groupselector label {
416     display: inline-block;
419 // Login
420 .login-page {
421     [name="username"] {
422         margin-bottom: -1px;
423         border-bottom-right-radius: 0;
424         border-bottom-left-radius: 0;
425     }
427     [type="password"] {
428         margin-bottom: 10px;
429         border-top-left-radius: 0;
430         border-top-right-radius: 0;
431     }
434 // Notes
435 .notepost {
436     margin-bottom: 1em;
439 .notepost .userpicture {
440     float: left;
441     margin-right: 5px;
444 .notepost .content,
445 .notepost .footer {
446     clear: both;
449 .notesgroup {
450     margin-left: 20px;
453 // My Moodle
454 .path-my .coursebox {
455     margin: $spacer-y 0;
456     padding: 0;
458     .overview {
459         margin: 15px 30px 10px 30px;
460     }
463 .path-my .coursebox .info {
464     float: none;
465     margin: 0;
468 // Modules
469 .mod_introbox {
470     padding: 10px;
473 table.mod_index {
474     width: 100%;
477 // Comments
478 .comment-ctrl {
479     font-size: 12px;
480     display: none;
481     margin: 0;
482     padding: 0;
485 .comment-ctrl h5 {
486     margin: 0;
487     padding: 5px;
490 .comment-area {
491     max-width: 400px;
492     padding: 5px;
495 .comment-area textarea {
496     width: 100%;
497     overflow: auto;
499     &.fullwidth {
500         -webkit-box-sizing: border-box;
501         -moz-box-sizing: border-box;
502         box-sizing: border-box;
503     }
506 .comment-area .fd {
507     text-align: right;
510 .comment-meta span {
511     color: gray;
514 .comment-link img {
515     vertical-align: text-bottom;
518 .comment-list {
519     font-size: 11px;
520     overflow: auto;
521     list-style: none;
522     padding: 0;
523     margin: 0;
526 .comment-list li {
527     margin: 2px;
528     list-style: none;
529     margin-bottom: 5px;
530     clear: both;
531     padding: .3em;
532     position: relative;
535 .comment-list li.first {
536     display: none;
539 .comment-paging {
540     text-align: center;
543 .comment-paging .pageno {
544     padding: 2px;
547 .comment-paging .curpage {
548     border: 1px solid #ccc;
551 .comment-message .picture {
552     width: 20px;
553     float: left;
556 .comment-message .text {
557     margin: 0;
558     padding: 0;
561 .comment-message .text p {
562     padding: 0;
563     margin: 0 18px 0 0;
566 .comment-delete {
567     position: absolute;
568     top: 0;
569     right: 0;
570     margin: .3em;
573 .comment-report-selectall {
574     display: none;
577 .comment-link {
578     display: none;
581 .jsenabled .comment-link {
582     display: block;
585 .jsenabled .showcommentsnonjs {
586     display: none;
589 .jsenabled .comment-report-selectall {
590     display: inline;
592 /**
593 * Completion progress report
594 */
595 .completion-expired {
596     color: map-get($theme-colors, 'warning');
599 .completion-expected {
600     font-size: $font-size-xs;
603 .completion-sortchoice,
604 .completion-identifyfield {
605     font-size: $font-size-xs;
606     vertical-align: bottom;
609 .completion-progresscell {
610     text-align: right;
613 .completion-expired .completion-expected {
614     font-weight: bold;
616 /**
617 * Tags
618 */
619 img.user-image {
620     height: 100px;
621     width: 100px;
624 #tag-search-box {
625     text-align: center;
626     margin: 10px auto;
629 .path-tag .tag-index-items .tagarea {
630     border: 1px solid #e3e3e3;
631     border-radius: 4px;
632     padding: 10px;
633     margin-top: 10px;
636 .path-tag .tag-index-items .tagarea h3 {
637     display: block;
638     padding: 3px 0 10px 0;
639     margin: 0;
640     font-size: 1.1em;
641     font-weight: bold;
642     line-height: 20px;
643     color: #999;
644     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
645     text-transform: uppercase;
646     word-wrap: break-word;
647     border-bottom: solid 1px #e3e3e3;
648     margin-bottom: 10px;
651 .path-tag .tagarea .controls,
652 .path-tag .tagarea .taggeditems {
653     @include clearfix();
656 .path-tag .tagarea .controls,
657 .path-tag .tag-backtoallitems {
658     text-align: center;
661 .path-tag .tagarea .controls .gotopage.nextpage {
662     float: right;
665 .path-tag .tagarea .controls .gotopage.prevpage {
666     float: left;
669 .path-tag .tagarea .controls .exclusivemode {
670     display: inline-block;
673 .path-tag .tagarea .controls.controls-bottom {
674     margin-top: 5px;
677 .path-tag .tagarea .controls .gotopage.nextpage::after {
678     padding-right: 5px;
679     padding-left: 5px;
680     content: "»";
683 .path-tag .tagarea .controls .gotopage.prevpage::before {
684     padding-right: 5px;
685     padding-left: 5px;
686     content: "«";
689 span.flagged-tag,
690 tr.flagged-tag,
691 span.flagged-tag a,
692 tr.flagged-tag a {
693     color: map-get($theme-colors, 'warning');
696 .tag-management-table td,
697 .tag-management-table th {
698     vertical-align: middle;
699     padding: 4px;
702 .tag-management-table .inplaceeditable.inplaceeditingon input {
703     width: 150px;
706 .path-admin-tag .addstandardtags {
707     float: right;
709     img {
710         margin: 0 5px;
711     }
714 .path-tag .tag-relatedtags {
715     padding-top: 10px;
718 .path-tag .tag-management-box {
719     text-align: right;
722 .path-tag .tag-index-toc {
723     padding: 10px;
724     text-align: center;
727 .path-tag .tag-index-toc li,
728 .path-tag .tag-management-box li {
729     margin-left: 5px;
730     margin-right: 5px;
733 .path-tag .tag-management-box li a.edittag {
734     background-image: url([[pix:moodle|i/settings]]);
737 .path-tag .tag-management-box li a.flagasinappropriate {
738     background-image: url([[pix:moodle|i/flagged]]);
741 .path-tag .tag-management-box li a.removefrommyinterests {
742     background-image: url([[pix:moodle|t/delete]]);
745 .path-tag .tag-management-box li a.addtomyinterests {
746     background-image: url([[pix:moodle|t/add]]);
749 .path-tag .tag-management-box li a {
750     background-repeat: no-repeat;
751     background-position: left;
752     padding-left: 17px;
755 .tag_feed.media-list .media .itemimage {
756     float: left;
759 .tag_feed.media-list .media .itemimage img {
760     height: 35px;
761     width: 35px;
764 .tag_feed.media-list .media .media-body {
765     padding-right: 10px;
766     padding-left: 10px;
769 .tag_feed .media .muted a {
770     color: $text-muted;
773 .tag_cloud {
774     text-align: center;
777 .tag_cloud .inline-list li {
778     padding: 0 0.2em;
781 .tag_cloud .tag_overflow {
782     margin-top: 1em;
783     font-style: italic;
786 .tag_cloud .s20 {
787     font-size: 2.7em;
790 .tag_cloud .s19 {
791     font-size: 2.6em;
794 .tag_cloud .s18 {
795     font-size: 2.5em;
798 .tag_cloud .s17 {
799     font-size: 2.4em;
802 .tag_cloud .s16 {
803     font-size: 2.3em;
806 .tag_cloud .s15 {
807     font-size: 2.2em;
810 .tag_cloud .s14 {
811     font-size: 2.1em;
814 .tag_cloud .s13 {
815     font-size: 2em;
818 .tag_cloud .s12 {
819     font-size: 1.9em;
822 .tag_cloud .s11 {
823     font-size: 1.8em;
826 .tag_cloud .s10 {
827     font-size: 1.7em;
830 .tag_cloud .s9 {
831     font-size: 1.6em;
834 .tag_cloud .s8 {
835     font-size: 1.5em;
838 .tag_cloud .s7 {
839     font-size: 1.4em;
842 .tag_cloud .s6 {
843     font-size: 1.3em;
846 .tag_cloud .s5 {
847     font-size: 1.2em;
850 .tag_cloud .s4 {
851     font-size: 1.1em;
854 .tag_cloud .s3 {
855     font-size: 1em;
858 .tag_cloud .s2 {
859     font-size: 0.9em;
862 .tag_cloud .s1 {
863     font-size: 0.8em;
866 .tag_cloud .s0 {
867     font-size: 0.7em;
870 .tag_list ul {
871     display: inline;
874 .tag_list.hideoverlimit .overlimit {
875     display: none;
878 .tag_list .tagmorelink {
879     display: none;
882 .tag_list.hideoverlimit .tagmorelink {
883     display: inline;
886 .tag_list.hideoverlimit .taglesslink {
887     display: none;
890 /**
891 * Web Service
892 */
893 #webservice-doc-generator td {
894     text-align: left;
895     border: 0 solid black;
898 /**
899 * Enrol
900 */
901 .userenrolment {
902     width: 100%;
903     border-collapse: collapse;
906 .userenrolment tr {
907     vertical-align: top;
910 .userenrolment td {
911     padding: 0;
912     height: 41px;
915 .userenrolment .subfield {
916     margin-right: 5px;
919 .userenrolment .col_userdetails .subfield {
920     margin-left: 40px;
923 .userenrolment .col_userdetails .subfield_picture {
924     float: left;
925     margin-left: 0;
928 .userenrolment .col_lastseen {
929     width: 150px;
932 .userenrolment .col_role {
933     width: 262px;
936 .userenrolment .col_role .roles,
937 .userenrolment .col_group .groups {
938     margin-right: 30px;
941 .userenrolment .col_role .role {
942     float: left;
943     padding: 0 3px 3px;
944     margin: 0 3px 3px;
945     white-space: nowrap;
948 .userenrolment .col_group .group {
949     float: left;
950     padding: 3px;
951     margin: 3px;
952     white-space: nowrap;
955 .userenrolment .col_role .role a,
956 .userenrolment .col_group .group a {
957     margin-left: 3px;
958     cursor: pointer;
961 .userenrolment .col_role .addrole,
962 .userenrolment .col_group .addgroup {
963     float: right;
964     padding: 3px;
965     margin: 3px;
967     > a:hover {
968         border-bottom: 1px solid #666;
969     }
972 .userenrolment .col_role .addrole img,
973 .userenrolment .col_group .addgroup img {
974     vertical-align: baseline;
977 .userenrolment .hasAllRoles .col_role .addrole {
978     display: none;
981 .userenrolment .col_enrol .enrolment {
982     float: left;
983     padding: 0 3px 3px;
984     margin: 0 3px 3px;
987 .userenrolment .col_enrol .enrolment a {
988     float: right;
989     margin-left: 3px;
992 .corelightbox {
993     background-color: #ccc;
994     position: absolute;
995     top: 0;
996     left: 0;
997     width: 100%;
998     height: 100%;
999     text-align: center;
1002 .corelightbox img {
1003     position: fixed;
1004     top: 50%;
1005     left: 50%;
1008 .mod-indent-outer {
1009     display: table;
1012 .mod-indent {
1013     display: table-cell;
1016 .label .mod-indent {
1017     float: left;
1018     padding-top: 20px;
1020 $mod-indent-size: 30px;
1021 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1023 @for $i from 1 through 16 {
1024     $width: ($i * $mod-indent-size);
1026     .mod-indent-#{$i} {
1027         width: $width;
1028     }
1031 .mod-indent-huge {
1032     width: (16 * $mod-indent-size);
1035 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1036 .resourcecontent .mediaplugin_mp3 object {
1037     height: 25px;
1038     width: 600px;
1041 .resourcecontent audio.mediaplugin_html5audio {
1042     width: 600px;
1044 /** Large resource images should avoid hidden overflow **/
1045 .resourceimage {
1046     max-width: 100%;
1048 /* Audio player size in 'inline' mode (can only change width, as above) */
1049 .mediaplugin_mp3 object {
1050     height: 15px;
1051     width: 300px;
1054 audio.mediaplugin_html5audio {
1055     width: 300px;
1057 /* TinyMCE moodle media preview frame should not have padding */
1058 .core_media_preview.pagelayout-embedded #content {
1059     padding: 0;
1062 .core_media_preview.pagelayout-embedded #maincontent {
1063     height: 0;
1066 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1067     padding: 0;
1068     margin: 0;
1069     min-width: 0;
1070     background: none;
1073 .path-rating .ratingtable {
1074     width: 100%;
1075     margin-bottom: 1em;
1078 .path-rating .ratingtable th.rating {
1079     width: 100%;
1082 .path-rating .ratingtable td.rating,
1083 .path-rating .ratingtable td.time {
1084     white-space: nowrap;
1085     text-align: center;
1088 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1089 .moodle-dialogue-base .moodle-dialogue-lightbox {
1090     background-color: $gray;
1093 // Prevent adding backdrops to popups in popups.
1094 .pagelayout-popup {
1095     .moodle-dialogue-base {
1096         .moodle-dialogue-lightbox {
1097             background-color: transparent;
1098         }
1099         .moodle-dialogue {
1100             box-shadow: $popover-box-shadow;
1101         }
1102     }
1105 .moodle-dialogue-base .hidden,
1106 .moodle-dialogue-base .moodle-dialogue-hidden {
1107     display: none;
1110 .no-scrolling {
1111     overflow: hidden;
1114 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1115     left: 0;
1116     top: 0;
1117     right: 0;
1118     bottom: -50px;
1119     position: fixed;
1122 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1123     overflow: auto;
1126 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1127     width: 28px;
1128     height: 16px;
1129     background-size: 100%;
1132 .moodle-dialogue-base .moodle-dialogue-wrap {
1133     background-color: #fff;
1134     border: 1px solid #ccc;
1137 // Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1138 // it for a reason (conflicts with jquery .show()).
1139 .modal.show {
1140     display: block;
1143 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1144     display: flex;
1145     padding: 1rem 1rem;
1146     border-bottom: 1px solid #dee2e6;
1149 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1150     // Undo some YUI damage.
1151     min-height: 3rem;
1152     color: initial;
1153     background: initial;
1154     font-size: 1.5rem;
1155     line-height: 1.5;
1158 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1159     font-size: 1.5rem;
1162 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1163     /*rtl:raw:
1164         left: 0;
1165         right: auto;
1166     */
1167     padding: 0;
1168     position: relative;
1169     margin-left: auto;
1172 .moodle-dialogue-base .closebutton {
1173     padding: $modal-header-padding;
1174     margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
1175     position: relative;
1176     background-color: transparent;
1177     border: 0;
1178     background-image: none;
1179     box-shadow: none;
1180     opacity: 0.7;
1181     &:hover,
1182     &:active {
1183         opacity: 1;
1184     }
1185     &::after {
1186         content: "×";
1187     }
1190 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1191     padding: 0.5rem;
1192     body {
1193         background-color: $body-bg;
1194     }
1197 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1198     overflow: auto;
1199     position: absolute;
1200     top: 0;
1201     bottom: 50px;
1202     left: 0;
1203     right: 0;
1204     margin: 0;
1205     border: 0;
1208 .moodle-dialogue-exception .moodle-exception-param label {
1209     font-weight: bold;
1212 .moodle-dialogue-exception .param-stacktrace label {
1213     background-color: #eee;
1214     border: 1px solid #ccc;
1215     border-bottom-width: 0;
1218 .moodle-dialogue-exception .param-stacktrace pre {
1219     border: 1px solid #ccc;
1220     background-color: #fff;
1223 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1224     color: navy;
1225     font-size: $font-size-sm;
1228 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1229     color: map-get($theme-colors, 'warning');
1230     font-size: $font-size-sm;
1233 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1234     color: #333;
1235     font-size: 90%;
1236     border-bottom: 1px solid #eee;
1239 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1240     display: none;
1243 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1244     // Undo some YUI damage.
1245     background: initial;
1248 .moodle-dialogue-confirm .confirmation-message {
1249     margin: 0.5rem 0;
1252 .moodle-dialogue-confirm .confirmation-dialogue input {
1253     min-width: 80px;
1256 .moodle-dialogue-exception .moodle-exception-message {
1257     margin: 1em;
1260 .moodle-dialogue-exception .moodle-exception-param {
1261     margin-bottom: 0.5em;
1264 .moodle-dialogue-exception .moodle-exception-param label {
1265     width: 150px;
1268 .moodle-dialogue-exception .param-stacktrace label {
1269     display: block;
1270     margin: 0;
1271     padding: 4px 1em;
1274 .moodle-dialogue-exception .param-stacktrace pre {
1275     display: block;
1276     height: 200px;
1277     overflow: auto;
1280 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1281     display: inline-block;
1282     margin: 4px 0;
1285 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1286     display: inline-block;
1287     width: 50px;
1288     margin: 4px 1em;
1291 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1292     padding-left: 25px;
1293     margin-bottom: 4px;
1294     padding-bottom: 4px;
1297 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1298     opacity: 0.75;
1299     width: 100%;
1300     height: 100%;
1301     top: 0;
1302     left: 0;
1303     background-color: white;
1304     text-align: center;
1305     padding: 10% 0;
1307 /* Apply a default max-height on tooltip text */
1308 .moodle-dialogue .tooltiptext {
1309     max-height: 300px;
1312 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1313     z-index: 3001;
1315     .moodle-dialogue-bd {
1316         overflow: auto;
1317     }
1320 /**
1321  * Chooser Dialogues (moodle-core-chooserdialogue)
1322  *
1323  * This CSS belong to the chooser dialogue which should work both with, and
1324  * without javascript enabled
1325  */
1326 /* Hide the dialog and it's title */
1327 .chooserdialoguebody,
1328 .choosertitle {
1329     display: none;
1332 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1333     margin: 0;
1336 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1337     padding: 0;
1338     background: #f2f2f2;
1340     @include border-bottom-radius(10px);
1342 /* Center the submit buttons within the area */
1343 .choosercontainer #chooseform .submitbuttons {
1344     padding: 0.7em 0;
1345     text-align: right;
1347 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1349 @media (max-height: 639px) {
1350     .ios .choosercontainer #chooseform .submitbuttons {
1351         padding: 45px 0;
1352     }
1355 .choosercontainer #chooseform .submitbuttons input {
1356     min-width: 100px;
1357     margin: 0 0.5em;
1359 /* Various settings for the options area */
1360 .choosercontainer #chooseform .options {
1361     position: relative;
1362     border-bottom: 1px solid #bbb;
1364 /* Only set these options if we're showing the js container */
1365 .jschooser .choosercontainer #chooseform .alloptions {
1366     overflow-x: hidden;
1367     overflow-y: auto;
1368     max-width: 240px;
1370     .option {
1371         input[type=radio] {
1372             display: inline-block;
1373         }
1375         .typename {
1376             display: inline-block;
1377             width: 55%;
1378         }
1379     }
1381 /* Settings for option rows and option subtypes */
1382 .choosercontainer #chooseform .moduletypetitle,
1383 .choosercontainer #chooseform .option,
1384 .choosercontainer #chooseform .nonoption {
1385     margin-bottom: 0;
1386     padding: 0 1.6em 0 1.6em;
1389 .choosercontainer #chooseform .moduletypetitle {
1390     text-transform: uppercase;
1391     padding-top: 1.2em;
1392     padding-bottom: 0.4em;
1395 .choosercontainer #chooseform .option .typename,
1396 .choosercontainer #chooseform .nonoption .typename {
1397     padding: 0 0 0 0.5em;
1400 .choosercontainer #chooseform .modicon + .typename {
1401     padding-left: 0;
1404 .choosercontainer #chooseform .option input[type=radio],
1405 .choosercontainer #chooseform .option span.typename {
1406     vertical-align: middle;
1409 .choosercontainer #chooseform .option label {
1410     display: block;
1411     margin: 0;
1412     padding: ($spacer / 2) 0;
1413     border-bottom: 1px solid #fff;
1416 .choosercontainer #chooseform .option .icon {
1417     margin: 0;
1418     padding: 0 $spacer;
1421 .choosercontainer #chooseform .nonoption {
1422     padding-left: 2.7em;
1423     padding-top: 0.3em;
1424     padding-bottom: 0.1em;
1427 .choosercontainer #chooseform .subtype {
1428     margin-bottom: 0;
1429     padding: 0 1.6em 0 3.2em;
1432 .choosercontainer #chooseform .subtype .typename {
1433     margin: 0 0 0 0.2em;
1435 /* The instruction/help area */
1436 .jschooser .choosercontainer #chooseform .instruction,
1437 .jschooser .choosercontainer #chooseform .typesummary {
1438     display: none;
1439     position: absolute;
1440     top: 0;
1441     right: 0;
1442     bottom: 0;
1443     left: 240px;
1444     margin: 0;
1445     padding: 1.6em;
1446     background-color: #fff;
1447     overflow-x: hidden;
1448     overflow-y: auto;
1449     line-height: 2em;
1451 /* Selected option settings */
1452 .jschooser .choosercontainer #chooseform .instruction,
1453 .choosercontainer #chooseform .selected .typesummary {
1454     display: block;
1457 .choosercontainer #chooseform .selected {
1458     background-color: #fff;
1459     margin-top: -1px;
1460     padding-top: 1px;
1463 .chooserdialogue-course-modchooser .modicon .icon {
1464     width: 24px;
1465     height: 24px;
1466     font-size: 24px;
1469 @include media-breakpoint-down(xs) {
1470     .jsenabled .choosercontainer #chooseform .alloptions {
1471         max-width: 100%;
1472     }
1474     .jsenabled .choosercontainer #chooseform .instruction,
1475     .jsenabled .choosercontainer #chooseform .typesummary {
1476         position: static;
1477     }
1480 /* Form element: listing */
1481 .formlistingradio {
1482     padding-bottom: 25px;
1483     padding-right: 10px;
1486 .formlistinginputradio {
1487     float: left;
1490 .formlistingmain {
1491     min-height: 225px;
1494 .formlisting {
1495     position: relative;
1496     margin: 15px 0;
1497     padding: 1px 19px 14px;
1498     background-color: white;
1499     border: 1px solid #ddd;
1501     @include border-radius(4px);
1504 .formlistingmore {
1505     position: absolute;
1506     cursor: pointer;
1507     bottom: -1px;
1508     right: -1px;
1509     padding: 3px 7px;
1510     font-size: 12px;
1511     font-weight: bold;
1512     background-color: whitesmoke;
1513     border: 1px solid #ddd;
1514     color: #9da0a4;
1516     @include border-radius(4px 0 4px 0);
1519 .formlistingall {
1520     margin: 15px 0;
1521     padding: 0;
1523     @include border-radius(4px);
1526 .formlistingrow {
1527     cursor: pointer;
1528     border-bottom: 1px solid;
1529     border-color: #e1e1e8;
1530     border-left: 1px solid #e1e1e8;
1531     border-right: 1px solid #e1e1e8;
1532     background-color: #f7f7f9;
1534     @include border-radius(0 0 4px 4px);
1535     padding: 6px;
1536     top: 50%;
1537     left: 50%;
1538     min-height: 34px;
1539     float: left;
1540     width: 150px;
1543 body.jsenabled .formlistingradio {
1544     display: none;
1547 body.jsenabled .formlisting {
1548     display: block;
1551 /* Badges styles */
1552 table.collection {
1553     @extend .table;
1554     @extend .table-bordered;
1555     @extend .table-striped;
1558 a.criteria-action {
1559     padding: 0 3px;
1560     float: right;
1563 div.criteria-description {
1564     padding: 10px 15px;
1565     margin: 5px 0;
1566     background: none repeat scroll 0 0 #f9f9f9;
1567     border: 1px solid #eee;
1570 ul.badges {
1571     margin: 0;
1572     list-style: none;
1575 .badges li {
1576     position: relative;
1577     display: inline-block;
1578     padding-top: 1em;
1579     text-align: center;
1580     vertical-align: top;
1581     width: 150px;
1584 .badges li .badge-name {
1585     display: block;
1586     padding: 5px;
1589 .badges li > img {
1590     position: absolute;
1593 .badges li .badge-image {
1594     width: 100px;
1595     height: 100px;
1596     left: 10px;
1597     top: 0;
1598     z-index: 1;
1601 .badges li .badge-actions {
1602     position: relative;
1605 .badges li .expireimage {
1606     width: 100px;
1607     height: 100px;
1608     left: 25px;
1609     top: 0;
1610     position: absolute;
1611     z-index: 10;
1612     opacity: 0.85;
1615 #badge-image {
1616     background-color: transparent;
1617     padding: 0;
1618     position: relative;
1619     min-width: 100px;
1620     width: 20%;
1621     display: inline-block;
1622     vertical-align: top;
1623     margin-top: 17px;
1624     margin-bottom: 20px;
1626     .expireimage {
1627         width: 100px;
1628         height: 100px;
1629         left: 0;
1630         top: 0;
1631         opacity: 0.85;
1632         position: absolute;
1633         z-index: 10;
1634     }
1636     .singlebutton {
1637         padding-top: 5px;
1638         display: block;
1640         button {
1641             margin-left: 4px;
1642         }
1643     }
1646 #badge-details {
1647     display: inline-block;
1648     width: 79%;
1651 #badge-overview dl,
1652 #badge-details dl {
1653     margin: 0;
1655     dt,
1656     dd {
1657         vertical-align: top;
1658         padding: 3px 0;
1659     }
1661     dt {
1662         clear: both;
1663         display: inline-block;
1664         width: 20%;
1665         min-width: 100px;
1666     }
1668     dd {
1669         display: inline-block;
1670         width: 79%;
1671         margin-left: 1%;
1672     }
1675 .badge-profile {
1676     vertical-align: top;
1679 .connected {
1680     color: map-get($theme-colors, 'success');
1683 .notconnected {
1684     color: map-get($theme-colors, 'danger');
1687 .connecting {
1688     color: map-get($theme-colors, 'warning');
1691 #page-badges-award .recipienttable tr td {
1692     vertical-align: top;
1695 #page-badges-award .recipienttable tr td.actions .actionbutton {
1696     margin: 0.3em 0;
1697     padding: 0.5em 0;
1698     width: 100%;
1701 #page-badges-award .recipienttable tr td.existing,
1702 #page-badges-award .recipienttable tr td.potential {
1703     width: 42%;
1706 #issued-badge-table .activatebadge {
1707     display: inline-block;
1710 .statusbox.active {
1711     background-color: $state-success-bg;
1714 .statusbox.inactive {
1715     background-color: $state-warning-bg;
1718 .statusbox {
1719     text-align: center;
1720     margin-bottom: 5px;
1721     padding: 5px;
1724 .statusbox .activatebadge {
1725     display: inline-block;
1728 .statusbox .activatebadge input[type=submit] {
1729     margin: 3px;
1732 .activatebadge {
1733     margin: 0;
1734     text-align: left;
1735     vertical-align: middle;
1738 img#persona_signin {
1739     cursor: pointer;
1742 .addcourse {
1743     float: right;
1746 .invisiblefieldset {
1747     display: inline;
1748     padding: 0;
1749     border-width: 0;
1752 /** Page header */
1753 #page-header {
1754     .logo {
1755         margin: $spacer 0;
1756         img {
1757             max-height: 75px;
1758         }
1759     }
1762 /** Navbar logo. */
1763 nav.navbar .logo img {
1764     max-height: 35px;
1767 /** Header-bar styles **/
1768 .page-context-header {
1769     // We need to be explicit about the height of the header.
1770     $pageHeaderHeight: 140px;
1772     // Do not remove these rules.
1773     overflow: hidden;
1775     .page-header-image,
1776     .page-header-headings {
1777         float: left;
1778         display: block;
1779         position: relative;
1780     }
1782     .page-header-image {
1783         margin-right: 1em;
1784         margin-bottom: 1em;
1785     }
1787     .page-header-headings,
1788     .header-button-group {
1789         position: relative;
1790         line-height: 24px;
1791         vertical-align: middle;
1792     }
1794     .header-button-group {
1795         display: block;
1796         float: left;
1798         a {
1799             position: relative;
1801             // Don't touch it unless you know exactly what you are doing.
1802             top: -0.4em;
1803         }
1804     }
1807 ul.dragdrop-keyboard-drag li {
1808     list-style-type: none;
1811 a.disabled:hover,
1812 a.disabled {
1813     text-decoration: none;
1814     cursor: default;
1815     font-style: italic;
1816     color: #808080;
1819 body.lockscroll {
1820     height: 100%;
1821     overflow: hidden;
1824 .progressbar_container {
1825     max-width: 500px;
1826     margin: 0 auto;
1829 /* IE10 only fix for calendar titling */
1830 .ie10 .yui3-calendar-header-label {
1831     display: inline-block;
1834 dd:before,
1835 dd:after {
1836     display: block;
1837     content: " ";
1840 dd:after {
1841     clear: both;
1844 // Active tabs with links should have a different
1845 // cursor to indicate they are clickable.
1846 .nav-tabs > .active > a[href],
1847 .nav-tabs > .active > a[href]:hover,
1848 .nav-tabs > .active > a[href]:focus {
1849     cursor: pointer;
1852 .inplaceeditable {
1853     &.inplaceeditingon {
1854         position: relative;
1856         .editinstructions {
1857             margin-top: -30px;
1858             font-weight: normal;
1859             margin-right: 0;
1860             margin-left: 0;
1861             left: 0;
1862             right: auto;
1863             white-space: nowrap;
1864         }
1866         input {
1867             width: 330px;
1868             vertical-align: text-bottom;
1869             margin-bottom: 0;
1870         }
1872         select {
1873             margin-bottom: 0;
1874         }
1875     }
1877     .quickediticon img {
1878         opacity: 0.2;
1879     }
1881     .quickeditlink {
1882         color: inherit;
1883         text-decoration: inherit;
1884     }
1886     &:hover .quickeditlink .quickediticon img,
1887     .quickeditlink:focus .quickediticon img {
1888         opacity: 1;
1889     }
1891     &.inplaceeditable-toggle .quickediticon {
1892         display: none;
1893     }
1895     &.inplaceeditable-autocomplete {
1896         display: block;
1897     }
1900 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
1901     margin-top: -20px;
1904 /** Chart area. */
1905 .chart-area {
1907     .chart-table-data {
1908         display: none;
1909     }
1911     .chart-table {
1912         .chart-output-htmltable caption {
1913             white-space: nowrap;
1914         }
1915         /** When accessible, we display the table only. */
1916         &.accesshide {
1917             .chart-table-expand {
1918                 display: none;
1919             }
1920             .chart-table-data {
1921                 display: block;
1922             }
1923         }
1924     }
1927 // Reset for ul.
1928 ul {
1929     padding-left: 1rem;
1932 /* YUI 2 Tree View */
1933 /*rtl:raw:
1934 .ygtvtn,
1935 .ygtvtm,
1936 .ygtvtmh,
1937 .ygtvtmhh,
1938 .ygtvtp,
1939 .ygtvtph,
1940 .ygtvtphh,
1941 .ygtvln,
1942 .ygtvlm,
1943 .ygtvlmh,
1944 .ygtvlmhh,
1945 .ygtvlp,
1946 .ygtvlph,
1947 .ygtvlphh,
1948 .ygtvdepthcell,
1949 .ygtvok,
1950 .ygtvok:hover,
1951 .ygtvcancel,
1952 .ygtvcancel:hover {
1953     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
1955 */
1957 .hover-tooltip-container {
1958     position: relative;
1960     .hover-tooltip {
1961         opacity: 0;
1962         visibility: hidden;
1963         position: absolute;
1964         /*rtl:ignore*/
1965         left: 50%;
1966         top: calc(-50% - 5px);
1967         transform: translate(-50%, -50%);
1968         background-color: #fff;
1969         border: 1px solid rgba(0, 0, 0, .2);
1970         border-radius: .3rem;
1971         box-sizing: border-box;
1972         padding: 5px;
1973         white-space: nowrap;
1974         transition: opacity 0.15s, visibility 0.15s;
1975         z-index: 1000;
1977         &:before {
1978             content: '';
1979             display: inline-block;
1980             border-left: 8px solid transparent;
1981             border-right: 8px solid transparent;
1982             border-top: 8px solid rgba(0, 0, 0, .2);
1983             position: absolute;
1984             bottom: -8px;
1985             left: calc(50% - 8px);
1986         }
1988         &:after {
1989             content: '';
1990             display: inline-block;
1991             border-left: 7px solid transparent;
1992             border-right: 7px solid transparent;
1993             border-top: 7px solid #fff;
1994             position: absolute;
1995             bottom: -6px;
1996             left: calc(50% - 7px);
1997             z-index: 2;
1998         }
1999     }
2001     &:hover {
2002         .hover-tooltip {
2003             opacity: 1;
2004             visibility: visible;
2005             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2006         }
2007     }
2010 #region-flat-nav {
2011     padding-right: 0;
2012     padding-left: 0;
2013     .nav {
2014         margin-right: $grid-gutter-width / 2;
2015         background-color: $card-bg;
2016     }
2017     @include media-breakpoint-down(sm) {
2018         .nav {
2019             margin-top: $grid-gutter-width;
2020             margin-right: 0;
2021         }
2022     }
2025 // Footer link colour was added to allow the colour of footer links to be changed,
2026 // but really in bootstrap we want the colour of links on .bg-inverse to be changed
2027 // rather than being specific to the footer. This is kept for backwards compatibility.
2028 $footer-link-color: $bg-inverse-link-color !default;
2029 #page-footer a {
2030     color: $footer-link-color;
2031     text-decoration: underline;
2032     .icon {
2033         color: $footer-link-color;
2034     }
2037 .bg-inverse a {
2038     color: $bg-inverse-link-color;
2039     text-decoration: underline;
2040     .icon {
2041         color: $bg-inverse-link-color;
2042     }
2045 .sitelink {
2046     img {
2047         width: 112px;
2048     }
2051 // Make links in a menu clickable anywhere in the row.
2052 .dropdown-item a {
2053     display: block;
2054     width: 100%;
2055     color: $body-color;
2057 .dropdown-item:active a {
2058     color: $dropdown-link-active-color;
2061 .competency-tree {
2062     ul {
2063         padding-left: 1.5rem;
2064     }
2067 .sr-only-focusable {
2068     &:active,
2069     &:focus {
2070         z-index: $zindex-navbar-fixed + 1;
2071         position: fixed;
2072         background: #fff;
2073         padding: 7px;
2074         left: 0;
2075         top: 0;
2076     }
2079 [data-drag-type="move"] {
2080     cursor: move;
2081     touch-action: none;
2084 .clickable {
2085     cursor: pointer;
2088 .overlay-icon-container {
2089     position: absolute;
2090     top: 0;
2091     left: 0;
2092     width: 100%;
2093     height: 100%;
2094     background-color: rgba(255, 255, 255, 0.6);
2096     .loading-icon {
2097         position: absolute;
2098         top: 50%;
2099         left: 50%;
2100         transform: translate(-50%, -50%);
2102         .icon {
2103             height: 30px;
2104             width: 30px;
2105             font-size: 30px;
2106         }
2107     }
2110 .open.atto_menu > .dropdown-menu {
2111     display: block;
2113 div.editor_atto_toolbar button .icon {
2114     color: $gray-700;
2116 .w-auto {
2117     width: auto;
2120 .bg-pulse-grey {
2121     animation: bg-pulse-grey 2s infinite linear;
2124 @keyframes bg-pulse-grey {
2125     0% {
2126         background-color: $gray-100;
2127     }
2128     50% {
2129         background-color: darken($gray-100, 5%);
2130     }
2131     100% {
2132         background-color: $gray-100;
2133     }
2136 @each $size, $length in $spacers {
2137     .line-height-#{$size} {
2138         line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2139     }
2142 .dir-rtl {
2143     .dir-rtl-hide {
2144         display: none;
2145     }
2148 .dir-ltr {
2149     .dir-ltr-hide {
2150         display: none;
2151     }
2154 $switch-height: 1.25rem !default;
2155 $switch-height-half: ($switch-height / 2) !default;
2156 $switch-width: ($switch-height * 2) !default;
2157 $switch-border-radius: $switch-height !default;
2158 $switch-bg: $gray-300 !default;
2159 $switch-bg-height: 1rem !default;
2160 $switch-bg-height-half: ($switch-bg-height / 2) !default;
2161 $switch-checked-bg: rgba(map-get($theme-colors, 'primary'), .4) !default;
2162 $switch-checked-thumb-bg: map-get($theme-colors, 'primary') !default;
2163 $switch-disabled-bg: $gray-200 !default;
2164 $switch-disabled-color: $gray-600 !default;
2165 $switch-disabled-thumb-bg: $gray-600 !default;
2166 $switch-thumb-bg: $white !default;
2167 $switch-thumb-border-radius: 50% !default;
2168 $switch-thumb-size: $switch-height !default;
2169 $switch-thumb-size-half: $switch-height-half !default;
2170 $switch-focus-box-shadow: 0 0 0 ($input-btn-focus-width * 2) rgba(map-get($theme-colors, 'primary'), .25);
2171 $switch-transition: .2s all !default;
2173 .switch {
2174     position: relative;
2175     display: inline-block;
2177     input {
2178         float: left;
2179         width: 1px;
2180         transform: translateX(1px);
2181         padding: 0;
2182         margin: 0;
2183         opacity: 0;
2184         line-height: $switch-height;
2186         + label {
2187             position: relative;
2188             min-height: $switch-height;
2189             min-width: $switch-width;
2190             line-height: $switch-height;
2191             border-radius: $switch-border-radius;
2192             display: inline-block;
2193             cursor: pointer;
2194             outline: none;
2195             user-select: none;
2196             padding-left: ($switch-width + .5rem);
2197         }
2199         + label::before,
2200         + label::after {
2201             content: '';
2202             position: absolute;
2203             left: 0;
2204             bottom: 0;
2205             display: block;
2206         }
2208         + label::before {
2209             right: 0;
2210             height: $switch-bg-height;
2211             width: $switch-width;
2212             top: calc(50% - #{$switch-bg-height-half});
2213             background-color: $switch-bg;
2214             border-radius: $switch-border-radius;
2215             transition: $switch-transition;
2216         }
2218         + label::after {
2219             left: 0;
2220             width: $switch-thumb-size;
2221             height: $switch-thumb-size;
2222             top: calc(50% - #{$switch-thumb-size-half});
2223             border-radius: $switch-thumb-border-radius;
2224             background-color: $switch-thumb-bg;
2225             transition: $switch-transition;
2226             box-shadow:
2227                 0 1px 3px 0 rgba(0, 0, 0, 0.2),
2228                 0 1px 1px 0 rgba(0, 0, 0, 0.14),
2229                 0 2px 1px -1px rgba(0, 0, 0, 0.12);
2230         }
2232         &:checked + label::before {
2233             background-color: $switch-checked-bg;
2234         }
2236         &:checked + label::after {
2237             margin-left: $switch-height;
2238             background-color: $switch-checked-thumb-bg;
2239         }
2241         &:focus + label::before {
2242             outline: none;
2243         }
2245         &:focus + label::after {
2246             outline: none;
2247             box-shadow: $switch-focus-box-shadow;
2248         }
2250         &:disabled + label {
2251             color: $switch-disabled-color;
2252             cursor: not-allowed;
2253         }
2255         &:disabled + label::before {
2256             background-color: $switch-disabled-bg;
2257         }
2259         &:disabled + label::after {
2260             background-color: $switch-disabled-thumb-bg;
2261         }
2262     }
2264     &.sr-only-label {
2265         input + label {
2266             text-indent: -9999px;
2267             margin-bottom: 0;
2268             padding-left: 0;
2269         }
2270     }
2273 .paged-content-page-container {
2274     min-height: 3.125rem;
2277 body.h5p-embed {
2278     #page-content {
2279         display: inherit;
2280     }
2281     #maincontent {
2282         display: none;
2283     }
2284     .h5pmessages {
2285         min-height: 230px; // This should be the same height as default core_h5p iframes.
2286     }
2289 .text-decoration-none {
2290     text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
2293 .colour-inherit {
2294     color: inherit !important; /* stylelint-disable-line declaration-no-important */
2297 .position-right {
2298     right: 0 !important; /* stylelint-disable-line declaration-no-important */
2301 .overflow-hidden {
2302     overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
2305 .text-break {
2306     overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
2309 .z-index-1 {
2310     z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
2313 // These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
2314 .float-left {
2315     float: left !important; /* stylelint-disable-line declaration-no-important */
2317 .float-right {
2318     float: right !important; /* stylelint-disable-line declaration-no-important */
2321 // Emoji picker.
2322 $picker-width: 350px !default;
2323 $picker-width-xs: 320px !default;
2324 $picker-height: 400px !default;
2325 $picker-row-height: 40px !default;
2326 $picker-emoji-button-size: 40px !default;
2327 $picker-emoji-button-font-size: 24px !default;
2328 $picker-emoji-category-count: 9 !default;
2329 $picker-emojis-per-row: 7 !default;
2331 .emoji-picker {
2332     width: $picker-width;
2333     height: $picker-height;
2335     .category-button {
2336         padding: .375rem 0;
2337         height: 100%;
2338         width: $picker-width / $picker-emoji-category-count;
2339         border-top: none;
2340         border-left: none;
2341         border-right: none;
2342         border-bottom: 2px solid transparent;
2344         &.selected {
2345             border-bottom: 2px solid map-get($theme-colors, 'primary');
2346         }
2347     }
2349     .emojis-container,
2350     .search-results-container {
2351         min-width: $picker-emojis-per-row * $picker-emoji-button-size;
2352     }
2354     .picker-row {
2355         height: $picker-row-height;
2357         .category-name {
2358             line-height: $picker-row-height;
2359         }
2361         .emoji-button {
2362             height: $picker-emoji-button-size;
2363             width: $picker-emoji-button-size;
2364             line-height: $picker-emoji-button-size;
2365             font-size: $picker-emoji-button-font-size;
2366             overflow: hidden;
2368             @include hover-focus {
2369                 color: inherit;
2370                 text-decoration: none;
2371             }
2372         }
2373     }
2375     .emoji-preview {
2376         height: $picker-row-height;
2377         font-size: $picker-row-height;
2378         line-height: $picker-row-height;
2379     }
2381     .emoji-short-name {
2382         line-height: $picker-row-height / 2;
2383     }
2385     @include media-breakpoint-down(xs) {
2386         width: $picker-width-xs;
2387     }
2390 .emoji-auto-complete {
2391     height: $picker-row-height;
2393     .btn.btn-link.btn-icon.emoji-button {
2394         height: $picker-emoji-button-size;
2395         width: $picker-emoji-button-size;
2396         line-height: $picker-emoji-button-size;
2397         font-size: $picker-emoji-button-font-size;
2399         &.active {
2400             background-color: $gray-200;
2401         }
2402     }
2405 .toast-wrapper {
2406     max-width: $toast-max-width;
2407     max-height: 0;
2408     // Place these above any modals and other elements.
2409     z-index: 1051;