4653e2d577763ad3f61cac068251d26717a59c5a
[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 $font-size-xs: ($font-size-base * .75) !default;
10 #region-main {
11     overflow-x: auto;
12     overflow-y: visible;
13     background-color: $body-bg;
14 }
16 @include media-breakpoint-up(sm) {
17     #region-main {
18         border: $card-border-width solid $card-border-color;
19         @if $enable-rounded {
20             @include border-radius($card-border-radius);
21         }
22         padding: $card-spacer-x;
23     }
24 }
26 @include media-breakpoint-up(sm) {
27     .context-header-settings-menu,
28     .region-main-settings-menu {
29         float: right;
30         width: auto;
31         max-width: 4em;
32         height: 2em;
33         display: block;
34         margin-top: 4px;
35     }
36 }
38 @include media-breakpoint-down(sm) {
39     .context-header-settings-menu,
40     .region-main-settings-menu {
41         display: flex;
42         justify-content: flex-end;
43     }
44 }
46 $gototop-bottom-position: 50px !default;
48 #goto-top-link {
49     visibility: hidden;
50     opacity: 0;
51     transition: opacity .7s ease 0s, visibility .1s ease .8s;
52     display: block;
53     position: fixed;
54     bottom: $gototop-bottom-position;
55     right: 0;
56     a {
57         position: absolute;
58         right: 0;
59         transform: translateY(-100%);
60     }
61 }
63 @include media-breakpoint-down(sm) {
64     #goto-top-link {
65         bottom: 0;
66     }
67 }
69 body.scrolled #goto-top-link {
70     opacity: 1;
71     visibility: visible;
72     transition: visibility 0s ease 0s, opacity .7s ease .1s;
73 }
75 .context-header-settings-menu .dropdown-toggle > .icon,
76 #region-main-settings-menu .dropdown-toggle > .icon {
77     height: 24px;
78     font-size: 24px;
79     width: auto;
80 }
81 /** Prevent user notifications overlapping with region main settings menu */
82 #user-notifications {
83     display: block;
84     overflow: hidden;
85 }
87 /** Page layout CSS starts **/
88 .layout-option-noheader #page-header,
89 .layout-option-nonavbar #page-navbar,
90 .layout-option-nofooter #page-footer,
91 .layout-option-nocourseheader .course-content-header,
92 .layout-option-nocoursefooter .course-content-footer {
93     display: none;
94 }
96 /** Page layout CSS ends **/
98 .mdl-left {
99     text-align: left;
102 .mdl-right {
103     text-align: right;
106 /*rtl:ignore*/
107 .text-ltr {
108     direction: ltr !important; /* stylelint-disable-line declaration-no-important */
111 #add,
112 #remove,
113 .centerpara,
114 .mdl-align {
115     text-align: center;
118 a.dimmed,
119 a.dimmed:link,
120 a.dimmed:visited,
121 a.dimmed_text,
122 a.dimmed_text:link,
123 a.dimmed_text:visited,
124 .dimmed_text,
125 .dimmed_text a,
126 .dimmed_text a:link,
127 .dimmed_text a:visited,
128 .usersuspended,
129 .usersuspended a,
130 .usersuspended a:link,
131 .usersuspended a:visited,
132 .dimmed_category,
133 .dimmed_category a {
134     color: $text-muted;
137 // Accessible focus styling for links, add .aalink to links with custom css classes to get
138 // accessible focus styles.
139 .aalink,
140 #page-footer a:not([class]),
141 .arrow_link,
142 a:not([class]),
143 .activityinstance > a {
144     &.focus,
145     &:focus {
146         outline: $btn-focus-width solid transparent;
147         color: $gray-900;
148         background-color: lighten($primary, 50%);
149         box-shadow: 0 -#{$btn-focus-width} lighten($primary, 50%), 0 $btn-focus-width $gray-800;
150     }
151     &:focus:hover {
152         text-decoration: none;
153     }
156 // Accessible focus styling for buttons like elements that do not use the .btn class. Add
157 // .aabtn to you element if you need the same focus styles.
158 .aabtn,
159 .btn-link,
160 .nav-link,
161 .atto_link_button,
162 [role="button"],
163 .list-group-item-action,
164 input[type="checkbox"],
165 input[type="radio"],
166 input[type="file"],
167 input[type="image"],
168 .sr-only-focusable,
169 a.dropdown-item,
170 a.dropdown-toggle,
171 .modal-dialog[tabindex="0"],
172 .moodle-dialogue-base .closebutton,
173 button.close {
174     &.focus,
175     &:focus {
176         outline: 0;
177         box-shadow: $input-btn-focus-box-shadow;
178     }
179     &:focus:hover {
180         text-decoration: none;
181     }
184 // Safari does not allow custom styling of checkboxes.
185 .safari {
186     input[type="checkbox"],
187     input[type="radio"] {
188         &.focus,
189         &:focus {
190             outline: auto;
191         }
192     }
195 .usermenu,
196 div.dropdown-item {
197     a,
198     a[role="button"] {
199         outline: 0;
200         box-shadow: none;
201     }
202     &:focus-within {
203         outline: 0;
204         box-shadow: $input-btn-focus-box-shadow;
205     }
208 .unlist,
209 .unlist li,
210 .inline-list,
211 .inline-list li,
212 .block .list,
213 .block .list li,
214 .section li.activity,
215 .section li.movehere,
216 .tabtree li {
217     list-style: none;
218     margin: 0;
219     padding: 0;
222 section a.movehere,
223 .section li.movehere a.movehere {
224     outline: 0;
225     box-shadow: $input-btn-focus-box-shadow;
228 .editing .course-content .hidden.sectionname {
229     visibility: hidden;
230     display: initial;
233 .inline,
234 .inline-list li {
235     display: inline;
238 .notifytiny {
239     font-size: $font-size-xs;
242 .notifytiny li,
243 .notifytiny td {
244     font-size: 100%;
247 .red,
248 .notifyproblem {
249     color: map-get($theme-colors, 'warning');
252 .green,
253 .notifysuccess {
254     color: map-get($theme-colors, 'success');
257 .highlight {
258     color: map-get($theme-colors, 'info');
261 .fitem.advanced .text-info {
262     font-weight: bold;
265 .reportlink {
266     text-align: right;
269 a.autolink.glossary:hover {
270     cursor: help;
272 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
273 .collapsibleregioncaption {
274     white-space: nowrap;
275     min-height: $line-height-base * $font-size-base;
278 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
279     cursor: pointer;
282 .pagelayout-mydashboard #region-main {
283     border: 0;
284     padding: 0;
285     background-color: transparent;
286     margin-top: -1px;
289 @include media-breakpoint-down(sm) {
290     .pagelayout-mydashboard,
291     .pagelayout-login {
292         #region-main-box {
293             padding-left: 0;
294             padding-right: 0;
295         }
296     }
299 .collapsibleregioncaption img {
300     vertical-align: middle;
303 .jsenabled .hiddenifjs {
304     display: none;
307 .visibleifjs {
308     display: none;
311 .jsenabled .visibleifjs {
312     display: inline;
315 .jsenabled .collapsibleregion {
316     overflow: hidden;
317     box-sizing: content-box;
320 .jsenabled .collapsed .collapsibleregioninner {
321     visibility: hidden;
324 .collapsible-actions {
325     display: none;
326     text-align: right;
329 .jsenabled .collapsible-actions {
330     display: block;
333 .collapsible-actions .collapseexpand {
334     padding-left: 20px;
335     background: url([[pix:t/collapsed]]) 2px center no-repeat;
337 /*rtl:raw:
338 .collapsible-actions .collapseexpand {
339     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
341 */
342 .collapsible-actions .collapse-all {
343     background-image: url([[pix:t/expanded]]);
346 .yui-overlay .yui-widget-bd {
347     background-color: #ffee69;
348     border: 1px solid #a6982b;
349     border-top-color: #d4c237;
350     color: #000;
351     left: 0;
352     padding: 2px 5px;
353     position: relative;
354     top: 0;
355     z-index: 1;
358 .clearer {
359     background: transparent;
360     border-width: 0;
361     clear: both;
362     display: block;
363     height: 1px;
364     margin: 0;
365     padding: 0;
368 .bold,
369 .warning,
370 .errorbox .title,
371 .pagingbar .title,
372 .pagingbar .thispage {
373     font-weight: bold;
376 img.userpicture {
377     margin-right: 0.5rem;
380 img.resize {
381     height: 1em;
382     width: 1em;
385 .action-menu .dropdown-toggle {
386     text-decoration: none;
389 .action-menu {
390     white-space: nowrap;
393 .block img.resize {
394     height: 0.9em;
395     width: 0.8em;
397 /* Icon styles */
398 img.activityicon {
399     height: 24px;
400     width: 24px;
401     vertical-align: middle;
404 .headermain {
405     font-weight: bold;
408 #maincontent {
409     display: block;
410     height: 1px;
411     overflow: hidden;
414 img.uihint {
415     cursor: help;
418 #addmembersform table {
419     margin-left: auto;
420     margin-right: auto;
423 table.flexible .emptyrow {
424     display: none;
427 form.popupform,
428 form.popupform div {
429     display: inline;
432 .arrow_button input {
433     overflow: hidden;
435 .no-overflow {
436     overflow: auto;
439 // Minimum height required for a menu in a table inside a scrollable div.
440 // Position required for table sizing inside a flex container.
441 .no-overflow > .generaltable {
442     position: relative;
443     margin-bottom: 0;
444     min-height: 10em;
446 // Accessibility features
448 // Accessibility: text 'seen' by screen readers but not visual users.
449 .accesshide {
450     @include sr-only();
453 span.hide,
454 div.hide,
455 .hidden {
456     display: none;
458 // Accessibility: Skip block link, for keyboard-only users.
459 a.skip-block,
460 a.skip {
461     position: absolute;
462     top: -1000em;
463     font-size: 0.85em;
464     text-decoration: none;
467 a.skip-block:focus,
468 a.skip-block:active,
469 a.skip:focus,
470 a.skip:active {
471     position: static;
472     display: block;
475 .skip-block-to {
476     display: block;
477     height: 1px;
478     overflow: hidden;
480 // Blogs
481 .addbloglink {
482     text-align: center;
485 .blog_entry .audience {
486     text-align: right;
487     padding-right: 4px;
490 .blog_entry .tags {
491     margin-top: 15px;
494 .blog_entry .content {
495     margin-left: 43px;
497 // Group
499 #doc-contents h1 {
500     margin: 1em 0 0 0;
503 #doc-contents ul {
504     margin: 0;
505     padding: 0;
506     width: 90%;
509 #doc-contents ul li {
510     list-style-type: none;
513 .groupmanagementtable td {
514     vertical-align: top;
517 .groupmanagementtable #existingcell,
518 .groupmanagementtable #potentialcell {
519     width: 42%;
522 .groupmanagementtable #buttonscell {
523     width: 16%;
526 .groupmanagementtable #buttonscell p.arrow_button input {
527     width: auto;
528     min-width: 80%;
529     margin: 0 auto;
530     display: block;
533 .groupmanagementtable #removeselect_wrapper,
534 .groupmanagementtable #addselect_wrapper {
535     width: 100%;
538 .groupmanagementtable #removeselect_wrapper label,
539 .groupmanagementtable #addselect_wrapper label {
540     font-weight: normal;
543 #group-usersummary {
544     width: 14em;
547 .groupselector {
548     margin-top: 3px;
549     margin-bottom: 3px;
550     display: inline-block;
553 .groupselector label {
554     display: inline-block;
557 // Login
558 .login-page {
559     [name="username"] {
560         margin-bottom: -1px;
561         border-bottom-right-radius: 0;
562         border-bottom-left-radius: 0;
563     }
565     [type="password"] {
566         margin-bottom: 10px;
567         border-top-left-radius: 0;
568         border-top-right-radius: 0;
569     }
572 // Notes
573 .notepost {
574     margin-bottom: 1em;
577 .notepost .userpicture {
578     float: left;
579     margin-right: 5px;
582 .notepost .content,
583 .notepost .footer {
584     clear: both;
587 .notesgroup {
588     margin-left: 20px;
591 // My Moodle
592 .path-my .coursebox {
593     margin: $spacer 0;
594     padding: 0;
596     .overview {
597         margin: 15px 30px 10px 30px;
598     }
601 .path-my .coursebox .info {
602     float: none;
603     margin: 0;
606 // Modules
607 .mod_introbox {
608     padding: 10px;
611 table.mod_index {
612     width: 100%;
615 // Comments
616 .comment-ctrl {
617     font-size: 12px;
618     display: none;
619     margin: 0;
620     padding: 0;
623 .comment-ctrl h5 {
624     margin: 0;
625     padding: 5px;
628 .comment-area {
629     max-width: 400px;
630     padding: 5px;
633 .comment-area textarea {
634     width: 100%;
635     overflow: auto;
637     &.fullwidth {
638         -webkit-box-sizing: border-box;
639         -moz-box-sizing: border-box;
640         box-sizing: border-box;
641     }
644 .comment-area .fd {
645     text-align: right;
648 .comment-meta span {
649     color: gray;
652 .comment-link img {
653     vertical-align: text-bottom;
656 .comment-list {
657     font-size: 11px;
658     overflow: auto;
659     list-style: none;
660     padding: 0;
661     margin: 0;
664 .comment-list li {
665     margin: 2px;
666     list-style: none;
667     margin-bottom: 5px;
668     clear: both;
669     padding: .3em;
670     position: relative;
673 .comment-list li.first {
674     display: none;
677 .comment-paging {
678     text-align: center;
681 .comment-paging .pageno {
682     padding: 2px;
685 .comment-paging .curpage {
686     border: 1px solid #ccc;
689 .comment-message .picture {
690     width: 20px;
691     float: left;
694 .comment-message .text {
695     margin: 0;
696     padding: 0;
699 .comment-message .text p {
700     padding: 0;
701     margin: 0 18px 0 0;
704 .comment-delete {
705     position: absolute;
706     top: 0;
707     right: 0;
708     margin: .3em;
711 .comment-report-selectall {
712     display: none;
715 .comment-link {
716     display: none;
719 .jsenabled .comment-link {
720     display: block;
723 .jsenabled .showcommentsnonjs {
724     display: none;
727 .jsenabled .comment-report-selectall {
728     display: inline;
730 /**
731 * Completion progress report
732 */
733 .completion-expired {
734     color: map-get($theme-colors, 'warning');
737 .completion-expected {
738     font-size: $font-size-xs;
741 .completion-sortchoice,
742 .completion-identifyfield {
743     font-size: $font-size-xs;
744     vertical-align: bottom;
747 .completion-progresscell {
748     text-align: right;
751 .completion-expired .completion-expected {
752     font-weight: bold;
754 /**
755 * Tags
756 */
757 img.user-image {
758     height: 100px;
759     width: 100px;
762 #tag-search-box {
763     text-align: center;
764     margin: 10px auto;
767 .path-tag .tag-index-items .tagarea {
768     border: 1px solid #e3e3e3;
769     border-radius: 4px;
770     padding: 10px;
771     margin-top: 10px;
774 .path-tag .tag-index-items .tagarea h3 {
775     display: block;
776     padding: 3px 0 10px 0;
777     margin: 0;
778     font-size: 1.1em;
779     font-weight: bold;
780     line-height: 20px;
781     color: #999;
782     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
783     text-transform: uppercase;
784     word-wrap: break-word;
785     border-bottom: solid 1px #e3e3e3;
786     margin-bottom: 10px;
789 .path-tag .tagarea .controls,
790 .path-tag .tagarea .taggeditems {
791     @include clearfix();
794 .path-tag .tagarea .controls,
795 .path-tag .tag-backtoallitems {
796     text-align: center;
799 .path-tag .tagarea .controls .gotopage.nextpage {
800     float: right;
803 .path-tag .tagarea .controls .gotopage.prevpage {
804     float: left;
807 .path-tag .tagarea .controls .exclusivemode {
808     display: inline-block;
811 .path-tag .tagarea .controls.controls-bottom {
812     margin-top: 5px;
815 .path-tag .tagarea .controls .gotopage.nextpage::after {
816     padding-right: 5px;
817     padding-left: 5px;
818     content: "»";
821 .path-tag .tagarea .controls .gotopage.prevpage::before {
822     padding-right: 5px;
823     padding-left: 5px;
824     content: "«";
827 span.flagged-tag,
828 tr.flagged-tag,
829 span.flagged-tag a,
830 tr.flagged-tag a {
831     color: map-get($theme-colors, 'warning');
834 .tag-management-table td,
835 .tag-management-table th {
836     vertical-align: middle;
837     padding: 4px;
840 .tag-management-table .inplaceeditable.inplaceeditingon input {
841     width: 150px;
844 .path-admin-tag .addstandardtags {
845     float: right;
847     img {
848         margin: 0 5px;
849     }
852 .path-tag .tag-relatedtags {
853     padding-top: 10px;
856 .path-tag .tag-management-box {
857     text-align: right;
860 .path-tag .tag-index-toc {
861     padding: 10px;
862     text-align: center;
865 .path-tag .tag-index-toc li,
866 .path-tag .tag-management-box li {
867     margin-left: 5px;
868     margin-right: 5px;
871 .path-tag .tag-management-box li a.edittag {
872     background-image: url([[pix:moodle|i/settings]]);
875 .path-tag .tag-management-box li a.flagasinappropriate {
876     background-image: url([[pix:moodle|i/flagged]]);
879 .path-tag .tag-management-box li a.removefrommyinterests {
880     background-image: url([[pix:moodle|t/delete]]);
883 .path-tag .tag-management-box li a.addtomyinterests {
884     background-image: url([[pix:moodle|t/add]]);
887 .path-tag .tag-management-box li a {
888     background-repeat: no-repeat;
889     background-position: left;
890     padding-left: 17px;
893 .tag_feed.media-list .media .itemimage {
894     float: left;
897 .tag_feed.media-list .media .itemimage img {
898     height: 35px;
899     width: 35px;
902 .tag_feed.media-list .media .media-body {
903     padding-right: 10px;
904     padding-left: 10px;
907 .tag_feed .media .muted a {
908     color: $text-muted;
911 .tag_cloud {
912     text-align: center;
915 .tag_cloud .inline-list li {
916     padding: 0 0.2em;
919 .tag_cloud .tag_overflow {
920     margin-top: 1em;
921     font-style: italic;
924 .tag_cloud .s20 {
925     font-size: 2.7em;
928 .tag_cloud .s19 {
929     font-size: 2.6em;
932 .tag_cloud .s18 {
933     font-size: 2.5em;
936 .tag_cloud .s17 {
937     font-size: 2.4em;
940 .tag_cloud .s16 {
941     font-size: 2.3em;
944 .tag_cloud .s15 {
945     font-size: 2.2em;
948 .tag_cloud .s14 {
949     font-size: 2.1em;
952 .tag_cloud .s13 {
953     font-size: 2em;
956 .tag_cloud .s12 {
957     font-size: 1.9em;
960 .tag_cloud .s11 {
961     font-size: 1.8em;
964 .tag_cloud .s10 {
965     font-size: 1.7em;
968 .tag_cloud .s9 {
969     font-size: 1.6em;
972 .tag_cloud .s8 {
973     font-size: 1.5em;
976 .tag_cloud .s7 {
977     font-size: 1.4em;
980 .tag_cloud .s6 {
981     font-size: 1.3em;
984 .tag_cloud .s5 {
985     font-size: 1.2em;
988 .tag_cloud .s4 {
989     font-size: 1.1em;
992 .tag_cloud .s3 {
993     font-size: 1em;
996 .tag_cloud .s2 {
997     font-size: 0.9em;
1000 .tag_cloud .s1 {
1001     font-size: 0.8em;
1004 .tag_cloud .s0 {
1005     font-size: 0.7em;
1008 .tag_list ul {
1009     display: inline;
1012 .tag_list.hideoverlimit .overlimit {
1013     display: none;
1016 .tag_list .tagmorelink {
1017     display: none;
1020 .tag_list.hideoverlimit .tagmorelink {
1021     display: inline;
1024 .tag_list.hideoverlimit .taglesslink {
1025     display: none;
1028 /**
1029 * Web Service
1030 */
1031 #webservice-doc-generator td {
1032     text-align: left;
1033     border: 0 solid black;
1036 /**
1037 * Enrol
1038 */
1039 .userenrolment {
1040     width: 100%;
1041     border-collapse: collapse;
1044 .userenrolment tr {
1045     vertical-align: top;
1048 .userenrolment td {
1049     padding: 0;
1050     height: 41px;
1053 .userenrolment .subfield {
1054     margin-right: 5px;
1057 .userenrolment .col_userdetails .subfield {
1058     margin-left: 40px;
1061 .userenrolment .col_userdetails .subfield_picture {
1062     float: left;
1063     margin-left: 0;
1066 .userenrolment .col_lastseen {
1067     width: 150px;
1070 .userenrolment .col_role {
1071     width: 262px;
1074 .userenrolment .col_role .roles,
1075 .userenrolment .col_group .groups {
1076     margin-right: 30px;
1079 .userenrolment .col_role .role {
1080     float: left;
1081     padding: 0 3px 3px;
1082     margin: 0 3px 3px;
1083     white-space: nowrap;
1086 .userenrolment .col_group .group {
1087     float: left;
1088     padding: 3px;
1089     margin: 3px;
1090     white-space: nowrap;
1093 .userenrolment .col_role .role a,
1094 .userenrolment .col_group .group a {
1095     margin-left: 3px;
1096     cursor: pointer;
1099 .userenrolment .col_role .addrole,
1100 .userenrolment .col_group .addgroup {
1101     float: right;
1102     padding: 3px;
1103     margin: 3px;
1105     > a:hover {
1106         border-bottom: 1px solid #666;
1107     }
1110 .userenrolment .col_role .addrole img,
1111 .userenrolment .col_group .addgroup img {
1112     vertical-align: baseline;
1115 .userenrolment .hasAllRoles .col_role .addrole {
1116     display: none;
1119 .userenrolment .col_enrol .enrolment {
1120     float: left;
1121     padding: 0 3px 3px;
1122     margin: 0 3px 3px;
1125 .userenrolment .col_enrol .enrolment a {
1126     float: right;
1127     margin-left: 3px;
1130 .corelightbox {
1131     background-color: #ccc;
1132     position: absolute;
1133     top: 0;
1134     left: 0;
1135     width: 100%;
1136     height: 100%;
1137     text-align: center;
1140 .corelightbox img {
1141     position: fixed;
1142     top: 50%;
1143     left: 50%;
1146 .mod-indent-outer {
1147     display: table;
1150 .mod-indent {
1151     display: table-cell;
1154 .label .mod-indent {
1155     float: left;
1156     padding-top: 20px;
1159 @include media-breakpoint-up(sm) {
1160     $mod-indent-size: 30px;
1161     /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1163     @for $i from 1 through 16 {
1164         $width: ($i * $mod-indent-size);
1166         .mod-indent-#{$i} {
1167             width: $width;
1168         }
1169     }
1171     .mod-indent-huge {
1172         width: (16 * $mod-indent-size);
1173     }
1176 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1177 .resourcecontent .mediaplugin_mp3 object {
1178     height: 25px;
1179     width: 600px;
1182 .resourcecontent audio.mediaplugin_html5audio {
1183     width: 600px;
1185 /** Large resource images should avoid hidden overflow **/
1186 .resourceimage {
1187     max-width: 100%;
1189 /* Audio player size in 'inline' mode (can only change width, as above) */
1190 .mediaplugin_mp3 object {
1191     height: 15px;
1192     width: 300px;
1195 audio.mediaplugin_html5audio {
1196     width: 300px;
1198 /* TinyMCE moodle media preview frame should not have padding */
1199 .core_media_preview.pagelayout-embedded #content {
1200     padding: 0;
1203 .core_media_preview.pagelayout-embedded #maincontent {
1204     height: 0;
1207 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1208     padding: 0;
1209     margin: 0;
1210     min-width: 0;
1211     background: none;
1214 .path-rating .ratingtable {
1215     width: 100%;
1216     margin-bottom: 1em;
1219 .path-rating .ratingtable th.rating {
1220     width: 100%;
1223 .path-rating .ratingtable td.rating,
1224 .path-rating .ratingtable td.time {
1225     white-space: nowrap;
1226     text-align: center;
1229 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1230 .moodle-dialogue-base .moodle-dialogue-lightbox {
1231     background-color: $gray-700;
1234 // Prevent adding backdrops to popups in popups.
1235 .pagelayout-popup {
1236     .moodle-dialogue-base {
1237         .moodle-dialogue-lightbox {
1238             background-color: transparent;
1239         }
1240         .moodle-dialogue {
1241             box-shadow: $popover-box-shadow;
1242         }
1243     }
1246 .moodle-dialogue-base .hidden,
1247 .moodle-dialogue-base .moodle-dialogue-hidden {
1248     display: none;
1251 .no-scrolling {
1252     overflow: hidden;
1255 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1256     left: 0;
1257     top: 0;
1258     right: 0;
1259     bottom: -50px;
1260     position: fixed;
1263 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1264     overflow: auto;
1267 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1268     width: 28px;
1269     height: 16px;
1270     background-size: 100%;
1273 .moodle-dialogue-base .moodle-dialogue-wrap {
1274     background-color: #fff;
1275     border: 1px solid #ccc;
1278 // Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1279 // it for a reason (conflicts with jquery .show()).
1280 .modal.show {
1281     display: block;
1284 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1285     display: flex;
1286     padding: 1rem 1rem;
1287     border-bottom: 1px solid #dee2e6;
1290 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1291     // Undo some YUI damage.
1292     min-height: 3rem;
1293     color: initial;
1294     background: initial;
1295     font-size: 1.5rem;
1296     line-height: 1.5;
1299 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1300     font-size: 1.5rem;
1303 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1304     /*rtl:raw:
1305         left: 0;
1306         right: auto;
1307     */
1308     padding: 0;
1309     position: relative;
1310     margin-left: auto;
1313 .moodle-dialogue-base .closebutton {
1314     padding: $modal-header-padding;
1315     margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
1316     position: relative;
1317     background-color: transparent;
1318     border: 0;
1319     background-image: none;
1320     box-shadow: none;
1321     opacity: 0.7;
1322     &:hover,
1323     &:active {
1324         opacity: 1;
1325     }
1326     &::after {
1327         content: "×";
1328     }
1331 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1332     padding: 0.5rem;
1333     body {
1334         background-color: $body-bg;
1335     }
1338 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1339     overflow: auto;
1340     position: absolute;
1341     top: 0;
1342     bottom: 50px;
1343     left: 0;
1344     right: 0;
1345     margin: 0;
1346     border: 0;
1349 .moodle-dialogue-exception .moodle-exception-param label {
1350     font-weight: bold;
1353 .moodle-dialogue-exception .param-stacktrace label {
1354     background-color: #eee;
1355     border: 1px solid #ccc;
1356     border-bottom-width: 0;
1359 .moodle-dialogue-exception .param-stacktrace pre {
1360     border: 1px solid #ccc;
1361     background-color: #fff;
1364 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1365     color: navy;
1366     font-size: $font-size-sm;
1369 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1370     color: map-get($theme-colors, 'warning');
1371     font-size: $font-size-sm;
1374 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1375     color: #333;
1376     font-size: 90%;
1377     border-bottom: 1px solid #eee;
1380 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1381     display: none;
1384 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1385     // Undo some YUI damage.
1386     background: initial;
1389 .moodle-dialogue-confirm .confirmation-message {
1390     margin: 0.5rem 0;
1393 .moodle-dialogue-confirm .confirmation-dialogue input {
1394     min-width: 80px;
1397 .moodle-dialogue-exception .moodle-exception-message {
1398     margin: 1em;
1401 .moodle-dialogue-exception .moodle-exception-param {
1402     margin-bottom: 0.5em;
1405 .moodle-dialogue-exception .moodle-exception-param label {
1406     width: 150px;
1409 .moodle-dialogue-exception .param-stacktrace label {
1410     display: block;
1411     margin: 0;
1412     padding: 4px 1em;
1415 .moodle-dialogue-exception .param-stacktrace pre {
1416     display: block;
1417     height: 200px;
1418     overflow: auto;
1421 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1422     display: inline-block;
1423     margin: 4px 0;
1426 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1427     display: inline-block;
1428     width: 50px;
1429     margin: 4px 1em;
1432 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1433     padding-left: 25px;
1434     margin-bottom: 4px;
1435     padding-bottom: 4px;
1438 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1439     opacity: 0.75;
1440     width: 100%;
1441     height: 100%;
1442     top: 0;
1443     left: 0;
1444     background-color: white;
1445     text-align: center;
1446     padding: 10% 0;
1448 /* Apply a default max-height on tooltip text */
1449 .moodle-dialogue .tooltiptext {
1450     max-height: 300px;
1453 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1454     z-index: 3001;
1456     .moodle-dialogue-bd {
1457         overflow: auto;
1458     }
1461 /**
1462  * Chooser Dialogues (moodle-core-chooserdialogue)
1463  *
1464  * This CSS belong to the chooser dialogue which should work both with, and
1465  * without javascript enabled
1466  */
1467 /* Hide the dialog and it's title */
1468 .chooserdialoguebody,
1469 .choosertitle {
1470     display: none;
1473 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1474     margin: 0;
1477 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1478     padding: 0;
1479     background: #f2f2f2;
1481     @include border-bottom-radius(10px);
1483 /* Center the submit buttons within the area */
1484 .choosercontainer #chooseform .submitbuttons {
1485     padding: 0.7em 0;
1486     text-align: right;
1488 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1490 @media (max-height: 639px) {
1491     .ios .choosercontainer #chooseform .submitbuttons {
1492         padding: 45px 0;
1493     }
1496 .choosercontainer #chooseform .submitbuttons input {
1497     min-width: 100px;
1498     margin: 0 0.5em;
1500 /* Various settings for the options area */
1501 .choosercontainer #chooseform .options {
1502     position: relative;
1503     border-bottom: 1px solid #bbb;
1505 /* Only set these options if we're showing the js container */
1506 .jschooser .choosercontainer #chooseform .alloptions {
1507     overflow-x: hidden;
1508     overflow-y: auto;
1509     max-width: 240px;
1511     .option {
1512         input[type=radio] {
1513             display: inline-block;
1514         }
1516         .typename {
1517             display: inline-block;
1518             width: 55%;
1519         }
1520     }
1522 /* Settings for option rows and option subtypes */
1523 .choosercontainer #chooseform .moduletypetitle,
1524 .choosercontainer #chooseform .option,
1525 .choosercontainer #chooseform .nonoption {
1526     margin-bottom: 0;
1527     padding: 0 1.6em 0 1.6em;
1530 .choosercontainer #chooseform .moduletypetitle {
1531     text-transform: uppercase;
1532     padding-top: 1.2em;
1533     padding-bottom: 0.4em;
1534     margin-bottom: 0.5rem;
1535     font-size: 100%;
1538 .choosercontainer #chooseform .option .typename,
1539 .choosercontainer #chooseform .nonoption .typename {
1540     padding: 0 0 0 0.5em;
1543 .choosercontainer #chooseform .modicon + .typename {
1544     padding-left: 0;
1547 .choosercontainer #chooseform .option input[type=radio],
1548 .choosercontainer #chooseform .option span.typename {
1549     vertical-align: middle;
1552 .choosercontainer #chooseform .option label {
1553     display: block;
1554     margin: 0;
1555     padding: ($spacer / 2) 0;
1556     border-bottom: 1px solid #fff;
1559 .choosercontainer #chooseform .option .icon {
1560     margin: 0;
1561     padding: 0 $spacer;
1564 .choosercontainer #chooseform .nonoption {
1565     padding-left: 2.7em;
1566     padding-top: 0.3em;
1567     padding-bottom: 0.1em;
1570 .choosercontainer #chooseform .subtype {
1571     margin-bottom: 0;
1572     padding: 0 1.6em 0 3.2em;
1575 .choosercontainer #chooseform .subtype .typename {
1576     margin: 0 0 0 0.2em;
1578 /* The instruction/help area */
1579 .jschooser .choosercontainer #chooseform .instruction,
1580 .jschooser .choosercontainer #chooseform .typesummary {
1581     display: none;
1582     position: absolute;
1583     top: 0;
1584     right: 0;
1585     bottom: 0;
1586     left: 240px;
1587     margin: 0;
1588     padding: 1.6em;
1589     background-color: #fff;
1590     overflow-x: hidden;
1591     overflow-y: auto;
1592     line-height: 2em;
1594 /* Selected option settings */
1595 .jschooser .choosercontainer #chooseform .instruction,
1596 .choosercontainer #chooseform .selected .typesummary {
1597     display: block;
1600 .choosercontainer #chooseform .selected {
1601     background-color: #fff;
1602     margin-top: -1px;
1603     padding-top: 1px;
1607 @include media-breakpoint-down(xs) {
1608     .jsenabled .choosercontainer #chooseform .alloptions {
1609         max-width: 100%;
1610     }
1612     .jsenabled .choosercontainer #chooseform .instruction,
1613     .jsenabled .choosercontainer #chooseform .typesummary {
1614         position: static;
1615     }
1618 /**
1619  * Module chooser dialogue (moodle-core-chooserdialogue)
1620  *
1621  * This CSS belong to the chooser dialogue which should work both with, and
1622  * without javascript enabled
1623  */
1624 .modchooser .modal-body {
1625     padding: 0;
1626     overflow-y: auto;
1627     min-height: 640px;
1628     display: flex;
1629     flex-direction: column;
1631     .searchresultitemscontainer-wrapper {
1632         min-height: 495px;
1633     }
1635     .carousel-item.active {
1636         display: flex;
1637     }
1638     .chooser-container {
1639         display: flex;
1640         flex-direction: column;
1641         flex: 1 1 auto;
1642     }
1644     .loading-icon {
1645         opacity: 1;
1646         .icon {
1647             display: block;
1648             font-size: 3em;
1649             height: 1em;
1650             width: 1em;
1651         }
1652     }
1653     .carousel-item .loading-icon .icon {
1654         margin: 1em auto;
1655     }
1656     .searchbar {
1657         width: 100%;
1658     }
1661 .modchooser .modal-footer {
1662     height: 70px;
1663     background: $modal-content-bg;
1664     .moodlenet-logo {
1665         .icon {
1666             height: 2.5rem;
1667             width: 6rem;
1668             margin-bottom: .6rem;
1669         }
1670     }
1673 .modchoosercontainer.noscroll {
1674     overflow-y: hidden;
1677 .modchoosercontainer .optionscontainer,
1678 .modchoosercontainer .searchresultitemscontainer {
1679     overflow-x: hidden;
1680     .option {
1681         // 2 items per line.
1682         flex-basis: calc(50% - 0.5rem);
1683         .optionactions {
1684             .optionaction {
1685                 cursor: pointer;
1686                 color: $gray-600;
1687                 i {
1688                     margin: 0;
1689                 }
1690             }
1691         }
1692         .optioninfo {
1693             a {
1694                 color: $gray-700;
1695                 &:hover {
1696                     text-decoration: none;
1697                 }
1698             }
1699         }
1700     }
1703 .modchooser .modal-body .optionsummary {
1704     background-color: $white;
1705     overflow-x: hidden;
1706     overflow-y: auto;
1707     height: 640px;
1709     .content {
1710         overflow-y: auto;
1711         .heading {
1712             .icon {
1713                 height: 32px;
1714                 width: 32px;
1715                 font-size: 32px;
1716                 padding: 0;
1717             }
1718         }
1719     }
1721     .actions {
1722         border-top: 1px solid $gray-300;
1723         background: $white;
1724     }
1727 @include media-breakpoint-down(xs) {
1728     .path-course-view .modal-dialog.modal-lg,
1729     .path-course-view .modal-content,
1730     .modchooser .modal-body,
1731     .modchooser .modal-body .carousel,
1732     .modchooser .modal-body .carousel-inner,
1733     .modchooser .modal-body .carousel-item,
1734     .modchooser .modal-body .optionsummary,
1735     .modchoosercontainer,
1736     .optionscontainer,
1737     .searchresultitemscontainer {
1738         min-height: auto;
1739         height: 100%;
1740         overflow-y: auto;
1741     }
1742     .path-course-view .modal-dialog.modal-lg {
1743         margin: 0;
1744     }
1745     .modchooser .modal-body .searchresultitemscontainer-wrapper {
1746         min-height: auto;
1747     }
1750 @include media-breakpoint-up(sm) {
1751     .modchoosercontainer .optionscontainer .option,
1752     .modchoosercontainer .searchresultitemscontainer .option {
1753         // Three items per line.
1754         flex-basis: calc(33.33% - 0.5rem);
1755     }
1758 @include media-breakpoint-up(lg) {
1759     .modchoosercontainer .optionscontainer .option,
1760     .modchoosercontainer .searchresultitemscontainer .option {
1761         // Six items per line.
1762         flex-basis: calc(16.66% - 0.5rem);
1763     }
1766 /* Form element: listing */
1767 .formlistingradio {
1768     padding-bottom: 25px;
1769     padding-right: 10px;
1772 .formlistinginputradio {
1773     float: left;
1776 .formlistingmain {
1777     min-height: 225px;
1780 .formlisting {
1781     position: relative;
1782     margin: 15px 0;
1783     padding: 1px 19px 14px;
1784     background-color: white;
1785     border: 1px solid #ddd;
1787     @include border-radius(4px);
1790 .formlistingmore {
1791     position: absolute;
1792     cursor: pointer;
1793     bottom: -1px;
1794     right: -1px;
1795     padding: 3px 7px;
1796     font-size: 12px;
1797     font-weight: bold;
1798     background-color: whitesmoke;
1799     border: 1px solid #ddd;
1800     color: #9da0a4;
1802     @include border-radius(4px 0 4px 0);
1805 .formlistingall {
1806     margin: 15px 0;
1807     padding: 0;
1809     @include border-radius(4px);
1812 .formlistingrow {
1813     cursor: pointer;
1814     border-bottom: 1px solid;
1815     border-color: #e1e1e8;
1816     border-left: 1px solid #e1e1e8;
1817     border-right: 1px solid #e1e1e8;
1818     background-color: #f7f7f9;
1820     @include border-radius(0 0 4px 4px);
1821     padding: 6px;
1822     top: 50%;
1823     left: 50%;
1824     min-height: 34px;
1825     float: left;
1826     width: 150px;
1829 body.jsenabled .formlistingradio {
1830     display: none;
1833 body.jsenabled .formlisting {
1834     display: block;
1837 a.criteria-action {
1838     padding: 0 3px;
1839     float: right;
1842 div.criteria-description {
1843     padding: 10px 15px;
1844     margin: 5px 0;
1845     background: none repeat scroll 0 0 #f9f9f9;
1846     border: 1px solid #eee;
1849 ul.badges {
1850     margin: 0;
1851     list-style: none;
1854 .badges li {
1855     position: relative;
1856     display: inline-block;
1857     padding-top: 1em;
1858     text-align: center;
1859     vertical-align: top;
1860     width: 150px;
1863 .badges li .badge-name {
1864     display: block;
1865     padding: 5px;
1868 .badges li > img {
1869     position: absolute;
1872 .badges li .badge-image {
1873     width: 100px;
1874     height: 100px;
1875     left: 10px;
1876     top: 0;
1877     z-index: 1;
1880 .badges li .badge-actions {
1881     position: relative;
1884 .badges li .expireimage {
1885     width: 100px;
1886     height: 100px;
1887     left: 25px;
1888     top: 0;
1889     position: absolute;
1890     z-index: 10;
1891     opacity: 0.85;
1894 #badge-image {
1895     background-color: transparent;
1896     padding: 0;
1897     position: relative;
1898     min-width: 100px;
1899     width: 20%;
1900     display: inline-block;
1901     vertical-align: top;
1902     margin-top: 17px;
1903     margin-bottom: 20px;
1905     .expireimage {
1906         width: 100px;
1907         height: 100px;
1908         left: 0;
1909         top: 0;
1910         opacity: 0.85;
1911         position: absolute;
1912         z-index: 10;
1913     }
1915     .singlebutton {
1916         padding-top: 5px;
1917         display: block;
1919         button {
1920             margin-left: 4px;
1921         }
1922     }
1925 #badge-details {
1926     display: inline-block;
1927     width: 79%;
1930 #badge-overview dl,
1931 #badge-details dl {
1932     margin: 0;
1934     dt,
1935     dd {
1936         vertical-align: top;
1937         padding: 3px 0;
1938     }
1940     dt {
1941         clear: both;
1942         display: inline-block;
1943         width: 20%;
1944         min-width: 100px;
1945     }
1947     dd {
1948         display: inline-block;
1949         width: 79%;
1950         margin-left: 1%;
1951     }
1954 .badge-profile {
1955     vertical-align: top;
1958 .connected {
1959     color: map-get($theme-colors, 'success');
1962 .notconnected {
1963     color: map-get($theme-colors, 'danger');
1966 .connecting {
1967     color: map-get($theme-colors, 'warning');
1970 #page-badges-award .recipienttable tr td {
1971     vertical-align: top;
1974 #page-badges-award .recipienttable tr td.actions .actionbutton {
1975     margin: 0.3em 0;
1976     padding: 0.5em 0;
1977     width: 100%;
1980 #page-badges-award .recipienttable tr td.existing,
1981 #page-badges-award .recipienttable tr td.potential {
1982     width: 42%;
1985 #issued-badge-table .activatebadge {
1986     display: inline-block;
1989 .statusbox.active {
1990     background-color: $state-success-bg;
1993 .statusbox.inactive {
1994     background-color: $state-warning-bg;
1997 .statusbox {
1998     text-align: center;
1999     margin-bottom: 5px;
2000     padding: 5px;
2003 .statusbox .activatebadge {
2004     display: inline-block;
2007 .statusbox .activatebadge input[type=submit] {
2008     margin: 3px;
2011 .activatebadge {
2012     margin: 0;
2013     text-align: left;
2014     vertical-align: middle;
2017 img#persona_signin {
2018     cursor: pointer;
2021 .addcourse {
2022     float: right;
2025 .invisiblefieldset {
2026     display: inline;
2027     padding: 0;
2028     border-width: 0;
2031 /** Page header */
2032 #page-header {
2033     .logo {
2034         margin: $spacer 0;
2035         img {
2036             max-height: 75px;
2037         }
2038     }
2041 /** Navbar logo. */
2042 nav.navbar .logo img {
2043     max-height: 35px;
2046 .nav.usernav {
2047     .nav-item {
2048         display: flex;
2049     }
2050     .usermenu .dropdown-toggle {
2051         padding: 0 0.5rem;
2052     }
2055 /** Header-bar styles **/
2056 .page-context-header {
2057     // We need to be explicit about the height of the header.
2058     $pageHeaderHeight: 140px;
2060     // Do not remove these rules.
2061     overflow: hidden;
2062     padding: 0.25rem;
2064     .page-header-image,
2065     .page-header-headings {
2066         float: left;
2067         display: block;
2068         position: relative;
2069     }
2071     .page-header-image {
2072         margin-right: 1em;
2073         margin-bottom: 1em;
2074         & > a {
2075             display: inline-block;
2076         }
2077     }
2079     .page-header-headings,
2080     .header-button-group {
2081         position: relative;
2082         line-height: 24px;
2083         vertical-align: middle;
2084     }
2086     .header-button-group {
2087         display: block;
2088         float: left;
2089     }
2092 ul.dragdrop-keyboard-drag li {
2093     list-style-type: none;
2096 a.disabled:hover,
2097 a.disabled {
2098     text-decoration: none;
2099     cursor: default;
2100     font-style: italic;
2101     color: #808080;
2104 body.lockscroll {
2105     height: 100%;
2106     overflow: hidden;
2109 .progressbar_container {
2110     max-width: 500px;
2111     margin: 0 auto;
2114 /* IE10 only fix for calendar titling */
2115 .ie10 .yui3-calendar-header-label {
2116     display: inline-block;
2119 dd:before,
2120 dd:after {
2121     display: block;
2122     content: " ";
2125 dd:after {
2126     clear: both;
2129 // Active tabs with links should have a different
2130 // cursor to indicate they are clickable.
2131 .nav-tabs > .active > a[href],
2132 .nav-tabs > .active > a[href]:hover,
2133 .nav-tabs > .active > a[href]:focus {
2134     cursor: pointer;
2137 .inplaceeditable {
2138     &.inplaceeditingon {
2139         position: relative;
2141         .editinstructions {
2142             margin-top: -30px;
2143             font-weight: normal;
2144             margin-right: 0;
2145             margin-left: 0;
2146             left: 0;
2147             right: auto;
2148             white-space: nowrap;
2149         }
2150         @include media-breakpoint-up(sm) {
2151             input {
2152                 width: 330px;
2153                 vertical-align: text-bottom;
2154                 margin-bottom: 0;
2155             }
2156         }
2158         select {
2159             margin-bottom: 0;
2160         }
2161     }
2163     .quickediticon img {
2164         opacity: 0.2;
2165     }
2167     .quickeditlink {
2168         color: inherit;
2169         text-decoration: inherit;
2170     }
2172     &:hover .quickeditlink .quickediticon img,
2173     .quickeditlink:focus .quickediticon img {
2174         opacity: 1;
2175     }
2177     &.inplaceeditable-toggle .quickediticon {
2178         display: none;
2179     }
2181     &.inplaceeditable-autocomplete {
2182         display: block;
2183     }
2186 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2187     margin-top: -20px;
2190 /** Chart area. */
2191 .chart-area {
2193     .chart-table-data {
2194         display: none;
2195     }
2197     .chart-table {
2198         .chart-output-htmltable caption {
2199             white-space: nowrap;
2200         }
2201         /** When accessible, we display the table only. */
2202         &.accesshide {
2203             .chart-table-expand {
2204                 display: none;
2205             }
2206             .chart-table-data {
2207                 display: block;
2208             }
2209         }
2210     }
2213 // Reset for ul.
2214 ul {
2215     padding-left: 1rem;
2216     -webkit-margin-start: 0.2rem;  /* stylelint-disable-line */
2219 /* YUI 2 Tree View */
2220 /*rtl:raw:
2221 .ygtvtn,
2222 .ygtvtm,
2223 .ygtvtmh,
2224 .ygtvtmhh,
2225 .ygtvtp,
2226 .ygtvtph,
2227 .ygtvtphh,
2228 .ygtvln,
2229 .ygtvlm,
2230 .ygtvlmh,
2231 .ygtvlmhh,
2232 .ygtvlp,
2233 .ygtvlph,
2234 .ygtvlphh,
2235 .ygtvdepthcell,
2236 .ygtvok,
2237 .ygtvok:hover,
2238 .ygtvcancel,
2239 .ygtvcancel:hover {
2240     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
2242 */
2244 .hover-tooltip-container {
2245     position: relative;
2247     .hover-tooltip {
2248         opacity: 0;
2249         visibility: hidden;
2250         position: absolute;
2251         /*rtl:ignore*/
2252         left: 50%;
2253         top: calc(-50% - 5px);
2254         transform: translate(-50%, -50%);
2255         background-color: #fff;
2256         border: 1px solid rgba(0, 0, 0, .2);
2257         border-radius: .3rem;
2258         box-sizing: border-box;
2259         padding: 5px;
2260         white-space: nowrap;
2261         transition: opacity 0.15s, visibility 0.15s;
2262         z-index: 1000;
2264         &:before {
2265             content: '';
2266             display: inline-block;
2267             border-left: 8px solid transparent;
2268             border-right: 8px solid transparent;
2269             border-top: 8px solid rgba(0, 0, 0, .2);
2270             position: absolute;
2271             bottom: -8px;
2272             left: calc(50% - 8px);
2273         }
2275         &:after {
2276             content: '';
2277             display: inline-block;
2278             border-left: 7px solid transparent;
2279             border-right: 7px solid transparent;
2280             border-top: 7px solid #fff;
2281             position: absolute;
2282             bottom: -6px;
2283             left: calc(50% - 7px);
2284             z-index: 2;
2285         }
2286     }
2288     &:hover {
2289         .hover-tooltip {
2290             opacity: 1;
2291             visibility: visible;
2292             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2293         }
2294     }
2297 #region-flat-nav {
2298     padding-right: 0;
2299     padding-left: 0;
2300     .nav {
2301         margin-right: $grid-gutter-width / 2;
2302         background-color: $card-bg;
2303     }
2304     @include media-breakpoint-down(sm) {
2305         .nav {
2306             margin-top: $grid-gutter-width;
2307             margin-right: 0;
2308         }
2309     }
2312 // Footer link colour was added to allow the colour of footer links to be changed,
2313 // but really in bootstrap we want the colour of links on .bg-inverse to be changed
2314 // rather than being specific to the footer. This is kept for backwards compatibility.
2315 $footer-link-color: $bg-inverse-link-color !default;
2316 #page-footer a {
2317     color: $footer-link-color;
2318     text-decoration: underline;
2319     .icon {
2320         color: $footer-link-color;
2321     }
2322     &:focus .icon {
2323         color: $body-color;
2324     }
2327 .bg-inverse a {
2328     color: $bg-inverse-link-color;
2329     text-decoration: underline;
2330     .icon {
2331         color: $bg-inverse-link-color;
2332     }
2335 .sitelink {
2336     img {
2337         width: 112px;
2338     }
2341 // Make links in a menu clickable anywhere in the row.
2342 .dropdown-item a {
2343     display: block;
2344     width: 100%;
2345     color: $body-color;
2347 .dropdown-item:active a {
2348     color: $dropdown-link-active-color;
2351 .competency-tree {
2352     ul {
2353         padding-left: 1.5rem;
2354     }
2357 .sr-only-focusable {
2358     &:active,
2359     &:focus {
2360         z-index: 1031;
2361         position: fixed;
2362         background: #fff;
2363         padding: 7px;
2364         left: 0;
2365         top: 0;
2366     }
2369 [data-drag-type="move"] {
2370     cursor: move;
2371     touch-action: none;
2374 .clickable {
2375     cursor: pointer;
2378 .overlay-icon-container {
2379     position: absolute;
2380     top: 0;
2381     left: 0;
2382     width: 100%;
2383     height: 100%;
2384     background-color: rgba(255, 255, 255, 0.6);
2386     .loading-icon {
2387         position: absolute;
2388         top: 50%;
2389         left: 50%;
2390         transform: translate(-50%, -50%);
2392         .icon {
2393             height: 30px;
2394             width: 30px;
2395             font-size: 30px;
2396         }
2397     }
2400 .w-auto {
2401     width: auto;
2404 .bg-pulse-grey {
2405     animation: bg-pulse-grey 2s infinite linear;
2408 @keyframes bg-pulse-grey {
2409     0% {
2410         background-color: $gray-100;
2411     }
2412     50% {
2413         background-color: darken($gray-100, 5%);
2414     }
2415     100% {
2416         background-color: $gray-100;
2417     }
2420 @each $size, $length in $spacers {
2421     .line-height-#{$size} {
2422         line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2423     }
2426 .dir-rtl {
2427     .dir-rtl-hide {
2428         display: none;
2429     }
2432 .dir-ltr {
2433     .dir-ltr-hide {
2434         display: none;
2435     }
2438 .paged-content-page-container {
2439     min-height: 3.125rem;
2442 body.h5p-embed {
2443     #page-content {
2444         display: inherit;
2445     }
2446     #maincontent {
2447         display: none;
2448     }
2449     .h5pmessages {
2450         min-height: 230px; // This should be the same height as default core_h5p iframes.
2451     }
2454 .text-decoration-none {
2455     text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
2458 .colour-inherit {
2459     color: inherit !important; /* stylelint-disable-line declaration-no-important */
2462 .position-right {
2463     right: 0 !important; /* stylelint-disable-line declaration-no-important */
2466 .overflow-hidden {
2467     overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
2470 .text-break {
2471     overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
2474 .z-index-0 {
2475     z-index: 0 !important; /* stylelint-disable-line declaration-no-important */
2478 .z-index-1 {
2479     z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
2482 // These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
2483 .float-left {
2484     float: left !important; /* stylelint-disable-line declaration-no-important */
2487 .float-right {
2488     float: right !important; /* stylelint-disable-line declaration-no-important */
2491 .img-responsive {
2492     @include img-fluid();
2495 input[disabled] {
2496     cursor: not-allowed;
2499 .custom-select {
2500     width: auto;
2503 .fade.in {
2504     opacity: 1;
2507 .clamp-2 {
2508     display: -webkit-box;
2509     -webkit-box-orient: vertical;
2510     -webkit-line-clamp: 2;
2511     overflow: hidden;
2514 .word-break-all {
2515     word-break: break-all;
2518 .matchtext {
2519     background-color: lighten($primary, 40%);
2520     color: $body-color;
2521     height: 1.5rem;
2524 .border-radius {
2525     @if $enable-rounded {
2526         @include border-radius($card-border-radius);
2527     }
2530 // Emoji picker.
2531 $picker-width: 350px !default;
2532 $picker-width-xs: 320px !default;
2533 $picker-height: 400px !default;
2534 $picker-row-height: 40px !default;
2535 $picker-emoji-button-size: 40px !default;
2536 $picker-emoji-button-font-size: 24px !default;
2537 $picker-emoji-category-count: 9 !default;
2538 $picker-emojis-per-row: 7 !default;
2540 .emoji-picker {
2541     width: $picker-width;
2542     height: $picker-height;
2544     .category-button {
2545         padding: .375rem 0;
2546         height: 100%;
2547         width: $picker-width / $picker-emoji-category-count;
2548         border-top: none;
2549         border-left: none;
2550         border-right: none;
2551         border-bottom: 2px solid transparent;
2553         &.selected {
2554             border-bottom: 2px solid map-get($theme-colors, 'primary');
2555         }
2556     }
2558     .emojis-container,
2559     .search-results-container {
2560         min-width: $picker-emojis-per-row * $picker-emoji-button-size;
2561     }
2563     .picker-row {
2564         height: $picker-row-height;
2566         .category-name {
2567             line-height: $picker-row-height;
2568         }
2570         .emoji-button {
2571             height: $picker-emoji-button-size;
2572             width: $picker-emoji-button-size;
2573             line-height: $picker-emoji-button-size;
2574             font-size: $picker-emoji-button-font-size;
2575             overflow: hidden;
2577             @include hover-focus {
2578                 color: inherit;
2579                 text-decoration: none;
2580             }
2581         }
2582     }
2584     .emoji-preview {
2585         height: $picker-row-height;
2586         font-size: $picker-row-height;
2587         line-height: $picker-row-height;
2588     }
2590     .emoji-short-name {
2591         line-height: $picker-row-height / 2;
2592     }
2594     @include media-breakpoint-down(xs) {
2595         width: $picker-width-xs;
2596     }
2599 .emoji-auto-complete {
2600     height: $picker-row-height;
2602     .btn.btn-link.btn-icon.emoji-button {
2603         height: $picker-emoji-button-size;
2604         width: $picker-emoji-button-size;
2605         line-height: $picker-emoji-button-size;
2606         font-size: $picker-emoji-button-font-size;
2608         &.active {
2609             background-color: $gray-200;
2610         }
2611     }
2614 .toast-wrapper {
2615     max-width: $toast-max-width;
2616     max-height: 0;
2617     // Place these above any modals and other elements.
2618     z-index: 1051;
2620     > :first-child {
2621         margin-top: $spacer;
2622     }
2625 @each $color, $value in $theme-colors {
2626     .alert-#{$color} a {
2627         color: darken(theme-color-level($color, $alert-color-level), 10%);
2628     }
2630 .alert a {
2631     font-weight: $font-weight-bold;
2634 @include media-breakpoint-down(sm) {
2635     #page-navbar {
2636         width: 100%;
2637     }
2639     .breadcrumb:not(:empty) {
2640         width: 100%;
2641         border: ($border-width * 2) solid $gray-200;
2642         padding: $spacer / 4;
2643         margin-bottom: $spacer / 2;
2644         .breadcrumb-item {
2645             padding-top: $spacer / 3;
2646             padding-bottom: $spacer / 3;
2647             display: inline-block;
2648         }
2649     }
2651     .mform {
2652         width: 100%;
2653         padding-right: 15px;
2654         padding-left: 15px;
2655     }
2656     .pagination {
2657         flex-wrap: wrap;
2658         justify-content: center;
2659     }
2660     .custom-select {
2661         max-width: 100%;
2662     }
2663     .card .card-body {
2664         padding: $card-spacer-x / 2;
2665     }
2666     #page-header {
2667         .card {
2668             border: 0;
2669             .card-body {
2670                 padding: 0;
2671             }
2672         }
2673     }
2674     .nav-tabs,
2675     .nav-pills {
2676         margin: 0;
2677         border: 0;
2678         padding: $spacer / 8;
2679         background-color: $gray-200;
2680         .nav-item {
2681             flex: 1 1 auto;
2682             text-align: center;
2683         }
2684         .nav-link {
2685             background: $white;
2686             border: 0;
2687             margin: $spacer / 8;
2688             &.active {
2689                 @include button-outline-variant($gray-600);
2690                 border-color: $gray-600;
2691             }
2692         }
2693     }
2696 @media (max-width: map-get($grid-breakpoints, "sm")) and (max-height: 320px) {
2697     div#page {
2698         margin-top: 0;
2699     }
2700     .navbar.fixed-top {
2701         position: relative;
2702         z-index: inherit;
2703     }
2706 .link-underline {
2707     text-decoration: underline;
2708     &:focus {
2709         text-decoration: none;
2710     }
2713 .alert.cta {
2714     .icon {
2715         padding: 0.3rem;
2716         &.fa {
2717             border-radius: 50%;
2718             border-style: solid;
2719             border-width: 0.125rem;
2720         }
2721     }