MDL-66463 theme_boost: IE and Edge go to top link compatibility
[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;
1492 .chooserdialogue-course-modchooser .modicon .icon {
1493     width: 24px;
1494     height: 24px;
1495     font-size: 24px;
1498 @include media-breakpoint-down(xs) {
1499     .jsenabled .choosercontainer #chooseform .alloptions {
1500         max-width: 100%;
1501     }
1503     .jsenabled .choosercontainer #chooseform .instruction,
1504     .jsenabled .choosercontainer #chooseform .typesummary {
1505         position: static;
1506     }
1509 /* Form element: listing */
1510 .formlistingradio {
1511     padding-bottom: 25px;
1512     padding-right: 10px;
1515 .formlistinginputradio {
1516     float: left;
1519 .formlistingmain {
1520     min-height: 225px;
1523 .formlisting {
1524     position: relative;
1525     margin: 15px 0;
1526     padding: 1px 19px 14px;
1527     background-color: white;
1528     border: 1px solid #ddd;
1530     @include border-radius(4px);
1533 .formlistingmore {
1534     position: absolute;
1535     cursor: pointer;
1536     bottom: -1px;
1537     right: -1px;
1538     padding: 3px 7px;
1539     font-size: 12px;
1540     font-weight: bold;
1541     background-color: whitesmoke;
1542     border: 1px solid #ddd;
1543     color: #9da0a4;
1545     @include border-radius(4px 0 4px 0);
1548 .formlistingall {
1549     margin: 15px 0;
1550     padding: 0;
1552     @include border-radius(4px);
1555 .formlistingrow {
1556     cursor: pointer;
1557     border-bottom: 1px solid;
1558     border-color: #e1e1e8;
1559     border-left: 1px solid #e1e1e8;
1560     border-right: 1px solid #e1e1e8;
1561     background-color: #f7f7f9;
1563     @include border-radius(0 0 4px 4px);
1564     padding: 6px;
1565     top: 50%;
1566     left: 50%;
1567     min-height: 34px;
1568     float: left;
1569     width: 150px;
1572 body.jsenabled .formlistingradio {
1573     display: none;
1576 body.jsenabled .formlisting {
1577     display: block;
1580 a.criteria-action {
1581     padding: 0 3px;
1582     float: right;
1585 div.criteria-description {
1586     padding: 10px 15px;
1587     margin: 5px 0;
1588     background: none repeat scroll 0 0 #f9f9f9;
1589     border: 1px solid #eee;
1592 ul.badges {
1593     margin: 0;
1594     list-style: none;
1597 .badges li {
1598     position: relative;
1599     display: inline-block;
1600     padding-top: 1em;
1601     text-align: center;
1602     vertical-align: top;
1603     width: 150px;
1606 .badges li .badge-name {
1607     display: block;
1608     padding: 5px;
1611 .badges li > img {
1612     position: absolute;
1615 .badges li .badge-image {
1616     width: 100px;
1617     height: 100px;
1618     left: 10px;
1619     top: 0;
1620     z-index: 1;
1623 .badges li .badge-actions {
1624     position: relative;
1627 .badges li .expireimage {
1628     width: 100px;
1629     height: 100px;
1630     left: 25px;
1631     top: 0;
1632     position: absolute;
1633     z-index: 10;
1634     opacity: 0.85;
1637 #badge-image {
1638     background-color: transparent;
1639     padding: 0;
1640     position: relative;
1641     min-width: 100px;
1642     width: 20%;
1643     display: inline-block;
1644     vertical-align: top;
1645     margin-top: 17px;
1646     margin-bottom: 20px;
1648     .expireimage {
1649         width: 100px;
1650         height: 100px;
1651         left: 0;
1652         top: 0;
1653         opacity: 0.85;
1654         position: absolute;
1655         z-index: 10;
1656     }
1658     .singlebutton {
1659         padding-top: 5px;
1660         display: block;
1662         button {
1663             margin-left: 4px;
1664         }
1665     }
1668 #badge-details {
1669     display: inline-block;
1670     width: 79%;
1673 #badge-overview dl,
1674 #badge-details dl {
1675     margin: 0;
1677     dt,
1678     dd {
1679         vertical-align: top;
1680         padding: 3px 0;
1681     }
1683     dt {
1684         clear: both;
1685         display: inline-block;
1686         width: 20%;
1687         min-width: 100px;
1688     }
1690     dd {
1691         display: inline-block;
1692         width: 79%;
1693         margin-left: 1%;
1694     }
1697 .badge-profile {
1698     vertical-align: top;
1701 .connected {
1702     color: map-get($theme-colors, 'success');
1705 .notconnected {
1706     color: map-get($theme-colors, 'danger');
1709 .connecting {
1710     color: map-get($theme-colors, 'warning');
1713 #page-badges-award .recipienttable tr td {
1714     vertical-align: top;
1717 #page-badges-award .recipienttable tr td.actions .actionbutton {
1718     margin: 0.3em 0;
1719     padding: 0.5em 0;
1720     width: 100%;
1723 #page-badges-award .recipienttable tr td.existing,
1724 #page-badges-award .recipienttable tr td.potential {
1725     width: 42%;
1728 #issued-badge-table .activatebadge {
1729     display: inline-block;
1732 .statusbox.active {
1733     background-color: $state-success-bg;
1736 .statusbox.inactive {
1737     background-color: $state-warning-bg;
1740 .statusbox {
1741     text-align: center;
1742     margin-bottom: 5px;
1743     padding: 5px;
1746 .statusbox .activatebadge {
1747     display: inline-block;
1750 .statusbox .activatebadge input[type=submit] {
1751     margin: 3px;
1754 .activatebadge {
1755     margin: 0;
1756     text-align: left;
1757     vertical-align: middle;
1760 img#persona_signin {
1761     cursor: pointer;
1764 .addcourse {
1765     float: right;
1768 .invisiblefieldset {
1769     display: inline;
1770     padding: 0;
1771     border-width: 0;
1774 /** Page header */
1775 #page-header {
1776     .logo {
1777         margin: $spacer 0;
1778         img {
1779             max-height: 75px;
1780         }
1781     }
1784 /** Navbar logo. */
1785 nav.navbar .logo img {
1786     max-height: 35px;
1789 /** Header-bar styles **/
1790 .page-context-header {
1791     // We need to be explicit about the height of the header.
1792     $pageHeaderHeight: 140px;
1794     // Do not remove these rules.
1795     overflow: hidden;
1797     .page-header-image,
1798     .page-header-headings {
1799         float: left;
1800         display: block;
1801         position: relative;
1802     }
1804     .page-header-image {
1805         margin-right: 1em;
1806         margin-bottom: 1em;
1807     }
1809     .page-header-headings,
1810     .header-button-group {
1811         position: relative;
1812         line-height: 24px;
1813         vertical-align: middle;
1814     }
1816     .header-button-group {
1817         display: block;
1818         float: left;
1820         a {
1821             position: relative;
1823             // Don't touch it unless you know exactly what you are doing.
1824             top: -0.4em;
1825         }
1826     }
1829 ul.dragdrop-keyboard-drag li {
1830     list-style-type: none;
1833 a.disabled:hover,
1834 a.disabled {
1835     text-decoration: none;
1836     cursor: default;
1837     font-style: italic;
1838     color: #808080;
1841 body.lockscroll {
1842     height: 100%;
1843     overflow: hidden;
1846 .progressbar_container {
1847     max-width: 500px;
1848     margin: 0 auto;
1851 /* IE10 only fix for calendar titling */
1852 .ie10 .yui3-calendar-header-label {
1853     display: inline-block;
1856 dd:before,
1857 dd:after {
1858     display: block;
1859     content: " ";
1862 dd:after {
1863     clear: both;
1866 // Active tabs with links should have a different
1867 // cursor to indicate they are clickable.
1868 .nav-tabs > .active > a[href],
1869 .nav-tabs > .active > a[href]:hover,
1870 .nav-tabs > .active > a[href]:focus {
1871     cursor: pointer;
1874 .inplaceeditable {
1875     &.inplaceeditingon {
1876         position: relative;
1878         .editinstructions {
1879             margin-top: -30px;
1880             font-weight: normal;
1881             margin-right: 0;
1882             margin-left: 0;
1883             left: 0;
1884             right: auto;
1885             white-space: nowrap;
1886         }
1888         input {
1889             width: 330px;
1890             vertical-align: text-bottom;
1891             margin-bottom: 0;
1892         }
1894         select {
1895             margin-bottom: 0;
1896         }
1897     }
1899     .quickediticon img {
1900         opacity: 0.2;
1901     }
1903     .quickeditlink {
1904         color: inherit;
1905         text-decoration: inherit;
1906     }
1908     &:hover .quickeditlink .quickediticon img,
1909     .quickeditlink:focus .quickediticon img {
1910         opacity: 1;
1911     }
1913     &.inplaceeditable-toggle .quickediticon {
1914         display: none;
1915     }
1917     &.inplaceeditable-autocomplete {
1918         display: block;
1919     }
1922 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
1923     margin-top: -20px;
1926 /** Chart area. */
1927 .chart-area {
1929     .chart-table-data {
1930         display: none;
1931     }
1933     .chart-table {
1934         .chart-output-htmltable caption {
1935             white-space: nowrap;
1936         }
1937         /** When accessible, we display the table only. */
1938         &.accesshide {
1939             .chart-table-expand {
1940                 display: none;
1941             }
1942             .chart-table-data {
1943                 display: block;
1944             }
1945         }
1946     }
1949 // Reset for ul.
1950 ul {
1951     padding-left: 1rem;
1954 /* YUI 2 Tree View */
1955 /*rtl:raw:
1956 .ygtvtn,
1957 .ygtvtm,
1958 .ygtvtmh,
1959 .ygtvtmhh,
1960 .ygtvtp,
1961 .ygtvtph,
1962 .ygtvtphh,
1963 .ygtvln,
1964 .ygtvlm,
1965 .ygtvlmh,
1966 .ygtvlmhh,
1967 .ygtvlp,
1968 .ygtvlph,
1969 .ygtvlphh,
1970 .ygtvdepthcell,
1971 .ygtvok,
1972 .ygtvok:hover,
1973 .ygtvcancel,
1974 .ygtvcancel:hover {
1975     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
1977 */
1979 .hover-tooltip-container {
1980     position: relative;
1982     .hover-tooltip {
1983         opacity: 0;
1984         visibility: hidden;
1985         position: absolute;
1986         /*rtl:ignore*/
1987         left: 50%;
1988         top: calc(-50% - 5px);
1989         transform: translate(-50%, -50%);
1990         background-color: #fff;
1991         border: 1px solid rgba(0, 0, 0, .2);
1992         border-radius: .3rem;
1993         box-sizing: border-box;
1994         padding: 5px;
1995         white-space: nowrap;
1996         transition: opacity 0.15s, visibility 0.15s;
1997         z-index: 1000;
1999         &:before {
2000             content: '';
2001             display: inline-block;
2002             border-left: 8px solid transparent;
2003             border-right: 8px solid transparent;
2004             border-top: 8px solid rgba(0, 0, 0, .2);
2005             position: absolute;
2006             bottom: -8px;
2007             left: calc(50% - 8px);
2008         }
2010         &:after {
2011             content: '';
2012             display: inline-block;
2013             border-left: 7px solid transparent;
2014             border-right: 7px solid transparent;
2015             border-top: 7px solid #fff;
2016             position: absolute;
2017             bottom: -6px;
2018             left: calc(50% - 7px);
2019             z-index: 2;
2020         }
2021     }
2023     &:hover {
2024         .hover-tooltip {
2025             opacity: 1;
2026             visibility: visible;
2027             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2028         }
2029     }
2032 #region-flat-nav {
2033     padding-right: 0;
2034     padding-left: 0;
2035     .nav {
2036         margin-right: $grid-gutter-width / 2;
2037         background-color: $card-bg;
2038     }
2039     @include media-breakpoint-down(sm) {
2040         .nav {
2041             margin-top: $grid-gutter-width;
2042             margin-right: 0;
2043         }
2044     }
2047 // Footer link colour was added to allow the colour of footer links to be changed,
2048 // but really in bootstrap we want the colour of links on .bg-inverse to be changed
2049 // rather than being specific to the footer. This is kept for backwards compatibility.
2050 $footer-link-color: $bg-inverse-link-color !default;
2051 #page-footer a {
2052     color: $footer-link-color;
2053     text-decoration: underline;
2054     .icon {
2055         color: $footer-link-color;
2056     }
2059 .bg-inverse a {
2060     color: $bg-inverse-link-color;
2061     text-decoration: underline;
2062     .icon {
2063         color: $bg-inverse-link-color;
2064     }
2067 .sitelink {
2068     img {
2069         width: 112px;
2070     }
2073 // Make links in a menu clickable anywhere in the row.
2074 .dropdown-item a {
2075     display: block;
2076     width: 100%;
2077     color: $body-color;
2079 .dropdown-item:active a {
2080     color: $dropdown-link-active-color;
2083 .competency-tree {
2084     ul {
2085         padding-left: 1.5rem;
2086     }
2089 .sr-only-focusable {
2090     &:active,
2091     &:focus {
2092         z-index: $zindex-navbar-fixed + 1;
2093         position: fixed;
2094         background: #fff;
2095         padding: 7px;
2096         left: 0;
2097         top: 0;
2098     }
2101 [data-drag-type="move"] {
2102     cursor: move;
2103     touch-action: none;
2106 .clickable {
2107     cursor: pointer;
2110 .overlay-icon-container {
2111     position: absolute;
2112     top: 0;
2113     left: 0;
2114     width: 100%;
2115     height: 100%;
2116     background-color: rgba(255, 255, 255, 0.6);
2118     .loading-icon {
2119         position: absolute;
2120         top: 50%;
2121         left: 50%;
2122         transform: translate(-50%, -50%);
2124         .icon {
2125             height: 30px;
2126             width: 30px;
2127             font-size: 30px;
2128         }
2129     }
2132 .open.atto_menu > .dropdown-menu {
2133     display: block;
2135 div.editor_atto_toolbar button .icon {
2136     color: $gray-700;
2138 .w-auto {
2139     width: auto;
2142 .bg-pulse-grey {
2143     animation: bg-pulse-grey 2s infinite linear;
2146 @keyframes bg-pulse-grey {
2147     0% {
2148         background-color: $gray-100;
2149     }
2150     50% {
2151         background-color: darken($gray-100, 5%);
2152     }
2153     100% {
2154         background-color: $gray-100;
2155     }
2158 @each $size, $length in $spacers {
2159     .line-height-#{$size} {
2160         line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2161     }
2164 .dir-rtl {
2165     .dir-rtl-hide {
2166         display: none;
2167     }
2170 .dir-ltr {
2171     .dir-ltr-hide {
2172         display: none;
2173     }
2176 .paged-content-page-container {
2177     min-height: 3.125rem;
2180 body.h5p-embed {
2181     #page-content {
2182         display: inherit;
2183     }
2184     #maincontent {
2185         display: none;
2186     }
2187     .h5pmessages {
2188         min-height: 230px; // This should be the same height as default core_h5p iframes.
2189     }
2192 .text-decoration-none {
2193     text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
2196 .colour-inherit {
2197     color: inherit !important; /* stylelint-disable-line declaration-no-important */
2200 .position-right {
2201     right: 0 !important; /* stylelint-disable-line declaration-no-important */
2204 .overflow-hidden {
2205     overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
2208 .text-break {
2209     overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
2212 .z-index-1 {
2213     z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
2216 // These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
2217 .float-left {
2218     float: left !important; /* stylelint-disable-line declaration-no-important */
2220 .float-right {
2221     float: right !important; /* stylelint-disable-line declaration-no-important */
2224 // Emoji picker.
2225 $picker-width: 350px !default;
2226 $picker-width-xs: 320px !default;
2227 $picker-height: 400px !default;
2228 $picker-row-height: 40px !default;
2229 $picker-emoji-button-size: 40px !default;
2230 $picker-emoji-button-font-size: 24px !default;
2231 $picker-emoji-category-count: 9 !default;
2232 $picker-emojis-per-row: 7 !default;
2234 .emoji-picker {
2235     width: $picker-width;
2236     height: $picker-height;
2238     .category-button {
2239         padding: .375rem 0;
2240         height: 100%;
2241         width: $picker-width / $picker-emoji-category-count;
2242         border-top: none;
2243         border-left: none;
2244         border-right: none;
2245         border-bottom: 2px solid transparent;
2247         &.selected {
2248             border-bottom: 2px solid map-get($theme-colors, 'primary');
2249         }
2250     }
2252     .emojis-container,
2253     .search-results-container {
2254         min-width: $picker-emojis-per-row * $picker-emoji-button-size;
2255     }
2257     .picker-row {
2258         height: $picker-row-height;
2260         .category-name {
2261             line-height: $picker-row-height;
2262         }
2264         .emoji-button {
2265             height: $picker-emoji-button-size;
2266             width: $picker-emoji-button-size;
2267             line-height: $picker-emoji-button-size;
2268             font-size: $picker-emoji-button-font-size;
2269             overflow: hidden;
2271             @include hover-focus {
2272                 color: inherit;
2273                 text-decoration: none;
2274             }
2275         }
2276     }
2278     .emoji-preview {
2279         height: $picker-row-height;
2280         font-size: $picker-row-height;
2281         line-height: $picker-row-height;
2282     }
2284     .emoji-short-name {
2285         line-height: $picker-row-height / 2;
2286     }
2288     @include media-breakpoint-down(xs) {
2289         width: $picker-width-xs;
2290     }
2293 .emoji-auto-complete {
2294     height: $picker-row-height;
2296     .btn.btn-link.btn-icon.emoji-button {
2297         height: $picker-emoji-button-size;
2298         width: $picker-emoji-button-size;
2299         line-height: $picker-emoji-button-size;
2300         font-size: $picker-emoji-button-font-size;
2302         &.active {
2303             background-color: $gray-200;
2304         }
2305     }
2308 .toast-wrapper {
2309     max-width: $toast-max-width;
2310     max-height: 0;
2311     // Place these above any modals and other elements.
2312     z-index: 1051;