1065a7066e2f1337449496784f1184c7f4112630
[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     min-height: 640px;
1549     overflow-y: auto;
1551     .loading-icon {
1552         opacity: 1;
1553         .icon {
1554             display: block;
1555             font-size: 3em;
1556             height: 1em;
1557             width: 1em;
1558         }
1559     }
1560     .carousel-item .loading-icon .icon {
1561         margin: 5em auto;
1562     }
1565 .modchoosercontainer.noscroll {
1566     overflow-y: hidden;
1569 .modchooser .searchcontainer .searchbar .input-group-append {
1570     align-items: center;
1572     i {
1573         color: #868e96;
1574         margin: 0;
1575         vertical-align: middle;
1576         font-size: 20px;
1577         height: 20px;
1578         width: 20px;
1579     }
1582 .modchoosercontainer .optionscontainer,
1583 .modchoosercontainer .searchresultitemscontainer {
1584     overflow-x: hidden;
1585     .option {
1586         // Six items per line.
1587         flex-basis: 16.66%;
1588         .optionactions {
1589             .optionaction {
1590                 cursor: pointer;
1591                 color: $gray-600;
1592                 i {
1593                     margin: 0;
1594                 }
1595             }
1596         }
1597         .optioninfo {
1598             a {
1599                 color: $gray-700;
1600                 &:hover {
1601                     text-decoration: none;
1602                 }
1603                 .optionicon {
1604                     .icon {
1605                         margin: 0;
1606                         padding: 0;
1607                         width: 32px;
1608                         height: 32px;
1609                         font-size: 32px;
1610                     }
1611                 }
1612             }
1613         }
1614     }
1617 .modchooser .modal-body .optionsummary {
1618     background-color: $white;
1619     overflow-x: hidden;
1620     overflow-y: auto;
1621     min-height: 640px;
1623     .content {
1624         overflow-y: auto;
1625         .heading {
1626             .icon {
1627                 height: 32px;
1628                 width: 32px;
1629                 font-size: 32px;
1630                 padding: 0;
1631             }
1632         }
1633     }
1635     .actions {
1636         border-top: 1px solid $gray-300;
1637         background: $white;
1638     }
1641 @include media-breakpoint-down(lg) {
1642     .modchoosercontainer .optionscontainer .option,
1643     .modchoosercontainer .searchresultitemscontainer .option {
1644         // Five items per line.
1645         flex-basis: 20%;
1646     }
1649 @include media-breakpoint-down(xs) {
1650     .path-course-view .modal-dialog.modal-lg,
1651     .path-course-view .modal-content,
1652     .modchooser .modal-body,
1653     .modchooser .modal-body .carousel,
1654     .modchooser .modal-body .carousel-inner,
1655     .modchooser .modal-body .carousel-item,
1656     .modchooser .modal-body .optionsummary,
1657     .modchoosercontainer,
1658     .optionscontainer,
1659     .searchresultitemscontainer {
1660         height: 100%;
1661     }
1662     .path-course-view .modal-dialog.modal-lg {
1663         margin: 0;
1664     }
1665     .modchoosercontainer .optionscontainer .option,
1666     .modchoosercontainer .searchresultitemscontainer .option {
1667         // Four items per line.
1668         flex-basis: 25%;
1669     }
1672 /* Form element: listing */
1673 .formlistingradio {
1674     padding-bottom: 25px;
1675     padding-right: 10px;
1678 .formlistinginputradio {
1679     float: left;
1682 .formlistingmain {
1683     min-height: 225px;
1686 .formlisting {
1687     position: relative;
1688     margin: 15px 0;
1689     padding: 1px 19px 14px;
1690     background-color: white;
1691     border: 1px solid #ddd;
1693     @include border-radius(4px);
1696 .formlistingmore {
1697     position: absolute;
1698     cursor: pointer;
1699     bottom: -1px;
1700     right: -1px;
1701     padding: 3px 7px;
1702     font-size: 12px;
1703     font-weight: bold;
1704     background-color: whitesmoke;
1705     border: 1px solid #ddd;
1706     color: #9da0a4;
1708     @include border-radius(4px 0 4px 0);
1711 .formlistingall {
1712     margin: 15px 0;
1713     padding: 0;
1715     @include border-radius(4px);
1718 .formlistingrow {
1719     cursor: pointer;
1720     border-bottom: 1px solid;
1721     border-color: #e1e1e8;
1722     border-left: 1px solid #e1e1e8;
1723     border-right: 1px solid #e1e1e8;
1724     background-color: #f7f7f9;
1726     @include border-radius(0 0 4px 4px);
1727     padding: 6px;
1728     top: 50%;
1729     left: 50%;
1730     min-height: 34px;
1731     float: left;
1732     width: 150px;
1735 body.jsenabled .formlistingradio {
1736     display: none;
1739 body.jsenabled .formlisting {
1740     display: block;
1743 a.criteria-action {
1744     padding: 0 3px;
1745     float: right;
1748 div.criteria-description {
1749     padding: 10px 15px;
1750     margin: 5px 0;
1751     background: none repeat scroll 0 0 #f9f9f9;
1752     border: 1px solid #eee;
1755 ul.badges {
1756     margin: 0;
1757     list-style: none;
1760 .badges li {
1761     position: relative;
1762     display: inline-block;
1763     padding-top: 1em;
1764     text-align: center;
1765     vertical-align: top;
1766     width: 150px;
1769 .badges li .badge-name {
1770     display: block;
1771     padding: 5px;
1774 .badges li > img {
1775     position: absolute;
1778 .badges li .badge-image {
1779     width: 100px;
1780     height: 100px;
1781     left: 10px;
1782     top: 0;
1783     z-index: 1;
1786 .badges li .badge-actions {
1787     position: relative;
1790 .badges li .expireimage {
1791     width: 100px;
1792     height: 100px;
1793     left: 25px;
1794     top: 0;
1795     position: absolute;
1796     z-index: 10;
1797     opacity: 0.85;
1800 #badge-image {
1801     background-color: transparent;
1802     padding: 0;
1803     position: relative;
1804     min-width: 100px;
1805     width: 20%;
1806     display: inline-block;
1807     vertical-align: top;
1808     margin-top: 17px;
1809     margin-bottom: 20px;
1811     .expireimage {
1812         width: 100px;
1813         height: 100px;
1814         left: 0;
1815         top: 0;
1816         opacity: 0.85;
1817         position: absolute;
1818         z-index: 10;
1819     }
1821     .singlebutton {
1822         padding-top: 5px;
1823         display: block;
1825         button {
1826             margin-left: 4px;
1827         }
1828     }
1831 #badge-details {
1832     display: inline-block;
1833     width: 79%;
1836 #badge-overview dl,
1837 #badge-details dl {
1838     margin: 0;
1840     dt,
1841     dd {
1842         vertical-align: top;
1843         padding: 3px 0;
1844     }
1846     dt {
1847         clear: both;
1848         display: inline-block;
1849         width: 20%;
1850         min-width: 100px;
1851     }
1853     dd {
1854         display: inline-block;
1855         width: 79%;
1856         margin-left: 1%;
1857     }
1860 .badge-profile {
1861     vertical-align: top;
1864 .connected {
1865     color: map-get($theme-colors, 'success');
1868 .notconnected {
1869     color: map-get($theme-colors, 'danger');
1872 .connecting {
1873     color: map-get($theme-colors, 'warning');
1876 #page-badges-award .recipienttable tr td {
1877     vertical-align: top;
1880 #page-badges-award .recipienttable tr td.actions .actionbutton {
1881     margin: 0.3em 0;
1882     padding: 0.5em 0;
1883     width: 100%;
1886 #page-badges-award .recipienttable tr td.existing,
1887 #page-badges-award .recipienttable tr td.potential {
1888     width: 42%;
1891 #issued-badge-table .activatebadge {
1892     display: inline-block;
1895 .statusbox.active {
1896     background-color: $state-success-bg;
1899 .statusbox.inactive {
1900     background-color: $state-warning-bg;
1903 .statusbox {
1904     text-align: center;
1905     margin-bottom: 5px;
1906     padding: 5px;
1909 .statusbox .activatebadge {
1910     display: inline-block;
1913 .statusbox .activatebadge input[type=submit] {
1914     margin: 3px;
1917 .activatebadge {
1918     margin: 0;
1919     text-align: left;
1920     vertical-align: middle;
1923 img#persona_signin {
1924     cursor: pointer;
1927 .addcourse {
1928     float: right;
1931 .invisiblefieldset {
1932     display: inline;
1933     padding: 0;
1934     border-width: 0;
1937 /** Page header */
1938 #page-header {
1939     .logo {
1940         margin: $spacer 0;
1941         img {
1942             max-height: 75px;
1943         }
1944     }
1947 /** Navbar logo. */
1948 nav.navbar .logo img {
1949     max-height: 35px;
1952 /** Header-bar styles **/
1953 .page-context-header {
1954     // We need to be explicit about the height of the header.
1955     $pageHeaderHeight: 140px;
1957     // Do not remove these rules.
1958     overflow: hidden;
1960     .page-header-image,
1961     .page-header-headings {
1962         float: left;
1963         display: block;
1964         position: relative;
1965     }
1967     .page-header-image {
1968         margin-right: 1em;
1969         margin-bottom: 1em;
1970     }
1972     .page-header-headings,
1973     .header-button-group {
1974         position: relative;
1975         line-height: 24px;
1976         vertical-align: middle;
1977     }
1979     .header-button-group {
1980         display: block;
1981         float: left;
1983         a {
1984             position: relative;
1986             // Don't touch it unless you know exactly what you are doing.
1987             top: -0.4em;
1988         }
1989     }
1992 ul.dragdrop-keyboard-drag li {
1993     list-style-type: none;
1996 a.disabled:hover,
1997 a.disabled {
1998     text-decoration: none;
1999     cursor: default;
2000     font-style: italic;
2001     color: #808080;
2004 body.lockscroll {
2005     height: 100%;
2006     overflow: hidden;
2009 .progressbar_container {
2010     max-width: 500px;
2011     margin: 0 auto;
2014 /* IE10 only fix for calendar titling */
2015 .ie10 .yui3-calendar-header-label {
2016     display: inline-block;
2019 dd:before,
2020 dd:after {
2021     display: block;
2022     content: " ";
2025 dd:after {
2026     clear: both;
2029 // Active tabs with links should have a different
2030 // cursor to indicate they are clickable.
2031 .nav-tabs > .active > a[href],
2032 .nav-tabs > .active > a[href]:hover,
2033 .nav-tabs > .active > a[href]:focus {
2034     cursor: pointer;
2037 .inplaceeditable {
2038     &.inplaceeditingon {
2039         position: relative;
2041         .editinstructions {
2042             margin-top: -30px;
2043             font-weight: normal;
2044             margin-right: 0;
2045             margin-left: 0;
2046             left: 0;
2047             right: auto;
2048             white-space: nowrap;
2049         }
2050         @include media-breakpoint-up(sm) {
2051             input {
2052                 width: 330px;
2053                 vertical-align: text-bottom;
2054                 margin-bottom: 0;
2055             }
2056         }
2058         select {
2059             margin-bottom: 0;
2060         }
2061     }
2063     .quickediticon img {
2064         opacity: 0.2;
2065     }
2067     .quickeditlink {
2068         color: inherit;
2069         text-decoration: inherit;
2070     }
2072     &:hover .quickeditlink .quickediticon img,
2073     .quickeditlink:focus .quickediticon img {
2074         opacity: 1;
2075     }
2077     &.inplaceeditable-toggle .quickediticon {
2078         display: none;
2079     }
2081     &.inplaceeditable-autocomplete {
2082         display: block;
2083     }
2086 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2087     margin-top: -20px;
2090 /** Chart area. */
2091 .chart-area {
2093     .chart-table-data {
2094         display: none;
2095     }
2097     .chart-table {
2098         .chart-output-htmltable caption {
2099             white-space: nowrap;
2100         }
2101         /** When accessible, we display the table only. */
2102         &.accesshide {
2103             .chart-table-expand {
2104                 display: none;
2105             }
2106             .chart-table-data {
2107                 display: block;
2108             }
2109         }
2110     }
2113 // Reset for ul.
2114 ul {
2115     padding-left: 1rem;
2118 /* YUI 2 Tree View */
2119 /*rtl:raw:
2120 .ygtvtn,
2121 .ygtvtm,
2122 .ygtvtmh,
2123 .ygtvtmhh,
2124 .ygtvtp,
2125 .ygtvtph,
2126 .ygtvtphh,
2127 .ygtvln,
2128 .ygtvlm,
2129 .ygtvlmh,
2130 .ygtvlmhh,
2131 .ygtvlp,
2132 .ygtvlph,
2133 .ygtvlphh,
2134 .ygtvdepthcell,
2135 .ygtvok,
2136 .ygtvok:hover,
2137 .ygtvcancel,
2138 .ygtvcancel:hover {
2139     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
2141 */
2143 .hover-tooltip-container {
2144     position: relative;
2146     .hover-tooltip {
2147         opacity: 0;
2148         visibility: hidden;
2149         position: absolute;
2150         /*rtl:ignore*/
2151         left: 50%;
2152         top: calc(-50% - 5px);
2153         transform: translate(-50%, -50%);
2154         background-color: #fff;
2155         border: 1px solid rgba(0, 0, 0, .2);
2156         border-radius: .3rem;
2157         box-sizing: border-box;
2158         padding: 5px;
2159         white-space: nowrap;
2160         transition: opacity 0.15s, visibility 0.15s;
2161         z-index: 1000;
2163         &:before {
2164             content: '';
2165             display: inline-block;
2166             border-left: 8px solid transparent;
2167             border-right: 8px solid transparent;
2168             border-top: 8px solid rgba(0, 0, 0, .2);
2169             position: absolute;
2170             bottom: -8px;
2171             left: calc(50% - 8px);
2172         }
2174         &:after {
2175             content: '';
2176             display: inline-block;
2177             border-left: 7px solid transparent;
2178             border-right: 7px solid transparent;
2179             border-top: 7px solid #fff;
2180             position: absolute;
2181             bottom: -6px;
2182             left: calc(50% - 7px);
2183             z-index: 2;
2184         }
2185     }
2187     &:hover {
2188         .hover-tooltip {
2189             opacity: 1;
2190             visibility: visible;
2191             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2192         }
2193     }
2196 #region-flat-nav {
2197     padding-right: 0;
2198     padding-left: 0;
2199     .nav {
2200         margin-right: $grid-gutter-width / 2;
2201         background-color: $card-bg;
2202     }
2203     @include media-breakpoint-down(sm) {
2204         .nav {
2205             margin-top: $grid-gutter-width;
2206             margin-right: 0;
2207         }
2208     }
2211 // Footer link colour was added to allow the colour of footer links to be changed,
2212 // but really in bootstrap we want the colour of links on .bg-inverse to be changed
2213 // rather than being specific to the footer. This is kept for backwards compatibility.
2214 $footer-link-color: $bg-inverse-link-color !default;
2215 #page-footer a {
2216     color: $footer-link-color;
2217     text-decoration: underline;
2218     .icon {
2219         color: $footer-link-color;
2220     }
2223 .bg-inverse a {
2224     color: $bg-inverse-link-color;
2225     text-decoration: underline;
2226     .icon {
2227         color: $bg-inverse-link-color;
2228     }
2231 .sitelink {
2232     img {
2233         width: 112px;
2234     }
2237 // Make links in a menu clickable anywhere in the row.
2238 .dropdown-item a {
2239     display: block;
2240     width: 100%;
2241     color: $body-color;
2243 .dropdown-item:active a {
2244     color: $dropdown-link-active-color;
2247 .competency-tree {
2248     ul {
2249         padding-left: 1.5rem;
2250     }
2253 .sr-only-focusable {
2254     &:active,
2255     &:focus {
2256         z-index: $zindex-navbar-fixed + 1;
2257         position: fixed;
2258         background: #fff;
2259         padding: 7px;
2260         left: 0;
2261         top: 0;
2262     }
2265 [data-drag-type="move"] {
2266     cursor: move;
2267     touch-action: none;
2270 .clickable {
2271     cursor: pointer;
2274 .overlay-icon-container {
2275     position: absolute;
2276     top: 0;
2277     left: 0;
2278     width: 100%;
2279     height: 100%;
2280     background-color: rgba(255, 255, 255, 0.6);
2282     .loading-icon {
2283         position: absolute;
2284         top: 50%;
2285         left: 50%;
2286         transform: translate(-50%, -50%);
2288         .icon {
2289             height: 30px;
2290             width: 30px;
2291             font-size: 30px;
2292         }
2293     }
2296 .open.atto_menu > .dropdown-menu {
2297     display: block;
2299 div.editor_atto_toolbar button .icon {
2300     color: $gray-700;
2302 .w-auto {
2303     width: auto;
2306 .bg-pulse-grey {
2307     animation: bg-pulse-grey 2s infinite linear;
2310 @keyframes bg-pulse-grey {
2311     0% {
2312         background-color: $gray-100;
2313     }
2314     50% {
2315         background-color: darken($gray-100, 5%);
2316     }
2317     100% {
2318         background-color: $gray-100;
2319     }
2322 @each $size, $length in $spacers {
2323     .line-height-#{$size} {
2324         line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2325     }
2328 .dir-rtl {
2329     .dir-rtl-hide {
2330         display: none;
2331     }
2334 .dir-ltr {
2335     .dir-ltr-hide {
2336         display: none;
2337     }
2340 .paged-content-page-container {
2341     min-height: 3.125rem;
2344 body.h5p-embed {
2345     #page-content {
2346         display: inherit;
2347     }
2348     #maincontent {
2349         display: none;
2350     }
2351     .h5pmessages {
2352         min-height: 230px; // This should be the same height as default core_h5p iframes.
2353     }
2356 .text-decoration-none {
2357     text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
2360 .colour-inherit {
2361     color: inherit !important; /* stylelint-disable-line declaration-no-important */
2364 .position-right {
2365     right: 0 !important; /* stylelint-disable-line declaration-no-important */
2368 .overflow-hidden {
2369     overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
2372 .text-break {
2373     overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
2376 .z-index-1 {
2377     z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
2380 // These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
2381 .float-left {
2382     float: left !important; /* stylelint-disable-line declaration-no-important */
2384 .float-right {
2385     float: right !important; /* stylelint-disable-line declaration-no-important */
2388 .clamp-2 {
2389     display: -webkit-box;
2390     -webkit-box-orient: vertical;
2391     -webkit-line-clamp: 2;
2392     overflow: hidden;
2395 .word-break-all {
2396     word-break: break-all;
2399 .matchtext {
2400     background-color: lighten($primary, 40%);
2401     color: $body-color;
2402     height: 1.5rem;
2405 // Emoji picker.
2406 $picker-width: 350px !default;
2407 $picker-width-xs: 320px !default;
2408 $picker-height: 400px !default;
2409 $picker-row-height: 40px !default;
2410 $picker-emoji-button-size: 40px !default;
2411 $picker-emoji-button-font-size: 24px !default;
2412 $picker-emoji-category-count: 9 !default;
2413 $picker-emojis-per-row: 7 !default;
2415 .emoji-picker {
2416     width: $picker-width;
2417     height: $picker-height;
2419     .category-button {
2420         padding: .375rem 0;
2421         height: 100%;
2422         width: $picker-width / $picker-emoji-category-count;
2423         border-top: none;
2424         border-left: none;
2425         border-right: none;
2426         border-bottom: 2px solid transparent;
2428         &.selected {
2429             border-bottom: 2px solid map-get($theme-colors, 'primary');
2430         }
2431     }
2433     .emojis-container,
2434     .search-results-container {
2435         min-width: $picker-emojis-per-row * $picker-emoji-button-size;
2436     }
2438     .picker-row {
2439         height: $picker-row-height;
2441         .category-name {
2442             line-height: $picker-row-height;
2443         }
2445         .emoji-button {
2446             height: $picker-emoji-button-size;
2447             width: $picker-emoji-button-size;
2448             line-height: $picker-emoji-button-size;
2449             font-size: $picker-emoji-button-font-size;
2450             overflow: hidden;
2452             @include hover-focus {
2453                 color: inherit;
2454                 text-decoration: none;
2455             }
2456         }
2457     }
2459     .emoji-preview {
2460         height: $picker-row-height;
2461         font-size: $picker-row-height;
2462         line-height: $picker-row-height;
2463     }
2465     .emoji-short-name {
2466         line-height: $picker-row-height / 2;
2467     }
2469     @include media-breakpoint-down(xs) {
2470         width: $picker-width-xs;
2471     }
2474 .emoji-auto-complete {
2475     height: $picker-row-height;
2477     .btn.btn-link.btn-icon.emoji-button {
2478         height: $picker-emoji-button-size;
2479         width: $picker-emoji-button-size;
2480         line-height: $picker-emoji-button-size;
2481         font-size: $picker-emoji-button-font-size;
2483         &.active {
2484             background-color: $gray-200;
2485         }
2486     }
2489 .toast-wrapper {
2490     max-width: $toast-max-width;
2491     max-height: 0;
2492     // Place these above any modals and other elements.
2493     z-index: 1051;
2495     > :first-child {
2496         margin-top: $spacer;
2497     }
2500 @each $color, $value in $theme-colors {
2501     .alert-#{$color} a {
2502         color: darken(theme-color-level($color, $alert-color-level), 10%);
2503     }
2506 @include media-breakpoint-down(sm) {
2507     #page-navbar {
2508         width: 100%;
2509     }
2511     .breadcrumb:not(:empty) {
2512         width: 100%;
2513         border: ($border-width * 2) solid $gray-200;
2514         padding: $spacer / 4;
2515         margin-bottom: $spacer / 2;
2516         .breadcrumb-item {
2517             padding-top: $spacer / 3;
2518             padding-bottom: $spacer / 3;
2519             display: inline-block;
2520         }
2521     }
2523     .mform {
2524         width: 100%;
2525         padding-right: 15px;
2526         padding-left: 15px;
2527     }
2528     .pagination {
2529         flex-wrap: wrap;
2530         justify-content: center;
2531     }
2532     .custom-select {
2533         max-width: 100%;
2534     }
2535     .card .card-body {
2536         padding: $card-spacer-x / 2;
2537     }
2538     #page-header {
2539         .card {
2540             border: 0;
2541             .card-body {
2542                 padding: 0;
2543             }
2544         }
2545     }
2546     .nav-tabs,
2547     .nav-pills {
2548         margin: 0;
2549         border: 0;
2550         padding: $spacer / 8;
2551         background-color: $gray-200;
2552         .nav-item {
2553             flex: 1 1 auto;
2554             text-align: center;
2555         }
2556         .nav-link {
2557             background: $white;
2558             border: 0;
2559             margin: $spacer / 8;
2560             &.active {
2561                 @include button-outline-variant($gray-600);
2562                 border-color: $gray-600;
2563             }
2564         }
2565     }
2568 @media (max-width: map-get($grid-breakpoints, "sm")) and (max-height: 320px) {
2569     div#page {
2570         margin-top: 0;
2571     }
2572     .navbar.fixed-top {
2573         position: relative;
2574         z-index: inherit;
2575     }