Merge branch 'MDL-66883-master' of git://github.com/bmbrands/moodle
[moodle.git] / theme / boost / scss / moodle / core.scss
1 /* core.less */
3 // When we upgrade boostrap to v4 release, we will need to change this to be used by the text-white class.
4 // Because a primary colour that is both AA accessible on grey (footer) and white is not possible, we always
5 // want white default colour.
6 $bg-inverse-link-color: #fff !default;
8 #region-main {
9     overflow-x: auto;
10     overflow-y: visible;
11     border: $card-border-width solid $card-border-color;
12     @if $enable-rounded {
13         @include border-radius($card-border-radius);
14     }
15     padding: $card-spacer-x;
16     background-color: $body-bg;
17 }
19 .context-header-settings-menu,
20 .region-main-settings-menu {
21     float: right;
22     width: auto;
23     max-width: 4em;
24     height: 2em;
25     display: block;
26     margin-top: 4px;
27 }
29 .context-header-settings-menu .dropdown-toggle > .icon,
30 #region-main-settings-menu .dropdown-toggle > .icon {
31     height: 24px;
32     font-size: 24px;
33     width: auto;
34 }
35 /** Prevent user notifications overlapping with region main settings menu */
36 #user-notifications {
37     display: block;
38     overflow: hidden;
39 }
41 /** Page layout CSS starts **/
42 .layout-option-noheader #page-header,
43 .layout-option-nonavbar #page-navbar,
44 .layout-option-nofooter #page-footer,
45 .layout-option-nocourseheader .course-content-header,
46 .layout-option-nocoursefooter .course-content-footer {
47     display: none;
48 }
50 /** Page layout CSS ends **/
52 .mdl-left {
53     text-align: left;
54 }
56 .mdl-right {
57     text-align: right;
58 }
60 /*rtl:ignore*/
61 .text-ltr {
62     direction: ltr !important; /* stylelint-disable-line declaration-no-important */
63 }
65 #add,
66 #remove,
67 .centerpara,
68 .mdl-align {
69     text-align: center;
70 }
72 a.dimmed,
73 a.dimmed:link,
74 a.dimmed:visited,
75 a.dimmed_text,
76 a.dimmed_text:link,
77 a.dimmed_text:visited,
78 .dimmed_text,
79 .dimmed_text a,
80 .dimmed_text a:link,
81 .dimmed_text a:visited,
82 .usersuspended,
83 .usersuspended a,
84 .usersuspended a:link,
85 .usersuspended a:visited,
86 .dimmed_category,
87 .dimmed_category a {
88     color: $text-muted;
89 }
91 .unlist,
92 .unlist li,
93 .inline-list,
94 .inline-list li,
95 .block .list,
96 .block .list li,
97 .section li.activity,
98 .section li.movehere,
99 .tabtree li {
100     list-style: none;
101     margin: 0;
102     padding: 0;
105 .inline,
106 .inline-list li {
107     display: inline;
110 .notifytiny {
111     font-size: $font-size-xs;
114 .notifytiny li,
115 .notifytiny td {
116     font-size: 100%;
119 .red,
120 .notifyproblem {
121     color: map-get($theme-colors, 'warning');
124 .green,
125 .notifysuccess {
126     color: map-get($theme-colors, 'success');
129 .highlight {
130     color: map-get($theme-colors, 'info');
133 .fitem.advanced .text-info {
134     font-weight: bold;
137 .reportlink {
138     text-align: right;
141 a.autolink.glossary:hover {
142     cursor: help;
144 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
145 .collapsibleregioncaption {
146     white-space: nowrap;
147     min-height: $line-height-base * $font-size-base;
150 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
151     cursor: pointer;
154 .pagelayout-mydashboard #region-main {
155     border: 0;
156     padding: 0;
157     background-color: transparent;
158     margin-top: -1px;
161 .collapsibleregioncaption img {
162     vertical-align: middle;
165 .jsenabled .hiddenifjs {
166     display: none;
169 .visibleifjs {
170     display: none;
173 .jsenabled .visibleifjs {
174     display: inline;
177 .jsenabled .collapsibleregion {
178     overflow: hidden;
179     box-sizing: content-box;
182 .jsenabled .collapsed .collapsibleregioninner {
183     visibility: hidden;
186 .collapsible-actions {
187     display: none;
188     text-align: right;
191 .jsenabled .collapsible-actions {
192     display: block;
195 .collapsible-actions .collapseexpand {
196     padding-left: 20px;
197     background: url([[pix:t/collapsed]]) 2px center no-repeat;
199 /*rtl:raw:
200 .collapsible-actions .collapseexpand {
201     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
203 */
204 .collapsible-actions .collapse-all {
205     background-image: url([[pix:t/expanded]]);
208 .yui-overlay .yui-widget-bd {
209     background-color: #ffee69;
210     border: 1px solid #a6982b;
211     border-top-color: #d4c237;
212     color: #000;
213     left: 0;
214     padding: 2px 5px;
215     position: relative;
216     top: 0;
217     z-index: 1;
220 .clearer {
221     background: transparent;
222     border-width: 0;
223     clear: both;
224     display: block;
225     height: 1px;
226     margin: 0;
227     padding: 0;
230 .bold,
231 .warning,
232 .errorbox .title,
233 .pagingbar .title,
234 .pagingbar .thispage {
235     font-weight: bold;
238 img.userpicture {
239     margin-right: 0.5rem;
242 img.resize {
243     height: 1em;
244     width: 1em;
247 .action-menu .dropdown-toggle {
248     text-decoration: none;
251 .action-menu {
252     white-space: nowrap;
255 .block img.resize {
256     height: 0.9em;
257     width: 0.8em;
259 /* Icon styles */
260 img.activityicon {
261     height: 24px;
262     width: 24px;
263     vertical-align: middle;
266 .headermain {
267     font-weight: bold;
270 #maincontent {
271     display: block;
272     height: 1px;
273     overflow: hidden;
276 img.uihint {
277     cursor: help;
280 #addmembersform table {
281     margin-left: auto;
282     margin-right: auto;
285 table.flexible .emptyrow {
286     display: none;
289 form.popupform,
290 form.popupform div {
291     display: inline;
294 .arrow_button input {
295     overflow: hidden;
297 .no-overflow {
298     overflow: auto;
301 // Minimum height required for a menu in a table inside a scrollable div.
302 // Position required for table sizing inside a flex container.
303 .no-overflow > .generaltable {
304     position: relative;
305     margin-bottom: 0;
306     min-height: 10em;
308 // Accessibility features
310 // Accessibility: text 'seen' by screen readers but not visual users.
311 .accesshide {
312     @include sr-only();
315 span.hide,
316 div.hide,
317 .hidden {
318     display: none;
320 // Accessibility: Skip block link, for keyboard-only users.
321 a.skip-block,
322 a.skip {
323     position: absolute;
324     top: -1000em;
325     font-size: 0.85em;
326     text-decoration: none;
329 a.skip-block:focus,
330 a.skip-block:active,
331 a.skip:focus,
332 a.skip:active {
333     position: static;
334     display: block;
337 .skip-block-to {
338     display: block;
339     height: 1px;
340     overflow: hidden;
342 // Blogs
343 .addbloglink {
344     text-align: center;
347 .blog_entry .audience {
348     text-align: right;
349     padding-right: 4px;
352 .blog_entry .tags {
353     margin-top: 15px;
356 .blog_entry .content {
357     margin-left: 43px;
359 // Group
361 #doc-contents h1 {
362     margin: 1em 0 0 0;
365 #doc-contents ul {
366     margin: 0;
367     padding: 0;
368     width: 90%;
371 #doc-contents ul li {
372     list-style-type: none;
375 .groupmanagementtable td {
376     vertical-align: top;
379 .groupmanagementtable #existingcell,
380 .groupmanagementtable #potentialcell {
381     width: 42%;
384 .groupmanagementtable #buttonscell {
385     width: 16%;
388 .groupmanagementtable #buttonscell p.arrow_button input {
389     width: auto;
390     min-width: 80%;
391     margin: 0 auto;
392     display: block;
395 .groupmanagementtable #removeselect_wrapper,
396 .groupmanagementtable #addselect_wrapper {
397     width: 100%;
400 .groupmanagementtable #removeselect_wrapper label,
401 .groupmanagementtable #addselect_wrapper label {
402     font-weight: normal;
405 #group-usersummary {
406     width: 14em;
409 .groupselector {
410     margin-top: 3px;
411     margin-bottom: 3px;
412     display: inline-block;
415 .groupselector label {
416     display: inline-block;
419 // Login
420 .login-page {
421     [name="username"] {
422         margin-bottom: -1px;
423         border-bottom-right-radius: 0;
424         border-bottom-left-radius: 0;
425     }
427     [type="password"] {
428         margin-bottom: 10px;
429         border-top-left-radius: 0;
430         border-top-right-radius: 0;
431     }
434 // Notes
435 .notepost {
436     margin-bottom: 1em;
439 .notepost .userpicture {
440     float: left;
441     margin-right: 5px;
444 .notepost .content,
445 .notepost .footer {
446     clear: both;
449 .notesgroup {
450     margin-left: 20px;
453 // My Moodle
454 .path-my .coursebox {
455     margin: $spacer-y 0;
456     padding: 0;
458     .overview {
459         margin: 15px 30px 10px 30px;
460     }
463 .path-my .coursebox .info {
464     float: none;
465     margin: 0;
468 // Modules
469 .mod_introbox {
470     padding: 10px;
473 table.mod_index {
474     width: 100%;
477 // Comments
478 .comment-ctrl {
479     font-size: 12px;
480     display: none;
481     margin: 0;
482     padding: 0;
485 .comment-ctrl h5 {
486     margin: 0;
487     padding: 5px;
490 .comment-area {
491     max-width: 400px;
492     padding: 5px;
495 .comment-area textarea {
496     width: 100%;
497     overflow: auto;
499     &.fullwidth {
500         -webkit-box-sizing: border-box;
501         -moz-box-sizing: border-box;
502         box-sizing: border-box;
503     }
506 .comment-area .fd {
507     text-align: right;
510 .comment-meta span {
511     color: gray;
514 .comment-link img {
515     vertical-align: text-bottom;
518 .comment-list {
519     font-size: 11px;
520     overflow: auto;
521     list-style: none;
522     padding: 0;
523     margin: 0;
526 .comment-list li {
527     margin: 2px;
528     list-style: none;
529     margin-bottom: 5px;
530     clear: both;
531     padding: .3em;
532     position: relative;
535 .comment-list li.first {
536     display: none;
539 .comment-paging {
540     text-align: center;
543 .comment-paging .pageno {
544     padding: 2px;
547 .comment-paging .curpage {
548     border: 1px solid #ccc;
551 .comment-message .picture {
552     width: 20px;
553     float: left;
556 .comment-message .text {
557     margin: 0;
558     padding: 0;
561 .comment-message .text p {
562     padding: 0;
563     margin: 0 18px 0 0;
566 .comment-delete {
567     position: absolute;
568     top: 0;
569     right: 0;
570     margin: .3em;
573 .comment-report-selectall {
574     display: none;
577 .comment-link {
578     display: none;
581 .jsenabled .comment-link {
582     display: block;
585 .jsenabled .showcommentsnonjs {
586     display: none;
589 .jsenabled .comment-report-selectall {
590     display: inline;
592 /**
593 * Completion progress report
594 */
595 .completion-expired {
596     color: map-get($theme-colors, 'warning');
599 .completion-expected {
600     font-size: $font-size-xs;
603 .completion-sortchoice,
604 .completion-identifyfield {
605     font-size: $font-size-xs;
606     vertical-align: bottom;
609 .completion-progresscell {
610     text-align: right;
613 .completion-expired .completion-expected {
614     font-weight: bold;
616 /**
617 * Tags
618 */
619 img.user-image {
620     height: 100px;
621     width: 100px;
624 #tag-search-box {
625     text-align: center;
626     margin: 10px auto;
629 .path-tag .tag-index-items .tagarea {
630     border: 1px solid #e3e3e3;
631     border-radius: 4px;
632     padding: 10px;
633     margin-top: 10px;
636 .path-tag .tag-index-items .tagarea h3 {
637     display: block;
638     padding: 3px 0 10px 0;
639     margin: 0;
640     font-size: 1.1em;
641     font-weight: bold;
642     line-height: 20px;
643     color: #999;
644     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
645     text-transform: uppercase;
646     word-wrap: break-word;
647     border-bottom: solid 1px #e3e3e3;
648     margin-bottom: 10px;
651 .path-tag .tagarea .controls,
652 .path-tag .tagarea .taggeditems {
653     @include clearfix();
656 .path-tag .tagarea .controls,
657 .path-tag .tag-backtoallitems {
658     text-align: center;
661 .path-tag .tagarea .controls .gotopage.nextpage {
662     float: right;
665 .path-tag .tagarea .controls .gotopage.prevpage {
666     float: left;
669 .path-tag .tagarea .controls .exclusivemode {
670     display: inline-block;
673 .path-tag .tagarea .controls.controls-bottom {
674     margin-top: 5px;
677 .path-tag .tagarea .controls .gotopage.nextpage::after {
678     padding-right: 5px;
679     padding-left: 5px;
680     content: "»";
683 .path-tag .tagarea .controls .gotopage.prevpage::before {
684     padding-right: 5px;
685     padding-left: 5px;
686     content: "«";
689 span.flagged-tag,
690 tr.flagged-tag,
691 span.flagged-tag a,
692 tr.flagged-tag a {
693     color: map-get($theme-colors, 'warning');
696 .tag-management-table td,
697 .tag-management-table th {
698     vertical-align: middle;
699     padding: 4px;
702 .tag-management-table .inplaceeditable.inplaceeditingon input {
703     width: 150px;
706 .path-admin-tag .addstandardtags {
707     float: right;
709     img {
710         margin: 0 5px;
711     }
714 .path-tag .tag-relatedtags {
715     padding-top: 10px;
718 .path-tag .tag-management-box {
719     text-align: right;
722 .path-tag .tag-index-toc {
723     padding: 10px;
724     text-align: center;
727 .path-tag .tag-index-toc li,
728 .path-tag .tag-management-box li {
729     margin-left: 5px;
730     margin-right: 5px;
733 .path-tag .tag-management-box li a.edittag {
734     background-image: url([[pix:moodle|i/settings]]);
737 .path-tag .tag-management-box li a.flagasinappropriate {
738     background-image: url([[pix:moodle|i/flagged]]);
741 .path-tag .tag-management-box li a.removefrommyinterests {
742     background-image: url([[pix:moodle|t/delete]]);
745 .path-tag .tag-management-box li a.addtomyinterests {
746     background-image: url([[pix:moodle|t/add]]);
749 .path-tag .tag-management-box li a {
750     background-repeat: no-repeat;
751     background-position: left;
752     padding-left: 17px;
755 .tag_feed.media-list .media .itemimage {
756     float: left;
759 .tag_feed.media-list .media .itemimage img {
760     height: 35px;
761     width: 35px;
764 .tag_feed.media-list .media .media-body {
765     padding-right: 10px;
766     padding-left: 10px;
769 .tag_feed .media .muted a {
770     color: $text-muted;
773 .tag_cloud {
774     text-align: center;
777 .tag_cloud .inline-list li {
778     padding: 0 0.2em;
781 .tag_cloud .tag_overflow {
782     margin-top: 1em;
783     font-style: italic;
786 .tag_cloud .s20 {
787     font-size: 2.7em;
790 .tag_cloud .s19 {
791     font-size: 2.6em;
794 .tag_cloud .s18 {
795     font-size: 2.5em;
798 .tag_cloud .s17 {
799     font-size: 2.4em;
802 .tag_cloud .s16 {
803     font-size: 2.3em;
806 .tag_cloud .s15 {
807     font-size: 2.2em;
810 .tag_cloud .s14 {
811     font-size: 2.1em;
814 .tag_cloud .s13 {
815     font-size: 2em;
818 .tag_cloud .s12 {
819     font-size: 1.9em;
822 .tag_cloud .s11 {
823     font-size: 1.8em;
826 .tag_cloud .s10 {
827     font-size: 1.7em;
830 .tag_cloud .s9 {
831     font-size: 1.6em;
834 .tag_cloud .s8 {
835     font-size: 1.5em;
838 .tag_cloud .s7 {
839     font-size: 1.4em;
842 .tag_cloud .s6 {
843     font-size: 1.3em;
846 .tag_cloud .s5 {
847     font-size: 1.2em;
850 .tag_cloud .s4 {
851     font-size: 1.1em;
854 .tag_cloud .s3 {
855     font-size: 1em;
858 .tag_cloud .s2 {
859     font-size: 0.9em;
862 .tag_cloud .s1 {
863     font-size: 0.8em;
866 .tag_cloud .s0 {
867     font-size: 0.7em;
870 .tag_list ul {
871     display: inline;
874 .tag_list.hideoverlimit .overlimit {
875     display: none;
878 .tag_list .tagmorelink {
879     display: none;
882 .tag_list.hideoverlimit .tagmorelink {
883     display: inline;
886 .tag_list.hideoverlimit .taglesslink {
887     display: none;
890 /**
891 * Web Service
892 */
893 #webservice-doc-generator td {
894     text-align: left;
895     border: 0 solid black;
898 /**
899 * Enrol
900 */
901 .userenrolment {
902     width: 100%;
903     border-collapse: collapse;
906 .userenrolment tr {
907     vertical-align: top;
910 .userenrolment td {
911     padding: 0;
912     height: 41px;
915 .userenrolment .subfield {
916     margin-right: 5px;
919 .userenrolment .col_userdetails .subfield {
920     margin-left: 40px;
923 .userenrolment .col_userdetails .subfield_picture {
924     float: left;
925     margin-left: 0;
928 .userenrolment .col_lastseen {
929     width: 150px;
932 .userenrolment .col_role {
933     width: 262px;
936 .userenrolment .col_role .roles,
937 .userenrolment .col_group .groups {
938     margin-right: 30px;
941 .userenrolment .col_role .role {
942     float: left;
943     padding: 0 3px 3px;
944     margin: 0 3px 3px;
945     white-space: nowrap;
948 .userenrolment .col_group .group {
949     float: left;
950     padding: 3px;
951     margin: 3px;
952     white-space: nowrap;
955 .userenrolment .col_role .role a,
956 .userenrolment .col_group .group a {
957     margin-left: 3px;
958     cursor: pointer;
961 .userenrolment .col_role .addrole,
962 .userenrolment .col_group .addgroup {
963     float: right;
964     padding: 3px;
965     margin: 3px;
967     > a:hover {
968         border-bottom: 1px solid #666;
969     }
972 .userenrolment .col_role .addrole img,
973 .userenrolment .col_group .addgroup img {
974     vertical-align: baseline;
977 .userenrolment .hasAllRoles .col_role .addrole {
978     display: none;
981 .userenrolment .col_enrol .enrolment {
982     float: left;
983     padding: 0 3px 3px;
984     margin: 0 3px 3px;
987 .userenrolment .col_enrol .enrolment a {
988     float: right;
989     margin-left: 3px;
992 .corelightbox {
993     background-color: #ccc;
994     position: absolute;
995     top: 0;
996     left: 0;
997     width: 100%;
998     height: 100%;
999     text-align: center;
1002 .corelightbox img {
1003     position: fixed;
1004     top: 50%;
1005     left: 50%;
1008 .mod-indent-outer {
1009     display: table;
1012 .mod-indent {
1013     display: table-cell;
1016 .label .mod-indent {
1017     float: left;
1018     padding-top: 20px;
1020 $mod-indent-size: 30px;
1021 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1023 @for $i from 1 through 16 {
1024     $width: ($i * $mod-indent-size);
1026     .mod-indent-#{$i} {
1027         width: $width;
1028     }
1031 .mod-indent-huge {
1032     width: (16 * $mod-indent-size);
1035 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1036 .resourcecontent .mediaplugin_mp3 object {
1037     height: 25px;
1038     width: 600px;
1041 .resourcecontent audio.mediaplugin_html5audio {
1042     width: 600px;
1044 /** Large resource images should avoid hidden overflow **/
1045 .resourceimage {
1046     max-width: 100%;
1048 /* Audio player size in 'inline' mode (can only change width, as above) */
1049 .mediaplugin_mp3 object {
1050     height: 15px;
1051     width: 300px;
1054 audio.mediaplugin_html5audio {
1055     width: 300px;
1057 /* TinyMCE moodle media preview frame should not have padding */
1058 .core_media_preview.pagelayout-embedded #content {
1059     padding: 0;
1062 .core_media_preview.pagelayout-embedded #maincontent {
1063     height: 0;
1066 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1067     padding: 0;
1068     margin: 0;
1069     min-width: 0;
1070     background: none;
1073 .path-rating .ratingtable {
1074     width: 100%;
1075     margin-bottom: 1em;
1078 .path-rating .ratingtable th.rating {
1079     width: 100%;
1082 .path-rating .ratingtable td.rating,
1083 .path-rating .ratingtable td.time {
1084     white-space: nowrap;
1085     text-align: center;
1088 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1089 .moodle-dialogue-base .moodle-dialogue-lightbox {
1090     background-color: $gray;
1093 // Prevent adding backdrops to popups in popups.
1094 .pagelayout-popup {
1095     .moodle-dialogue-base {
1096         .moodle-dialogue-lightbox {
1097             background-color: transparent;
1098         }
1099         .moodle-dialogue {
1100             box-shadow: $popover-box-shadow;
1101         }
1102     }
1105 .moodle-dialogue-base .hidden,
1106 .moodle-dialogue-base .moodle-dialogue-hidden {
1107     display: none;
1110 .no-scrolling {
1111     overflow: hidden;
1114 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1115     left: 0;
1116     top: 0;
1117     right: 0;
1118     bottom: -50px;
1119     position: fixed;
1122 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1123     overflow: auto;
1126 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1127     width: 28px;
1128     height: 16px;
1129     background-size: 100%;
1132 .moodle-dialogue-base .moodle-dialogue-wrap {
1133     background-color: #fff;
1134     border: 1px solid #ccc;
1137 // Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1138 // it for a reason (conflicts with jquery .show()).
1139 .modal.show {
1140     display: block;
1143 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1144     display: flex;
1145     padding: 1rem 1rem;
1146     border-bottom: 1px solid #dee2e6;
1149 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1150     // Undo some YUI damage.
1151     min-height: 3rem;
1152     color: initial;
1153     background: initial;
1154     font-size: 1.5rem;
1155     line-height: 1.5;
1158 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1159     font-size: 1.5rem;
1162 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1163     /*rtl:raw:
1164         left: 0;
1165         right: auto;
1166     */
1167     padding: 0;
1168     position: relative;
1169     margin-left: auto;
1172 .moodle-dialogue-base .closebutton {
1173     padding: $modal-header-padding;
1174     margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
1175     position: relative;
1176     background-color: transparent;
1177     border: 0;
1178     background-image: none;
1179     box-shadow: none;
1180     opacity: 0.7;
1181     &:hover,
1182     &:active {
1183         opacity: 1;
1184     }
1185     &::after {
1186         content: "×";
1187     }
1190 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1191     padding: 0.5rem;
1192     body {
1193         background-color: $body-bg;
1194     }
1197 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1198     overflow: auto;
1199     position: absolute;
1200     top: 0;
1201     bottom: 50px;
1202     left: 0;
1203     right: 0;
1204     margin: 0;
1205     border: 0;
1208 .moodle-dialogue-exception .moodle-exception-param label {
1209     font-weight: bold;
1212 .moodle-dialogue-exception .param-stacktrace label {
1213     background-color: #eee;
1214     border: 1px solid #ccc;
1215     border-bottom-width: 0;
1218 .moodle-dialogue-exception .param-stacktrace pre {
1219     border: 1px solid #ccc;
1220     background-color: #fff;
1223 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1224     color: navy;
1225     font-size: $font-size-sm;
1228 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1229     color: map-get($theme-colors, 'warning');
1230     font-size: $font-size-sm;
1233 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1234     color: #333;
1235     font-size: 90%;
1236     border-bottom: 1px solid #eee;
1239 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1240     display: none;
1243 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1244     // Undo some YUI damage.
1245     background: initial;
1248 .moodle-dialogue-confirm .confirmation-message {
1249     margin: 0.5rem 0;
1252 .moodle-dialogue-confirm .confirmation-dialogue input {
1253     min-width: 80px;
1256 .moodle-dialogue-exception .moodle-exception-message {
1257     margin: 1em;
1260 .moodle-dialogue-exception .moodle-exception-param {
1261     margin-bottom: 0.5em;
1264 .moodle-dialogue-exception .moodle-exception-param label {
1265     width: 150px;
1268 .moodle-dialogue-exception .param-stacktrace label {
1269     display: block;
1270     margin: 0;
1271     padding: 4px 1em;
1274 .moodle-dialogue-exception .param-stacktrace pre {
1275     display: block;
1276     height: 200px;
1277     overflow: auto;
1280 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1281     display: inline-block;
1282     margin: 4px 0;
1285 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1286     display: inline-block;
1287     width: 50px;
1288     margin: 4px 1em;
1291 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1292     padding-left: 25px;
1293     margin-bottom: 4px;
1294     padding-bottom: 4px;
1297 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1298     opacity: 0.75;
1299     width: 100%;
1300     height: 100%;
1301     top: 0;
1302     left: 0;
1303     background-color: white;
1304     text-align: center;
1305     padding: 10% 0;
1307 /* Apply a default max-height on tooltip text */
1308 .moodle-dialogue .tooltiptext {
1309     max-height: 300px;
1312 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1313     z-index: 3001;
1315     .moodle-dialogue-bd {
1316         overflow: auto;
1317     }
1320 /**
1321  * Chooser Dialogues (moodle-core-chooserdialogue)
1322  *
1323  * This CSS belong to the chooser dialogue which should work both with, and
1324  * without javascript enabled
1325  */
1326 /* Hide the dialog and it's title */
1327 .chooserdialoguebody,
1328 .choosertitle {
1329     display: none;
1332 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1333     margin: 0;
1336 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1337     padding: 0;
1338     background: #f2f2f2;
1340     @include border-bottom-radius(10px);
1342 /* Center the submit buttons within the area */
1343 .choosercontainer #chooseform .submitbuttons {
1344     padding: 0.7em 0;
1345     text-align: right;
1347 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1349 @media (max-height: 639px) {
1350     .ios .choosercontainer #chooseform .submitbuttons {
1351         padding: 45px 0;
1352     }
1355 .choosercontainer #chooseform .submitbuttons input {
1356     min-width: 100px;
1357     margin: 0 0.5em;
1359 /* Various settings for the options area */
1360 .choosercontainer #chooseform .options {
1361     position: relative;
1362     border-bottom: 1px solid #bbb;
1364 /* Only set these options if we're showing the js container */
1365 .jschooser .choosercontainer #chooseform .alloptions {
1366     overflow-x: hidden;
1367     overflow-y: auto;
1368     max-width: 240px;
1370     .option {
1371         input[type=radio] {
1372             display: inline-block;
1373         }
1375         .typename {
1376             display: inline-block;
1377             width: 55%;
1378         }
1379     }
1381 /* Settings for option rows and option subtypes */
1382 .choosercontainer #chooseform .moduletypetitle,
1383 .choosercontainer #chooseform .option,
1384 .choosercontainer #chooseform .nonoption {
1385     margin-bottom: 0;
1386     padding: 0 1.6em 0 1.6em;
1389 .choosercontainer #chooseform .moduletypetitle {
1390     text-transform: uppercase;
1391     padding-top: 1.2em;
1392     padding-bottom: 0.4em;
1395 .choosercontainer #chooseform .option .typename,
1396 .choosercontainer #chooseform .nonoption .typename {
1397     padding: 0 0 0 0.5em;
1400 .choosercontainer #chooseform .modicon + .typename {
1401     padding-left: 0;
1404 .choosercontainer #chooseform .option input[type=radio],
1405 .choosercontainer #chooseform .option span.typename {
1406     vertical-align: middle;
1409 .choosercontainer #chooseform .option label {
1410     display: block;
1411     margin: 0;
1412     padding: ($spacer / 2) 0;
1413     border-bottom: 1px solid #fff;
1416 .choosercontainer #chooseform .option .icon {
1417     margin: 0;
1418     padding: 0 $spacer;
1421 .choosercontainer #chooseform .nonoption {
1422     padding-left: 2.7em;
1423     padding-top: 0.3em;
1424     padding-bottom: 0.1em;
1427 .choosercontainer #chooseform .subtype {
1428     margin-bottom: 0;
1429     padding: 0 1.6em 0 3.2em;
1432 .choosercontainer #chooseform .subtype .typename {
1433     margin: 0 0 0 0.2em;
1435 /* The instruction/help area */
1436 .jschooser .choosercontainer #chooseform .instruction,
1437 .jschooser .choosercontainer #chooseform .typesummary {
1438     display: none;
1439     position: absolute;
1440     top: 0;
1441     right: 0;
1442     bottom: 0;
1443     left: 240px;
1444     margin: 0;
1445     padding: 1.6em;
1446     background-color: #fff;
1447     overflow-x: hidden;
1448     overflow-y: auto;
1449     line-height: 2em;
1451 /* Selected option settings */
1452 .jschooser .choosercontainer #chooseform .instruction,
1453 .choosercontainer #chooseform .selected .typesummary {
1454     display: block;
1457 .choosercontainer #chooseform .selected {
1458     background-color: #fff;
1459     margin-top: -1px;
1460     padding-top: 1px;
1463 .chooserdialogue-course-modchooser .modicon .icon {
1464     width: 24px;
1465     height: 24px;
1466     font-size: 24px;
1469 @include media-breakpoint-down(xs) {
1470     .jsenabled .choosercontainer #chooseform .alloptions {
1471         max-width: 100%;
1472     }
1474     .jsenabled .choosercontainer #chooseform .instruction,
1475     .jsenabled .choosercontainer #chooseform .typesummary {
1476         position: static;
1477     }
1480 /* Form element: listing */
1481 .formlistingradio {
1482     padding-bottom: 25px;
1483     padding-right: 10px;
1486 .formlistinginputradio {
1487     float: left;
1490 .formlistingmain {
1491     min-height: 225px;
1494 .formlisting {
1495     position: relative;
1496     margin: 15px 0;
1497     padding: 1px 19px 14px;
1498     background-color: white;
1499     border: 1px solid #ddd;
1501     @include border-radius(4px);
1504 .formlistingmore {
1505     position: absolute;
1506     cursor: pointer;
1507     bottom: -1px;
1508     right: -1px;
1509     padding: 3px 7px;
1510     font-size: 12px;
1511     font-weight: bold;
1512     background-color: whitesmoke;
1513     border: 1px solid #ddd;
1514     color: #9da0a4;
1516     @include border-radius(4px 0 4px 0);
1519 .formlistingall {
1520     margin: 15px 0;
1521     padding: 0;
1523     @include border-radius(4px);
1526 .formlistingrow {
1527     cursor: pointer;
1528     border-bottom: 1px solid;
1529     border-color: #e1e1e8;
1530     border-left: 1px solid #e1e1e8;
1531     border-right: 1px solid #e1e1e8;
1532     background-color: #f7f7f9;
1534     @include border-radius(0 0 4px 4px);
1535     padding: 6px;
1536     top: 50%;
1537     left: 50%;
1538     min-height: 34px;
1539     float: left;
1540     width: 150px;
1543 body.jsenabled .formlistingradio {
1544     display: none;
1547 body.jsenabled .formlisting {
1548     display: block;
1551 a.criteria-action {
1552     padding: 0 3px;
1553     float: right;
1556 div.criteria-description {
1557     padding: 10px 15px;
1558     margin: 5px 0;
1559     background: none repeat scroll 0 0 #f9f9f9;
1560     border: 1px solid #eee;
1563 ul.badges {
1564     margin: 0;
1565     list-style: none;
1568 .badges li {
1569     position: relative;
1570     display: inline-block;
1571     padding-top: 1em;
1572     text-align: center;
1573     vertical-align: top;
1574     width: 150px;
1577 .badges li .badge-name {
1578     display: block;
1579     padding: 5px;
1582 .badges li > img {
1583     position: absolute;
1586 .badges li .badge-image {
1587     width: 100px;
1588     height: 100px;
1589     left: 10px;
1590     top: 0;
1591     z-index: 1;
1594 .badges li .badge-actions {
1595     position: relative;
1598 .badges li .expireimage {
1599     width: 100px;
1600     height: 100px;
1601     left: 25px;
1602     top: 0;
1603     position: absolute;
1604     z-index: 10;
1605     opacity: 0.85;
1608 #badge-image {
1609     background-color: transparent;
1610     padding: 0;
1611     position: relative;
1612     min-width: 100px;
1613     width: 20%;
1614     display: inline-block;
1615     vertical-align: top;
1616     margin-top: 17px;
1617     margin-bottom: 20px;
1619     .expireimage {
1620         width: 100px;
1621         height: 100px;
1622         left: 0;
1623         top: 0;
1624         opacity: 0.85;
1625         position: absolute;
1626         z-index: 10;
1627     }
1629     .singlebutton {
1630         padding-top: 5px;
1631         display: block;
1633         button {
1634             margin-left: 4px;
1635         }
1636     }
1639 #badge-details {
1640     display: inline-block;
1641     width: 79%;
1644 #badge-overview dl,
1645 #badge-details dl {
1646     margin: 0;
1648     dt,
1649     dd {
1650         vertical-align: top;
1651         padding: 3px 0;
1652     }
1654     dt {
1655         clear: both;
1656         display: inline-block;
1657         width: 20%;
1658         min-width: 100px;
1659     }
1661     dd {
1662         display: inline-block;
1663         width: 79%;
1664         margin-left: 1%;
1665     }
1668 .badge-profile {
1669     vertical-align: top;
1672 .connected {
1673     color: map-get($theme-colors, 'success');
1676 .notconnected {
1677     color: map-get($theme-colors, 'danger');
1680 .connecting {
1681     color: map-get($theme-colors, 'warning');
1684 #page-badges-award .recipienttable tr td {
1685     vertical-align: top;
1688 #page-badges-award .recipienttable tr td.actions .actionbutton {
1689     margin: 0.3em 0;
1690     padding: 0.5em 0;
1691     width: 100%;
1694 #page-badges-award .recipienttable tr td.existing,
1695 #page-badges-award .recipienttable tr td.potential {
1696     width: 42%;
1699 #issued-badge-table .activatebadge {
1700     display: inline-block;
1703 .statusbox.active {
1704     background-color: $state-success-bg;
1707 .statusbox.inactive {
1708     background-color: $state-warning-bg;
1711 .statusbox {
1712     text-align: center;
1713     margin-bottom: 5px;
1714     padding: 5px;
1717 .statusbox .activatebadge {
1718     display: inline-block;
1721 .statusbox .activatebadge input[type=submit] {
1722     margin: 3px;
1725 .activatebadge {
1726     margin: 0;
1727     text-align: left;
1728     vertical-align: middle;
1731 img#persona_signin {
1732     cursor: pointer;
1735 .addcourse {
1736     float: right;
1739 .invisiblefieldset {
1740     display: inline;
1741     padding: 0;
1742     border-width: 0;
1745 /** Page header */
1746 #page-header {
1747     .logo {
1748         margin: $spacer 0;
1749         img {
1750             max-height: 75px;
1751         }
1752     }
1755 /** Navbar logo. */
1756 nav.navbar .logo img {
1757     max-height: 35px;
1760 /** Header-bar styles **/
1761 .page-context-header {
1762     // We need to be explicit about the height of the header.
1763     $pageHeaderHeight: 140px;
1765     // Do not remove these rules.
1766     overflow: hidden;
1768     .page-header-image,
1769     .page-header-headings {
1770         float: left;
1771         display: block;
1772         position: relative;
1773     }
1775     .page-header-image {
1776         margin-right: 1em;
1777         margin-bottom: 1em;
1778     }
1780     .page-header-headings,
1781     .header-button-group {
1782         position: relative;
1783         line-height: 24px;
1784         vertical-align: middle;
1785     }
1787     .header-button-group {
1788         display: block;
1789         float: left;
1791         a {
1792             position: relative;
1794             // Don't touch it unless you know exactly what you are doing.
1795             top: -0.4em;
1796         }
1797     }
1800 ul.dragdrop-keyboard-drag li {
1801     list-style-type: none;
1804 a.disabled:hover,
1805 a.disabled {
1806     text-decoration: none;
1807     cursor: default;
1808     font-style: italic;
1809     color: #808080;
1812 body.lockscroll {
1813     height: 100%;
1814     overflow: hidden;
1817 .progressbar_container {
1818     max-width: 500px;
1819     margin: 0 auto;
1822 /* IE10 only fix for calendar titling */
1823 .ie10 .yui3-calendar-header-label {
1824     display: inline-block;
1827 dd:before,
1828 dd:after {
1829     display: block;
1830     content: " ";
1833 dd:after {
1834     clear: both;
1837 // Active tabs with links should have a different
1838 // cursor to indicate they are clickable.
1839 .nav-tabs > .active > a[href],
1840 .nav-tabs > .active > a[href]:hover,
1841 .nav-tabs > .active > a[href]:focus {
1842     cursor: pointer;
1845 .inplaceeditable {
1846     &.inplaceeditingon {
1847         position: relative;
1849         .editinstructions {
1850             margin-top: -30px;
1851             font-weight: normal;
1852             margin-right: 0;
1853             margin-left: 0;
1854             left: 0;
1855             right: auto;
1856             white-space: nowrap;
1857         }
1859         input {
1860             width: 330px;
1861             vertical-align: text-bottom;
1862             margin-bottom: 0;
1863         }
1865         select {
1866             margin-bottom: 0;
1867         }
1868     }
1870     .quickediticon img {
1871         opacity: 0.2;
1872     }
1874     .quickeditlink {
1875         color: inherit;
1876         text-decoration: inherit;
1877     }
1879     &:hover .quickeditlink .quickediticon img,
1880     .quickeditlink:focus .quickediticon img {
1881         opacity: 1;
1882     }
1884     &.inplaceeditable-toggle .quickediticon {
1885         display: none;
1886     }
1888     &.inplaceeditable-autocomplete {
1889         display: block;
1890     }
1893 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
1894     margin-top: -20px;
1897 /** Chart area. */
1898 .chart-area {
1900     .chart-table-data {
1901         display: none;
1902     }
1904     .chart-table {
1905         .chart-output-htmltable caption {
1906             white-space: nowrap;
1907         }
1908         /** When accessible, we display the table only. */
1909         &.accesshide {
1910             .chart-table-expand {
1911                 display: none;
1912             }
1913             .chart-table-data {
1914                 display: block;
1915             }
1916         }
1917     }
1920 // Reset for ul.
1921 ul {
1922     padding-left: 1rem;
1925 /* YUI 2 Tree View */
1926 /*rtl:raw:
1927 .ygtvtn,
1928 .ygtvtm,
1929 .ygtvtmh,
1930 .ygtvtmhh,
1931 .ygtvtp,
1932 .ygtvtph,
1933 .ygtvtphh,
1934 .ygtvln,
1935 .ygtvlm,
1936 .ygtvlmh,
1937 .ygtvlmhh,
1938 .ygtvlp,
1939 .ygtvlph,
1940 .ygtvlphh,
1941 .ygtvdepthcell,
1942 .ygtvok,
1943 .ygtvok:hover,
1944 .ygtvcancel,
1945 .ygtvcancel:hover {
1946     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
1948 */
1950 .hover-tooltip-container {
1951     position: relative;
1953     .hover-tooltip {
1954         opacity: 0;
1955         visibility: hidden;
1956         position: absolute;
1957         /*rtl:ignore*/
1958         left: 50%;
1959         top: calc(-50% - 5px);
1960         transform: translate(-50%, -50%);
1961         background-color: #fff;
1962         border: 1px solid rgba(0, 0, 0, .2);
1963         border-radius: .3rem;
1964         box-sizing: border-box;
1965         padding: 5px;
1966         white-space: nowrap;
1967         transition: opacity 0.15s, visibility 0.15s;
1968         z-index: 1000;
1970         &:before {
1971             content: '';
1972             display: inline-block;
1973             border-left: 8px solid transparent;
1974             border-right: 8px solid transparent;
1975             border-top: 8px solid rgba(0, 0, 0, .2);
1976             position: absolute;
1977             bottom: -8px;
1978             left: calc(50% - 8px);
1979         }
1981         &:after {
1982             content: '';
1983             display: inline-block;
1984             border-left: 7px solid transparent;
1985             border-right: 7px solid transparent;
1986             border-top: 7px solid #fff;
1987             position: absolute;
1988             bottom: -6px;
1989             left: calc(50% - 7px);
1990             z-index: 2;
1991         }
1992     }
1994     &:hover {
1995         .hover-tooltip {
1996             opacity: 1;
1997             visibility: visible;
1998             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
1999         }
2000     }
2003 #region-flat-nav {
2004     padding-right: 0;
2005     padding-left: 0;
2006     .nav {
2007         margin-right: $grid-gutter-width / 2;
2008         background-color: $card-bg;
2009     }
2010     @include media-breakpoint-down(sm) {
2011         .nav {
2012             margin-top: $grid-gutter-width;
2013             margin-right: 0;
2014         }
2015     }
2018 // Footer link colour was added to allow the colour of footer links to be changed,
2019 // but really in bootstrap we want the colour of links on .bg-inverse to be changed
2020 // rather than being specific to the footer. This is kept for backwards compatibility.
2021 $footer-link-color: $bg-inverse-link-color !default;
2022 #page-footer a {
2023     color: $footer-link-color;
2024     text-decoration: underline;
2025     .icon {
2026         color: $footer-link-color;
2027     }
2030 .bg-inverse a {
2031     color: $bg-inverse-link-color;
2032     text-decoration: underline;
2033     .icon {
2034         color: $bg-inverse-link-color;
2035     }
2038 .sitelink {
2039     img {
2040         width: 112px;
2041     }
2044 // Make links in a menu clickable anywhere in the row.
2045 .dropdown-item a {
2046     display: block;
2047     width: 100%;
2048     color: $body-color;
2050 .dropdown-item:active a {
2051     color: $dropdown-link-active-color;
2054 .competency-tree {
2055     ul {
2056         padding-left: 1.5rem;
2057     }
2060 .sr-only-focusable {
2061     &:active,
2062     &:focus {
2063         z-index: $zindex-navbar-fixed + 1;
2064         position: fixed;
2065         background: #fff;
2066         padding: 7px;
2067         left: 0;
2068         top: 0;
2069     }
2072 [data-drag-type="move"] {
2073     cursor: move;
2074     touch-action: none;
2077 .clickable {
2078     cursor: pointer;
2081 .overlay-icon-container {
2082     position: absolute;
2083     top: 0;
2084     left: 0;
2085     width: 100%;
2086     height: 100%;
2087     background-color: rgba(255, 255, 255, 0.6);
2089     .loading-icon {
2090         position: absolute;
2091         top: 50%;
2092         left: 50%;
2093         transform: translate(-50%, -50%);
2095         .icon {
2096             height: 30px;
2097             width: 30px;
2098             font-size: 30px;
2099         }
2100     }
2103 .open.atto_menu > .dropdown-menu {
2104     display: block;
2106 div.editor_atto_toolbar button .icon {
2107     color: $gray-700;
2109 .w-auto {
2110     width: auto;
2113 .bg-pulse-grey {
2114     animation: bg-pulse-grey 2s infinite linear;
2117 @keyframes bg-pulse-grey {
2118     0% {
2119         background-color: $gray-100;
2120     }
2121     50% {
2122         background-color: darken($gray-100, 5%);
2123     }
2124     100% {
2125         background-color: $gray-100;
2126     }
2129 @each $size, $length in $spacers {
2130     .line-height-#{$size} {
2131         line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2132     }
2135 .dir-rtl {
2136     .dir-rtl-hide {
2137         display: none;
2138     }
2141 .dir-ltr {
2142     .dir-ltr-hide {
2143         display: none;
2144     }
2147 .paged-content-page-container {
2148     min-height: 3.125rem;
2151 body.h5p-embed {
2152     #page-content {
2153         display: inherit;
2154     }
2155     #maincontent {
2156         display: none;
2157     }
2158     .h5pmessages {
2159         min-height: 230px; // This should be the same height as default core_h5p iframes.
2160     }
2163 .text-decoration-none {
2164     text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
2167 .colour-inherit {
2168     color: inherit !important; /* stylelint-disable-line declaration-no-important */
2171 .position-right {
2172     right: 0 !important; /* stylelint-disable-line declaration-no-important */
2175 .overflow-hidden {
2176     overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
2179 .text-break {
2180     overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
2183 .z-index-1 {
2184     z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
2187 // These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
2188 .float-left {
2189     float: left !important; /* stylelint-disable-line declaration-no-important */
2191 .float-right {
2192     float: right !important; /* stylelint-disable-line declaration-no-important */
2195 // Emoji picker.
2196 $picker-width: 350px !default;
2197 $picker-width-xs: 320px !default;
2198 $picker-height: 400px !default;
2199 $picker-row-height: 40px !default;
2200 $picker-emoji-button-size: 40px !default;
2201 $picker-emoji-button-font-size: 24px !default;
2202 $picker-emoji-category-count: 9 !default;
2203 $picker-emojis-per-row: 7 !default;
2205 .emoji-picker {
2206     width: $picker-width;
2207     height: $picker-height;
2209     .category-button {
2210         padding: .375rem 0;
2211         height: 100%;
2212         width: $picker-width / $picker-emoji-category-count;
2213         border-top: none;
2214         border-left: none;
2215         border-right: none;
2216         border-bottom: 2px solid transparent;
2218         &.selected {
2219             border-bottom: 2px solid map-get($theme-colors, 'primary');
2220         }
2221     }
2223     .emojis-container,
2224     .search-results-container {
2225         min-width: $picker-emojis-per-row * $picker-emoji-button-size;
2226     }
2228     .picker-row {
2229         height: $picker-row-height;
2231         .category-name {
2232             line-height: $picker-row-height;
2233         }
2235         .emoji-button {
2236             height: $picker-emoji-button-size;
2237             width: $picker-emoji-button-size;
2238             line-height: $picker-emoji-button-size;
2239             font-size: $picker-emoji-button-font-size;
2240             overflow: hidden;
2242             @include hover-focus {
2243                 color: inherit;
2244                 text-decoration: none;
2245             }
2246         }
2247     }
2249     .emoji-preview {
2250         height: $picker-row-height;
2251         font-size: $picker-row-height;
2252         line-height: $picker-row-height;
2253     }
2255     .emoji-short-name {
2256         line-height: $picker-row-height / 2;
2257     }
2259     @include media-breakpoint-down(xs) {
2260         width: $picker-width-xs;
2261     }
2264 .emoji-auto-complete {
2265     height: $picker-row-height;
2267     .btn.btn-link.btn-icon.emoji-button {
2268         height: $picker-emoji-button-size;
2269         width: $picker-emoji-button-size;
2270         line-height: $picker-emoji-button-size;
2271         font-size: $picker-emoji-button-font-size;
2273         &.active {
2274             background-color: $gray-200;
2275         }
2276     }
2279 .toast-wrapper {
2280     max-width: $toast-max-width;
2281     max-height: 0;
2282     // Place these above any modals and other elements.
2283     z-index: 1051;