555205fe35c45115870fdfb5da5946253a616a2b
[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     bottom: $gototop-bottom-position;
42     a {
43         position: absolute;
44         right: 0;
45         transform: translateY(-100%);
46     }
47 }
49 body.scrolled #goto-top-link {
50     opacity: 1;
51     visibility: visible;
52     transition: visibility 0s ease 0s, opacity .7s ease .1s;
53 }
55 .context-header-settings-menu .dropdown-toggle > .icon,
56 #region-main-settings-menu .dropdown-toggle > .icon {
57     height: 24px;
58     font-size: 24px;
59     width: auto;
60 }
61 /** Prevent user notifications overlapping with region main settings menu */
62 #user-notifications {
63     display: block;
64     overflow: hidden;
65 }
67 /** Page layout CSS starts **/
68 .layout-option-noheader #page-header,
69 .layout-option-nonavbar #page-navbar,
70 .layout-option-nofooter #page-footer,
71 .layout-option-nocourseheader .course-content-header,
72 .layout-option-nocoursefooter .course-content-footer {
73     display: none;
74 }
76 /** Page layout CSS ends **/
78 .mdl-left {
79     text-align: left;
80 }
82 .mdl-right {
83     text-align: right;
84 }
86 /*rtl:ignore*/
87 .text-ltr {
88     direction: ltr !important; /* stylelint-disable-line declaration-no-important */
89 }
91 #add,
92 #remove,
93 .centerpara,
94 .mdl-align {
95     text-align: center;
96 }
98 a.dimmed,
99 a.dimmed:link,
100 a.dimmed:visited,
101 a.dimmed_text,
102 a.dimmed_text:link,
103 a.dimmed_text:visited,
104 .dimmed_text,
105 .dimmed_text a,
106 .dimmed_text a:link,
107 .dimmed_text a:visited,
108 .usersuspended,
109 .usersuspended a,
110 .usersuspended a:link,
111 .usersuspended a:visited,
112 .dimmed_category,
113 .dimmed_category a {
114     color: $text-muted;
117 .unlist,
118 .unlist li,
119 .inline-list,
120 .inline-list li,
121 .block .list,
122 .block .list li,
123 .section li.activity,
124 .section li.movehere,
125 .tabtree li {
126     list-style: none;
127     margin: 0;
128     padding: 0;
131 .inline,
132 .inline-list li {
133     display: inline;
136 .notifytiny {
137     font-size: $font-size-xs;
140 .notifytiny li,
141 .notifytiny td {
142     font-size: 100%;
145 .red,
146 .notifyproblem {
147     color: map-get($theme-colors, 'warning');
150 .green,
151 .notifysuccess {
152     color: map-get($theme-colors, 'success');
155 .highlight {
156     color: map-get($theme-colors, 'info');
159 .fitem.advanced .text-info {
160     font-weight: bold;
163 .reportlink {
164     text-align: right;
167 a.autolink.glossary:hover {
168     cursor: help;
170 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
171 .collapsibleregioncaption {
172     white-space: nowrap;
173     min-height: $line-height-base * $font-size-base;
176 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
177     cursor: pointer;
180 .pagelayout-mydashboard #region-main {
181     border: 0;
182     padding: 0;
183     background-color: transparent;
184     margin-top: -1px;
187 .collapsibleregioncaption img {
188     vertical-align: middle;
191 .jsenabled .hiddenifjs {
192     display: none;
195 .visibleifjs {
196     display: none;
199 .jsenabled .visibleifjs {
200     display: inline;
203 .jsenabled .collapsibleregion {
204     overflow: hidden;
205     box-sizing: content-box;
208 .jsenabled .collapsed .collapsibleregioninner {
209     visibility: hidden;
212 .collapsible-actions {
213     display: none;
214     text-align: right;
217 .jsenabled .collapsible-actions {
218     display: block;
221 .collapsible-actions .collapseexpand {
222     padding-left: 20px;
223     background: url([[pix:t/collapsed]]) 2px center no-repeat;
225 /*rtl:raw:
226 .collapsible-actions .collapseexpand {
227     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
229 */
230 .collapsible-actions .collapse-all {
231     background-image: url([[pix:t/expanded]]);
234 .yui-overlay .yui-widget-bd {
235     background-color: #ffee69;
236     border: 1px solid #a6982b;
237     border-top-color: #d4c237;
238     color: #000;
239     left: 0;
240     padding: 2px 5px;
241     position: relative;
242     top: 0;
243     z-index: 1;
246 .clearer {
247     background: transparent;
248     border-width: 0;
249     clear: both;
250     display: block;
251     height: 1px;
252     margin: 0;
253     padding: 0;
256 .bold,
257 .warning,
258 .errorbox .title,
259 .pagingbar .title,
260 .pagingbar .thispage {
261     font-weight: bold;
264 img.userpicture {
265     margin-right: 0.5rem;
268 img.resize {
269     height: 1em;
270     width: 1em;
273 .action-menu .dropdown-toggle {
274     text-decoration: none;
277 .action-menu {
278     white-space: nowrap;
281 .block img.resize {
282     height: 0.9em;
283     width: 0.8em;
285 /* Icon styles */
286 img.activityicon {
287     height: 24px;
288     width: 24px;
289     vertical-align: middle;
292 .headermain {
293     font-weight: bold;
296 #maincontent {
297     display: block;
298     height: 1px;
299     overflow: hidden;
302 img.uihint {
303     cursor: help;
306 #addmembersform table {
307     margin-left: auto;
308     margin-right: auto;
311 table.flexible .emptyrow {
312     display: none;
315 form.popupform,
316 form.popupform div {
317     display: inline;
320 .arrow_button input {
321     overflow: hidden;
323 .no-overflow {
324     overflow: auto;
327 // Minimum height required for a menu in a table inside a scrollable div.
328 // Position required for table sizing inside a flex container.
329 .no-overflow > .generaltable {
330     position: relative;
331     margin-bottom: 0;
332     min-height: 10em;
334 // Accessibility features
336 // Accessibility: text 'seen' by screen readers but not visual users.
337 .accesshide {
338     @include sr-only();
341 span.hide,
342 div.hide,
343 .hidden {
344     display: none;
346 // Accessibility: Skip block link, for keyboard-only users.
347 a.skip-block,
348 a.skip {
349     position: absolute;
350     top: -1000em;
351     font-size: 0.85em;
352     text-decoration: none;
355 a.skip-block:focus,
356 a.skip-block:active,
357 a.skip:focus,
358 a.skip:active {
359     position: static;
360     display: block;
363 .skip-block-to {
364     display: block;
365     height: 1px;
366     overflow: hidden;
368 // Blogs
369 .addbloglink {
370     text-align: center;
373 .blog_entry .audience {
374     text-align: right;
375     padding-right: 4px;
378 .blog_entry .tags {
379     margin-top: 15px;
382 .blog_entry .content {
383     margin-left: 43px;
385 // Group
387 #doc-contents h1 {
388     margin: 1em 0 0 0;
391 #doc-contents ul {
392     margin: 0;
393     padding: 0;
394     width: 90%;
397 #doc-contents ul li {
398     list-style-type: none;
401 .groupmanagementtable td {
402     vertical-align: top;
405 .groupmanagementtable #existingcell,
406 .groupmanagementtable #potentialcell {
407     width: 42%;
410 .groupmanagementtable #buttonscell {
411     width: 16%;
414 .groupmanagementtable #buttonscell p.arrow_button input {
415     width: auto;
416     min-width: 80%;
417     margin: 0 auto;
418     display: block;
421 .groupmanagementtable #removeselect_wrapper,
422 .groupmanagementtable #addselect_wrapper {
423     width: 100%;
426 .groupmanagementtable #removeselect_wrapper label,
427 .groupmanagementtable #addselect_wrapper label {
428     font-weight: normal;
431 #group-usersummary {
432     width: 14em;
435 .groupselector {
436     margin-top: 3px;
437     margin-bottom: 3px;
438     display: inline-block;
441 .groupselector label {
442     display: inline-block;
445 // Login
446 .login-page {
447     [name="username"] {
448         margin-bottom: -1px;
449         border-bottom-right-radius: 0;
450         border-bottom-left-radius: 0;
451     }
453     [type="password"] {
454         margin-bottom: 10px;
455         border-top-left-radius: 0;
456         border-top-right-radius: 0;
457     }
460 // Notes
461 .notepost {
462     margin-bottom: 1em;
465 .notepost .userpicture {
466     float: left;
467     margin-right: 5px;
470 .notepost .content,
471 .notepost .footer {
472     clear: both;
475 .notesgroup {
476     margin-left: 20px;
479 // My Moodle
480 .path-my .coursebox {
481     margin: $spacer-y 0;
482     padding: 0;
484     .overview {
485         margin: 15px 30px 10px 30px;
486     }
489 .path-my .coursebox .info {
490     float: none;
491     margin: 0;
494 // Modules
495 .mod_introbox {
496     padding: 10px;
499 table.mod_index {
500     width: 100%;
503 // Comments
504 .comment-ctrl {
505     font-size: 12px;
506     display: none;
507     margin: 0;
508     padding: 0;
511 .comment-ctrl h5 {
512     margin: 0;
513     padding: 5px;
516 .comment-area {
517     max-width: 400px;
518     padding: 5px;
521 .comment-area textarea {
522     width: 100%;
523     overflow: auto;
525     &.fullwidth {
526         -webkit-box-sizing: border-box;
527         -moz-box-sizing: border-box;
528         box-sizing: border-box;
529     }
532 .comment-area .fd {
533     text-align: right;
536 .comment-meta span {
537     color: gray;
540 .comment-link img {
541     vertical-align: text-bottom;
544 .comment-list {
545     font-size: 11px;
546     overflow: auto;
547     list-style: none;
548     padding: 0;
549     margin: 0;
552 .comment-list li {
553     margin: 2px;
554     list-style: none;
555     margin-bottom: 5px;
556     clear: both;
557     padding: .3em;
558     position: relative;
561 .comment-list li.first {
562     display: none;
565 .comment-paging {
566     text-align: center;
569 .comment-paging .pageno {
570     padding: 2px;
573 .comment-paging .curpage {
574     border: 1px solid #ccc;
577 .comment-message .picture {
578     width: 20px;
579     float: left;
582 .comment-message .text {
583     margin: 0;
584     padding: 0;
587 .comment-message .text p {
588     padding: 0;
589     margin: 0 18px 0 0;
592 .comment-delete {
593     position: absolute;
594     top: 0;
595     right: 0;
596     margin: .3em;
599 .comment-report-selectall {
600     display: none;
603 .comment-link {
604     display: none;
607 .jsenabled .comment-link {
608     display: block;
611 .jsenabled .showcommentsnonjs {
612     display: none;
615 .jsenabled .comment-report-selectall {
616     display: inline;
618 /**
619 * Completion progress report
620 */
621 .completion-expired {
622     color: map-get($theme-colors, 'warning');
625 .completion-expected {
626     font-size: $font-size-xs;
629 .completion-sortchoice,
630 .completion-identifyfield {
631     font-size: $font-size-xs;
632     vertical-align: bottom;
635 .completion-progresscell {
636     text-align: right;
639 .completion-expired .completion-expected {
640     font-weight: bold;
642 /**
643 * Tags
644 */
645 img.user-image {
646     height: 100px;
647     width: 100px;
650 #tag-search-box {
651     text-align: center;
652     margin: 10px auto;
655 .path-tag .tag-index-items .tagarea {
656     border: 1px solid #e3e3e3;
657     border-radius: 4px;
658     padding: 10px;
659     margin-top: 10px;
662 .path-tag .tag-index-items .tagarea h3 {
663     display: block;
664     padding: 3px 0 10px 0;
665     margin: 0;
666     font-size: 1.1em;
667     font-weight: bold;
668     line-height: 20px;
669     color: #999;
670     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
671     text-transform: uppercase;
672     word-wrap: break-word;
673     border-bottom: solid 1px #e3e3e3;
674     margin-bottom: 10px;
677 .path-tag .tagarea .controls,
678 .path-tag .tagarea .taggeditems {
679     @include clearfix();
682 .path-tag .tagarea .controls,
683 .path-tag .tag-backtoallitems {
684     text-align: center;
687 .path-tag .tagarea .controls .gotopage.nextpage {
688     float: right;
691 .path-tag .tagarea .controls .gotopage.prevpage {
692     float: left;
695 .path-tag .tagarea .controls .exclusivemode {
696     display: inline-block;
699 .path-tag .tagarea .controls.controls-bottom {
700     margin-top: 5px;
703 .path-tag .tagarea .controls .gotopage.nextpage::after {
704     padding-right: 5px;
705     padding-left: 5px;
706     content: "»";
709 .path-tag .tagarea .controls .gotopage.prevpage::before {
710     padding-right: 5px;
711     padding-left: 5px;
712     content: "«";
715 span.flagged-tag,
716 tr.flagged-tag,
717 span.flagged-tag a,
718 tr.flagged-tag a {
719     color: map-get($theme-colors, 'warning');
722 .tag-management-table td,
723 .tag-management-table th {
724     vertical-align: middle;
725     padding: 4px;
728 .tag-management-table .inplaceeditable.inplaceeditingon input {
729     width: 150px;
732 .path-admin-tag .addstandardtags {
733     float: right;
735     img {
736         margin: 0 5px;
737     }
740 .path-tag .tag-relatedtags {
741     padding-top: 10px;
744 .path-tag .tag-management-box {
745     text-align: right;
748 .path-tag .tag-index-toc {
749     padding: 10px;
750     text-align: center;
753 .path-tag .tag-index-toc li,
754 .path-tag .tag-management-box li {
755     margin-left: 5px;
756     margin-right: 5px;
759 .path-tag .tag-management-box li a.edittag {
760     background-image: url([[pix:moodle|i/settings]]);
763 .path-tag .tag-management-box li a.flagasinappropriate {
764     background-image: url([[pix:moodle|i/flagged]]);
767 .path-tag .tag-management-box li a.removefrommyinterests {
768     background-image: url([[pix:moodle|t/delete]]);
771 .path-tag .tag-management-box li a.addtomyinterests {
772     background-image: url([[pix:moodle|t/add]]);
775 .path-tag .tag-management-box li a {
776     background-repeat: no-repeat;
777     background-position: left;
778     padding-left: 17px;
781 .tag_feed.media-list .media .itemimage {
782     float: left;
785 .tag_feed.media-list .media .itemimage img {
786     height: 35px;
787     width: 35px;
790 .tag_feed.media-list .media .media-body {
791     padding-right: 10px;
792     padding-left: 10px;
795 .tag_feed .media .muted a {
796     color: $text-muted;
799 .tag_cloud {
800     text-align: center;
803 .tag_cloud .inline-list li {
804     padding: 0 0.2em;
807 .tag_cloud .tag_overflow {
808     margin-top: 1em;
809     font-style: italic;
812 .tag_cloud .s20 {
813     font-size: 2.7em;
816 .tag_cloud .s19 {
817     font-size: 2.6em;
820 .tag_cloud .s18 {
821     font-size: 2.5em;
824 .tag_cloud .s17 {
825     font-size: 2.4em;
828 .tag_cloud .s16 {
829     font-size: 2.3em;
832 .tag_cloud .s15 {
833     font-size: 2.2em;
836 .tag_cloud .s14 {
837     font-size: 2.1em;
840 .tag_cloud .s13 {
841     font-size: 2em;
844 .tag_cloud .s12 {
845     font-size: 1.9em;
848 .tag_cloud .s11 {
849     font-size: 1.8em;
852 .tag_cloud .s10 {
853     font-size: 1.7em;
856 .tag_cloud .s9 {
857     font-size: 1.6em;
860 .tag_cloud .s8 {
861     font-size: 1.5em;
864 .tag_cloud .s7 {
865     font-size: 1.4em;
868 .tag_cloud .s6 {
869     font-size: 1.3em;
872 .tag_cloud .s5 {
873     font-size: 1.2em;
876 .tag_cloud .s4 {
877     font-size: 1.1em;
880 .tag_cloud .s3 {
881     font-size: 1em;
884 .tag_cloud .s2 {
885     font-size: 0.9em;
888 .tag_cloud .s1 {
889     font-size: 0.8em;
892 .tag_cloud .s0 {
893     font-size: 0.7em;
896 .tag_list ul {
897     display: inline;
900 .tag_list.hideoverlimit .overlimit {
901     display: none;
904 .tag_list .tagmorelink {
905     display: none;
908 .tag_list.hideoverlimit .tagmorelink {
909     display: inline;
912 .tag_list.hideoverlimit .taglesslink {
913     display: none;
916 /**
917 * Web Service
918 */
919 #webservice-doc-generator td {
920     text-align: left;
921     border: 0 solid black;
924 /**
925 * Enrol
926 */
927 .userenrolment {
928     width: 100%;
929     border-collapse: collapse;
932 .userenrolment tr {
933     vertical-align: top;
936 .userenrolment td {
937     padding: 0;
938     height: 41px;
941 .userenrolment .subfield {
942     margin-right: 5px;
945 .userenrolment .col_userdetails .subfield {
946     margin-left: 40px;
949 .userenrolment .col_userdetails .subfield_picture {
950     float: left;
951     margin-left: 0;
954 .userenrolment .col_lastseen {
955     width: 150px;
958 .userenrolment .col_role {
959     width: 262px;
962 .userenrolment .col_role .roles,
963 .userenrolment .col_group .groups {
964     margin-right: 30px;
967 .userenrolment .col_role .role {
968     float: left;
969     padding: 0 3px 3px;
970     margin: 0 3px 3px;
971     white-space: nowrap;
974 .userenrolment .col_group .group {
975     float: left;
976     padding: 3px;
977     margin: 3px;
978     white-space: nowrap;
981 .userenrolment .col_role .role a,
982 .userenrolment .col_group .group a {
983     margin-left: 3px;
984     cursor: pointer;
987 .userenrolment .col_role .addrole,
988 .userenrolment .col_group .addgroup {
989     float: right;
990     padding: 3px;
991     margin: 3px;
993     > a:hover {
994         border-bottom: 1px solid #666;
995     }
998 .userenrolment .col_role .addrole img,
999 .userenrolment .col_group .addgroup img {
1000     vertical-align: baseline;
1003 .userenrolment .hasAllRoles .col_role .addrole {
1004     display: none;
1007 .userenrolment .col_enrol .enrolment {
1008     float: left;
1009     padding: 0 3px 3px;
1010     margin: 0 3px 3px;
1013 .userenrolment .col_enrol .enrolment a {
1014     float: right;
1015     margin-left: 3px;
1018 .corelightbox {
1019     background-color: #ccc;
1020     position: absolute;
1021     top: 0;
1022     left: 0;
1023     width: 100%;
1024     height: 100%;
1025     text-align: center;
1028 .corelightbox img {
1029     position: fixed;
1030     top: 50%;
1031     left: 50%;
1034 .mod-indent-outer {
1035     display: table;
1038 .mod-indent {
1039     display: table-cell;
1042 .label .mod-indent {
1043     float: left;
1044     padding-top: 20px;
1046 $mod-indent-size: 30px;
1047 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1049 @for $i from 1 through 16 {
1050     $width: ($i * $mod-indent-size);
1052     .mod-indent-#{$i} {
1053         width: $width;
1054     }
1057 .mod-indent-huge {
1058     width: (16 * $mod-indent-size);
1061 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1062 .resourcecontent .mediaplugin_mp3 object {
1063     height: 25px;
1064     width: 600px;
1067 .resourcecontent audio.mediaplugin_html5audio {
1068     width: 600px;
1070 /** Large resource images should avoid hidden overflow **/
1071 .resourceimage {
1072     max-width: 100%;
1074 /* Audio player size in 'inline' mode (can only change width, as above) */
1075 .mediaplugin_mp3 object {
1076     height: 15px;
1077     width: 300px;
1080 audio.mediaplugin_html5audio {
1081     width: 300px;
1083 /* TinyMCE moodle media preview frame should not have padding */
1084 .core_media_preview.pagelayout-embedded #content {
1085     padding: 0;
1088 .core_media_preview.pagelayout-embedded #maincontent {
1089     height: 0;
1092 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1093     padding: 0;
1094     margin: 0;
1095     min-width: 0;
1096     background: none;
1099 .path-rating .ratingtable {
1100     width: 100%;
1101     margin-bottom: 1em;
1104 .path-rating .ratingtable th.rating {
1105     width: 100%;
1108 .path-rating .ratingtable td.rating,
1109 .path-rating .ratingtable td.time {
1110     white-space: nowrap;
1111     text-align: center;
1114 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1115 .moodle-dialogue-base .moodle-dialogue-lightbox {
1116     background-color: $gray;
1119 // Prevent adding backdrops to popups in popups.
1120 .pagelayout-popup {
1121     .moodle-dialogue-base {
1122         .moodle-dialogue-lightbox {
1123             background-color: transparent;
1124         }
1125         .moodle-dialogue {
1126             box-shadow: $popover-box-shadow;
1127         }
1128     }
1131 .moodle-dialogue-base .hidden,
1132 .moodle-dialogue-base .moodle-dialogue-hidden {
1133     display: none;
1136 .no-scrolling {
1137     overflow: hidden;
1140 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1141     left: 0;
1142     top: 0;
1143     right: 0;
1144     bottom: -50px;
1145     position: fixed;
1148 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1149     overflow: auto;
1152 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1153     width: 28px;
1154     height: 16px;
1155     background-size: 100%;
1158 .moodle-dialogue-base .moodle-dialogue-wrap {
1159     background-color: #fff;
1160     border: 1px solid #ccc;
1163 // Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1164 // it for a reason (conflicts with jquery .show()).
1165 .modal.show {
1166     display: block;
1169 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1170     display: flex;
1171     padding: 1rem 1rem;
1172     border-bottom: 1px solid #dee2e6;
1175 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1176     // Undo some YUI damage.
1177     min-height: 3rem;
1178     color: initial;
1179     background: initial;
1180     font-size: 1.5rem;
1181     line-height: 1.5;
1184 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1185     font-size: 1.5rem;
1188 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1189     /*rtl:raw:
1190         left: 0;
1191         right: auto;
1192     */
1193     padding: 0;
1194     position: relative;
1195     margin-left: auto;
1198 .moodle-dialogue-base .closebutton {
1199     padding: $modal-header-padding;
1200     margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
1201     position: relative;
1202     background-color: transparent;
1203     border: 0;
1204     background-image: none;
1205     box-shadow: none;
1206     opacity: 0.7;
1207     &:hover,
1208     &:active {
1209         opacity: 1;
1210     }
1211     &::after {
1212         content: "×";
1213     }
1216 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1217     padding: 0.5rem;
1218     body {
1219         background-color: $body-bg;
1220     }
1223 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1224     overflow: auto;
1225     position: absolute;
1226     top: 0;
1227     bottom: 50px;
1228     left: 0;
1229     right: 0;
1230     margin: 0;
1231     border: 0;
1234 .moodle-dialogue-exception .moodle-exception-param label {
1235     font-weight: bold;
1238 .moodle-dialogue-exception .param-stacktrace label {
1239     background-color: #eee;
1240     border: 1px solid #ccc;
1241     border-bottom-width: 0;
1244 .moodle-dialogue-exception .param-stacktrace pre {
1245     border: 1px solid #ccc;
1246     background-color: #fff;
1249 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1250     color: navy;
1251     font-size: $font-size-sm;
1254 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1255     color: map-get($theme-colors, 'warning');
1256     font-size: $font-size-sm;
1259 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1260     color: #333;
1261     font-size: 90%;
1262     border-bottom: 1px solid #eee;
1265 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1266     display: none;
1269 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1270     // Undo some YUI damage.
1271     background: initial;
1274 .moodle-dialogue-confirm .confirmation-message {
1275     margin: 0.5rem 0;
1278 .moodle-dialogue-confirm .confirmation-dialogue input {
1279     min-width: 80px;
1282 .moodle-dialogue-exception .moodle-exception-message {
1283     margin: 1em;
1286 .moodle-dialogue-exception .moodle-exception-param {
1287     margin-bottom: 0.5em;
1290 .moodle-dialogue-exception .moodle-exception-param label {
1291     width: 150px;
1294 .moodle-dialogue-exception .param-stacktrace label {
1295     display: block;
1296     margin: 0;
1297     padding: 4px 1em;
1300 .moodle-dialogue-exception .param-stacktrace pre {
1301     display: block;
1302     height: 200px;
1303     overflow: auto;
1306 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1307     display: inline-block;
1308     margin: 4px 0;
1311 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1312     display: inline-block;
1313     width: 50px;
1314     margin: 4px 1em;
1317 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1318     padding-left: 25px;
1319     margin-bottom: 4px;
1320     padding-bottom: 4px;
1323 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1324     opacity: 0.75;
1325     width: 100%;
1326     height: 100%;
1327     top: 0;
1328     left: 0;
1329     background-color: white;
1330     text-align: center;
1331     padding: 10% 0;
1333 /* Apply a default max-height on tooltip text */
1334 .moodle-dialogue .tooltiptext {
1335     max-height: 300px;
1338 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1339     z-index: 3001;
1341     .moodle-dialogue-bd {
1342         overflow: auto;
1343     }
1346 /**
1347  * Chooser Dialogues (moodle-core-chooserdialogue)
1348  *
1349  * This CSS belong to the chooser dialogue which should work both with, and
1350  * without javascript enabled
1351  */
1352 /* Hide the dialog and it's title */
1353 .chooserdialoguebody,
1354 .choosertitle {
1355     display: none;
1358 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1359     margin: 0;
1362 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1363     padding: 0;
1364     background: #f2f2f2;
1366     @include border-bottom-radius(10px);
1368 /* Center the submit buttons within the area */
1369 .choosercontainer #chooseform .submitbuttons {
1370     padding: 0.7em 0;
1371     text-align: right;
1373 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1375 @media (max-height: 639px) {
1376     .ios .choosercontainer #chooseform .submitbuttons {
1377         padding: 45px 0;
1378     }
1381 .choosercontainer #chooseform .submitbuttons input {
1382     min-width: 100px;
1383     margin: 0 0.5em;
1385 /* Various settings for the options area */
1386 .choosercontainer #chooseform .options {
1387     position: relative;
1388     border-bottom: 1px solid #bbb;
1390 /* Only set these options if we're showing the js container */
1391 .jschooser .choosercontainer #chooseform .alloptions {
1392     overflow-x: hidden;
1393     overflow-y: auto;
1394     max-width: 240px;
1396     .option {
1397         input[type=radio] {
1398             display: inline-block;
1399         }
1401         .typename {
1402             display: inline-block;
1403             width: 55%;
1404         }
1405     }
1407 /* Settings for option rows and option subtypes */
1408 .choosercontainer #chooseform .moduletypetitle,
1409 .choosercontainer #chooseform .option,
1410 .choosercontainer #chooseform .nonoption {
1411     margin-bottom: 0;
1412     padding: 0 1.6em 0 1.6em;
1415 .choosercontainer #chooseform .moduletypetitle {
1416     text-transform: uppercase;
1417     padding-top: 1.2em;
1418     padding-bottom: 0.4em;
1421 .choosercontainer #chooseform .option .typename,
1422 .choosercontainer #chooseform .nonoption .typename {
1423     padding: 0 0 0 0.5em;
1426 .choosercontainer #chooseform .modicon + .typename {
1427     padding-left: 0;
1430 .choosercontainer #chooseform .option input[type=radio],
1431 .choosercontainer #chooseform .option span.typename {
1432     vertical-align: middle;
1435 .choosercontainer #chooseform .option label {
1436     display: block;
1437     margin: 0;
1438     padding: ($spacer / 2) 0;
1439     border-bottom: 1px solid #fff;
1442 .choosercontainer #chooseform .option .icon {
1443     margin: 0;
1444     padding: 0 $spacer;
1447 .choosercontainer #chooseform .nonoption {
1448     padding-left: 2.7em;
1449     padding-top: 0.3em;
1450     padding-bottom: 0.1em;
1453 .choosercontainer #chooseform .subtype {
1454     margin-bottom: 0;
1455     padding: 0 1.6em 0 3.2em;
1458 .choosercontainer #chooseform .subtype .typename {
1459     margin: 0 0 0 0.2em;
1461 /* The instruction/help area */
1462 .jschooser .choosercontainer #chooseform .instruction,
1463 .jschooser .choosercontainer #chooseform .typesummary {
1464     display: none;
1465     position: absolute;
1466     top: 0;
1467     right: 0;
1468     bottom: 0;
1469     left: 240px;
1470     margin: 0;
1471     padding: 1.6em;
1472     background-color: #fff;
1473     overflow-x: hidden;
1474     overflow-y: auto;
1475     line-height: 2em;
1477 /* Selected option settings */
1478 .jschooser .choosercontainer #chooseform .instruction,
1479 .choosercontainer #chooseform .selected .typesummary {
1480     display: block;
1483 .choosercontainer #chooseform .selected {
1484     background-color: #fff;
1485     margin-top: -1px;
1486     padding-top: 1px;
1489 .chooserdialogue-course-modchooser .modicon .icon {
1490     width: 24px;
1491     height: 24px;
1492     font-size: 24px;
1495 @include media-breakpoint-down(xs) {
1496     .jsenabled .choosercontainer #chooseform .alloptions {
1497         max-width: 100%;
1498     }
1500     .jsenabled .choosercontainer #chooseform .instruction,
1501     .jsenabled .choosercontainer #chooseform .typesummary {
1502         position: static;
1503     }
1506 /* Form element: listing */
1507 .formlistingradio {
1508     padding-bottom: 25px;
1509     padding-right: 10px;
1512 .formlistinginputradio {
1513     float: left;
1516 .formlistingmain {
1517     min-height: 225px;
1520 .formlisting {
1521     position: relative;
1522     margin: 15px 0;
1523     padding: 1px 19px 14px;
1524     background-color: white;
1525     border: 1px solid #ddd;
1527     @include border-radius(4px);
1530 .formlistingmore {
1531     position: absolute;
1532     cursor: pointer;
1533     bottom: -1px;
1534     right: -1px;
1535     padding: 3px 7px;
1536     font-size: 12px;
1537     font-weight: bold;
1538     background-color: whitesmoke;
1539     border: 1px solid #ddd;
1540     color: #9da0a4;
1542     @include border-radius(4px 0 4px 0);
1545 .formlistingall {
1546     margin: 15px 0;
1547     padding: 0;
1549     @include border-radius(4px);
1552 .formlistingrow {
1553     cursor: pointer;
1554     border-bottom: 1px solid;
1555     border-color: #e1e1e8;
1556     border-left: 1px solid #e1e1e8;
1557     border-right: 1px solid #e1e1e8;
1558     background-color: #f7f7f9;
1560     @include border-radius(0 0 4px 4px);
1561     padding: 6px;
1562     top: 50%;
1563     left: 50%;
1564     min-height: 34px;
1565     float: left;
1566     width: 150px;
1569 body.jsenabled .formlistingradio {
1570     display: none;
1573 body.jsenabled .formlisting {
1574     display: block;
1577 a.criteria-action {
1578     padding: 0 3px;
1579     float: right;
1582 div.criteria-description {
1583     padding: 10px 15px;
1584     margin: 5px 0;
1585     background: none repeat scroll 0 0 #f9f9f9;
1586     border: 1px solid #eee;
1589 ul.badges {
1590     margin: 0;
1591     list-style: none;
1594 .badges li {
1595     position: relative;
1596     display: inline-block;
1597     padding-top: 1em;
1598     text-align: center;
1599     vertical-align: top;
1600     width: 150px;
1603 .badges li .badge-name {
1604     display: block;
1605     padding: 5px;
1608 .badges li > img {
1609     position: absolute;
1612 .badges li .badge-image {
1613     width: 100px;
1614     height: 100px;
1615     left: 10px;
1616     top: 0;
1617     z-index: 1;
1620 .badges li .badge-actions {
1621     position: relative;
1624 .badges li .expireimage {
1625     width: 100px;
1626     height: 100px;
1627     left: 25px;
1628     top: 0;
1629     position: absolute;
1630     z-index: 10;
1631     opacity: 0.85;
1634 #badge-image {
1635     background-color: transparent;
1636     padding: 0;
1637     position: relative;
1638     min-width: 100px;
1639     width: 20%;
1640     display: inline-block;
1641     vertical-align: top;
1642     margin-top: 17px;
1643     margin-bottom: 20px;
1645     .expireimage {
1646         width: 100px;
1647         height: 100px;
1648         left: 0;
1649         top: 0;
1650         opacity: 0.85;
1651         position: absolute;
1652         z-index: 10;
1653     }
1655     .singlebutton {
1656         padding-top: 5px;
1657         display: block;
1659         button {
1660             margin-left: 4px;
1661         }
1662     }
1665 #badge-details {
1666     display: inline-block;
1667     width: 79%;
1670 #badge-overview dl,
1671 #badge-details dl {
1672     margin: 0;
1674     dt,
1675     dd {
1676         vertical-align: top;
1677         padding: 3px 0;
1678     }
1680     dt {
1681         clear: both;
1682         display: inline-block;
1683         width: 20%;
1684         min-width: 100px;
1685     }
1687     dd {
1688         display: inline-block;
1689         width: 79%;
1690         margin-left: 1%;
1691     }
1694 .badge-profile {
1695     vertical-align: top;
1698 .connected {
1699     color: map-get($theme-colors, 'success');
1702 .notconnected {
1703     color: map-get($theme-colors, 'danger');
1706 .connecting {
1707     color: map-get($theme-colors, 'warning');
1710 #page-badges-award .recipienttable tr td {
1711     vertical-align: top;
1714 #page-badges-award .recipienttable tr td.actions .actionbutton {
1715     margin: 0.3em 0;
1716     padding: 0.5em 0;
1717     width: 100%;
1720 #page-badges-award .recipienttable tr td.existing,
1721 #page-badges-award .recipienttable tr td.potential {
1722     width: 42%;
1725 #issued-badge-table .activatebadge {
1726     display: inline-block;
1729 .statusbox.active {
1730     background-color: $state-success-bg;
1733 .statusbox.inactive {
1734     background-color: $state-warning-bg;
1737 .statusbox {
1738     text-align: center;
1739     margin-bottom: 5px;
1740     padding: 5px;
1743 .statusbox .activatebadge {
1744     display: inline-block;
1747 .statusbox .activatebadge input[type=submit] {
1748     margin: 3px;
1751 .activatebadge {
1752     margin: 0;
1753     text-align: left;
1754     vertical-align: middle;
1757 img#persona_signin {
1758     cursor: pointer;
1761 .addcourse {
1762     float: right;
1765 .invisiblefieldset {
1766     display: inline;
1767     padding: 0;
1768     border-width: 0;
1771 /** Page header */
1772 #page-header {
1773     .logo {
1774         margin: $spacer 0;
1775         img {
1776             max-height: 75px;
1777         }
1778     }
1781 /** Navbar logo. */
1782 nav.navbar .logo img {
1783     max-height: 35px;
1786 /** Header-bar styles **/
1787 .page-context-header {
1788     // We need to be explicit about the height of the header.
1789     $pageHeaderHeight: 140px;
1791     // Do not remove these rules.
1792     overflow: hidden;
1794     .page-header-image,
1795     .page-header-headings {
1796         float: left;
1797         display: block;
1798         position: relative;
1799     }
1801     .page-header-image {
1802         margin-right: 1em;
1803         margin-bottom: 1em;
1804     }
1806     .page-header-headings,
1807     .header-button-group {
1808         position: relative;
1809         line-height: 24px;
1810         vertical-align: middle;
1811     }
1813     .header-button-group {
1814         display: block;
1815         float: left;
1817         a {
1818             position: relative;
1820             // Don't touch it unless you know exactly what you are doing.
1821             top: -0.4em;
1822         }
1823     }
1826 ul.dragdrop-keyboard-drag li {
1827     list-style-type: none;
1830 a.disabled:hover,
1831 a.disabled {
1832     text-decoration: none;
1833     cursor: default;
1834     font-style: italic;
1835     color: #808080;
1838 body.lockscroll {
1839     height: 100%;
1840     overflow: hidden;
1843 .progressbar_container {
1844     max-width: 500px;
1845     margin: 0 auto;
1848 /* IE10 only fix for calendar titling */
1849 .ie10 .yui3-calendar-header-label {
1850     display: inline-block;
1853 dd:before,
1854 dd:after {
1855     display: block;
1856     content: " ";
1859 dd:after {
1860     clear: both;
1863 // Active tabs with links should have a different
1864 // cursor to indicate they are clickable.
1865 .nav-tabs > .active > a[href],
1866 .nav-tabs > .active > a[href]:hover,
1867 .nav-tabs > .active > a[href]:focus {
1868     cursor: pointer;
1871 .inplaceeditable {
1872     &.inplaceeditingon {
1873         position: relative;
1875         .editinstructions {
1876             margin-top: -30px;
1877             font-weight: normal;
1878             margin-right: 0;
1879             margin-left: 0;
1880             left: 0;
1881             right: auto;
1882             white-space: nowrap;
1883         }
1885         input {
1886             width: 330px;
1887             vertical-align: text-bottom;
1888             margin-bottom: 0;
1889         }
1891         select {
1892             margin-bottom: 0;
1893         }
1894     }
1896     .quickediticon img {
1897         opacity: 0.2;
1898     }
1900     .quickeditlink {
1901         color: inherit;
1902         text-decoration: inherit;
1903     }
1905     &:hover .quickeditlink .quickediticon img,
1906     .quickeditlink:focus .quickediticon img {
1907         opacity: 1;
1908     }
1910     &.inplaceeditable-toggle .quickediticon {
1911         display: none;
1912     }
1914     &.inplaceeditable-autocomplete {
1915         display: block;
1916     }
1919 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
1920     margin-top: -20px;
1923 /** Chart area. */
1924 .chart-area {
1926     .chart-table-data {
1927         display: none;
1928     }
1930     .chart-table {
1931         .chart-output-htmltable caption {
1932             white-space: nowrap;
1933         }
1934         /** When accessible, we display the table only. */
1935         &.accesshide {
1936             .chart-table-expand {
1937                 display: none;
1938             }
1939             .chart-table-data {
1940                 display: block;
1941             }
1942         }
1943     }
1946 // Reset for ul.
1947 ul {
1948     padding-left: 1rem;
1951 /* YUI 2 Tree View */
1952 /*rtl:raw:
1953 .ygtvtn,
1954 .ygtvtm,
1955 .ygtvtmh,
1956 .ygtvtmhh,
1957 .ygtvtp,
1958 .ygtvtph,
1959 .ygtvtphh,
1960 .ygtvln,
1961 .ygtvlm,
1962 .ygtvlmh,
1963 .ygtvlmhh,
1964 .ygtvlp,
1965 .ygtvlph,
1966 .ygtvlphh,
1967 .ygtvdepthcell,
1968 .ygtvok,
1969 .ygtvok:hover,
1970 .ygtvcancel,
1971 .ygtvcancel:hover {
1972     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
1974 */
1976 .hover-tooltip-container {
1977     position: relative;
1979     .hover-tooltip {
1980         opacity: 0;
1981         visibility: hidden;
1982         position: absolute;
1983         /*rtl:ignore*/
1984         left: 50%;
1985         top: calc(-50% - 5px);
1986         transform: translate(-50%, -50%);
1987         background-color: #fff;
1988         border: 1px solid rgba(0, 0, 0, .2);
1989         border-radius: .3rem;
1990         box-sizing: border-box;
1991         padding: 5px;
1992         white-space: nowrap;
1993         transition: opacity 0.15s, visibility 0.15s;
1994         z-index: 1000;
1996         &:before {
1997             content: '';
1998             display: inline-block;
1999             border-left: 8px solid transparent;
2000             border-right: 8px solid transparent;
2001             border-top: 8px solid rgba(0, 0, 0, .2);
2002             position: absolute;
2003             bottom: -8px;
2004             left: calc(50% - 8px);
2005         }
2007         &:after {
2008             content: '';
2009             display: inline-block;
2010             border-left: 7px solid transparent;
2011             border-right: 7px solid transparent;
2012             border-top: 7px solid #fff;
2013             position: absolute;
2014             bottom: -6px;
2015             left: calc(50% - 7px);
2016             z-index: 2;
2017         }
2018     }
2020     &:hover {
2021         .hover-tooltip {
2022             opacity: 1;
2023             visibility: visible;
2024             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2025         }
2026     }
2029 #region-flat-nav {
2030     padding-right: 0;
2031     padding-left: 0;
2032     .nav {
2033         margin-right: $grid-gutter-width / 2;
2034         background-color: $card-bg;
2035     }
2036     @include media-breakpoint-down(sm) {
2037         .nav {
2038             margin-top: $grid-gutter-width;
2039             margin-right: 0;
2040         }
2041     }
2044 // Footer link colour was added to allow the colour of footer links to be changed,
2045 // but really in bootstrap we want the colour of links on .bg-inverse to be changed
2046 // rather than being specific to the footer. This is kept for backwards compatibility.
2047 $footer-link-color: $bg-inverse-link-color !default;
2048 #page-footer a {
2049     color: $footer-link-color;
2050     text-decoration: underline;
2051     .icon {
2052         color: $footer-link-color;
2053     }
2056 .bg-inverse a {
2057     color: $bg-inverse-link-color;
2058     text-decoration: underline;
2059     .icon {
2060         color: $bg-inverse-link-color;
2061     }
2064 .sitelink {
2065     img {
2066         width: 112px;
2067     }
2070 // Make links in a menu clickable anywhere in the row.
2071 .dropdown-item a {
2072     display: block;
2073     width: 100%;
2074     color: $body-color;
2076 .dropdown-item:active a {
2077     color: $dropdown-link-active-color;
2080 .competency-tree {
2081     ul {
2082         padding-left: 1.5rem;
2083     }
2086 .sr-only-focusable {
2087     &:active,
2088     &:focus {
2089         z-index: $zindex-navbar-fixed + 1;
2090         position: fixed;
2091         background: #fff;
2092         padding: 7px;
2093         left: 0;
2094         top: 0;
2095     }
2098 [data-drag-type="move"] {
2099     cursor: move;
2100     touch-action: none;
2103 .clickable {
2104     cursor: pointer;
2107 .overlay-icon-container {
2108     position: absolute;
2109     top: 0;
2110     left: 0;
2111     width: 100%;
2112     height: 100%;
2113     background-color: rgba(255, 255, 255, 0.6);
2115     .loading-icon {
2116         position: absolute;
2117         top: 50%;
2118         left: 50%;
2119         transform: translate(-50%, -50%);
2121         .icon {
2122             height: 30px;
2123             width: 30px;
2124             font-size: 30px;
2125         }
2126     }
2129 .open.atto_menu > .dropdown-menu {
2130     display: block;
2132 div.editor_atto_toolbar button .icon {
2133     color: $gray-700;
2135 .w-auto {
2136     width: auto;
2139 .bg-pulse-grey {
2140     animation: bg-pulse-grey 2s infinite linear;
2143 @keyframes bg-pulse-grey {
2144     0% {
2145         background-color: $gray-100;
2146     }
2147     50% {
2148         background-color: darken($gray-100, 5%);
2149     }
2150     100% {
2151         background-color: $gray-100;
2152     }
2155 @each $size, $length in $spacers {
2156     .line-height-#{$size} {
2157         line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2158     }
2161 .dir-rtl {
2162     .dir-rtl-hide {
2163         display: none;
2164     }
2167 .dir-ltr {
2168     .dir-ltr-hide {
2169         display: none;
2170     }
2173 .paged-content-page-container {
2174     min-height: 3.125rem;
2177 body.h5p-embed {
2178     #page-content {
2179         display: inherit;
2180     }
2181     #maincontent {
2182         display: none;
2183     }
2184     .h5pmessages {
2185         min-height: 230px; // This should be the same height as default core_h5p iframes.
2186     }
2189 .text-decoration-none {
2190     text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
2193 .colour-inherit {
2194     color: inherit !important; /* stylelint-disable-line declaration-no-important */
2197 .position-right {
2198     right: 0 !important; /* stylelint-disable-line declaration-no-important */
2201 .overflow-hidden {
2202     overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
2205 .text-break {
2206     overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
2209 .z-index-1 {
2210     z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
2213 // These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
2214 .float-left {
2215     float: left !important; /* stylelint-disable-line declaration-no-important */
2217 .float-right {
2218     float: right !important; /* stylelint-disable-line declaration-no-important */
2221 // Emoji picker.
2222 $picker-width: 350px !default;
2223 $picker-width-xs: 320px !default;
2224 $picker-height: 400px !default;
2225 $picker-row-height: 40px !default;
2226 $picker-emoji-button-size: 40px !default;
2227 $picker-emoji-button-font-size: 24px !default;
2228 $picker-emoji-category-count: 9 !default;
2229 $picker-emojis-per-row: 7 !default;
2231 .emoji-picker {
2232     width: $picker-width;
2233     height: $picker-height;
2235     .category-button {
2236         padding: .375rem 0;
2237         height: 100%;
2238         width: $picker-width / $picker-emoji-category-count;
2239         border-top: none;
2240         border-left: none;
2241         border-right: none;
2242         border-bottom: 2px solid transparent;
2244         &.selected {
2245             border-bottom: 2px solid map-get($theme-colors, 'primary');
2246         }
2247     }
2249     .emojis-container,
2250     .search-results-container {
2251         min-width: $picker-emojis-per-row * $picker-emoji-button-size;
2252     }
2254     .picker-row {
2255         height: $picker-row-height;
2257         .category-name {
2258             line-height: $picker-row-height;
2259         }
2261         .emoji-button {
2262             height: $picker-emoji-button-size;
2263             width: $picker-emoji-button-size;
2264             line-height: $picker-emoji-button-size;
2265             font-size: $picker-emoji-button-font-size;
2266             overflow: hidden;
2268             @include hover-focus {
2269                 color: inherit;
2270                 text-decoration: none;
2271             }
2272         }
2273     }
2275     .emoji-preview {
2276         height: $picker-row-height;
2277         font-size: $picker-row-height;
2278         line-height: $picker-row-height;
2279     }
2281     .emoji-short-name {
2282         line-height: $picker-row-height / 2;
2283     }
2285     @include media-breakpoint-down(xs) {
2286         width: $picker-width-xs;
2287     }
2290 .emoji-auto-complete {
2291     height: $picker-row-height;
2293     .btn.btn-link.btn-icon.emoji-button {
2294         height: $picker-emoji-button-size;
2295         width: $picker-emoji-button-size;
2296         line-height: $picker-emoji-button-size;
2297         font-size: $picker-emoji-button-font-size;
2299         &.active {
2300             background-color: $gray-200;
2301         }
2302     }
2305 .toast-wrapper {
2306     max-width: $toast-max-width;
2307     max-height: 0;
2308     // Place these above any modals and other elements.
2309     z-index: 1051;