MDL-68209 core_course: improve activity chooser styling
[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     background-color: $body-bg;
12 }
14 @include media-breakpoint-up(sm) {
15     #region-main {
16         border: $card-border-width solid $card-border-color;
17         @if $enable-rounded {
18             @include border-radius($card-border-radius);
19         }
20         padding: $card-spacer-x;
21     }
22 }
24 @include media-breakpoint-up(sm) {
25     .context-header-settings-menu,
26     .region-main-settings-menu {
27         float: right;
28         width: auto;
29         max-width: 4em;
30         height: 2em;
31         display: block;
32         margin-top: 4px;
33     }
34 }
36 @include media-breakpoint-down(sm) {
37     .context-header-settings-menu,
38     .region-main-settings-menu {
39         display: flex;
40         justify-content: flex-end;
41     }
42 }
44 $gototop-bottom-position: 50px !default;
46 #goto-top-link {
47     visibility: hidden;
48     opacity: 0;
49     transition: opacity .7s ease 0s, visibility .1s ease .8s;
50     display: block;
51     position: fixed; /* IE compatibility hack */
52     @supports (position: sticky) {
53         position: sticky;
54     }
55     @supports (-ms-ime-align:auto) {
56         position: fixed; /* Edge compatibility hack */
57     }
58     bottom: $gototop-bottom-position;
59     right: 0;
60     a {
61         position: absolute;
62         right: 0;
63         transform: translateY(-100%);
64     }
65 }
67 @include media-breakpoint-down(sm) {
68     #goto-top-link {
69         bottom: 0;
70     }
71 }
73 body.scrolled #goto-top-link {
74     opacity: 1;
75     visibility: visible;
76     transition: visibility 0s ease 0s, opacity .7s ease .1s;
77 }
79 .context-header-settings-menu .dropdown-toggle > .icon,
80 #region-main-settings-menu .dropdown-toggle > .icon {
81     height: 24px;
82     font-size: 24px;
83     width: auto;
84 }
85 /** Prevent user notifications overlapping with region main settings menu */
86 #user-notifications {
87     display: block;
88     overflow: hidden;
89 }
91 /** Page layout CSS starts **/
92 .layout-option-noheader #page-header,
93 .layout-option-nonavbar #page-navbar,
94 .layout-option-nofooter #page-footer,
95 .layout-option-nocourseheader .course-content-header,
96 .layout-option-nocoursefooter .course-content-footer {
97     display: none;
98 }
100 /** Page layout CSS ends **/
102 .mdl-left {
103     text-align: left;
106 .mdl-right {
107     text-align: right;
110 /*rtl:ignore*/
111 .text-ltr {
112     direction: ltr !important; /* stylelint-disable-line declaration-no-important */
115 #add,
116 #remove,
117 .centerpara,
118 .mdl-align {
119     text-align: center;
122 a.dimmed,
123 a.dimmed:link,
124 a.dimmed:visited,
125 a.dimmed_text,
126 a.dimmed_text:link,
127 a.dimmed_text:visited,
128 .dimmed_text,
129 .dimmed_text a,
130 .dimmed_text a:link,
131 .dimmed_text a:visited,
132 .usersuspended,
133 .usersuspended a,
134 .usersuspended a:link,
135 .usersuspended a:visited,
136 .dimmed_category,
137 .dimmed_category a {
138     color: $text-muted;
141 .unlist,
142 .unlist li,
143 .inline-list,
144 .inline-list li,
145 .block .list,
146 .block .list li,
147 .section li.activity,
148 .section li.movehere,
149 .tabtree li {
150     list-style: none;
151     margin: 0;
152     padding: 0;
155 .inline,
156 .inline-list li {
157     display: inline;
160 .notifytiny {
161     font-size: $font-size-xs;
164 .notifytiny li,
165 .notifytiny td {
166     font-size: 100%;
169 .red,
170 .notifyproblem {
171     color: map-get($theme-colors, 'warning');
174 .green,
175 .notifysuccess {
176     color: map-get($theme-colors, 'success');
179 .highlight {
180     color: map-get($theme-colors, 'info');
183 .fitem.advanced .text-info {
184     font-weight: bold;
187 .reportlink {
188     text-align: right;
191 a.autolink.glossary:hover {
192     cursor: help;
194 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
195 .collapsibleregioncaption {
196     white-space: nowrap;
197     min-height: $line-height-base * $font-size-base;
200 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
201     cursor: pointer;
204 .pagelayout-mydashboard #region-main {
205     border: 0;
206     padding: 0;
207     background-color: transparent;
208     margin-top: -1px;
211 @include media-breakpoint-down(sm) {
212     .pagelayout-mydashboard,
213     .pagelayout-login {
214         #region-main-box {
215             padding-left: 0;
216             padding-right: 0;
217         }
218     }
221 .collapsibleregioncaption img {
222     vertical-align: middle;
225 .jsenabled .hiddenifjs {
226     display: none;
229 .visibleifjs {
230     display: none;
233 .jsenabled .visibleifjs {
234     display: inline;
237 .jsenabled .collapsibleregion {
238     overflow: hidden;
239     box-sizing: content-box;
242 .jsenabled .collapsed .collapsibleregioninner {
243     visibility: hidden;
246 .collapsible-actions {
247     display: none;
248     text-align: right;
251 .jsenabled .collapsible-actions {
252     display: block;
255 .collapsible-actions .collapseexpand {
256     padding-left: 20px;
257     background: url([[pix:t/collapsed]]) 2px center no-repeat;
259 /*rtl:raw:
260 .collapsible-actions .collapseexpand {
261     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
263 */
264 .collapsible-actions .collapse-all {
265     background-image: url([[pix:t/expanded]]);
268 .yui-overlay .yui-widget-bd {
269     background-color: #ffee69;
270     border: 1px solid #a6982b;
271     border-top-color: #d4c237;
272     color: #000;
273     left: 0;
274     padding: 2px 5px;
275     position: relative;
276     top: 0;
277     z-index: 1;
280 .clearer {
281     background: transparent;
282     border-width: 0;
283     clear: both;
284     display: block;
285     height: 1px;
286     margin: 0;
287     padding: 0;
290 .bold,
291 .warning,
292 .errorbox .title,
293 .pagingbar .title,
294 .pagingbar .thispage {
295     font-weight: bold;
298 img.userpicture {
299     margin-right: 0.5rem;
302 img.resize {
303     height: 1em;
304     width: 1em;
307 .action-menu .dropdown-toggle {
308     text-decoration: none;
311 .action-menu {
312     white-space: nowrap;
315 .block img.resize {
316     height: 0.9em;
317     width: 0.8em;
319 /* Icon styles */
320 img.activityicon {
321     height: 24px;
322     width: 24px;
323     vertical-align: middle;
326 .headermain {
327     font-weight: bold;
330 #maincontent {
331     display: block;
332     height: 1px;
333     overflow: hidden;
336 img.uihint {
337     cursor: help;
340 #addmembersform table {
341     margin-left: auto;
342     margin-right: auto;
345 table.flexible .emptyrow {
346     display: none;
349 form.popupform,
350 form.popupform div {
351     display: inline;
354 .arrow_button input {
355     overflow: hidden;
357 .no-overflow {
358     overflow: auto;
361 // Minimum height required for a menu in a table inside a scrollable div.
362 // Position required for table sizing inside a flex container.
363 .no-overflow > .generaltable {
364     position: relative;
365     margin-bottom: 0;
366     min-height: 10em;
368 // Accessibility features
370 // Accessibility: text 'seen' by screen readers but not visual users.
371 .accesshide {
372     @include sr-only();
375 span.hide,
376 div.hide,
377 .hidden {
378     display: none;
380 // Accessibility: Skip block link, for keyboard-only users.
381 a.skip-block,
382 a.skip {
383     position: absolute;
384     top: -1000em;
385     font-size: 0.85em;
386     text-decoration: none;
389 a.skip-block:focus,
390 a.skip-block:active,
391 a.skip:focus,
392 a.skip:active {
393     position: static;
394     display: block;
397 .skip-block-to {
398     display: block;
399     height: 1px;
400     overflow: hidden;
402 // Blogs
403 .addbloglink {
404     text-align: center;
407 .blog_entry .audience {
408     text-align: right;
409     padding-right: 4px;
412 .blog_entry .tags {
413     margin-top: 15px;
416 .blog_entry .content {
417     margin-left: 43px;
419 // Group
421 #doc-contents h1 {
422     margin: 1em 0 0 0;
425 #doc-contents ul {
426     margin: 0;
427     padding: 0;
428     width: 90%;
431 #doc-contents ul li {
432     list-style-type: none;
435 .groupmanagementtable td {
436     vertical-align: top;
439 .groupmanagementtable #existingcell,
440 .groupmanagementtable #potentialcell {
441     width: 42%;
444 .groupmanagementtable #buttonscell {
445     width: 16%;
448 .groupmanagementtable #buttonscell p.arrow_button input {
449     width: auto;
450     min-width: 80%;
451     margin: 0 auto;
452     display: block;
455 .groupmanagementtable #removeselect_wrapper,
456 .groupmanagementtable #addselect_wrapper {
457     width: 100%;
460 .groupmanagementtable #removeselect_wrapper label,
461 .groupmanagementtable #addselect_wrapper label {
462     font-weight: normal;
465 #group-usersummary {
466     width: 14em;
469 .groupselector {
470     margin-top: 3px;
471     margin-bottom: 3px;
472     display: inline-block;
475 .groupselector label {
476     display: inline-block;
479 // Login
480 .login-page {
481     [name="username"] {
482         margin-bottom: -1px;
483         border-bottom-right-radius: 0;
484         border-bottom-left-radius: 0;
485     }
487     [type="password"] {
488         margin-bottom: 10px;
489         border-top-left-radius: 0;
490         border-top-right-radius: 0;
491     }
494 // Notes
495 .notepost {
496     margin-bottom: 1em;
499 .notepost .userpicture {
500     float: left;
501     margin-right: 5px;
504 .notepost .content,
505 .notepost .footer {
506     clear: both;
509 .notesgroup {
510     margin-left: 20px;
513 // My Moodle
514 .path-my .coursebox {
515     margin: $spacer-y 0;
516     padding: 0;
518     .overview {
519         margin: 15px 30px 10px 30px;
520     }
523 .path-my .coursebox .info {
524     float: none;
525     margin: 0;
528 // Modules
529 .mod_introbox {
530     padding: 10px;
533 table.mod_index {
534     width: 100%;
537 // Comments
538 .comment-ctrl {
539     font-size: 12px;
540     display: none;
541     margin: 0;
542     padding: 0;
545 .comment-ctrl h5 {
546     margin: 0;
547     padding: 5px;
550 .comment-area {
551     max-width: 400px;
552     padding: 5px;
555 .comment-area textarea {
556     width: 100%;
557     overflow: auto;
559     &.fullwidth {
560         -webkit-box-sizing: border-box;
561         -moz-box-sizing: border-box;
562         box-sizing: border-box;
563     }
566 .comment-area .fd {
567     text-align: right;
570 .comment-meta span {
571     color: gray;
574 .comment-link img {
575     vertical-align: text-bottom;
578 .comment-list {
579     font-size: 11px;
580     overflow: auto;
581     list-style: none;
582     padding: 0;
583     margin: 0;
586 .comment-list li {
587     margin: 2px;
588     list-style: none;
589     margin-bottom: 5px;
590     clear: both;
591     padding: .3em;
592     position: relative;
595 .comment-list li.first {
596     display: none;
599 .comment-paging {
600     text-align: center;
603 .comment-paging .pageno {
604     padding: 2px;
607 .comment-paging .curpage {
608     border: 1px solid #ccc;
611 .comment-message .picture {
612     width: 20px;
613     float: left;
616 .comment-message .text {
617     margin: 0;
618     padding: 0;
621 .comment-message .text p {
622     padding: 0;
623     margin: 0 18px 0 0;
626 .comment-delete {
627     position: absolute;
628     top: 0;
629     right: 0;
630     margin: .3em;
633 .comment-report-selectall {
634     display: none;
637 .comment-link {
638     display: none;
641 .jsenabled .comment-link {
642     display: block;
645 .jsenabled .showcommentsnonjs {
646     display: none;
649 .jsenabled .comment-report-selectall {
650     display: inline;
652 /**
653 * Completion progress report
654 */
655 .completion-expired {
656     color: map-get($theme-colors, 'warning');
659 .completion-expected {
660     font-size: $font-size-xs;
663 .completion-sortchoice,
664 .completion-identifyfield {
665     font-size: $font-size-xs;
666     vertical-align: bottom;
669 .completion-progresscell {
670     text-align: right;
673 .completion-expired .completion-expected {
674     font-weight: bold;
676 /**
677 * Tags
678 */
679 img.user-image {
680     height: 100px;
681     width: 100px;
684 #tag-search-box {
685     text-align: center;
686     margin: 10px auto;
689 .path-tag .tag-index-items .tagarea {
690     border: 1px solid #e3e3e3;
691     border-radius: 4px;
692     padding: 10px;
693     margin-top: 10px;
696 .path-tag .tag-index-items .tagarea h3 {
697     display: block;
698     padding: 3px 0 10px 0;
699     margin: 0;
700     font-size: 1.1em;
701     font-weight: bold;
702     line-height: 20px;
703     color: #999;
704     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
705     text-transform: uppercase;
706     word-wrap: break-word;
707     border-bottom: solid 1px #e3e3e3;
708     margin-bottom: 10px;
711 .path-tag .tagarea .controls,
712 .path-tag .tagarea .taggeditems {
713     @include clearfix();
716 .path-tag .tagarea .controls,
717 .path-tag .tag-backtoallitems {
718     text-align: center;
721 .path-tag .tagarea .controls .gotopage.nextpage {
722     float: right;
725 .path-tag .tagarea .controls .gotopage.prevpage {
726     float: left;
729 .path-tag .tagarea .controls .exclusivemode {
730     display: inline-block;
733 .path-tag .tagarea .controls.controls-bottom {
734     margin-top: 5px;
737 .path-tag .tagarea .controls .gotopage.nextpage::after {
738     padding-right: 5px;
739     padding-left: 5px;
740     content: "»";
743 .path-tag .tagarea .controls .gotopage.prevpage::before {
744     padding-right: 5px;
745     padding-left: 5px;
746     content: "«";
749 span.flagged-tag,
750 tr.flagged-tag,
751 span.flagged-tag a,
752 tr.flagged-tag a {
753     color: map-get($theme-colors, 'warning');
756 .tag-management-table td,
757 .tag-management-table th {
758     vertical-align: middle;
759     padding: 4px;
762 .tag-management-table .inplaceeditable.inplaceeditingon input {
763     width: 150px;
766 .path-admin-tag .addstandardtags {
767     float: right;
769     img {
770         margin: 0 5px;
771     }
774 .path-tag .tag-relatedtags {
775     padding-top: 10px;
778 .path-tag .tag-management-box {
779     text-align: right;
782 .path-tag .tag-index-toc {
783     padding: 10px;
784     text-align: center;
787 .path-tag .tag-index-toc li,
788 .path-tag .tag-management-box li {
789     margin-left: 5px;
790     margin-right: 5px;
793 .path-tag .tag-management-box li a.edittag {
794     background-image: url([[pix:moodle|i/settings]]);
797 .path-tag .tag-management-box li a.flagasinappropriate {
798     background-image: url([[pix:moodle|i/flagged]]);
801 .path-tag .tag-management-box li a.removefrommyinterests {
802     background-image: url([[pix:moodle|t/delete]]);
805 .path-tag .tag-management-box li a.addtomyinterests {
806     background-image: url([[pix:moodle|t/add]]);
809 .path-tag .tag-management-box li a {
810     background-repeat: no-repeat;
811     background-position: left;
812     padding-left: 17px;
815 .tag_feed.media-list .media .itemimage {
816     float: left;
819 .tag_feed.media-list .media .itemimage img {
820     height: 35px;
821     width: 35px;
824 .tag_feed.media-list .media .media-body {
825     padding-right: 10px;
826     padding-left: 10px;
829 .tag_feed .media .muted a {
830     color: $text-muted;
833 .tag_cloud {
834     text-align: center;
837 .tag_cloud .inline-list li {
838     padding: 0 0.2em;
841 .tag_cloud .tag_overflow {
842     margin-top: 1em;
843     font-style: italic;
846 .tag_cloud .s20 {
847     font-size: 2.7em;
850 .tag_cloud .s19 {
851     font-size: 2.6em;
854 .tag_cloud .s18 {
855     font-size: 2.5em;
858 .tag_cloud .s17 {
859     font-size: 2.4em;
862 .tag_cloud .s16 {
863     font-size: 2.3em;
866 .tag_cloud .s15 {
867     font-size: 2.2em;
870 .tag_cloud .s14 {
871     font-size: 2.1em;
874 .tag_cloud .s13 {
875     font-size: 2em;
878 .tag_cloud .s12 {
879     font-size: 1.9em;
882 .tag_cloud .s11 {
883     font-size: 1.8em;
886 .tag_cloud .s10 {
887     font-size: 1.7em;
890 .tag_cloud .s9 {
891     font-size: 1.6em;
894 .tag_cloud .s8 {
895     font-size: 1.5em;
898 .tag_cloud .s7 {
899     font-size: 1.4em;
902 .tag_cloud .s6 {
903     font-size: 1.3em;
906 .tag_cloud .s5 {
907     font-size: 1.2em;
910 .tag_cloud .s4 {
911     font-size: 1.1em;
914 .tag_cloud .s3 {
915     font-size: 1em;
918 .tag_cloud .s2 {
919     font-size: 0.9em;
922 .tag_cloud .s1 {
923     font-size: 0.8em;
926 .tag_cloud .s0 {
927     font-size: 0.7em;
930 .tag_list ul {
931     display: inline;
934 .tag_list.hideoverlimit .overlimit {
935     display: none;
938 .tag_list .tagmorelink {
939     display: none;
942 .tag_list.hideoverlimit .tagmorelink {
943     display: inline;
946 .tag_list.hideoverlimit .taglesslink {
947     display: none;
950 /**
951 * Web Service
952 */
953 #webservice-doc-generator td {
954     text-align: left;
955     border: 0 solid black;
958 /**
959 * Enrol
960 */
961 .userenrolment {
962     width: 100%;
963     border-collapse: collapse;
966 .userenrolment tr {
967     vertical-align: top;
970 .userenrolment td {
971     padding: 0;
972     height: 41px;
975 .userenrolment .subfield {
976     margin-right: 5px;
979 .userenrolment .col_userdetails .subfield {
980     margin-left: 40px;
983 .userenrolment .col_userdetails .subfield_picture {
984     float: left;
985     margin-left: 0;
988 .userenrolment .col_lastseen {
989     width: 150px;
992 .userenrolment .col_role {
993     width: 262px;
996 .userenrolment .col_role .roles,
997 .userenrolment .col_group .groups {
998     margin-right: 30px;
1001 .userenrolment .col_role .role {
1002     float: left;
1003     padding: 0 3px 3px;
1004     margin: 0 3px 3px;
1005     white-space: nowrap;
1008 .userenrolment .col_group .group {
1009     float: left;
1010     padding: 3px;
1011     margin: 3px;
1012     white-space: nowrap;
1015 .userenrolment .col_role .role a,
1016 .userenrolment .col_group .group a {
1017     margin-left: 3px;
1018     cursor: pointer;
1021 .userenrolment .col_role .addrole,
1022 .userenrolment .col_group .addgroup {
1023     float: right;
1024     padding: 3px;
1025     margin: 3px;
1027     > a:hover {
1028         border-bottom: 1px solid #666;
1029     }
1032 .userenrolment .col_role .addrole img,
1033 .userenrolment .col_group .addgroup img {
1034     vertical-align: baseline;
1037 .userenrolment .hasAllRoles .col_role .addrole {
1038     display: none;
1041 .userenrolment .col_enrol .enrolment {
1042     float: left;
1043     padding: 0 3px 3px;
1044     margin: 0 3px 3px;
1047 .userenrolment .col_enrol .enrolment a {
1048     float: right;
1049     margin-left: 3px;
1052 .corelightbox {
1053     background-color: #ccc;
1054     position: absolute;
1055     top: 0;
1056     left: 0;
1057     width: 100%;
1058     height: 100%;
1059     text-align: center;
1062 .corelightbox img {
1063     position: fixed;
1064     top: 50%;
1065     left: 50%;
1068 .mod-indent-outer {
1069     display: table;
1072 .mod-indent {
1073     display: table-cell;
1076 .label .mod-indent {
1077     float: left;
1078     padding-top: 20px;
1081 @include media-breakpoint-up(sm) {
1082     $mod-indent-size: 30px;
1083     /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1085     @for $i from 1 through 16 {
1086         $width: ($i * $mod-indent-size);
1088         .mod-indent-#{$i} {
1089             width: $width;
1090         }
1091     }
1093     .mod-indent-huge {
1094         width: (16 * $mod-indent-size);
1095     }
1098 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1099 .resourcecontent .mediaplugin_mp3 object {
1100     height: 25px;
1101     width: 600px;
1104 .resourcecontent audio.mediaplugin_html5audio {
1105     width: 600px;
1107 /** Large resource images should avoid hidden overflow **/
1108 .resourceimage {
1109     max-width: 100%;
1111 /* Audio player size in 'inline' mode (can only change width, as above) */
1112 .mediaplugin_mp3 object {
1113     height: 15px;
1114     width: 300px;
1117 audio.mediaplugin_html5audio {
1118     width: 300px;
1120 /* TinyMCE moodle media preview frame should not have padding */
1121 .core_media_preview.pagelayout-embedded #content {
1122     padding: 0;
1125 .core_media_preview.pagelayout-embedded #maincontent {
1126     height: 0;
1129 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1130     padding: 0;
1131     margin: 0;
1132     min-width: 0;
1133     background: none;
1136 .path-rating .ratingtable {
1137     width: 100%;
1138     margin-bottom: 1em;
1141 .path-rating .ratingtable th.rating {
1142     width: 100%;
1145 .path-rating .ratingtable td.rating,
1146 .path-rating .ratingtable td.time {
1147     white-space: nowrap;
1148     text-align: center;
1151 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1152 .moodle-dialogue-base .moodle-dialogue-lightbox {
1153     background-color: $gray;
1156 // Prevent adding backdrops to popups in popups.
1157 .pagelayout-popup {
1158     .moodle-dialogue-base {
1159         .moodle-dialogue-lightbox {
1160             background-color: transparent;
1161         }
1162         .moodle-dialogue {
1163             box-shadow: $popover-box-shadow;
1164         }
1165     }
1168 .moodle-dialogue-base .hidden,
1169 .moodle-dialogue-base .moodle-dialogue-hidden {
1170     display: none;
1173 .no-scrolling {
1174     overflow: hidden;
1177 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1178     left: 0;
1179     top: 0;
1180     right: 0;
1181     bottom: -50px;
1182     position: fixed;
1185 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1186     overflow: auto;
1189 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1190     width: 28px;
1191     height: 16px;
1192     background-size: 100%;
1195 .moodle-dialogue-base .moodle-dialogue-wrap {
1196     background-color: #fff;
1197     border: 1px solid #ccc;
1200 // Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1201 // it for a reason (conflicts with jquery .show()).
1202 .modal.show {
1203     display: block;
1206 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1207     display: flex;
1208     padding: 1rem 1rem;
1209     border-bottom: 1px solid #dee2e6;
1212 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1213     // Undo some YUI damage.
1214     min-height: 3rem;
1215     color: initial;
1216     background: initial;
1217     font-size: 1.5rem;
1218     line-height: 1.5;
1221 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1222     font-size: 1.5rem;
1225 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1226     /*rtl:raw:
1227         left: 0;
1228         right: auto;
1229     */
1230     padding: 0;
1231     position: relative;
1232     margin-left: auto;
1235 .moodle-dialogue-base .closebutton {
1236     padding: $modal-header-padding;
1237     margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
1238     position: relative;
1239     background-color: transparent;
1240     border: 0;
1241     background-image: none;
1242     box-shadow: none;
1243     opacity: 0.7;
1244     &:hover,
1245     &:active {
1246         opacity: 1;
1247     }
1248     &::after {
1249         content: "×";
1250     }
1253 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1254     padding: 0.5rem;
1255     body {
1256         background-color: $body-bg;
1257     }
1260 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1261     overflow: auto;
1262     position: absolute;
1263     top: 0;
1264     bottom: 50px;
1265     left: 0;
1266     right: 0;
1267     margin: 0;
1268     border: 0;
1271 .moodle-dialogue-exception .moodle-exception-param label {
1272     font-weight: bold;
1275 .moodle-dialogue-exception .param-stacktrace label {
1276     background-color: #eee;
1277     border: 1px solid #ccc;
1278     border-bottom-width: 0;
1281 .moodle-dialogue-exception .param-stacktrace pre {
1282     border: 1px solid #ccc;
1283     background-color: #fff;
1286 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1287     color: navy;
1288     font-size: $font-size-sm;
1291 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1292     color: map-get($theme-colors, 'warning');
1293     font-size: $font-size-sm;
1296 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1297     color: #333;
1298     font-size: 90%;
1299     border-bottom: 1px solid #eee;
1302 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1303     display: none;
1306 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1307     // Undo some YUI damage.
1308     background: initial;
1311 .moodle-dialogue-confirm .confirmation-message {
1312     margin: 0.5rem 0;
1315 .moodle-dialogue-confirm .confirmation-dialogue input {
1316     min-width: 80px;
1319 .moodle-dialogue-exception .moodle-exception-message {
1320     margin: 1em;
1323 .moodle-dialogue-exception .moodle-exception-param {
1324     margin-bottom: 0.5em;
1327 .moodle-dialogue-exception .moodle-exception-param label {
1328     width: 150px;
1331 .moodle-dialogue-exception .param-stacktrace label {
1332     display: block;
1333     margin: 0;
1334     padding: 4px 1em;
1337 .moodle-dialogue-exception .param-stacktrace pre {
1338     display: block;
1339     height: 200px;
1340     overflow: auto;
1343 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1344     display: inline-block;
1345     margin: 4px 0;
1348 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1349     display: inline-block;
1350     width: 50px;
1351     margin: 4px 1em;
1354 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1355     padding-left: 25px;
1356     margin-bottom: 4px;
1357     padding-bottom: 4px;
1360 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1361     opacity: 0.75;
1362     width: 100%;
1363     height: 100%;
1364     top: 0;
1365     left: 0;
1366     background-color: white;
1367     text-align: center;
1368     padding: 10% 0;
1370 /* Apply a default max-height on tooltip text */
1371 .moodle-dialogue .tooltiptext {
1372     max-height: 300px;
1375 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1376     z-index: 3001;
1378     .moodle-dialogue-bd {
1379         overflow: auto;
1380     }
1383 /**
1384  * Chooser Dialogues (moodle-core-chooserdialogue)
1385  *
1386  * This CSS belong to the chooser dialogue which should work both with, and
1387  * without javascript enabled
1388  */
1389 /* Hide the dialog and it's title */
1390 .chooserdialoguebody,
1391 .choosertitle {
1392     display: none;
1395 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1396     margin: 0;
1399 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1400     padding: 0;
1401     background: #f2f2f2;
1403     @include border-bottom-radius(10px);
1405 /* Center the submit buttons within the area */
1406 .choosercontainer #chooseform .submitbuttons {
1407     padding: 0.7em 0;
1408     text-align: right;
1410 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1412 @media (max-height: 639px) {
1413     .ios .choosercontainer #chooseform .submitbuttons {
1414         padding: 45px 0;
1415     }
1418 .choosercontainer #chooseform .submitbuttons input {
1419     min-width: 100px;
1420     margin: 0 0.5em;
1422 /* Various settings for the options area */
1423 .choosercontainer #chooseform .options {
1424     position: relative;
1425     border-bottom: 1px solid #bbb;
1427 /* Only set these options if we're showing the js container */
1428 .jschooser .choosercontainer #chooseform .alloptions {
1429     overflow-x: hidden;
1430     overflow-y: auto;
1431     max-width: 240px;
1433     .option {
1434         input[type=radio] {
1435             display: inline-block;
1436         }
1438         .typename {
1439             display: inline-block;
1440             width: 55%;
1441         }
1442     }
1444 /* Settings for option rows and option subtypes */
1445 .choosercontainer #chooseform .moduletypetitle,
1446 .choosercontainer #chooseform .option,
1447 .choosercontainer #chooseform .nonoption {
1448     margin-bottom: 0;
1449     padding: 0 1.6em 0 1.6em;
1452 .choosercontainer #chooseform .moduletypetitle {
1453     text-transform: uppercase;
1454     padding-top: 1.2em;
1455     padding-bottom: 0.4em;
1456     margin-bottom: 0.5rem;
1457     font-size: 100%;
1460 .choosercontainer #chooseform .option .typename,
1461 .choosercontainer #chooseform .nonoption .typename {
1462     padding: 0 0 0 0.5em;
1465 .choosercontainer #chooseform .modicon + .typename {
1466     padding-left: 0;
1469 .choosercontainer #chooseform .option input[type=radio],
1470 .choosercontainer #chooseform .option span.typename {
1471     vertical-align: middle;
1474 .choosercontainer #chooseform .option label {
1475     display: block;
1476     margin: 0;
1477     padding: ($spacer / 2) 0;
1478     border-bottom: 1px solid #fff;
1481 .choosercontainer #chooseform .option .icon {
1482     margin: 0;
1483     padding: 0 $spacer;
1486 .choosercontainer #chooseform .nonoption {
1487     padding-left: 2.7em;
1488     padding-top: 0.3em;
1489     padding-bottom: 0.1em;
1492 .choosercontainer #chooseform .subtype {
1493     margin-bottom: 0;
1494     padding: 0 1.6em 0 3.2em;
1497 .choosercontainer #chooseform .subtype .typename {
1498     margin: 0 0 0 0.2em;
1500 /* The instruction/help area */
1501 .jschooser .choosercontainer #chooseform .instruction,
1502 .jschooser .choosercontainer #chooseform .typesummary {
1503     display: none;
1504     position: absolute;
1505     top: 0;
1506     right: 0;
1507     bottom: 0;
1508     left: 240px;
1509     margin: 0;
1510     padding: 1.6em;
1511     background-color: #fff;
1512     overflow-x: hidden;
1513     overflow-y: auto;
1514     line-height: 2em;
1516 /* Selected option settings */
1517 .jschooser .choosercontainer #chooseform .instruction,
1518 .choosercontainer #chooseform .selected .typesummary {
1519     display: block;
1522 .choosercontainer #chooseform .selected {
1523     background-color: #fff;
1524     margin-top: -1px;
1525     padding-top: 1px;
1529 @include media-breakpoint-down(xs) {
1530     .jsenabled .choosercontainer #chooseform .alloptions {
1531         max-width: 100%;
1532     }
1534     .jsenabled .choosercontainer #chooseform .instruction,
1535     .jsenabled .choosercontainer #chooseform .typesummary {
1536         position: static;
1537     }
1540 /**
1541  * Module chooser dialogue (moodle-core-chooserdialogue)
1542  *
1543  * This CSS belong to the chooser dialogue which should work both with, and
1544  * without javascript enabled
1545  */
1546 .modchooser .modal-body {
1547     padding: 0;
1548     overflow-y: auto;
1549     min-height: 640px;
1550     display: flex;
1551     flex-direction: column;
1553     .searchresultitemscontainer-wrapper {
1554         min-height: 495px;
1555     }
1557     .carousel-item.active {
1558         display: flex;
1559     }
1560     .chooser-container {
1561         display: flex;
1562         flex-direction: column;
1563         flex: 1 1 auto;
1564     }
1566     .loading-icon {
1567         opacity: 1;
1568         .icon {
1569             display: block;
1570             font-size: 3em;
1571             height: 1em;
1572             width: 1em;
1573         }
1574     }
1575     .carousel-item .loading-icon .icon {
1576         margin: 1em auto;
1577     }
1580 .modchoosercontainer.noscroll {
1581     overflow-y: hidden;
1584 .modchooser .searchcontainer .searchbar .input-group-append {
1585     align-items: center;
1587     i {
1588         color: #868e96;
1589         margin: 0;
1590         vertical-align: middle;
1591         font-size: 20px;
1592         height: 20px;
1593         width: 20px;
1594     }
1597 .modchoosercontainer .optionscontainer,
1598 .modchoosercontainer .searchresultitemscontainer {
1599     overflow-x: hidden;
1600     .option {
1601         // 2 items per line.
1602         flex-basis: calc(50% - 0.5rem);
1603         .optionactions {
1604             .optionaction {
1605                 cursor: pointer;
1606                 color: $gray-600;
1607                 i {
1608                     margin: 0;
1609                 }
1610             }
1611         }
1612         .optioninfo {
1613             a {
1614                 color: $gray-700;
1615                 &:hover {
1616                     text-decoration: none;
1617                 }
1618             }
1619         }
1620     }
1623 .modchooser .modal-body .optionsummary {
1624     background-color: $white;
1625     overflow-x: hidden;
1626     overflow-y: auto;
1627     min-height: 640px;
1629     .content {
1630         overflow-y: auto;
1631         .heading {
1632             .icon {
1633                 height: 32px;
1634                 width: 32px;
1635                 font-size: 32px;
1636                 padding: 0;
1637             }
1638         }
1639     }
1641     .actions {
1642         border-top: 1px solid $gray-300;
1643         background: $white;
1644     }
1647 @include media-breakpoint-down(xs) {
1648     .path-course-view .modal-dialog.modal-lg,
1649     .path-course-view .modal-content,
1650     .modchooser .modal-body,
1651     .modchooser .modal-body .carousel,
1652     .modchooser .modal-body .carousel-inner,
1653     .modchooser .modal-body .carousel-item,
1654     .modchooser .modal-body .optionsummary,
1655     .modchoosercontainer,
1656     .optionscontainer,
1657     .searchresultitemscontainer {
1658         min-height: auto;
1659         height: 100%;
1660         overflow-y: auto;
1661     }
1662     .path-course-view .modal-dialog.modal-lg {
1663         margin: 0;
1664     }
1665     .modchooser .modal-body .searchresultitemscontainer-wrapper {
1666         min-height: auto;
1667     }
1670 @include media-breakpoint-up(sm) {
1671     .modchoosercontainer .optionscontainer .option,
1672     .modchoosercontainer .searchresultitemscontainer .option {
1673         // Three items per line.
1674         flex-basis: calc(33.33% - 0.5rem);
1675     }
1678 @include media-breakpoint-up(lg) {
1679     .modchoosercontainer .optionscontainer .option,
1680     .modchoosercontainer .searchresultitemscontainer .option {
1681         // Six items per line.
1682         flex-basis: calc(16.66% - 0.5rem);
1683     }
1686 /* Form element: listing */
1687 .formlistingradio {
1688     padding-bottom: 25px;
1689     padding-right: 10px;
1692 .formlistinginputradio {
1693     float: left;
1696 .formlistingmain {
1697     min-height: 225px;
1700 .formlisting {
1701     position: relative;
1702     margin: 15px 0;
1703     padding: 1px 19px 14px;
1704     background-color: white;
1705     border: 1px solid #ddd;
1707     @include border-radius(4px);
1710 .formlistingmore {
1711     position: absolute;
1712     cursor: pointer;
1713     bottom: -1px;
1714     right: -1px;
1715     padding: 3px 7px;
1716     font-size: 12px;
1717     font-weight: bold;
1718     background-color: whitesmoke;
1719     border: 1px solid #ddd;
1720     color: #9da0a4;
1722     @include border-radius(4px 0 4px 0);
1725 .formlistingall {
1726     margin: 15px 0;
1727     padding: 0;
1729     @include border-radius(4px);
1732 .formlistingrow {
1733     cursor: pointer;
1734     border-bottom: 1px solid;
1735     border-color: #e1e1e8;
1736     border-left: 1px solid #e1e1e8;
1737     border-right: 1px solid #e1e1e8;
1738     background-color: #f7f7f9;
1740     @include border-radius(0 0 4px 4px);
1741     padding: 6px;
1742     top: 50%;
1743     left: 50%;
1744     min-height: 34px;
1745     float: left;
1746     width: 150px;
1749 body.jsenabled .formlistingradio {
1750     display: none;
1753 body.jsenabled .formlisting {
1754     display: block;
1757 a.criteria-action {
1758     padding: 0 3px;
1759     float: right;
1762 div.criteria-description {
1763     padding: 10px 15px;
1764     margin: 5px 0;
1765     background: none repeat scroll 0 0 #f9f9f9;
1766     border: 1px solid #eee;
1769 ul.badges {
1770     margin: 0;
1771     list-style: none;
1774 .badges li {
1775     position: relative;
1776     display: inline-block;
1777     padding-top: 1em;
1778     text-align: center;
1779     vertical-align: top;
1780     width: 150px;
1783 .badges li .badge-name {
1784     display: block;
1785     padding: 5px;
1788 .badges li > img {
1789     position: absolute;
1792 .badges li .badge-image {
1793     width: 100px;
1794     height: 100px;
1795     left: 10px;
1796     top: 0;
1797     z-index: 1;
1800 .badges li .badge-actions {
1801     position: relative;
1804 .badges li .expireimage {
1805     width: 100px;
1806     height: 100px;
1807     left: 25px;
1808     top: 0;
1809     position: absolute;
1810     z-index: 10;
1811     opacity: 0.85;
1814 #badge-image {
1815     background-color: transparent;
1816     padding: 0;
1817     position: relative;
1818     min-width: 100px;
1819     width: 20%;
1820     display: inline-block;
1821     vertical-align: top;
1822     margin-top: 17px;
1823     margin-bottom: 20px;
1825     .expireimage {
1826         width: 100px;
1827         height: 100px;
1828         left: 0;
1829         top: 0;
1830         opacity: 0.85;
1831         position: absolute;
1832         z-index: 10;
1833     }
1835     .singlebutton {
1836         padding-top: 5px;
1837         display: block;
1839         button {
1840             margin-left: 4px;
1841         }
1842     }
1845 #badge-details {
1846     display: inline-block;
1847     width: 79%;
1850 #badge-overview dl,
1851 #badge-details dl {
1852     margin: 0;
1854     dt,
1855     dd {
1856         vertical-align: top;
1857         padding: 3px 0;
1858     }
1860     dt {
1861         clear: both;
1862         display: inline-block;
1863         width: 20%;
1864         min-width: 100px;
1865     }
1867     dd {
1868         display: inline-block;
1869         width: 79%;
1870         margin-left: 1%;
1871     }
1874 .badge-profile {
1875     vertical-align: top;
1878 .connected {
1879     color: map-get($theme-colors, 'success');
1882 .notconnected {
1883     color: map-get($theme-colors, 'danger');
1886 .connecting {
1887     color: map-get($theme-colors, 'warning');
1890 #page-badges-award .recipienttable tr td {
1891     vertical-align: top;
1894 #page-badges-award .recipienttable tr td.actions .actionbutton {
1895     margin: 0.3em 0;
1896     padding: 0.5em 0;
1897     width: 100%;
1900 #page-badges-award .recipienttable tr td.existing,
1901 #page-badges-award .recipienttable tr td.potential {
1902     width: 42%;
1905 #issued-badge-table .activatebadge {
1906     display: inline-block;
1909 .statusbox.active {
1910     background-color: $state-success-bg;
1913 .statusbox.inactive {
1914     background-color: $state-warning-bg;
1917 .statusbox {
1918     text-align: center;
1919     margin-bottom: 5px;
1920     padding: 5px;
1923 .statusbox .activatebadge {
1924     display: inline-block;
1927 .statusbox .activatebadge input[type=submit] {
1928     margin: 3px;
1931 .activatebadge {
1932     margin: 0;
1933     text-align: left;
1934     vertical-align: middle;
1937 img#persona_signin {
1938     cursor: pointer;
1941 .addcourse {
1942     float: right;
1945 .invisiblefieldset {
1946     display: inline;
1947     padding: 0;
1948     border-width: 0;
1951 /** Page header */
1952 #page-header {
1953     .logo {
1954         margin: $spacer 0;
1955         img {
1956             max-height: 75px;
1957         }
1958     }
1961 /** Navbar logo. */
1962 nav.navbar .logo img {
1963     max-height: 35px;
1966 /** Header-bar styles **/
1967 .page-context-header {
1968     // We need to be explicit about the height of the header.
1969     $pageHeaderHeight: 140px;
1971     // Do not remove these rules.
1972     overflow: hidden;
1974     .page-header-image,
1975     .page-header-headings {
1976         float: left;
1977         display: block;
1978         position: relative;
1979     }
1981     .page-header-image {
1982         margin-right: 1em;
1983         margin-bottom: 1em;
1984     }
1986     .page-header-headings,
1987     .header-button-group {
1988         position: relative;
1989         line-height: 24px;
1990         vertical-align: middle;
1991     }
1993     .header-button-group {
1994         display: block;
1995         float: left;
1997         a {
1998             position: relative;
2000             // Don't touch it unless you know exactly what you are doing.
2001             top: -0.4em;
2002         }
2003     }
2006 ul.dragdrop-keyboard-drag li {
2007     list-style-type: none;
2010 a.disabled:hover,
2011 a.disabled {
2012     text-decoration: none;
2013     cursor: default;
2014     font-style: italic;
2015     color: #808080;
2018 body.lockscroll {
2019     height: 100%;
2020     overflow: hidden;
2023 .progressbar_container {
2024     max-width: 500px;
2025     margin: 0 auto;
2028 /* IE10 only fix for calendar titling */
2029 .ie10 .yui3-calendar-header-label {
2030     display: inline-block;
2033 dd:before,
2034 dd:after {
2035     display: block;
2036     content: " ";
2039 dd:after {
2040     clear: both;
2043 // Active tabs with links should have a different
2044 // cursor to indicate they are clickable.
2045 .nav-tabs > .active > a[href],
2046 .nav-tabs > .active > a[href]:hover,
2047 .nav-tabs > .active > a[href]:focus {
2048     cursor: pointer;
2051 .inplaceeditable {
2052     &.inplaceeditingon {
2053         position: relative;
2055         .editinstructions {
2056             margin-top: -30px;
2057             font-weight: normal;
2058             margin-right: 0;
2059             margin-left: 0;
2060             left: 0;
2061             right: auto;
2062             white-space: nowrap;
2063         }
2064         @include media-breakpoint-up(sm) {
2065             input {
2066                 width: 330px;
2067                 vertical-align: text-bottom;
2068                 margin-bottom: 0;
2069             }
2070         }
2072         select {
2073             margin-bottom: 0;
2074         }
2075     }
2077     .quickediticon img {
2078         opacity: 0.2;
2079     }
2081     .quickeditlink {
2082         color: inherit;
2083         text-decoration: inherit;
2084     }
2086     &:hover .quickeditlink .quickediticon img,
2087     .quickeditlink:focus .quickediticon img {
2088         opacity: 1;
2089     }
2091     &.inplaceeditable-toggle .quickediticon {
2092         display: none;
2093     }
2095     &.inplaceeditable-autocomplete {
2096         display: block;
2097     }
2100 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2101     margin-top: -20px;
2104 /** Chart area. */
2105 .chart-area {
2107     .chart-table-data {
2108         display: none;
2109     }
2111     .chart-table {
2112         .chart-output-htmltable caption {
2113             white-space: nowrap;
2114         }
2115         /** When accessible, we display the table only. */
2116         &.accesshide {
2117             .chart-table-expand {
2118                 display: none;
2119             }
2120             .chart-table-data {
2121                 display: block;
2122             }
2123         }
2124     }
2127 // Reset for ul.
2128 ul {
2129     padding-left: 1rem;
2132 /* YUI 2 Tree View */
2133 /*rtl:raw:
2134 .ygtvtn,
2135 .ygtvtm,
2136 .ygtvtmh,
2137 .ygtvtmhh,
2138 .ygtvtp,
2139 .ygtvtph,
2140 .ygtvtphh,
2141 .ygtvln,
2142 .ygtvlm,
2143 .ygtvlmh,
2144 .ygtvlmhh,
2145 .ygtvlp,
2146 .ygtvlph,
2147 .ygtvlphh,
2148 .ygtvdepthcell,
2149 .ygtvok,
2150 .ygtvok:hover,
2151 .ygtvcancel,
2152 .ygtvcancel:hover {
2153     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
2155 */
2157 .hover-tooltip-container {
2158     position: relative;
2160     .hover-tooltip {
2161         opacity: 0;
2162         visibility: hidden;
2163         position: absolute;
2164         /*rtl:ignore*/
2165         left: 50%;
2166         top: calc(-50% - 5px);
2167         transform: translate(-50%, -50%);
2168         background-color: #fff;
2169         border: 1px solid rgba(0, 0, 0, .2);
2170         border-radius: .3rem;
2171         box-sizing: border-box;
2172         padding: 5px;
2173         white-space: nowrap;
2174         transition: opacity 0.15s, visibility 0.15s;
2175         z-index: 1000;
2177         &:before {
2178             content: '';
2179             display: inline-block;
2180             border-left: 8px solid transparent;
2181             border-right: 8px solid transparent;
2182             border-top: 8px solid rgba(0, 0, 0, .2);
2183             position: absolute;
2184             bottom: -8px;
2185             left: calc(50% - 8px);
2186         }
2188         &:after {
2189             content: '';
2190             display: inline-block;
2191             border-left: 7px solid transparent;
2192             border-right: 7px solid transparent;
2193             border-top: 7px solid #fff;
2194             position: absolute;
2195             bottom: -6px;
2196             left: calc(50% - 7px);
2197             z-index: 2;
2198         }
2199     }
2201     &:hover {
2202         .hover-tooltip {
2203             opacity: 1;
2204             visibility: visible;
2205             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2206         }
2207     }
2210 #region-flat-nav {
2211     padding-right: 0;
2212     padding-left: 0;
2213     .nav {
2214         margin-right: $grid-gutter-width / 2;
2215         background-color: $card-bg;
2216     }
2217     @include media-breakpoint-down(sm) {
2218         .nav {
2219             margin-top: $grid-gutter-width;
2220             margin-right: 0;
2221         }
2222     }
2225 // Footer link colour was added to allow the colour of footer links to be changed,
2226 // but really in bootstrap we want the colour of links on .bg-inverse to be changed
2227 // rather than being specific to the footer. This is kept for backwards compatibility.
2228 $footer-link-color: $bg-inverse-link-color !default;
2229 #page-footer a {
2230     color: $footer-link-color;
2231     text-decoration: underline;
2232     .icon {
2233         color: $footer-link-color;
2234     }
2237 .bg-inverse a {
2238     color: $bg-inverse-link-color;
2239     text-decoration: underline;
2240     .icon {
2241         color: $bg-inverse-link-color;
2242     }
2245 .sitelink {
2246     img {
2247         width: 112px;
2248     }
2251 // Make links in a menu clickable anywhere in the row.
2252 .dropdown-item a {
2253     display: block;
2254     width: 100%;
2255     color: $body-color;
2257 .dropdown-item:active a {
2258     color: $dropdown-link-active-color;
2261 .competency-tree {
2262     ul {
2263         padding-left: 1.5rem;
2264     }
2267 .sr-only-focusable {
2268     &:active,
2269     &:focus {
2270         z-index: $zindex-navbar-fixed + 1;
2271         position: fixed;
2272         background: #fff;
2273         padding: 7px;
2274         left: 0;
2275         top: 0;
2276     }
2279 [data-drag-type="move"] {
2280     cursor: move;
2281     touch-action: none;
2284 .clickable {
2285     cursor: pointer;
2288 .overlay-icon-container {
2289     position: absolute;
2290     top: 0;
2291     left: 0;
2292     width: 100%;
2293     height: 100%;
2294     background-color: rgba(255, 255, 255, 0.6);
2296     .loading-icon {
2297         position: absolute;
2298         top: 50%;
2299         left: 50%;
2300         transform: translate(-50%, -50%);
2302         .icon {
2303             height: 30px;
2304             width: 30px;
2305             font-size: 30px;
2306         }
2307     }
2310 .open.atto_menu > .dropdown-menu {
2311     display: block;
2313 div.editor_atto_toolbar button .icon {
2314     color: $gray-700;
2316 .w-auto {
2317     width: auto;
2320 .bg-pulse-grey {
2321     animation: bg-pulse-grey 2s infinite linear;
2324 @keyframes bg-pulse-grey {
2325     0% {
2326         background-color: $gray-100;
2327     }
2328     50% {
2329         background-color: darken($gray-100, 5%);
2330     }
2331     100% {
2332         background-color: $gray-100;
2333     }
2336 @each $size, $length in $spacers {
2337     .line-height-#{$size} {
2338         line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2339     }
2342 .dir-rtl {
2343     .dir-rtl-hide {
2344         display: none;
2345     }
2348 .dir-ltr {
2349     .dir-ltr-hide {
2350         display: none;
2351     }
2354 .paged-content-page-container {
2355     min-height: 3.125rem;
2358 body.h5p-embed {
2359     #page-content {
2360         display: inherit;
2361     }
2362     #maincontent {
2363         display: none;
2364     }
2365     .h5pmessages {
2366         min-height: 230px; // This should be the same height as default core_h5p iframes.
2367     }
2370 .text-decoration-none {
2371     text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
2374 .colour-inherit {
2375     color: inherit !important; /* stylelint-disable-line declaration-no-important */
2378 .position-right {
2379     right: 0 !important; /* stylelint-disable-line declaration-no-important */
2382 .overflow-hidden {
2383     overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
2386 .text-break {
2387     overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
2390 .z-index-1 {
2391     z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
2394 // These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
2395 .float-left {
2396     float: left !important; /* stylelint-disable-line declaration-no-important */
2398 .float-right {
2399     float: right !important; /* stylelint-disable-line declaration-no-important */
2402 .clamp-2 {
2403     display: -webkit-box;
2404     -webkit-box-orient: vertical;
2405     -webkit-line-clamp: 2;
2406     overflow: hidden;
2409 .word-break-all {
2410     word-break: break-all;
2413 .matchtext {
2414     background-color: lighten($primary, 40%);
2415     color: $body-color;
2416     height: 1.5rem;
2419 // Emoji picker.
2420 $picker-width: 350px !default;
2421 $picker-width-xs: 320px !default;
2422 $picker-height: 400px !default;
2423 $picker-row-height: 40px !default;
2424 $picker-emoji-button-size: 40px !default;
2425 $picker-emoji-button-font-size: 24px !default;
2426 $picker-emoji-category-count: 9 !default;
2427 $picker-emojis-per-row: 7 !default;
2429 .emoji-picker {
2430     width: $picker-width;
2431     height: $picker-height;
2433     .category-button {
2434         padding: .375rem 0;
2435         height: 100%;
2436         width: $picker-width / $picker-emoji-category-count;
2437         border-top: none;
2438         border-left: none;
2439         border-right: none;
2440         border-bottom: 2px solid transparent;
2442         &.selected {
2443             border-bottom: 2px solid map-get($theme-colors, 'primary');
2444         }
2445     }
2447     .emojis-container,
2448     .search-results-container {
2449         min-width: $picker-emojis-per-row * $picker-emoji-button-size;
2450     }
2452     .picker-row {
2453         height: $picker-row-height;
2455         .category-name {
2456             line-height: $picker-row-height;
2457         }
2459         .emoji-button {
2460             height: $picker-emoji-button-size;
2461             width: $picker-emoji-button-size;
2462             line-height: $picker-emoji-button-size;
2463             font-size: $picker-emoji-button-font-size;
2464             overflow: hidden;
2466             @include hover-focus {
2467                 color: inherit;
2468                 text-decoration: none;
2469             }
2470         }
2471     }
2473     .emoji-preview {
2474         height: $picker-row-height;
2475         font-size: $picker-row-height;
2476         line-height: $picker-row-height;
2477     }
2479     .emoji-short-name {
2480         line-height: $picker-row-height / 2;
2481     }
2483     @include media-breakpoint-down(xs) {
2484         width: $picker-width-xs;
2485     }
2488 .emoji-auto-complete {
2489     height: $picker-row-height;
2491     .btn.btn-link.btn-icon.emoji-button {
2492         height: $picker-emoji-button-size;
2493         width: $picker-emoji-button-size;
2494         line-height: $picker-emoji-button-size;
2495         font-size: $picker-emoji-button-font-size;
2497         &.active {
2498             background-color: $gray-200;
2499         }
2500     }
2503 .toast-wrapper {
2504     max-width: $toast-max-width;
2505     max-height: 0;
2506     // Place these above any modals and other elements.
2507     z-index: 1051;
2509     > :first-child {
2510         margin-top: $spacer;
2511     }
2514 @each $color, $value in $theme-colors {
2515     .alert-#{$color} a {
2516         color: darken(theme-color-level($color, $alert-color-level), 10%);
2517     }
2520 @include media-breakpoint-down(sm) {
2521     #page-navbar {
2522         width: 100%;
2523     }
2525     .breadcrumb:not(:empty) {
2526         width: 100%;
2527         border: ($border-width * 2) solid $gray-200;
2528         padding: $spacer / 4;
2529         margin-bottom: $spacer / 2;
2530         .breadcrumb-item {
2531             padding-top: $spacer / 3;
2532             padding-bottom: $spacer / 3;
2533             display: inline-block;
2534         }
2535     }
2537     .mform {
2538         width: 100%;
2539         padding-right: 15px;
2540         padding-left: 15px;
2541     }
2542     .pagination {
2543         flex-wrap: wrap;
2544         justify-content: center;
2545     }
2546     .custom-select {
2547         max-width: 100%;
2548     }
2549     .card .card-body {
2550         padding: $card-spacer-x / 2;
2551     }
2552     #page-header {
2553         .card {
2554             border: 0;
2555             .card-body {
2556                 padding: 0;
2557             }
2558         }
2559     }
2560     .nav-tabs,
2561     .nav-pills {
2562         margin: 0;
2563         border: 0;
2564         padding: $spacer / 8;
2565         background-color: $gray-200;
2566         .nav-item {
2567             flex: 1 1 auto;
2568             text-align: center;
2569         }
2570         .nav-link {
2571             background: $white;
2572             border: 0;
2573             margin: $spacer / 8;
2574             &.active {
2575                 @include button-outline-variant($gray-600);
2576                 border-color: $gray-600;
2577             }
2578         }
2579     }
2582 @media (max-width: map-get($grid-breakpoints, "sm")) and (max-height: 320px) {
2583     div#page {
2584         margin-top: 0;
2585     }
2586     .navbar.fixed-top {
2587         position: relative;
2588         z-index: inherit;
2589     }