MDL-67264 core_course: Activity chooser new feature
[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;
1424 .choosercontainer #chooseform .option .typename,
1425 .choosercontainer #chooseform .nonoption .typename {
1426     padding: 0 0 0 0.5em;
1429 .choosercontainer #chooseform .modicon + .typename {
1430     padding-left: 0;
1433 .choosercontainer #chooseform .option input[type=radio],
1434 .choosercontainer #chooseform .option span.typename {
1435     vertical-align: middle;
1438 .choosercontainer #chooseform .option label {
1439     display: block;
1440     margin: 0;
1441     padding: ($spacer / 2) 0;
1442     border-bottom: 1px solid #fff;
1445 .choosercontainer #chooseform .option .icon {
1446     margin: 0;
1447     padding: 0 $spacer;
1450 .choosercontainer #chooseform .nonoption {
1451     padding-left: 2.7em;
1452     padding-top: 0.3em;
1453     padding-bottom: 0.1em;
1456 .choosercontainer #chooseform .subtype {
1457     margin-bottom: 0;
1458     padding: 0 1.6em 0 3.2em;
1461 .choosercontainer #chooseform .subtype .typename {
1462     margin: 0 0 0 0.2em;
1464 /* The instruction/help area */
1465 .jschooser .choosercontainer #chooseform .instruction,
1466 .jschooser .choosercontainer #chooseform .typesummary {
1467     display: none;
1468     position: absolute;
1469     top: 0;
1470     right: 0;
1471     bottom: 0;
1472     left: 240px;
1473     margin: 0;
1474     padding: 1.6em;
1475     background-color: #fff;
1476     overflow-x: hidden;
1477     overflow-y: auto;
1478     line-height: 2em;
1480 /* Selected option settings */
1481 .jschooser .choosercontainer #chooseform .instruction,
1482 .choosercontainer #chooseform .selected .typesummary {
1483     display: block;
1486 .choosercontainer #chooseform .selected {
1487     background-color: #fff;
1488     margin-top: -1px;
1489     padding-top: 1px;
1493 @include media-breakpoint-down(xs) {
1494     .jsenabled .choosercontainer #chooseform .alloptions {
1495         max-width: 100%;
1496     }
1498     .jsenabled .choosercontainer #chooseform .instruction,
1499     .jsenabled .choosercontainer #chooseform .typesummary {
1500         position: static;
1501     }
1504 /**
1505  * Module chooser dialogue (moodle-core-chooserdialogue)
1506  *
1507  * This CSS belong to the chooser dialogue which should work both with, and
1508  * without javascript enabled
1509  */
1510 .modchooser .modal-body {
1511     padding: 0;
1512     height: 590px;
1513     overflow-y: auto;
1515     .loading-icon {
1516         opacity: 1;
1517         .icon {
1518             display: block;
1519             font-size: 3em;
1520             height: 1em;
1521             width: 1em;
1522             margin: 5em auto;
1523         }
1524     }
1527 .modchoosercontainer.noscroll {
1528     overflow-y: hidden;
1531 .modchoosercontainer .optionscontainer {
1532     overflow-x: hidden;
1533     .option {
1534         // Six items per line.
1535         flex-basis: 16%;
1536         .optionactions {
1537             .optionaction {
1538                 cursor: pointer;
1539                 margin: 0.2rem;
1540                 color: $gray-600;
1541                 i {
1542                     margin: 0;
1543                 }
1544             }
1545         }
1546         .optioninfo {
1547             a {
1548                 color: $gray-700;
1549                 &:hover {
1550                     text-decoration: none;
1551                 }
1552                 .optionname {
1553                     margin-top: 0.5em;
1554                 }
1555                 .optionicon {
1556                     .icon {
1557                         margin: 0;
1558                         padding: 0;
1559                         width: 32px;
1560                         height: 32px;
1561                         font-size: 32px;
1562                     }
1563                 }
1564             }
1565         }
1566     }
1569 .modchooser .modal-body .optionsummary {
1570     background-color: $white;
1571     overflow-x: hidden;
1572     overflow-y: auto;
1573     line-height: 2em;
1574     height: 590px;
1576     .content {
1577         overflow-y: auto;
1578         .heading {
1579             .icon {
1580                 height: 32px;
1581                 width: 32px;
1582                 font-size: 32px;
1583                 padding: 0;
1584             }
1585         }
1586     }
1588     .actions {
1589         border-top: 1px solid $gray-300;
1590         background: $white;
1591     }
1594 @include media-breakpoint-down(lg) {
1595     .modchoosercontainer .optionscontainer .option {
1596         // Five items per line.
1597         flex-basis: 20%;
1598     }
1601 @include media-breakpoint-down(xs) {
1602     .path-course-view .modal-dialog.modal-lg,
1603     .path-course-view .modal-content,
1604     .modchooser .modal-body,
1605     .modchooser .modal-body .carousel,
1606     .modchooser .modal-body .carousel-inner,
1607     .modchooser .modal-body .carousel-item,
1608     .modchooser .modal-body .optionsummary,
1609     .modchoosercontainer,
1610     .optionscontainer {
1611         height: 100%;
1612     }
1613     .path-course-view .modal-dialog.modal-lg {
1614         margin: 0;
1615     }
1616     .modchoosercontainer .optionscontainer .option {
1617         // Four items per line.
1618         flex-basis: 25%;
1619     }
1622 /* Form element: listing */
1623 .formlistingradio {
1624     padding-bottom: 25px;
1625     padding-right: 10px;
1628 .formlistinginputradio {
1629     float: left;
1632 .formlistingmain {
1633     min-height: 225px;
1636 .formlisting {
1637     position: relative;
1638     margin: 15px 0;
1639     padding: 1px 19px 14px;
1640     background-color: white;
1641     border: 1px solid #ddd;
1643     @include border-radius(4px);
1646 .formlistingmore {
1647     position: absolute;
1648     cursor: pointer;
1649     bottom: -1px;
1650     right: -1px;
1651     padding: 3px 7px;
1652     font-size: 12px;
1653     font-weight: bold;
1654     background-color: whitesmoke;
1655     border: 1px solid #ddd;
1656     color: #9da0a4;
1658     @include border-radius(4px 0 4px 0);
1661 .formlistingall {
1662     margin: 15px 0;
1663     padding: 0;
1665     @include border-radius(4px);
1668 .formlistingrow {
1669     cursor: pointer;
1670     border-bottom: 1px solid;
1671     border-color: #e1e1e8;
1672     border-left: 1px solid #e1e1e8;
1673     border-right: 1px solid #e1e1e8;
1674     background-color: #f7f7f9;
1676     @include border-radius(0 0 4px 4px);
1677     padding: 6px;
1678     top: 50%;
1679     left: 50%;
1680     min-height: 34px;
1681     float: left;
1682     width: 150px;
1685 body.jsenabled .formlistingradio {
1686     display: none;
1689 body.jsenabled .formlisting {
1690     display: block;
1693 a.criteria-action {
1694     padding: 0 3px;
1695     float: right;
1698 div.criteria-description {
1699     padding: 10px 15px;
1700     margin: 5px 0;
1701     background: none repeat scroll 0 0 #f9f9f9;
1702     border: 1px solid #eee;
1705 ul.badges {
1706     margin: 0;
1707     list-style: none;
1710 .badges li {
1711     position: relative;
1712     display: inline-block;
1713     padding-top: 1em;
1714     text-align: center;
1715     vertical-align: top;
1716     width: 150px;
1719 .badges li .badge-name {
1720     display: block;
1721     padding: 5px;
1724 .badges li > img {
1725     position: absolute;
1728 .badges li .badge-image {
1729     width: 100px;
1730     height: 100px;
1731     left: 10px;
1732     top: 0;
1733     z-index: 1;
1736 .badges li .badge-actions {
1737     position: relative;
1740 .badges li .expireimage {
1741     width: 100px;
1742     height: 100px;
1743     left: 25px;
1744     top: 0;
1745     position: absolute;
1746     z-index: 10;
1747     opacity: 0.85;
1750 #badge-image {
1751     background-color: transparent;
1752     padding: 0;
1753     position: relative;
1754     min-width: 100px;
1755     width: 20%;
1756     display: inline-block;
1757     vertical-align: top;
1758     margin-top: 17px;
1759     margin-bottom: 20px;
1761     .expireimage {
1762         width: 100px;
1763         height: 100px;
1764         left: 0;
1765         top: 0;
1766         opacity: 0.85;
1767         position: absolute;
1768         z-index: 10;
1769     }
1771     .singlebutton {
1772         padding-top: 5px;
1773         display: block;
1775         button {
1776             margin-left: 4px;
1777         }
1778     }
1781 #badge-details {
1782     display: inline-block;
1783     width: 79%;
1786 #badge-overview dl,
1787 #badge-details dl {
1788     margin: 0;
1790     dt,
1791     dd {
1792         vertical-align: top;
1793         padding: 3px 0;
1794     }
1796     dt {
1797         clear: both;
1798         display: inline-block;
1799         width: 20%;
1800         min-width: 100px;
1801     }
1803     dd {
1804         display: inline-block;
1805         width: 79%;
1806         margin-left: 1%;
1807     }
1810 .badge-profile {
1811     vertical-align: top;
1814 .connected {
1815     color: map-get($theme-colors, 'success');
1818 .notconnected {
1819     color: map-get($theme-colors, 'danger');
1822 .connecting {
1823     color: map-get($theme-colors, 'warning');
1826 #page-badges-award .recipienttable tr td {
1827     vertical-align: top;
1830 #page-badges-award .recipienttable tr td.actions .actionbutton {
1831     margin: 0.3em 0;
1832     padding: 0.5em 0;
1833     width: 100%;
1836 #page-badges-award .recipienttable tr td.existing,
1837 #page-badges-award .recipienttable tr td.potential {
1838     width: 42%;
1841 #issued-badge-table .activatebadge {
1842     display: inline-block;
1845 .statusbox.active {
1846     background-color: $state-success-bg;
1849 .statusbox.inactive {
1850     background-color: $state-warning-bg;
1853 .statusbox {
1854     text-align: center;
1855     margin-bottom: 5px;
1856     padding: 5px;
1859 .statusbox .activatebadge {
1860     display: inline-block;
1863 .statusbox .activatebadge input[type=submit] {
1864     margin: 3px;
1867 .activatebadge {
1868     margin: 0;
1869     text-align: left;
1870     vertical-align: middle;
1873 img#persona_signin {
1874     cursor: pointer;
1877 .addcourse {
1878     float: right;
1881 .invisiblefieldset {
1882     display: inline;
1883     padding: 0;
1884     border-width: 0;
1887 /** Page header */
1888 #page-header {
1889     .logo {
1890         margin: $spacer 0;
1891         img {
1892             max-height: 75px;
1893         }
1894     }
1897 /** Navbar logo. */
1898 nav.navbar .logo img {
1899     max-height: 35px;
1902 /** Header-bar styles **/
1903 .page-context-header {
1904     // We need to be explicit about the height of the header.
1905     $pageHeaderHeight: 140px;
1907     // Do not remove these rules.
1908     overflow: hidden;
1910     .page-header-image,
1911     .page-header-headings {
1912         float: left;
1913         display: block;
1914         position: relative;
1915     }
1917     .page-header-image {
1918         margin-right: 1em;
1919         margin-bottom: 1em;
1920     }
1922     .page-header-headings,
1923     .header-button-group {
1924         position: relative;
1925         line-height: 24px;
1926         vertical-align: middle;
1927     }
1929     .header-button-group {
1930         display: block;
1931         float: left;
1933         a {
1934             position: relative;
1936             // Don't touch it unless you know exactly what you are doing.
1937             top: -0.4em;
1938         }
1939     }
1942 ul.dragdrop-keyboard-drag li {
1943     list-style-type: none;
1946 a.disabled:hover,
1947 a.disabled {
1948     text-decoration: none;
1949     cursor: default;
1950     font-style: italic;
1951     color: #808080;
1954 body.lockscroll {
1955     height: 100%;
1956     overflow: hidden;
1959 .progressbar_container {
1960     max-width: 500px;
1961     margin: 0 auto;
1964 /* IE10 only fix for calendar titling */
1965 .ie10 .yui3-calendar-header-label {
1966     display: inline-block;
1969 dd:before,
1970 dd:after {
1971     display: block;
1972     content: " ";
1975 dd:after {
1976     clear: both;
1979 // Active tabs with links should have a different
1980 // cursor to indicate they are clickable.
1981 .nav-tabs > .active > a[href],
1982 .nav-tabs > .active > a[href]:hover,
1983 .nav-tabs > .active > a[href]:focus {
1984     cursor: pointer;
1987 .inplaceeditable {
1988     &.inplaceeditingon {
1989         position: relative;
1991         .editinstructions {
1992             margin-top: -30px;
1993             font-weight: normal;
1994             margin-right: 0;
1995             margin-left: 0;
1996             left: 0;
1997             right: auto;
1998             white-space: nowrap;
1999         }
2001         input {
2002             width: 330px;
2003             vertical-align: text-bottom;
2004             margin-bottom: 0;
2005         }
2007         select {
2008             margin-bottom: 0;
2009         }
2010     }
2012     .quickediticon img {
2013         opacity: 0.2;
2014     }
2016     .quickeditlink {
2017         color: inherit;
2018         text-decoration: inherit;
2019     }
2021     &:hover .quickeditlink .quickediticon img,
2022     .quickeditlink:focus .quickediticon img {
2023         opacity: 1;
2024     }
2026     &.inplaceeditable-toggle .quickediticon {
2027         display: none;
2028     }
2030     &.inplaceeditable-autocomplete {
2031         display: block;
2032     }
2035 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2036     margin-top: -20px;
2039 /** Chart area. */
2040 .chart-area {
2042     .chart-table-data {
2043         display: none;
2044     }
2046     .chart-table {
2047         .chart-output-htmltable caption {
2048             white-space: nowrap;
2049         }
2050         /** When accessible, we display the table only. */
2051         &.accesshide {
2052             .chart-table-expand {
2053                 display: none;
2054             }
2055             .chart-table-data {
2056                 display: block;
2057             }
2058         }
2059     }
2062 // Reset for ul.
2063 ul {
2064     padding-left: 1rem;
2067 /* YUI 2 Tree View */
2068 /*rtl:raw:
2069 .ygtvtn,
2070 .ygtvtm,
2071 .ygtvtmh,
2072 .ygtvtmhh,
2073 .ygtvtp,
2074 .ygtvtph,
2075 .ygtvtphh,
2076 .ygtvln,
2077 .ygtvlm,
2078 .ygtvlmh,
2079 .ygtvlmhh,
2080 .ygtvlp,
2081 .ygtvlph,
2082 .ygtvlphh,
2083 .ygtvdepthcell,
2084 .ygtvok,
2085 .ygtvok:hover,
2086 .ygtvcancel,
2087 .ygtvcancel:hover {
2088     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
2090 */
2092 .hover-tooltip-container {
2093     position: relative;
2095     .hover-tooltip {
2096         opacity: 0;
2097         visibility: hidden;
2098         position: absolute;
2099         /*rtl:ignore*/
2100         left: 50%;
2101         top: calc(-50% - 5px);
2102         transform: translate(-50%, -50%);
2103         background-color: #fff;
2104         border: 1px solid rgba(0, 0, 0, .2);
2105         border-radius: .3rem;
2106         box-sizing: border-box;
2107         padding: 5px;
2108         white-space: nowrap;
2109         transition: opacity 0.15s, visibility 0.15s;
2110         z-index: 1000;
2112         &:before {
2113             content: '';
2114             display: inline-block;
2115             border-left: 8px solid transparent;
2116             border-right: 8px solid transparent;
2117             border-top: 8px solid rgba(0, 0, 0, .2);
2118             position: absolute;
2119             bottom: -8px;
2120             left: calc(50% - 8px);
2121         }
2123         &:after {
2124             content: '';
2125             display: inline-block;
2126             border-left: 7px solid transparent;
2127             border-right: 7px solid transparent;
2128             border-top: 7px solid #fff;
2129             position: absolute;
2130             bottom: -6px;
2131             left: calc(50% - 7px);
2132             z-index: 2;
2133         }
2134     }
2136     &:hover {
2137         .hover-tooltip {
2138             opacity: 1;
2139             visibility: visible;
2140             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2141         }
2142     }
2145 #region-flat-nav {
2146     padding-right: 0;
2147     padding-left: 0;
2148     .nav {
2149         margin-right: $grid-gutter-width / 2;
2150         background-color: $card-bg;
2151     }
2152     @include media-breakpoint-down(sm) {
2153         .nav {
2154             margin-top: $grid-gutter-width;
2155             margin-right: 0;
2156         }
2157     }
2160 // Footer link colour was added to allow the colour of footer links to be changed,
2161 // but really in bootstrap we want the colour of links on .bg-inverse to be changed
2162 // rather than being specific to the footer. This is kept for backwards compatibility.
2163 $footer-link-color: $bg-inverse-link-color !default;
2164 #page-footer a {
2165     color: $footer-link-color;
2166     text-decoration: underline;
2167     .icon {
2168         color: $footer-link-color;
2169     }
2172 .bg-inverse a {
2173     color: $bg-inverse-link-color;
2174     text-decoration: underline;
2175     .icon {
2176         color: $bg-inverse-link-color;
2177     }
2180 .sitelink {
2181     img {
2182         width: 112px;
2183     }
2186 // Make links in a menu clickable anywhere in the row.
2187 .dropdown-item a {
2188     display: block;
2189     width: 100%;
2190     color: $body-color;
2192 .dropdown-item:active a {
2193     color: $dropdown-link-active-color;
2196 .competency-tree {
2197     ul {
2198         padding-left: 1.5rem;
2199     }
2202 .sr-only-focusable {
2203     &:active,
2204     &:focus {
2205         z-index: $zindex-navbar-fixed + 1;
2206         position: fixed;
2207         background: #fff;
2208         padding: 7px;
2209         left: 0;
2210         top: 0;
2211     }
2214 [data-drag-type="move"] {
2215     cursor: move;
2216     touch-action: none;
2219 .clickable {
2220     cursor: pointer;
2223 .overlay-icon-container {
2224     position: absolute;
2225     top: 0;
2226     left: 0;
2227     width: 100%;
2228     height: 100%;
2229     background-color: rgba(255, 255, 255, 0.6);
2231     .loading-icon {
2232         position: absolute;
2233         top: 50%;
2234         left: 50%;
2235         transform: translate(-50%, -50%);
2237         .icon {
2238             height: 30px;
2239             width: 30px;
2240             font-size: 30px;
2241         }
2242     }
2245 .open.atto_menu > .dropdown-menu {
2246     display: block;
2248 div.editor_atto_toolbar button .icon {
2249     color: $gray-700;
2251 .w-auto {
2252     width: auto;
2255 .bg-pulse-grey {
2256     animation: bg-pulse-grey 2s infinite linear;
2259 @keyframes bg-pulse-grey {
2260     0% {
2261         background-color: $gray-100;
2262     }
2263     50% {
2264         background-color: darken($gray-100, 5%);
2265     }
2266     100% {
2267         background-color: $gray-100;
2268     }
2271 @each $size, $length in $spacers {
2272     .line-height-#{$size} {
2273         line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2274     }
2277 .dir-rtl {
2278     .dir-rtl-hide {
2279         display: none;
2280     }
2283 .dir-ltr {
2284     .dir-ltr-hide {
2285         display: none;
2286     }
2289 .paged-content-page-container {
2290     min-height: 3.125rem;
2293 body.h5p-embed {
2294     #page-content {
2295         display: inherit;
2296     }
2297     #maincontent {
2298         display: none;
2299     }
2300     .h5pmessages {
2301         min-height: 230px; // This should be the same height as default core_h5p iframes.
2302     }
2305 .text-decoration-none {
2306     text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
2309 .colour-inherit {
2310     color: inherit !important; /* stylelint-disable-line declaration-no-important */
2313 .position-right {
2314     right: 0 !important; /* stylelint-disable-line declaration-no-important */
2317 .overflow-hidden {
2318     overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
2321 .text-break {
2322     overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
2325 .z-index-1 {
2326     z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
2329 // These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
2330 .float-left {
2331     float: left !important; /* stylelint-disable-line declaration-no-important */
2333 .float-right {
2334     float: right !important; /* stylelint-disable-line declaration-no-important */
2337 // Emoji picker.
2338 $picker-width: 350px !default;
2339 $picker-width-xs: 320px !default;
2340 $picker-height: 400px !default;
2341 $picker-row-height: 40px !default;
2342 $picker-emoji-button-size: 40px !default;
2343 $picker-emoji-button-font-size: 24px !default;
2344 $picker-emoji-category-count: 9 !default;
2345 $picker-emojis-per-row: 7 !default;
2347 .emoji-picker {
2348     width: $picker-width;
2349     height: $picker-height;
2351     .category-button {
2352         padding: .375rem 0;
2353         height: 100%;
2354         width: $picker-width / $picker-emoji-category-count;
2355         border-top: none;
2356         border-left: none;
2357         border-right: none;
2358         border-bottom: 2px solid transparent;
2360         &.selected {
2361             border-bottom: 2px solid map-get($theme-colors, 'primary');
2362         }
2363     }
2365     .emojis-container,
2366     .search-results-container {
2367         min-width: $picker-emojis-per-row * $picker-emoji-button-size;
2368     }
2370     .picker-row {
2371         height: $picker-row-height;
2373         .category-name {
2374             line-height: $picker-row-height;
2375         }
2377         .emoji-button {
2378             height: $picker-emoji-button-size;
2379             width: $picker-emoji-button-size;
2380             line-height: $picker-emoji-button-size;
2381             font-size: $picker-emoji-button-font-size;
2382             overflow: hidden;
2384             @include hover-focus {
2385                 color: inherit;
2386                 text-decoration: none;
2387             }
2388         }
2389     }
2391     .emoji-preview {
2392         height: $picker-row-height;
2393         font-size: $picker-row-height;
2394         line-height: $picker-row-height;
2395     }
2397     .emoji-short-name {
2398         line-height: $picker-row-height / 2;
2399     }
2401     @include media-breakpoint-down(xs) {
2402         width: $picker-width-xs;
2403     }
2406 .emoji-auto-complete {
2407     height: $picker-row-height;
2409     .btn.btn-link.btn-icon.emoji-button {
2410         height: $picker-emoji-button-size;
2411         width: $picker-emoji-button-size;
2412         line-height: $picker-emoji-button-size;
2413         font-size: $picker-emoji-button-font-size;
2415         &.active {
2416             background-color: $gray-200;
2417         }
2418     }
2421 .toast-wrapper {
2422     max-width: $toast-max-width;
2423     max-height: 0;
2424     // Place these above any modals and other elements.
2425     z-index: 1051;
2427     > :first-child {
2428         margin-top: $spacer;
2429     }