MDL-64494 theme_boost: accessible theme colours
[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 $gototop-bottom-position: 50px !default;
31 #goto-top-link {
32     visibility: hidden;
33     opacity: 0;
34     transition: opacity .7s ease 0s, visibility .1s ease .8s;
35     display: block;
36     position: fixed; /* IE compatibility hack */
37     @supports (position: sticky) {
38         position: sticky;
39     }
40     @supports (-ms-ime-align:auto) {
41         position: fixed; /* Edge compatibility hack */
42     }
43     bottom: $gototop-bottom-position;
44     right: 0;
45     a {
46         position: absolute;
47         right: 0;
48         transform: translateY(-100%);
49     }
50 }
52 body.scrolled #goto-top-link {
53     opacity: 1;
54     visibility: visible;
55     transition: visibility 0s ease 0s, opacity .7s ease .1s;
56 }
58 .context-header-settings-menu .dropdown-toggle > .icon,
59 #region-main-settings-menu .dropdown-toggle > .icon {
60     height: 24px;
61     font-size: 24px;
62     width: auto;
63 }
64 /** Prevent user notifications overlapping with region main settings menu */
65 #user-notifications {
66     display: block;
67     overflow: hidden;
68 }
70 /** Page layout CSS starts **/
71 .layout-option-noheader #page-header,
72 .layout-option-nonavbar #page-navbar,
73 .layout-option-nofooter #page-footer,
74 .layout-option-nocourseheader .course-content-header,
75 .layout-option-nocoursefooter .course-content-footer {
76     display: none;
77 }
79 /** Page layout CSS ends **/
81 .mdl-left {
82     text-align: left;
83 }
85 .mdl-right {
86     text-align: right;
87 }
89 /*rtl:ignore*/
90 .text-ltr {
91     direction: ltr !important; /* stylelint-disable-line declaration-no-important */
92 }
94 #add,
95 #remove,
96 .centerpara,
97 .mdl-align {
98     text-align: center;
99 }
101 a.dimmed,
102 a.dimmed:link,
103 a.dimmed:visited,
104 a.dimmed_text,
105 a.dimmed_text:link,
106 a.dimmed_text:visited,
107 .dimmed_text,
108 .dimmed_text a,
109 .dimmed_text a:link,
110 .dimmed_text a:visited,
111 .usersuspended,
112 .usersuspended a,
113 .usersuspended a:link,
114 .usersuspended a:visited,
115 .dimmed_category,
116 .dimmed_category a {
117     color: $text-muted;
120 .unlist,
121 .unlist li,
122 .inline-list,
123 .inline-list li,
124 .block .list,
125 .block .list li,
126 .section li.activity,
127 .section li.movehere,
128 .tabtree li {
129     list-style: none;
130     margin: 0;
131     padding: 0;
134 .inline,
135 .inline-list li {
136     display: inline;
139 .notifytiny {
140     font-size: $font-size-xs;
143 .notifytiny li,
144 .notifytiny td {
145     font-size: 100%;
148 .red,
149 .notifyproblem {
150     color: map-get($theme-colors, 'warning');
153 .green,
154 .notifysuccess {
155     color: map-get($theme-colors, 'success');
158 .highlight {
159     color: map-get($theme-colors, 'info');
162 .fitem.advanced .text-info {
163     font-weight: bold;
166 .reportlink {
167     text-align: right;
170 a.autolink.glossary:hover {
171     cursor: help;
173 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
174 .collapsibleregioncaption {
175     white-space: nowrap;
176     min-height: $line-height-base * $font-size-base;
179 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
180     cursor: pointer;
183 .pagelayout-mydashboard #region-main {
184     border: 0;
185     padding: 0;
186     background-color: transparent;
187     margin-top: -1px;
190 .collapsibleregioncaption img {
191     vertical-align: middle;
194 .jsenabled .hiddenifjs {
195     display: none;
198 .visibleifjs {
199     display: none;
202 .jsenabled .visibleifjs {
203     display: inline;
206 .jsenabled .collapsibleregion {
207     overflow: hidden;
208     box-sizing: content-box;
211 .jsenabled .collapsed .collapsibleregioninner {
212     visibility: hidden;
215 .collapsible-actions {
216     display: none;
217     text-align: right;
220 .jsenabled .collapsible-actions {
221     display: block;
224 .collapsible-actions .collapseexpand {
225     padding-left: 20px;
226     background: url([[pix:t/collapsed]]) 2px center no-repeat;
228 /*rtl:raw:
229 .collapsible-actions .collapseexpand {
230     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
232 */
233 .collapsible-actions .collapse-all {
234     background-image: url([[pix:t/expanded]]);
237 .yui-overlay .yui-widget-bd {
238     background-color: #ffee69;
239     border: 1px solid #a6982b;
240     border-top-color: #d4c237;
241     color: #000;
242     left: 0;
243     padding: 2px 5px;
244     position: relative;
245     top: 0;
246     z-index: 1;
249 .clearer {
250     background: transparent;
251     border-width: 0;
252     clear: both;
253     display: block;
254     height: 1px;
255     margin: 0;
256     padding: 0;
259 .bold,
260 .warning,
261 .errorbox .title,
262 .pagingbar .title,
263 .pagingbar .thispage {
264     font-weight: bold;
267 img.userpicture {
268     margin-right: 0.5rem;
271 img.resize {
272     height: 1em;
273     width: 1em;
276 .action-menu .dropdown-toggle {
277     text-decoration: none;
280 .action-menu {
281     white-space: nowrap;
284 .block img.resize {
285     height: 0.9em;
286     width: 0.8em;
288 /* Icon styles */
289 img.activityicon {
290     height: 24px;
291     width: 24px;
292     vertical-align: middle;
295 .headermain {
296     font-weight: bold;
299 #maincontent {
300     display: block;
301     height: 1px;
302     overflow: hidden;
305 img.uihint {
306     cursor: help;
309 #addmembersform table {
310     margin-left: auto;
311     margin-right: auto;
314 table.flexible .emptyrow {
315     display: none;
318 form.popupform,
319 form.popupform div {
320     display: inline;
323 .arrow_button input {
324     overflow: hidden;
326 .no-overflow {
327     overflow: auto;
330 // Minimum height required for a menu in a table inside a scrollable div.
331 // Position required for table sizing inside a flex container.
332 .no-overflow > .generaltable {
333     position: relative;
334     margin-bottom: 0;
335     min-height: 10em;
337 // Accessibility features
339 // Accessibility: text 'seen' by screen readers but not visual users.
340 .accesshide {
341     @include sr-only();
344 span.hide,
345 div.hide,
346 .hidden {
347     display: none;
349 // Accessibility: Skip block link, for keyboard-only users.
350 a.skip-block,
351 a.skip {
352     position: absolute;
353     top: -1000em;
354     font-size: 0.85em;
355     text-decoration: none;
358 a.skip-block:focus,
359 a.skip-block:active,
360 a.skip:focus,
361 a.skip:active {
362     position: static;
363     display: block;
366 .skip-block-to {
367     display: block;
368     height: 1px;
369     overflow: hidden;
371 // Blogs
372 .addbloglink {
373     text-align: center;
376 .blog_entry .audience {
377     text-align: right;
378     padding-right: 4px;
381 .blog_entry .tags {
382     margin-top: 15px;
385 .blog_entry .content {
386     margin-left: 43px;
388 // Group
390 #doc-contents h1 {
391     margin: 1em 0 0 0;
394 #doc-contents ul {
395     margin: 0;
396     padding: 0;
397     width: 90%;
400 #doc-contents ul li {
401     list-style-type: none;
404 .groupmanagementtable td {
405     vertical-align: top;
408 .groupmanagementtable #existingcell,
409 .groupmanagementtable #potentialcell {
410     width: 42%;
413 .groupmanagementtable #buttonscell {
414     width: 16%;
417 .groupmanagementtable #buttonscell p.arrow_button input {
418     width: auto;
419     min-width: 80%;
420     margin: 0 auto;
421     display: block;
424 .groupmanagementtable #removeselect_wrapper,
425 .groupmanagementtable #addselect_wrapper {
426     width: 100%;
429 .groupmanagementtable #removeselect_wrapper label,
430 .groupmanagementtable #addselect_wrapper label {
431     font-weight: normal;
434 #group-usersummary {
435     width: 14em;
438 .groupselector {
439     margin-top: 3px;
440     margin-bottom: 3px;
441     display: inline-block;
444 .groupselector label {
445     display: inline-block;
448 // Login
449 .login-page {
450     [name="username"] {
451         margin-bottom: -1px;
452         border-bottom-right-radius: 0;
453         border-bottom-left-radius: 0;
454     }
456     [type="password"] {
457         margin-bottom: 10px;
458         border-top-left-radius: 0;
459         border-top-right-radius: 0;
460     }
463 // Notes
464 .notepost {
465     margin-bottom: 1em;
468 .notepost .userpicture {
469     float: left;
470     margin-right: 5px;
473 .notepost .content,
474 .notepost .footer {
475     clear: both;
478 .notesgroup {
479     margin-left: 20px;
482 // My Moodle
483 .path-my .coursebox {
484     margin: $spacer-y 0;
485     padding: 0;
487     .overview {
488         margin: 15px 30px 10px 30px;
489     }
492 .path-my .coursebox .info {
493     float: none;
494     margin: 0;
497 // Modules
498 .mod_introbox {
499     padding: 10px;
502 table.mod_index {
503     width: 100%;
506 // Comments
507 .comment-ctrl {
508     font-size: 12px;
509     display: none;
510     margin: 0;
511     padding: 0;
514 .comment-ctrl h5 {
515     margin: 0;
516     padding: 5px;
519 .comment-area {
520     max-width: 400px;
521     padding: 5px;
524 .comment-area textarea {
525     width: 100%;
526     overflow: auto;
528     &.fullwidth {
529         -webkit-box-sizing: border-box;
530         -moz-box-sizing: border-box;
531         box-sizing: border-box;
532     }
535 .comment-area .fd {
536     text-align: right;
539 .comment-meta span {
540     color: gray;
543 .comment-link img {
544     vertical-align: text-bottom;
547 .comment-list {
548     font-size: 11px;
549     overflow: auto;
550     list-style: none;
551     padding: 0;
552     margin: 0;
555 .comment-list li {
556     margin: 2px;
557     list-style: none;
558     margin-bottom: 5px;
559     clear: both;
560     padding: .3em;
561     position: relative;
564 .comment-list li.first {
565     display: none;
568 .comment-paging {
569     text-align: center;
572 .comment-paging .pageno {
573     padding: 2px;
576 .comment-paging .curpage {
577     border: 1px solid #ccc;
580 .comment-message .picture {
581     width: 20px;
582     float: left;
585 .comment-message .text {
586     margin: 0;
587     padding: 0;
590 .comment-message .text p {
591     padding: 0;
592     margin: 0 18px 0 0;
595 .comment-delete {
596     position: absolute;
597     top: 0;
598     right: 0;
599     margin: .3em;
602 .comment-report-selectall {
603     display: none;
606 .comment-link {
607     display: none;
610 .jsenabled .comment-link {
611     display: block;
614 .jsenabled .showcommentsnonjs {
615     display: none;
618 .jsenabled .comment-report-selectall {
619     display: inline;
621 /**
622 * Completion progress report
623 */
624 .completion-expired {
625     color: map-get($theme-colors, 'warning');
628 .completion-expected {
629     font-size: $font-size-xs;
632 .completion-sortchoice,
633 .completion-identifyfield {
634     font-size: $font-size-xs;
635     vertical-align: bottom;
638 .completion-progresscell {
639     text-align: right;
642 .completion-expired .completion-expected {
643     font-weight: bold;
645 /**
646 * Tags
647 */
648 img.user-image {
649     height: 100px;
650     width: 100px;
653 #tag-search-box {
654     text-align: center;
655     margin: 10px auto;
658 .path-tag .tag-index-items .tagarea {
659     border: 1px solid #e3e3e3;
660     border-radius: 4px;
661     padding: 10px;
662     margin-top: 10px;
665 .path-tag .tag-index-items .tagarea h3 {
666     display: block;
667     padding: 3px 0 10px 0;
668     margin: 0;
669     font-size: 1.1em;
670     font-weight: bold;
671     line-height: 20px;
672     color: #999;
673     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
674     text-transform: uppercase;
675     word-wrap: break-word;
676     border-bottom: solid 1px #e3e3e3;
677     margin-bottom: 10px;
680 .path-tag .tagarea .controls,
681 .path-tag .tagarea .taggeditems {
682     @include clearfix();
685 .path-tag .tagarea .controls,
686 .path-tag .tag-backtoallitems {
687     text-align: center;
690 .path-tag .tagarea .controls .gotopage.nextpage {
691     float: right;
694 .path-tag .tagarea .controls .gotopage.prevpage {
695     float: left;
698 .path-tag .tagarea .controls .exclusivemode {
699     display: inline-block;
702 .path-tag .tagarea .controls.controls-bottom {
703     margin-top: 5px;
706 .path-tag .tagarea .controls .gotopage.nextpage::after {
707     padding-right: 5px;
708     padding-left: 5px;
709     content: "»";
712 .path-tag .tagarea .controls .gotopage.prevpage::before {
713     padding-right: 5px;
714     padding-left: 5px;
715     content: "«";
718 span.flagged-tag,
719 tr.flagged-tag,
720 span.flagged-tag a,
721 tr.flagged-tag a {
722     color: map-get($theme-colors, 'warning');
725 .tag-management-table td,
726 .tag-management-table th {
727     vertical-align: middle;
728     padding: 4px;
731 .tag-management-table .inplaceeditable.inplaceeditingon input {
732     width: 150px;
735 .path-admin-tag .addstandardtags {
736     float: right;
738     img {
739         margin: 0 5px;
740     }
743 .path-tag .tag-relatedtags {
744     padding-top: 10px;
747 .path-tag .tag-management-box {
748     text-align: right;
751 .path-tag .tag-index-toc {
752     padding: 10px;
753     text-align: center;
756 .path-tag .tag-index-toc li,
757 .path-tag .tag-management-box li {
758     margin-left: 5px;
759     margin-right: 5px;
762 .path-tag .tag-management-box li a.edittag {
763     background-image: url([[pix:moodle|i/settings]]);
766 .path-tag .tag-management-box li a.flagasinappropriate {
767     background-image: url([[pix:moodle|i/flagged]]);
770 .path-tag .tag-management-box li a.removefrommyinterests {
771     background-image: url([[pix:moodle|t/delete]]);
774 .path-tag .tag-management-box li a.addtomyinterests {
775     background-image: url([[pix:moodle|t/add]]);
778 .path-tag .tag-management-box li a {
779     background-repeat: no-repeat;
780     background-position: left;
781     padding-left: 17px;
784 .tag_feed.media-list .media .itemimage {
785     float: left;
788 .tag_feed.media-list .media .itemimage img {
789     height: 35px;
790     width: 35px;
793 .tag_feed.media-list .media .media-body {
794     padding-right: 10px;
795     padding-left: 10px;
798 .tag_feed .media .muted a {
799     color: $text-muted;
802 .tag_cloud {
803     text-align: center;
806 .tag_cloud .inline-list li {
807     padding: 0 0.2em;
810 .tag_cloud .tag_overflow {
811     margin-top: 1em;
812     font-style: italic;
815 .tag_cloud .s20 {
816     font-size: 2.7em;
819 .tag_cloud .s19 {
820     font-size: 2.6em;
823 .tag_cloud .s18 {
824     font-size: 2.5em;
827 .tag_cloud .s17 {
828     font-size: 2.4em;
831 .tag_cloud .s16 {
832     font-size: 2.3em;
835 .tag_cloud .s15 {
836     font-size: 2.2em;
839 .tag_cloud .s14 {
840     font-size: 2.1em;
843 .tag_cloud .s13 {
844     font-size: 2em;
847 .tag_cloud .s12 {
848     font-size: 1.9em;
851 .tag_cloud .s11 {
852     font-size: 1.8em;
855 .tag_cloud .s10 {
856     font-size: 1.7em;
859 .tag_cloud .s9 {
860     font-size: 1.6em;
863 .tag_cloud .s8 {
864     font-size: 1.5em;
867 .tag_cloud .s7 {
868     font-size: 1.4em;
871 .tag_cloud .s6 {
872     font-size: 1.3em;
875 .tag_cloud .s5 {
876     font-size: 1.2em;
879 .tag_cloud .s4 {
880     font-size: 1.1em;
883 .tag_cloud .s3 {
884     font-size: 1em;
887 .tag_cloud .s2 {
888     font-size: 0.9em;
891 .tag_cloud .s1 {
892     font-size: 0.8em;
895 .tag_cloud .s0 {
896     font-size: 0.7em;
899 .tag_list ul {
900     display: inline;
903 .tag_list.hideoverlimit .overlimit {
904     display: none;
907 .tag_list .tagmorelink {
908     display: none;
911 .tag_list.hideoverlimit .tagmorelink {
912     display: inline;
915 .tag_list.hideoverlimit .taglesslink {
916     display: none;
919 /**
920 * Web Service
921 */
922 #webservice-doc-generator td {
923     text-align: left;
924     border: 0 solid black;
927 /**
928 * Enrol
929 */
930 .userenrolment {
931     width: 100%;
932     border-collapse: collapse;
935 .userenrolment tr {
936     vertical-align: top;
939 .userenrolment td {
940     padding: 0;
941     height: 41px;
944 .userenrolment .subfield {
945     margin-right: 5px;
948 .userenrolment .col_userdetails .subfield {
949     margin-left: 40px;
952 .userenrolment .col_userdetails .subfield_picture {
953     float: left;
954     margin-left: 0;
957 .userenrolment .col_lastseen {
958     width: 150px;
961 .userenrolment .col_role {
962     width: 262px;
965 .userenrolment .col_role .roles,
966 .userenrolment .col_group .groups {
967     margin-right: 30px;
970 .userenrolment .col_role .role {
971     float: left;
972     padding: 0 3px 3px;
973     margin: 0 3px 3px;
974     white-space: nowrap;
977 .userenrolment .col_group .group {
978     float: left;
979     padding: 3px;
980     margin: 3px;
981     white-space: nowrap;
984 .userenrolment .col_role .role a,
985 .userenrolment .col_group .group a {
986     margin-left: 3px;
987     cursor: pointer;
990 .userenrolment .col_role .addrole,
991 .userenrolment .col_group .addgroup {
992     float: right;
993     padding: 3px;
994     margin: 3px;
996     > a:hover {
997         border-bottom: 1px solid #666;
998     }
1001 .userenrolment .col_role .addrole img,
1002 .userenrolment .col_group .addgroup img {
1003     vertical-align: baseline;
1006 .userenrolment .hasAllRoles .col_role .addrole {
1007     display: none;
1010 .userenrolment .col_enrol .enrolment {
1011     float: left;
1012     padding: 0 3px 3px;
1013     margin: 0 3px 3px;
1016 .userenrolment .col_enrol .enrolment a {
1017     float: right;
1018     margin-left: 3px;
1021 .corelightbox {
1022     background-color: #ccc;
1023     position: absolute;
1024     top: 0;
1025     left: 0;
1026     width: 100%;
1027     height: 100%;
1028     text-align: center;
1031 .corelightbox img {
1032     position: fixed;
1033     top: 50%;
1034     left: 50%;
1037 .mod-indent-outer {
1038     display: table;
1041 .mod-indent {
1042     display: table-cell;
1045 .label .mod-indent {
1046     float: left;
1047     padding-top: 20px;
1049 $mod-indent-size: 30px;
1050 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1052 @for $i from 1 through 16 {
1053     $width: ($i * $mod-indent-size);
1055     .mod-indent-#{$i} {
1056         width: $width;
1057     }
1060 .mod-indent-huge {
1061     width: (16 * $mod-indent-size);
1064 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1065 .resourcecontent .mediaplugin_mp3 object {
1066     height: 25px;
1067     width: 600px;
1070 .resourcecontent audio.mediaplugin_html5audio {
1071     width: 600px;
1073 /** Large resource images should avoid hidden overflow **/
1074 .resourceimage {
1075     max-width: 100%;
1077 /* Audio player size in 'inline' mode (can only change width, as above) */
1078 .mediaplugin_mp3 object {
1079     height: 15px;
1080     width: 300px;
1083 audio.mediaplugin_html5audio {
1084     width: 300px;
1086 /* TinyMCE moodle media preview frame should not have padding */
1087 .core_media_preview.pagelayout-embedded #content {
1088     padding: 0;
1091 .core_media_preview.pagelayout-embedded #maincontent {
1092     height: 0;
1095 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1096     padding: 0;
1097     margin: 0;
1098     min-width: 0;
1099     background: none;
1102 .path-rating .ratingtable {
1103     width: 100%;
1104     margin-bottom: 1em;
1107 .path-rating .ratingtable th.rating {
1108     width: 100%;
1111 .path-rating .ratingtable td.rating,
1112 .path-rating .ratingtable td.time {
1113     white-space: nowrap;
1114     text-align: center;
1117 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1118 .moodle-dialogue-base .moodle-dialogue-lightbox {
1119     background-color: $gray;
1122 // Prevent adding backdrops to popups in popups.
1123 .pagelayout-popup {
1124     .moodle-dialogue-base {
1125         .moodle-dialogue-lightbox {
1126             background-color: transparent;
1127         }
1128         .moodle-dialogue {
1129             box-shadow: $popover-box-shadow;
1130         }
1131     }
1134 .moodle-dialogue-base .hidden,
1135 .moodle-dialogue-base .moodle-dialogue-hidden {
1136     display: none;
1139 .no-scrolling {
1140     overflow: hidden;
1143 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1144     left: 0;
1145     top: 0;
1146     right: 0;
1147     bottom: -50px;
1148     position: fixed;
1151 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1152     overflow: auto;
1155 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1156     width: 28px;
1157     height: 16px;
1158     background-size: 100%;
1161 .moodle-dialogue-base .moodle-dialogue-wrap {
1162     background-color: #fff;
1163     border: 1px solid #ccc;
1166 // Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1167 // it for a reason (conflicts with jquery .show()).
1168 .modal.show {
1169     display: block;
1172 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1173     display: flex;
1174     padding: 1rem 1rem;
1175     border-bottom: 1px solid #dee2e6;
1178 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1179     // Undo some YUI damage.
1180     min-height: 3rem;
1181     color: initial;
1182     background: initial;
1183     font-size: 1.5rem;
1184     line-height: 1.5;
1187 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1188     font-size: 1.5rem;
1191 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1192     /*rtl:raw:
1193         left: 0;
1194         right: auto;
1195     */
1196     padding: 0;
1197     position: relative;
1198     margin-left: auto;
1201 .moodle-dialogue-base .closebutton {
1202     padding: $modal-header-padding;
1203     margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
1204     position: relative;
1205     background-color: transparent;
1206     border: 0;
1207     background-image: none;
1208     box-shadow: none;
1209     opacity: 0.7;
1210     &:hover,
1211     &:active {
1212         opacity: 1;
1213     }
1214     &::after {
1215         content: "×";
1216     }
1219 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1220     padding: 0.5rem;
1221     body {
1222         background-color: $body-bg;
1223     }
1226 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1227     overflow: auto;
1228     position: absolute;
1229     top: 0;
1230     bottom: 50px;
1231     left: 0;
1232     right: 0;
1233     margin: 0;
1234     border: 0;
1237 .moodle-dialogue-exception .moodle-exception-param label {
1238     font-weight: bold;
1241 .moodle-dialogue-exception .param-stacktrace label {
1242     background-color: #eee;
1243     border: 1px solid #ccc;
1244     border-bottom-width: 0;
1247 .moodle-dialogue-exception .param-stacktrace pre {
1248     border: 1px solid #ccc;
1249     background-color: #fff;
1252 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1253     color: navy;
1254     font-size: $font-size-sm;
1257 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1258     color: map-get($theme-colors, 'warning');
1259     font-size: $font-size-sm;
1262 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1263     color: #333;
1264     font-size: 90%;
1265     border-bottom: 1px solid #eee;
1268 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1269     display: none;
1272 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1273     // Undo some YUI damage.
1274     background: initial;
1277 .moodle-dialogue-confirm .confirmation-message {
1278     margin: 0.5rem 0;
1281 .moodle-dialogue-confirm .confirmation-dialogue input {
1282     min-width: 80px;
1285 .moodle-dialogue-exception .moodle-exception-message {
1286     margin: 1em;
1289 .moodle-dialogue-exception .moodle-exception-param {
1290     margin-bottom: 0.5em;
1293 .moodle-dialogue-exception .moodle-exception-param label {
1294     width: 150px;
1297 .moodle-dialogue-exception .param-stacktrace label {
1298     display: block;
1299     margin: 0;
1300     padding: 4px 1em;
1303 .moodle-dialogue-exception .param-stacktrace pre {
1304     display: block;
1305     height: 200px;
1306     overflow: auto;
1309 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1310     display: inline-block;
1311     margin: 4px 0;
1314 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1315     display: inline-block;
1316     width: 50px;
1317     margin: 4px 1em;
1320 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1321     padding-left: 25px;
1322     margin-bottom: 4px;
1323     padding-bottom: 4px;
1326 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1327     opacity: 0.75;
1328     width: 100%;
1329     height: 100%;
1330     top: 0;
1331     left: 0;
1332     background-color: white;
1333     text-align: center;
1334     padding: 10% 0;
1336 /* Apply a default max-height on tooltip text */
1337 .moodle-dialogue .tooltiptext {
1338     max-height: 300px;
1341 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1342     z-index: 3001;
1344     .moodle-dialogue-bd {
1345         overflow: auto;
1346     }
1349 /**
1350  * Chooser Dialogues (moodle-core-chooserdialogue)
1351  *
1352  * This CSS belong to the chooser dialogue which should work both with, and
1353  * without javascript enabled
1354  */
1355 /* Hide the dialog and it's title */
1356 .chooserdialoguebody,
1357 .choosertitle {
1358     display: none;
1361 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1362     margin: 0;
1365 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1366     padding: 0;
1367     background: #f2f2f2;
1369     @include border-bottom-radius(10px);
1371 /* Center the submit buttons within the area */
1372 .choosercontainer #chooseform .submitbuttons {
1373     padding: 0.7em 0;
1374     text-align: right;
1376 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1378 @media (max-height: 639px) {
1379     .ios .choosercontainer #chooseform .submitbuttons {
1380         padding: 45px 0;
1381     }
1384 .choosercontainer #chooseform .submitbuttons input {
1385     min-width: 100px;
1386     margin: 0 0.5em;
1388 /* Various settings for the options area */
1389 .choosercontainer #chooseform .options {
1390     position: relative;
1391     border-bottom: 1px solid #bbb;
1393 /* Only set these options if we're showing the js container */
1394 .jschooser .choosercontainer #chooseform .alloptions {
1395     overflow-x: hidden;
1396     overflow-y: auto;
1397     max-width: 240px;
1399     .option {
1400         input[type=radio] {
1401             display: inline-block;
1402         }
1404         .typename {
1405             display: inline-block;
1406             width: 55%;
1407         }
1408     }
1410 /* Settings for option rows and option subtypes */
1411 .choosercontainer #chooseform .moduletypetitle,
1412 .choosercontainer #chooseform .option,
1413 .choosercontainer #chooseform .nonoption {
1414     margin-bottom: 0;
1415     padding: 0 1.6em 0 1.6em;
1418 .choosercontainer #chooseform .moduletypetitle {
1419     text-transform: uppercase;
1420     padding-top: 1.2em;
1421     padding-bottom: 0.4em;
1422     margin-bottom: 0.5rem;
1423     font-size: 100%;
1426 .choosercontainer #chooseform .option .typename,
1427 .choosercontainer #chooseform .nonoption .typename {
1428     padding: 0 0 0 0.5em;
1431 .choosercontainer #chooseform .modicon + .typename {
1432     padding-left: 0;
1435 .choosercontainer #chooseform .option input[type=radio],
1436 .choosercontainer #chooseform .option span.typename {
1437     vertical-align: middle;
1440 .choosercontainer #chooseform .option label {
1441     display: block;
1442     margin: 0;
1443     padding: ($spacer / 2) 0;
1444     border-bottom: 1px solid #fff;
1447 .choosercontainer #chooseform .option .icon {
1448     margin: 0;
1449     padding: 0 $spacer;
1452 .choosercontainer #chooseform .nonoption {
1453     padding-left: 2.7em;
1454     padding-top: 0.3em;
1455     padding-bottom: 0.1em;
1458 .choosercontainer #chooseform .subtype {
1459     margin-bottom: 0;
1460     padding: 0 1.6em 0 3.2em;
1463 .choosercontainer #chooseform .subtype .typename {
1464     margin: 0 0 0 0.2em;
1466 /* The instruction/help area */
1467 .jschooser .choosercontainer #chooseform .instruction,
1468 .jschooser .choosercontainer #chooseform .typesummary {
1469     display: none;
1470     position: absolute;
1471     top: 0;
1472     right: 0;
1473     bottom: 0;
1474     left: 240px;
1475     margin: 0;
1476     padding: 1.6em;
1477     background-color: #fff;
1478     overflow-x: hidden;
1479     overflow-y: auto;
1480     line-height: 2em;
1482 /* Selected option settings */
1483 .jschooser .choosercontainer #chooseform .instruction,
1484 .choosercontainer #chooseform .selected .typesummary {
1485     display: block;
1488 .choosercontainer #chooseform .selected {
1489     background-color: #fff;
1490     margin-top: -1px;
1491     padding-top: 1px;
1495 @include media-breakpoint-down(xs) {
1496     .jsenabled .choosercontainer #chooseform .alloptions {
1497         max-width: 100%;
1498     }
1500     .jsenabled .choosercontainer #chooseform .instruction,
1501     .jsenabled .choosercontainer #chooseform .typesummary {
1502         position: static;
1503     }
1506 /**
1507  * Module chooser dialogue (moodle-core-chooserdialogue)
1508  *
1509  * This CSS belong to the chooser dialogue which should work both with, and
1510  * without javascript enabled
1511  */
1512 .modchooser .modal-body {
1513     padding: 0;
1514     height: 640px;
1515     overflow-y: auto;
1517     .loading-icon {
1518         opacity: 1;
1519         .icon {
1520             display: block;
1521             font-size: 3em;
1522             height: 1em;
1523             width: 1em;
1524             margin: 5em auto;
1525         }
1526     }
1529 .modchoosercontainer.noscroll {
1530     overflow-y: hidden;
1533 .modchooser .searchcontainer .searchbar {
1535     .searchinput {
1536         font-size: inherit;
1537         border: 1px solid #dee2e6;
1538         border-top-left-radius: .3rem;
1539         border-bottom-left-radius: .3rem;
1540         border-right: none;
1541     }
1543     .searchbar-append {
1544         align-items: center;
1545         border: 1px solid #dee2e6;
1546         border-left: none;
1547         border-top-right-radius: .3rem;
1548         border-bottom-right-radius: .3rem;
1550         i {
1551             color: #868e96;
1552             margin: 0;
1553             vertical-align: middle;
1554         }
1556         .clear {
1557             i {
1558                 height: 23px;
1559                 width: 23px;
1560                 font-size: 23px;
1561                 pointer-events: none;
1562             }
1563         }
1564         .search-icon {
1565             i {
1566                 height: 20px;
1567                 width: 20px;
1568                 font-size: 20px;
1569             }
1570         }
1571     }
1574 .modchoosercontainer .optionscontainer,
1575 .modchoosercontainer .searchresultitemscontainer {
1576     overflow-x: hidden;
1577     .option {
1578         // Six items per line.
1579         flex-basis: 16.66%;
1580         .optionactions {
1581             .optionaction {
1582                 cursor: pointer;
1583                 color: $gray-600;
1584                 i {
1585                     margin: 0;
1586                 }
1587             }
1588         }
1589         .optioninfo {
1590             a {
1591                 color: $gray-700;
1592                 &:hover {
1593                     text-decoration: none;
1594                 }
1595                 .optionicon {
1596                     .icon {
1597                         margin: 0;
1598                         padding: 0;
1599                         width: 32px;
1600                         height: 32px;
1601                         font-size: 32px;
1602                     }
1603                 }
1604             }
1605         }
1606     }
1609 .modchooser .modal-body .optionsummary {
1610     background-color: $white;
1611     overflow-x: hidden;
1612     overflow-y: auto;
1613     height: 640px;
1615     .content {
1616         overflow-y: auto;
1617         .heading {
1618             .icon {
1619                 height: 32px;
1620                 width: 32px;
1621                 font-size: 32px;
1622                 padding: 0;
1623             }
1624         }
1625     }
1627     .actions {
1628         border-top: 1px solid $gray-300;
1629         background: $white;
1630     }
1633 @include media-breakpoint-down(lg) {
1634     .modchoosercontainer .optionscontainer .option,
1635     .modchoosercontainer .searchresultitemscontainer .option {
1636         // Five items per line.
1637         flex-basis: 20%;
1638     }
1641 @include media-breakpoint-down(xs) {
1642     .path-course-view .modal-dialog.modal-lg,
1643     .path-course-view .modal-content,
1644     .modchooser .modal-body,
1645     .modchooser .modal-body .carousel,
1646     .modchooser .modal-body .carousel-inner,
1647     .modchooser .modal-body .carousel-item,
1648     .modchooser .modal-body .optionsummary,
1649     .modchoosercontainer,
1650     .optionscontainer,
1651     .searchresultitemscontainer {
1652         height: 100%;
1653     }
1654     .path-course-view .modal-dialog.modal-lg {
1655         margin: 0;
1656     }
1657     .modchoosercontainer .optionscontainer .option,
1658     .modchoosercontainer .searchresultitemscontainer .option {
1659         // Four items per line.
1660         flex-basis: 25%;
1661     }
1664 /* Form element: listing */
1665 .formlistingradio {
1666     padding-bottom: 25px;
1667     padding-right: 10px;
1670 .formlistinginputradio {
1671     float: left;
1674 .formlistingmain {
1675     min-height: 225px;
1678 .formlisting {
1679     position: relative;
1680     margin: 15px 0;
1681     padding: 1px 19px 14px;
1682     background-color: white;
1683     border: 1px solid #ddd;
1685     @include border-radius(4px);
1688 .formlistingmore {
1689     position: absolute;
1690     cursor: pointer;
1691     bottom: -1px;
1692     right: -1px;
1693     padding: 3px 7px;
1694     font-size: 12px;
1695     font-weight: bold;
1696     background-color: whitesmoke;
1697     border: 1px solid #ddd;
1698     color: #9da0a4;
1700     @include border-radius(4px 0 4px 0);
1703 .formlistingall {
1704     margin: 15px 0;
1705     padding: 0;
1707     @include border-radius(4px);
1710 .formlistingrow {
1711     cursor: pointer;
1712     border-bottom: 1px solid;
1713     border-color: #e1e1e8;
1714     border-left: 1px solid #e1e1e8;
1715     border-right: 1px solid #e1e1e8;
1716     background-color: #f7f7f9;
1718     @include border-radius(0 0 4px 4px);
1719     padding: 6px;
1720     top: 50%;
1721     left: 50%;
1722     min-height: 34px;
1723     float: left;
1724     width: 150px;
1727 body.jsenabled .formlistingradio {
1728     display: none;
1731 body.jsenabled .formlisting {
1732     display: block;
1735 a.criteria-action {
1736     padding: 0 3px;
1737     float: right;
1740 div.criteria-description {
1741     padding: 10px 15px;
1742     margin: 5px 0;
1743     background: none repeat scroll 0 0 #f9f9f9;
1744     border: 1px solid #eee;
1747 ul.badges {
1748     margin: 0;
1749     list-style: none;
1752 .badges li {
1753     position: relative;
1754     display: inline-block;
1755     padding-top: 1em;
1756     text-align: center;
1757     vertical-align: top;
1758     width: 150px;
1761 .badges li .badge-name {
1762     display: block;
1763     padding: 5px;
1766 .badges li > img {
1767     position: absolute;
1770 .badges li .badge-image {
1771     width: 100px;
1772     height: 100px;
1773     left: 10px;
1774     top: 0;
1775     z-index: 1;
1778 .badges li .badge-actions {
1779     position: relative;
1782 .badges li .expireimage {
1783     width: 100px;
1784     height: 100px;
1785     left: 25px;
1786     top: 0;
1787     position: absolute;
1788     z-index: 10;
1789     opacity: 0.85;
1792 #badge-image {
1793     background-color: transparent;
1794     padding: 0;
1795     position: relative;
1796     min-width: 100px;
1797     width: 20%;
1798     display: inline-block;
1799     vertical-align: top;
1800     margin-top: 17px;
1801     margin-bottom: 20px;
1803     .expireimage {
1804         width: 100px;
1805         height: 100px;
1806         left: 0;
1807         top: 0;
1808         opacity: 0.85;
1809         position: absolute;
1810         z-index: 10;
1811     }
1813     .singlebutton {
1814         padding-top: 5px;
1815         display: block;
1817         button {
1818             margin-left: 4px;
1819         }
1820     }
1823 #badge-details {
1824     display: inline-block;
1825     width: 79%;
1828 #badge-overview dl,
1829 #badge-details dl {
1830     margin: 0;
1832     dt,
1833     dd {
1834         vertical-align: top;
1835         padding: 3px 0;
1836     }
1838     dt {
1839         clear: both;
1840         display: inline-block;
1841         width: 20%;
1842         min-width: 100px;
1843     }
1845     dd {
1846         display: inline-block;
1847         width: 79%;
1848         margin-left: 1%;
1849     }
1852 .badge-profile {
1853     vertical-align: top;
1856 .connected {
1857     color: map-get($theme-colors, 'success');
1860 .notconnected {
1861     color: map-get($theme-colors, 'danger');
1864 .connecting {
1865     color: map-get($theme-colors, 'warning');
1868 #page-badges-award .recipienttable tr td {
1869     vertical-align: top;
1872 #page-badges-award .recipienttable tr td.actions .actionbutton {
1873     margin: 0.3em 0;
1874     padding: 0.5em 0;
1875     width: 100%;
1878 #page-badges-award .recipienttable tr td.existing,
1879 #page-badges-award .recipienttable tr td.potential {
1880     width: 42%;
1883 #issued-badge-table .activatebadge {
1884     display: inline-block;
1887 .statusbox.active {
1888     background-color: $state-success-bg;
1891 .statusbox.inactive {
1892     background-color: $state-warning-bg;
1895 .statusbox {
1896     text-align: center;
1897     margin-bottom: 5px;
1898     padding: 5px;
1901 .statusbox .activatebadge {
1902     display: inline-block;
1905 .statusbox .activatebadge input[type=submit] {
1906     margin: 3px;
1909 .activatebadge {
1910     margin: 0;
1911     text-align: left;
1912     vertical-align: middle;
1915 img#persona_signin {
1916     cursor: pointer;
1919 .addcourse {
1920     float: right;
1923 .invisiblefieldset {
1924     display: inline;
1925     padding: 0;
1926     border-width: 0;
1929 /** Page header */
1930 #page-header {
1931     .logo {
1932         margin: $spacer 0;
1933         img {
1934             max-height: 75px;
1935         }
1936     }
1939 /** Navbar logo. */
1940 nav.navbar .logo img {
1941     max-height: 35px;
1944 /** Header-bar styles **/
1945 .page-context-header {
1946     // We need to be explicit about the height of the header.
1947     $pageHeaderHeight: 140px;
1949     // Do not remove these rules.
1950     overflow: hidden;
1952     .page-header-image,
1953     .page-header-headings {
1954         float: left;
1955         display: block;
1956         position: relative;
1957     }
1959     .page-header-image {
1960         margin-right: 1em;
1961         margin-bottom: 1em;
1962     }
1964     .page-header-headings,
1965     .header-button-group {
1966         position: relative;
1967         line-height: 24px;
1968         vertical-align: middle;
1969     }
1971     .header-button-group {
1972         display: block;
1973         float: left;
1975         a {
1976             position: relative;
1978             // Don't touch it unless you know exactly what you are doing.
1979             top: -0.4em;
1980         }
1981     }
1984 ul.dragdrop-keyboard-drag li {
1985     list-style-type: none;
1988 a.disabled:hover,
1989 a.disabled {
1990     text-decoration: none;
1991     cursor: default;
1992     font-style: italic;
1993     color: #808080;
1996 body.lockscroll {
1997     height: 100%;
1998     overflow: hidden;
2001 .progressbar_container {
2002     max-width: 500px;
2003     margin: 0 auto;
2006 /* IE10 only fix for calendar titling */
2007 .ie10 .yui3-calendar-header-label {
2008     display: inline-block;
2011 dd:before,
2012 dd:after {
2013     display: block;
2014     content: " ";
2017 dd:after {
2018     clear: both;
2021 // Active tabs with links should have a different
2022 // cursor to indicate they are clickable.
2023 .nav-tabs > .active > a[href],
2024 .nav-tabs > .active > a[href]:hover,
2025 .nav-tabs > .active > a[href]:focus {
2026     cursor: pointer;
2029 .inplaceeditable {
2030     &.inplaceeditingon {
2031         position: relative;
2033         .editinstructions {
2034             margin-top: -30px;
2035             font-weight: normal;
2036             margin-right: 0;
2037             margin-left: 0;
2038             left: 0;
2039             right: auto;
2040             white-space: nowrap;
2041         }
2043         input {
2044             width: 330px;
2045             vertical-align: text-bottom;
2046             margin-bottom: 0;
2047         }
2049         select {
2050             margin-bottom: 0;
2051         }
2052     }
2054     .quickediticon img {
2055         opacity: 0.2;
2056     }
2058     .quickeditlink {
2059         color: inherit;
2060         text-decoration: inherit;
2061     }
2063     &:hover .quickeditlink .quickediticon img,
2064     .quickeditlink:focus .quickediticon img {
2065         opacity: 1;
2066     }
2068     &.inplaceeditable-toggle .quickediticon {
2069         display: none;
2070     }
2072     &.inplaceeditable-autocomplete {
2073         display: block;
2074     }
2077 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2078     margin-top: -20px;
2081 /** Chart area. */
2082 .chart-area {
2084     .chart-table-data {
2085         display: none;
2086     }
2088     .chart-table {
2089         .chart-output-htmltable caption {
2090             white-space: nowrap;
2091         }
2092         /** When accessible, we display the table only. */
2093         &.accesshide {
2094             .chart-table-expand {
2095                 display: none;
2096             }
2097             .chart-table-data {
2098                 display: block;
2099             }
2100         }
2101     }
2104 // Reset for ul.
2105 ul {
2106     padding-left: 1rem;
2109 /* YUI 2 Tree View */
2110 /*rtl:raw:
2111 .ygtvtn,
2112 .ygtvtm,
2113 .ygtvtmh,
2114 .ygtvtmhh,
2115 .ygtvtp,
2116 .ygtvtph,
2117 .ygtvtphh,
2118 .ygtvln,
2119 .ygtvlm,
2120 .ygtvlmh,
2121 .ygtvlmhh,
2122 .ygtvlp,
2123 .ygtvlph,
2124 .ygtvlphh,
2125 .ygtvdepthcell,
2126 .ygtvok,
2127 .ygtvok:hover,
2128 .ygtvcancel,
2129 .ygtvcancel:hover {
2130     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
2132 */
2134 .hover-tooltip-container {
2135     position: relative;
2137     .hover-tooltip {
2138         opacity: 0;
2139         visibility: hidden;
2140         position: absolute;
2141         /*rtl:ignore*/
2142         left: 50%;
2143         top: calc(-50% - 5px);
2144         transform: translate(-50%, -50%);
2145         background-color: #fff;
2146         border: 1px solid rgba(0, 0, 0, .2);
2147         border-radius: .3rem;
2148         box-sizing: border-box;
2149         padding: 5px;
2150         white-space: nowrap;
2151         transition: opacity 0.15s, visibility 0.15s;
2152         z-index: 1000;
2154         &:before {
2155             content: '';
2156             display: inline-block;
2157             border-left: 8px solid transparent;
2158             border-right: 8px solid transparent;
2159             border-top: 8px solid rgba(0, 0, 0, .2);
2160             position: absolute;
2161             bottom: -8px;
2162             left: calc(50% - 8px);
2163         }
2165         &:after {
2166             content: '';
2167             display: inline-block;
2168             border-left: 7px solid transparent;
2169             border-right: 7px solid transparent;
2170             border-top: 7px solid #fff;
2171             position: absolute;
2172             bottom: -6px;
2173             left: calc(50% - 7px);
2174             z-index: 2;
2175         }
2176     }
2178     &:hover {
2179         .hover-tooltip {
2180             opacity: 1;
2181             visibility: visible;
2182             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2183         }
2184     }
2187 #region-flat-nav {
2188     padding-right: 0;
2189     padding-left: 0;
2190     .nav {
2191         margin-right: $grid-gutter-width / 2;
2192         background-color: $card-bg;
2193     }
2194     @include media-breakpoint-down(sm) {
2195         .nav {
2196             margin-top: $grid-gutter-width;
2197             margin-right: 0;
2198         }
2199     }
2202 // Footer link colour was added to allow the colour of footer links to be changed,
2203 // but really in bootstrap we want the colour of links on .bg-inverse to be changed
2204 // rather than being specific to the footer. This is kept for backwards compatibility.
2205 $footer-link-color: $bg-inverse-link-color !default;
2206 #page-footer a {
2207     color: $footer-link-color;
2208     text-decoration: underline;
2209     .icon {
2210         color: $footer-link-color;
2211     }
2214 .bg-inverse a {
2215     color: $bg-inverse-link-color;
2216     text-decoration: underline;
2217     .icon {
2218         color: $bg-inverse-link-color;
2219     }
2222 .sitelink {
2223     img {
2224         width: 112px;
2225     }
2228 // Make links in a menu clickable anywhere in the row.
2229 .dropdown-item a {
2230     display: block;
2231     width: 100%;
2232     color: $body-color;
2234 .dropdown-item:active a {
2235     color: $dropdown-link-active-color;
2238 .competency-tree {
2239     ul {
2240         padding-left: 1.5rem;
2241     }
2244 .sr-only-focusable {
2245     &:active,
2246     &:focus {
2247         z-index: $zindex-navbar-fixed + 1;
2248         position: fixed;
2249         background: #fff;
2250         padding: 7px;
2251         left: 0;
2252         top: 0;
2253     }
2256 [data-drag-type="move"] {
2257     cursor: move;
2258     touch-action: none;
2261 .clickable {
2262     cursor: pointer;
2265 .overlay-icon-container {
2266     position: absolute;
2267     top: 0;
2268     left: 0;
2269     width: 100%;
2270     height: 100%;
2271     background-color: rgba(255, 255, 255, 0.6);
2273     .loading-icon {
2274         position: absolute;
2275         top: 50%;
2276         left: 50%;
2277         transform: translate(-50%, -50%);
2279         .icon {
2280             height: 30px;
2281             width: 30px;
2282             font-size: 30px;
2283         }
2284     }
2287 .open.atto_menu > .dropdown-menu {
2288     display: block;
2290 div.editor_atto_toolbar button .icon {
2291     color: $gray-700;
2293 .w-auto {
2294     width: auto;
2297 .bg-pulse-grey {
2298     animation: bg-pulse-grey 2s infinite linear;
2301 @keyframes bg-pulse-grey {
2302     0% {
2303         background-color: $gray-100;
2304     }
2305     50% {
2306         background-color: darken($gray-100, 5%);
2307     }
2308     100% {
2309         background-color: $gray-100;
2310     }
2313 @each $size, $length in $spacers {
2314     .line-height-#{$size} {
2315         line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2316     }
2319 .dir-rtl {
2320     .dir-rtl-hide {
2321         display: none;
2322     }
2325 .dir-ltr {
2326     .dir-ltr-hide {
2327         display: none;
2328     }
2331 .paged-content-page-container {
2332     min-height: 3.125rem;
2335 body.h5p-embed {
2336     #page-content {
2337         display: inherit;
2338     }
2339     #maincontent {
2340         display: none;
2341     }
2342     .h5pmessages {
2343         min-height: 230px; // This should be the same height as default core_h5p iframes.
2344     }
2347 .text-decoration-none {
2348     text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
2351 .colour-inherit {
2352     color: inherit !important; /* stylelint-disable-line declaration-no-important */
2355 .position-right {
2356     right: 0 !important; /* stylelint-disable-line declaration-no-important */
2359 .overflow-hidden {
2360     overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
2363 .text-break {
2364     overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
2367 .z-index-1 {
2368     z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
2371 // These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
2372 .float-left {
2373     float: left !important; /* stylelint-disable-line declaration-no-important */
2375 .float-right {
2376     float: right !important; /* stylelint-disable-line declaration-no-important */
2379 // Emoji picker.
2380 $picker-width: 350px !default;
2381 $picker-width-xs: 320px !default;
2382 $picker-height: 400px !default;
2383 $picker-row-height: 40px !default;
2384 $picker-emoji-button-size: 40px !default;
2385 $picker-emoji-button-font-size: 24px !default;
2386 $picker-emoji-category-count: 9 !default;
2387 $picker-emojis-per-row: 7 !default;
2389 .emoji-picker {
2390     width: $picker-width;
2391     height: $picker-height;
2393     .category-button {
2394         padding: .375rem 0;
2395         height: 100%;
2396         width: $picker-width / $picker-emoji-category-count;
2397         border-top: none;
2398         border-left: none;
2399         border-right: none;
2400         border-bottom: 2px solid transparent;
2402         &.selected {
2403             border-bottom: 2px solid map-get($theme-colors, 'primary');
2404         }
2405     }
2407     .emojis-container,
2408     .search-results-container {
2409         min-width: $picker-emojis-per-row * $picker-emoji-button-size;
2410     }
2412     .picker-row {
2413         height: $picker-row-height;
2415         .category-name {
2416             line-height: $picker-row-height;
2417         }
2419         .emoji-button {
2420             height: $picker-emoji-button-size;
2421             width: $picker-emoji-button-size;
2422             line-height: $picker-emoji-button-size;
2423             font-size: $picker-emoji-button-font-size;
2424             overflow: hidden;
2426             @include hover-focus {
2427                 color: inherit;
2428                 text-decoration: none;
2429             }
2430         }
2431     }
2433     .emoji-preview {
2434         height: $picker-row-height;
2435         font-size: $picker-row-height;
2436         line-height: $picker-row-height;
2437     }
2439     .emoji-short-name {
2440         line-height: $picker-row-height / 2;
2441     }
2443     @include media-breakpoint-down(xs) {
2444         width: $picker-width-xs;
2445     }
2448 .emoji-auto-complete {
2449     height: $picker-row-height;
2451     .btn.btn-link.btn-icon.emoji-button {
2452         height: $picker-emoji-button-size;
2453         width: $picker-emoji-button-size;
2454         line-height: $picker-emoji-button-size;
2455         font-size: $picker-emoji-button-font-size;
2457         &.active {
2458             background-color: $gray-200;
2459         }
2460     }
2463 .toast-wrapper {
2464     max-width: $toast-max-width;
2465     max-height: 0;
2466     // Place these above any modals and other elements.
2467     z-index: 1051;
2469     > :first-child {
2470         margin-top: $spacer;
2471     }
2474 @each $color, $value in $theme-colors {
2475     .alert-#{$color} a {
2476         color: darken(theme-color-level($color, $alert-color-level), 10%);
2477     }