90f229c1b89f1a745ff04a2e8018ac116e6033bd
[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     @extend .text-warning;
124 .green,
125 .notifysuccess {
126     @extend .text-success;
129 .highlight {
130     @extend .text-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     @extend .text-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     @extend .text-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 #page-enrol-users {
993     .enrol_user_buttons {
994         text-align: right;
996     }
998     #filterform {
999         @extend .card;
1000         @extend .card-block;
1001     }
1004 #page-enrol-users .enrol-users-page-action input {
1005     margin-left: 0;
1008 .corelightbox {
1009     background-color: #ccc;
1010     position: absolute;
1011     top: 0;
1012     left: 0;
1013     width: 100%;
1014     height: 100%;
1015     text-align: center;
1018 .corelightbox img {
1019     position: fixed;
1020     top: 50%;
1021     left: 50%;
1024 .mod-indent-outer {
1025     display: table;
1028 .mod-indent {
1029     display: table-cell;
1032 .label .mod-indent {
1033     float: left;
1034     padding-top: 20px;
1036 $mod-indent-size: 30px;
1037 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1039 @for $i from 1 through 16 {
1040     $width: ($i * $mod-indent-size);
1042     .mod-indent-#{$i} {
1043         width: $width;
1044     }
1047 .mod-indent-huge {
1048     width: (16 * $mod-indent-size);
1051 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1052 .resourcecontent .mediaplugin_mp3 object {
1053     height: 25px;
1054     width: 600px;
1057 .resourcecontent audio.mediaplugin_html5audio {
1058     width: 600px;
1060 /** Large resource images should avoid hidden overflow **/
1061 .resourceimage {
1062     max-width: 100%;
1064 /* Audio player size in 'inline' mode (can only change width, as above) */
1065 .mediaplugin_mp3 object {
1066     height: 15px;
1067     width: 300px;
1070 audio.mediaplugin_html5audio {
1071     width: 300px;
1073 /* TinyMCE moodle media preview frame should not have padding */
1074 .core_media_preview.pagelayout-embedded #content {
1075     padding: 0;
1078 .core_media_preview.pagelayout-embedded #maincontent {
1079     height: 0;
1082 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1083     padding: 0;
1084     margin: 0;
1085     min-width: 0;
1086     background: none;
1089 .path-rating .ratingtable {
1090     width: 100%;
1091     margin-bottom: 1em;
1094 .path-rating .ratingtable th.rating {
1095     width: 100%;
1098 .path-rating .ratingtable td.rating,
1099 .path-rating .ratingtable td.time {
1100     white-space: nowrap;
1101     text-align: center;
1104 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1105 .moodle-dialogue-base .moodle-dialogue-lightbox {
1106     background-color: $gray;
1109 // Prevent adding backdrops to popups in popups.
1110 .pagelayout-popup {
1111     .moodle-dialogue-base {
1112         .moodle-dialogue-lightbox {
1113             background-color: transparent;
1114         }
1115         .moodle-dialogue {
1116             box-shadow: $popover-box-shadow;
1117         }
1118     }
1121 .moodle-dialogue-base .hidden,
1122 .moodle-dialogue-base .moodle-dialogue-hidden {
1123     display: none;
1126 .no-scrolling {
1127     overflow: hidden;
1130 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1131     left: 0;
1132     top: 0;
1133     right: 0;
1134     bottom: -50px;
1135     position: fixed;
1138 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1139     overflow: auto;
1142 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1143     width: 28px;
1144     height: 16px;
1145     background-size: 100%;
1148 .moodle-dialogue-base .moodle-dialogue-wrap {
1149     background-color: #fff;
1150     border: 1px solid #ccc;
1153 // Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1154 // it for a reason (conflicts with jquery .show()).
1155 .modal.show {
1156     display: block;
1159 .moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content {
1160     @extend .modal-content;
1163 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1164     @extend .modal-header;
1167 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1168     // Undo some YUI damage.
1169     min-height: 3rem;
1170     color: initial;
1171     background: initial;
1172     font-size: 1.5rem;
1173     line-height: 1.5;
1176 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1177     @extend .modal-title;
1178     font-size: 1.5rem;
1181 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1182     /*rtl:raw:
1183         left: 0;
1184         right: auto;
1185     */
1186     padding: $spacer;
1189 .moodle-dialogue-base .closebutton {
1190     @extend .close;
1191     box-shadow: none;
1192     &::after {
1193         content: "×";
1194     }
1197 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1198     padding: 0.5rem;
1201 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1202     overflow: auto;
1203     position: absolute;
1204     top: 0;
1205     bottom: 50px;
1206     left: 0;
1207     right: 0;
1208     margin: 0;
1209     border: 0;
1212 .moodle-dialogue-exception .moodle-exception-param label {
1213     font-weight: bold;
1216 .moodle-dialogue-exception .param-stacktrace label {
1217     background-color: #eee;
1218     border: 1px solid #ccc;
1219     border-bottom-width: 0;
1222 .moodle-dialogue-exception .param-stacktrace pre {
1223     border: 1px solid #ccc;
1224     background-color: #fff;
1227 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1228     color: navy;
1229     font-size: $font-size-sm;
1232 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1233     @extend .text-warning;
1234     font-size: $font-size-sm;
1237 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1238     color: #333;
1239     font-size: 90%;
1240     border-bottom: 1px solid #eee;
1243 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1244     @extend .modal-footer;
1247 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1248     display: none;
1251 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1252     // Undo some YUI damage.
1253     background: initial;
1256 .moodle-dialogue-confirm .confirmation-message {
1257     margin: 0.5rem 0;
1260 .moodle-dialogue-confirm .confirmation-dialogue input {
1261     min-width: 80px;
1264 .moodle-dialogue-exception .moodle-exception-message {
1265     margin: 1em;
1268 .moodle-dialogue-exception .moodle-exception-param {
1269     margin-bottom: 0.5em;
1272 .moodle-dialogue-exception .moodle-exception-param label {
1273     width: 150px;
1276 .moodle-dialogue-exception .param-stacktrace label {
1277     display: block;
1278     margin: 0;
1279     padding: 4px 1em;
1282 .moodle-dialogue-exception .param-stacktrace pre {
1283     display: block;
1284     height: 200px;
1285     overflow: auto;
1288 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1289     display: inline-block;
1290     margin: 4px 0;
1293 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1294     display: inline-block;
1295     width: 50px;
1296     margin: 4px 1em;
1299 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1300     padding-left: 25px;
1301     margin-bottom: 4px;
1302     padding-bottom: 4px;
1305 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1306     opacity: 0.75;
1307     width: 100%;
1308     height: 100%;
1309     top: 0;
1310     left: 0;
1311     background-color: white;
1312     text-align: center;
1313     padding: 10% 0;
1315 /* Apply a default max-height on tooltip text */
1316 .moodle-dialogue .tooltiptext {
1317     max-height: 300px;
1320 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1321     z-index: 3001;
1323     .moodle-dialogue-bd {
1324         overflow: auto;
1325     }
1328 /**
1329  * Chooser Dialogues (moodle-core-chooserdialogue)
1330  *
1331  * This CSS belong to the chooser dialogue which should work both with, and
1332  * without javascript enabled
1333  */
1334 /* Hide the dialog and it's title */
1335 .chooserdialoguebody,
1336 .choosertitle {
1337     display: none;
1340 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1341     margin: 0;
1344 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1345     padding: 0;
1346     background: #f2f2f2;
1348     @include border-bottom-radius(10px);
1350 /* Center the submit buttons within the area */
1351 .choosercontainer #chooseform .submitbuttons {
1352     padding: 0.7em 0;
1353     text-align: right;
1355 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1357 @media (max-height: 639px) {
1358     .ios .choosercontainer #chooseform .submitbuttons {
1359         padding: 45px 0;
1360     }
1363 .choosercontainer #chooseform .submitbuttons input {
1364     min-width: 100px;
1365     margin: 0 0.5em;
1367 /* Various settings for the options area */
1368 .choosercontainer #chooseform .options {
1369     position: relative;
1370     border-bottom: 1px solid #bbb;
1372 /* Only set these options if we're showing the js container */
1373 .jschooser .choosercontainer #chooseform .alloptions {
1374     overflow-x: hidden;
1375     overflow-y: auto;
1376     max-width: 240px;
1378     .option {
1379         input[type=radio] {
1380             display: inline-block;
1381         }
1383         .typename {
1384             display: inline-block;
1385             width: 55%;
1386         }
1387     }
1389 /* Settings for option rows and option subtypes */
1390 .choosercontainer #chooseform .moduletypetitle,
1391 .choosercontainer #chooseform .option,
1392 .choosercontainer #chooseform .nonoption {
1393     margin-bottom: 0;
1394     padding: 0 1.6em 0 1.6em;
1397 .choosercontainer #chooseform .moduletypetitle {
1398     text-transform: uppercase;
1399     padding-top: 1.2em;
1400     padding-bottom: 0.4em;
1403 .choosercontainer #chooseform .option .typename,
1404 .choosercontainer #chooseform .nonoption .typename {
1405     padding: 0 0 0 0.5em;
1408 .choosercontainer #chooseform .modicon + .typename {
1409     padding-left: 0;
1412 .choosercontainer #chooseform .option input[type=radio],
1413 .choosercontainer #chooseform .option span.typename {
1414     vertical-align: middle;
1417 .choosercontainer #chooseform .option label {
1418     display: block;
1419     margin: 0;
1420     padding: ($spacer / 2) 0;
1421     border-bottom: 1px solid #fff;
1424 .choosercontainer #chooseform .option .icon {
1425     margin: 0;
1426     padding: 0 $spacer;
1429 .choosercontainer #chooseform .nonoption {
1430     padding-left: 2.7em;
1431     padding-top: 0.3em;
1432     padding-bottom: 0.1em;
1435 .choosercontainer #chooseform .subtype {
1436     margin-bottom: 0;
1437     padding: 0 1.6em 0 3.2em;
1440 .choosercontainer #chooseform .subtype .typename {
1441     margin: 0 0 0 0.2em;
1443 /* The instruction/help area */
1444 .jschooser .choosercontainer #chooseform .instruction,
1445 .jschooser .choosercontainer #chooseform .typesummary {
1446     display: none;
1447     position: absolute;
1448     top: 0;
1449     right: 0;
1450     bottom: 0;
1451     left: 240px;
1452     margin: 0;
1453     padding: 1.6em;
1454     background-color: #fff;
1455     overflow-x: hidden;
1456     overflow-y: auto;
1457     line-height: 2em;
1459 /* Selected option settings */
1460 .jschooser .choosercontainer #chooseform .instruction,
1461 .choosercontainer #chooseform .selected .typesummary {
1462     display: block;
1465 .choosercontainer #chooseform .selected {
1466     background-color: #fff;
1467     margin-top: -1px;
1468     padding-top: 1px;
1471 .chooserdialogue-course-modchooser .modicon .icon {
1472     width: 24px;
1473     height: 24px;
1474     font-size: 24px;
1477 @include media-breakpoint-down(xs) {
1478     .jsenabled .choosercontainer #chooseform .alloptions {
1479         max-width: 100%;
1480     }
1482     .jsenabled .choosercontainer #chooseform .instruction,
1483     .jsenabled .choosercontainer #chooseform .typesummary {
1484         position: static;
1485     }
1488 /* Form element: listing */
1489 .formlistingradio {
1490     padding-bottom: 25px;
1491     padding-right: 10px;
1494 .formlistinginputradio {
1495     float: left;
1498 .formlistingmain {
1499     min-height: 225px;
1502 .formlisting {
1503     position: relative;
1504     margin: 15px 0;
1505     padding: 1px 19px 14px;
1506     background-color: white;
1507     border: 1px solid #ddd;
1509     @include border-radius(4px);
1512 .formlistingmore {
1513     position: absolute;
1514     cursor: pointer;
1515     bottom: -1px;
1516     right: -1px;
1517     padding: 3px 7px;
1518     font-size: 12px;
1519     font-weight: bold;
1520     background-color: whitesmoke;
1521     border: 1px solid #ddd;
1522     color: #9da0a4;
1524     @include border-radius(4px 0 4px 0);
1527 .formlistingall {
1528     margin: 15px 0;
1529     padding: 0;
1531     @include border-radius(4px);
1534 .formlistingrow {
1535     cursor: pointer;
1536     border-bottom: 1px solid;
1537     border-color: #e1e1e8;
1538     border-left: 1px solid #e1e1e8;
1539     border-right: 1px solid #e1e1e8;
1540     background-color: #f7f7f9;
1542     @include border-radius(0 0 4px 4px);
1543     padding: 6px;
1544     top: 50%;
1545     left: 50%;
1546     min-height: 34px;
1547     float: left;
1548     width: 150px;
1551 body.jsenabled .formlistingradio {
1552     display: none;
1555 body.jsenabled .formlisting {
1556     display: block;
1559 /* Badges styles */
1560 table.collection {
1561     @extend .table;
1562     @extend .table-bordered;
1563     @extend .table-striped;
1566 a.criteria-action {
1567     padding: 0 3px;
1568     float: right;
1571 div.criteria-description {
1572     padding: 10px 15px;
1573     margin: 5px 0;
1574     background: none repeat scroll 0 0 #f9f9f9;
1575     border: 1px solid #eee;
1578 ul.badges {
1579     margin: 0;
1580     list-style: none;
1583 .badges li {
1584     position: relative;
1585     display: inline-block;
1586     padding-top: 1em;
1587     text-align: center;
1588     vertical-align: top;
1589     width: 150px;
1592 .badges li .badge-name {
1593     display: block;
1594     padding: 5px;
1597 .badges li > img {
1598     position: absolute;
1601 .badges li .badge-image {
1602     width: 100px;
1603     height: 100px;
1604     left: 10px;
1605     top: 0;
1606     z-index: 1;
1609 .badges li .badge-actions {
1610     position: relative;
1613 .badges li .expireimage {
1614     width: 100px;
1615     height: 100px;
1616     left: 25px;
1617     top: 0;
1618     position: absolute;
1619     z-index: 10;
1620     opacity: 0.85;
1623 #badge-image {
1624     background-color: transparent;
1625     padding: 0;
1626     position: relative;
1627     min-width: 100px;
1628     width: 20%;
1629     display: inline-block;
1630     vertical-align: top;
1631     margin-top: 17px;
1632     margin-bottom: 20px;
1634     .expireimage {
1635         width: 100px;
1636         height: 100px;
1637         left: 0;
1638         top: 0;
1639         opacity: 0.85;
1640         position: absolute;
1641         z-index: 10;
1642     }
1644     .singlebutton {
1645         padding-top: 5px;
1646         display: block;
1648         button {
1649             margin-left: 4px;
1650         }
1651     }
1654 #badge-details {
1655     display: inline-block;
1656     width: 79%;
1659 #badge-overview dl,
1660 #badge-details dl {
1661     margin: 0;
1663     dt,
1664     dd {
1665         vertical-align: top;
1666         padding: 3px 0;
1667     }
1669     dt {
1670         clear: both;
1671         display: inline-block;
1672         width: 20%;
1673         min-width: 100px;
1674     }
1676     dd {
1677         display: inline-block;
1678         width: 79%;
1679         margin-left: 1%;
1680     }
1683 .badge-profile {
1684     vertical-align: top;
1687 .connected {
1688     @extend .text-success;
1691 .notconnected {
1692     @extend .text-danger;
1695 .connecting {
1696     @extend .text-warning;
1699 #page-badges-award .recipienttable tr td {
1700     vertical-align: top;
1703 #page-badges-award .recipienttable tr td.actions .actionbutton {
1704     margin: 0.3em 0;
1705     padding: 0.5em 0;
1706     width: 100%;
1709 #page-badges-award .recipienttable tr td.existing,
1710 #page-badges-award .recipienttable tr td.potential {
1711     width: 42%;
1714 #issued-badge-table .activatebadge {
1715     display: inline-block;
1718 .statusbox.active {
1719     background-color: $state-success-bg;
1722 .statusbox.inactive {
1723     background-color: $state-warning-bg;
1726 .statusbox {
1727     text-align: center;
1728     margin-bottom: 5px;
1729     padding: 5px;
1732 .statusbox .activatebadge {
1733     display: inline-block;
1736 .statusbox .activatebadge input[type=submit] {
1737     margin: 3px;
1740 .activatebadge {
1741     margin: 0;
1742     text-align: left;
1743     vertical-align: middle;
1746 img#persona_signin {
1747     cursor: pointer;
1750 .addcourse {
1751     float: right;
1754 .invisiblefieldset {
1755     display: inline;
1756     padding: 0;
1757     border-width: 0;
1760 /** Page header */
1761 #page-header {
1762     .logo {
1763         margin: $spacer 0;
1764         img {
1765             max-height: 75px;
1766         }
1767     }
1770 /** Navbar logo. */
1771 nav.navbar .logo img {
1772     max-height: 35px;
1775 /** Header-bar styles **/
1776 .page-context-header {
1777     // We need to be explicit about the height of the header.
1778     $pageHeaderHeight: 140px;
1780     // Do not remove these rules.
1781     overflow: hidden;
1783     .page-header-image,
1784     .page-header-headings {
1785         float: left;
1786         display: block;
1787         position: relative;
1788     }
1790     .page-header-image {
1791         margin-right: 1em;
1792         margin-bottom: 1em;
1793     }
1795     .page-header-headings,
1796     .header-button-group {
1797         position: relative;
1798         line-height: 24px;
1799         vertical-align: middle;
1800     }
1802     .header-button-group {
1803         display: block;
1804         float: left;
1806         a {
1807             position: relative;
1809             // Don't touch it unless you know exactly what you are doing.
1810             top: -0.4em;
1811         }
1812     }
1815 ul.dragdrop-keyboard-drag li {
1816     list-style-type: none;
1819 a.disabled:hover,
1820 a.disabled {
1821     text-decoration: none;
1822     cursor: default;
1823     font-style: italic;
1824     color: #808080;
1827 body.lockscroll {
1828     height: 100%;
1829     overflow: hidden;
1832 .progressbar_container {
1833     max-width: 500px;
1834     margin: 0 auto;
1837 /* IE10 only fix for calendar titling */
1838 .ie10 .yui3-calendar-header-label {
1839     display: inline-block;
1842 dd:before,
1843 dd:after {
1844     display: block;
1845     content: " ";
1848 dd:after {
1849     clear: both;
1852 // Active tabs with links should have a different
1853 // cursor to indicate they are clickable.
1854 .nav-tabs > .active > a[href],
1855 .nav-tabs > .active > a[href]:hover,
1856 .nav-tabs > .active > a[href]:focus {
1857     cursor: pointer;
1860 .inplaceeditable {
1861     &.inplaceeditingon {
1862         position: relative;
1864         .editinstructions {
1865             margin-top: -30px;
1866             font-weight: normal;
1867             margin-right: 0;
1868             margin-left: 0;
1869             left: 0;
1870             right: auto;
1871             white-space: nowrap;
1872         }
1874         input {
1875             width: 330px;
1876             vertical-align: text-bottom;
1877             margin-bottom: 0;
1878         }
1880         select {
1881             margin-bottom: 0;
1882         }
1883     }
1885     .quickediticon img {
1886         opacity: 0.2;
1887     }
1889     .quickeditlink {
1890         color: inherit;
1891         text-decoration: inherit;
1892     }
1894     &:hover .quickeditlink .quickediticon img,
1895     .quickeditlink:focus .quickediticon img {
1896         opacity: 1;
1897     }
1899     &.inplaceeditable-toggle .quickediticon {
1900         display: none;
1901     }
1903     &.inplaceeditable-autocomplete {
1904         display: block;
1905     }
1908 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
1909     margin-top: -20px;
1912 /** Chart area. */
1913 .chart-area {
1915     .chart-table-data {
1916         display: none;
1917     }
1919     .chart-table {
1920         .chart-output-htmltable caption {
1921             white-space: nowrap;
1922         }
1923         /** When accessible, we display the table only. */
1924         &.accesshide {
1925             .chart-table-expand {
1926                 display: none;
1927             }
1928             .chart-table-data {
1929                 display: block;
1930             }
1931         }
1932     }
1935 // Reset for ul.
1936 ul {
1937     padding-left: 1rem;
1940 /* YUI 2 Tree View */
1941 /*rtl:raw:
1942 .ygtvtn,
1943 .ygtvtm,
1944 .ygtvtmh,
1945 .ygtvtmhh,
1946 .ygtvtp,
1947 .ygtvtph,
1948 .ygtvtphh,
1949 .ygtvln,
1950 .ygtvlm,
1951 .ygtvlmh,
1952 .ygtvlmhh,
1953 .ygtvlp,
1954 .ygtvlph,
1955 .ygtvlphh,
1956 .ygtvdepthcell,
1957 .ygtvok,
1958 .ygtvok:hover,
1959 .ygtvcancel,
1960 .ygtvcancel:hover {
1961     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
1963 */
1965 .hover-tooltip-container {
1966     position: relative;
1968     .hover-tooltip {
1969         opacity: 0;
1970         visibility: hidden;
1971         position: absolute;
1972         /*rtl:ignore*/
1973         left: 50%;
1974         top: calc(-50% - 5px);
1975         transform: translate(-50%, -50%);
1976         background-color: #fff;
1977         border: 1px solid rgba(0, 0, 0, .2);
1978         border-radius: .3rem;
1979         box-sizing: border-box;
1980         padding: 5px;
1981         white-space: nowrap;
1982         transition: opacity 0.15s, visibility 0.15s;
1983         z-index: 1000;
1985         &:before {
1986             content: '';
1987             display: inline-block;
1988             border-left: 8px solid transparent;
1989             border-right: 8px solid transparent;
1990             border-top: 8px solid rgba(0, 0, 0, .2);
1991             position: absolute;
1992             bottom: -8px;
1993             left: calc(50% - 8px);
1994         }
1996         &:after {
1997             content: '';
1998             display: inline-block;
1999             border-left: 7px solid transparent;
2000             border-right: 7px solid transparent;
2001             border-top: 7px solid #fff;
2002             position: absolute;
2003             bottom: -6px;
2004             left: calc(50% - 7px);
2005             z-index: 2;
2006         }
2007     }
2009     &:hover {
2010         .hover-tooltip {
2011             opacity: 1;
2012             visibility: visible;
2013             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2014         }
2015     }
2018 #region-flat-nav {
2019     padding-right: 0;
2020     padding-left: 0;
2021     .nav {
2022         margin-right: $grid-gutter-width / 2;
2023         background-color: $card-bg;
2024     }
2025     @include media-breakpoint-down(sm) {
2026         .nav {
2027             margin-top: $grid-gutter-width;
2028             margin-right: 0;
2029         }
2030     }
2033 // Footer link colour was added to allow the colour of footer links to be changed,
2034 // but really in bootstrap we want the colour of links on .bg-inverse to be changed
2035 // rather than being specific to the footer. This is kept for backwards compatibility.
2036 $footer-link-color: $bg-inverse-link-color !default;
2037 #page-footer a {
2038     color: $footer-link-color;
2039     text-decoration: underline;
2040     .icon {
2041         color: $footer-link-color;
2042     }
2045 .bg-inverse a {
2046     color: $bg-inverse-link-color;
2047     text-decoration: underline;
2048     .icon {
2049         color: $bg-inverse-link-color;
2050     }
2053 .sitelink {
2054     img {
2055         width: 112px;
2056     }
2059 // Make links in a menu clickable anywhere in the row.
2060 .dropdown-item a {
2061     display: block;
2062     width: 100%;
2063     color: $body-color;
2065 .dropdown-item:active a {
2066     color: $dropdown-link-active-color;
2069 .competency-tree {
2070     ul {
2071         padding-left: 1.5rem;
2072     }
2075 .sr-only-focusable {
2076     &:active,
2077     &:focus {
2078         z-index: $zindex-navbar-fixed + 1;
2079         position: fixed;
2080         background: #fff;
2081         padding: 7px;
2082         left: 0;
2083         top: 0;
2084     }
2087 [data-drag-type="move"] {
2088     cursor: move;
2089     touch-action: none;
2092 .clickable {
2093     cursor: pointer;
2096 .overlay-icon-container {
2097     position: absolute;
2098     top: 0;
2099     left: 0;
2100     width: 100%;
2101     height: 100%;
2102     background-color: rgba(255, 255, 255, 0.6);
2104     .loading-icon {
2105         position: absolute;
2106         top: 50%;
2107         left: 50%;
2108         transform: translate(-50%, -50%);
2110         .icon {
2111             height: 30px;
2112             width: 30px;
2113             font-size: 30px;
2114         }
2115     }
2118 .open.atto_menu > .dropdown-menu {
2119     display: block;
2121 div.editor_atto_toolbar button .icon {
2122     color: $gray-700;
2124 .w-auto {
2125     width: auto;
2128 .bg-pulse-grey {
2129     animation: bg-pulse-grey 2s infinite linear;
2132 @keyframes bg-pulse-grey {
2133     0% {
2134         background-color: $gray-100;
2135     }
2136     50% {
2137         background-color: darken($gray-100, 5%);
2138     }
2139     100% {
2140         background-color: $gray-100;
2141     }
2144 @each $size, $length in $spacers {
2145     .line-height-#{$size} {
2146         line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2147     }
2150 .dir-rtl {
2151     .dir-rtl-hide {
2152         display: none;
2153     }
2156 .dir-ltr {
2157     .dir-ltr-hide {
2158         display: none;
2159     }
2162 $switch-height: 1.25rem !default;
2163 $switch-height-half: ($switch-height / 2) !default;
2164 $switch-width: ($switch-height * 2) !default;
2165 $switch-border-radius: $switch-height !default;
2166 $switch-bg: $gray-300 !default;
2167 $switch-bg-height: 1rem !default;
2168 $switch-bg-height-half: ($switch-bg-height / 2) !default;
2169 $switch-checked-bg: rgba(map-get($theme-colors, 'primary'), .4) !default;
2170 $switch-checked-thumb-bg: map-get($theme-colors, 'primary') !default;
2171 $switch-disabled-bg: $gray-200 !default;
2172 $switch-disabled-color: $gray-600 !default;
2173 $switch-disabled-thumb-bg: $gray-600 !default;
2174 $switch-thumb-bg: $white !default;
2175 $switch-thumb-border-radius: 50% !default;
2176 $switch-thumb-size: $switch-height !default;
2177 $switch-thumb-size-half: $switch-height-half !default;
2178 $switch-focus-box-shadow: 0 0 0 ($input-btn-focus-width * 2) rgba(map-get($theme-colors, 'primary'), .25);
2179 $switch-transition: .2s all !default;
2181 .switch {
2182     position: relative;
2183     display: inline-block;
2185     input {
2186         float: left;
2187         width: 1px;
2188         transform: translateX(1px);
2189         padding: 0;
2190         margin: 0;
2191         opacity: 0;
2192         line-height: $switch-height;
2194         + label {
2195             position: relative;
2196             min-height: $switch-height;
2197             min-width: $switch-width;
2198             line-height: $switch-height;
2199             border-radius: $switch-border-radius;
2200             display: inline-block;
2201             cursor: pointer;
2202             outline: none;
2203             user-select: none;
2204             padding-left: ($switch-width + .5rem);
2205         }
2207         + label::before,
2208         + label::after {
2209             content: '';
2210             position: absolute;
2211             left: 0;
2212             bottom: 0;
2213             display: block;
2214         }
2216         + label::before {
2217             right: 0;
2218             height: $switch-bg-height;
2219             width: $switch-width;
2220             top: calc(50% - #{$switch-bg-height-half});
2221             background-color: $switch-bg;
2222             border-radius: $switch-border-radius;
2223             transition: $switch-transition;
2224         }
2226         + label::after {
2227             left: 0;
2228             width: $switch-thumb-size;
2229             height: $switch-thumb-size;
2230             top: calc(50% - #{$switch-thumb-size-half});
2231             border-radius: $switch-thumb-border-radius;
2232             background-color: $switch-thumb-bg;
2233             transition: $switch-transition;
2234             box-shadow:
2235                 0 1px 3px 0 rgba(0, 0, 0, 0.2),
2236                 0 1px 1px 0 rgba(0, 0, 0, 0.14),
2237                 0 2px 1px -1px rgba(0, 0, 0, 0.12);
2238         }
2240         &:checked + label::before {
2241             background-color: $switch-checked-bg;
2242         }
2244         &:checked + label::after {
2245             margin-left: $switch-height;
2246             background-color: $switch-checked-thumb-bg;
2247         }
2249         &:focus + label::before {
2250             outline: none;
2251         }
2253         &:focus + label::after {
2254             outline: none;
2255             box-shadow: $switch-focus-box-shadow;
2256         }
2258         &:disabled + label {
2259             color: $switch-disabled-color;
2260             cursor: not-allowed;
2261         }
2263         &:disabled + label::before {
2264             background-color: $switch-disabled-bg;
2265         }
2267         &:disabled + label::after {
2268             background-color: $switch-disabled-thumb-bg;
2269         }
2270     }
2272     &.sr-only-label {
2273         input + label {
2274             text-indent: -9999px;
2275             margin-bottom: 0;
2276             padding-left: 0;
2277         }
2278     }
2281 .paged-content-page-container {
2282     min-height: 3.125rem;
2285 body.h5p-embed {
2286     #page-content {
2287         display: inherit;
2288     }
2289     #maincontent {
2290         display: none;
2291     }
2292     .h5pmessages {
2293         min-height: 230px; // This should be the same height as default core_h5p iframes.
2294     }
2297 .text-decoration-none {
2298     text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
2301 .colour-inherit {
2302     color: inherit !important; /* stylelint-disable-line declaration-no-important */
2305 .position-right {
2306     right: 0 !important; /* stylelint-disable-line declaration-no-important */
2309 .overflow-hidden {
2310     overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
2313 .text-break {
2314     overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
2317 .z-index-1 {
2318     z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
2321 // These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
2322 .float-left {
2323     float: left !important; /* stylelint-disable-line declaration-no-important */
2325 .float-right {
2326     float: right !important; /* stylelint-disable-line declaration-no-important */
2329 // Emoji picker.
2330 $picker-width: 350px !default;
2331 $picker-width-xs: 320px !default;
2332 $picker-height: 400px !default;
2333 $picker-row-height: 40px !default;
2334 $picker-emoji-button-size: 40px !default;
2335 $picker-emoji-button-font-size: 24px !default;
2336 $picker-emoji-category-count: 9 !default;
2337 $picker-emojis-per-row: 7 !default;
2339 .emoji-picker {
2340     width: $picker-width;
2341     height: $picker-height;
2343     .category-button {
2344         padding: .375rem 0;
2345         height: 100%;
2346         width: $picker-width / $picker-emoji-category-count;
2347         border-top: none;
2348         border-left: none;
2349         border-right: none;
2350         border-bottom: 2px solid transparent;
2352         &.selected {
2353             border-bottom: 2px solid map-get($theme-colors, 'primary');
2354         }
2355     }
2357     .emojis-container,
2358     .search-results-container {
2359         min-width: $picker-emojis-per-row * $picker-emoji-button-size;
2360     }
2362     .picker-row {
2363         height: $picker-row-height;
2365         .category-name {
2366             line-height: $picker-row-height;
2367         }
2369         .emoji-button {
2370             height: $picker-emoji-button-size;
2371             width: $picker-emoji-button-size;
2372             line-height: $picker-emoji-button-size;
2373             font-size: $picker-emoji-button-font-size;
2374             overflow: hidden;
2376             @include hover-focus {
2377                 color: inherit;
2378                 text-decoration: none;
2379             }
2380         }
2381     }
2383     .emoji-preview {
2384         height: $picker-row-height;
2385         font-size: $picker-row-height;
2386         line-height: $picker-row-height;
2387     }
2389     .emoji-short-name {
2390         line-height: $picker-row-height / 2;
2391     }
2393     @include media-breakpoint-down(xs) {
2394         width: $picker-width-xs;
2395     }
2398 .emoji-auto-complete {
2399     height: $picker-row-height;
2401     .btn.btn-link.btn-icon.emoji-button {
2402         height: $picker-emoji-button-size;
2403         width: $picker-emoji-button-size;
2404         line-height: $picker-emoji-button-size;
2405         font-size: $picker-emoji-button-font-size;
2407         &.active {
2408             background-color: $gray-200;
2409         }
2410     }
2413 .toast-wrapper {
2414     max-width: $toast-max-width;
2415     max-height: 0;
2416     // Place these above any modals and other elements.
2417     z-index: 1051;