e49aaae7c6484ca60bbcdf75843ed3d2af288956
[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 .inline,
223 .inline-list li {
224     display: inline;
227 .notifytiny {
228     font-size: $font-size-xs;
231 .notifytiny li,
232 .notifytiny td {
233     font-size: 100%;
236 .red,
237 .notifyproblem {
238     color: map-get($theme-colors, 'warning');
241 .green,
242 .notifysuccess {
243     color: map-get($theme-colors, 'success');
246 .highlight {
247     color: map-get($theme-colors, 'info');
250 .fitem.advanced .text-info {
251     font-weight: bold;
254 .reportlink {
255     text-align: right;
258 a.autolink.glossary:hover {
259     cursor: help;
261 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
262 .collapsibleregioncaption {
263     white-space: nowrap;
264     min-height: $line-height-base * $font-size-base;
267 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
268     cursor: pointer;
271 .pagelayout-mydashboard #region-main {
272     border: 0;
273     padding: 0;
274     background-color: transparent;
275     margin-top: -1px;
278 @include media-breakpoint-down(sm) {
279     .pagelayout-mydashboard,
280     .pagelayout-login {
281         #region-main-box {
282             padding-left: 0;
283             padding-right: 0;
284         }
285     }
288 .collapsibleregioncaption img {
289     vertical-align: middle;
292 .jsenabled .hiddenifjs {
293     display: none;
296 .visibleifjs {
297     display: none;
300 .jsenabled .visibleifjs {
301     display: inline;
304 .jsenabled .collapsibleregion {
305     overflow: hidden;
306     box-sizing: content-box;
309 .jsenabled .collapsed .collapsibleregioninner {
310     visibility: hidden;
313 .collapsible-actions {
314     display: none;
315     text-align: right;
318 .jsenabled .collapsible-actions {
319     display: block;
322 .collapsible-actions .collapseexpand {
323     padding-left: 20px;
324     background: url([[pix:t/collapsed]]) 2px center no-repeat;
326 /*rtl:raw:
327 .collapsible-actions .collapseexpand {
328     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
330 */
331 .collapsible-actions .collapse-all {
332     background-image: url([[pix:t/expanded]]);
335 .yui-overlay .yui-widget-bd {
336     background-color: #ffee69;
337     border: 1px solid #a6982b;
338     border-top-color: #d4c237;
339     color: #000;
340     left: 0;
341     padding: 2px 5px;
342     position: relative;
343     top: 0;
344     z-index: 1;
347 .clearer {
348     background: transparent;
349     border-width: 0;
350     clear: both;
351     display: block;
352     height: 1px;
353     margin: 0;
354     padding: 0;
357 .bold,
358 .warning,
359 .errorbox .title,
360 .pagingbar .title,
361 .pagingbar .thispage {
362     font-weight: bold;
365 img.userpicture {
366     margin-right: 0.5rem;
369 img.resize {
370     height: 1em;
371     width: 1em;
374 .action-menu .dropdown-toggle {
375     text-decoration: none;
378 .action-menu {
379     white-space: nowrap;
382 .block img.resize {
383     height: 0.9em;
384     width: 0.8em;
386 /* Icon styles */
387 img.activityicon {
388     height: 24px;
389     width: 24px;
390     vertical-align: middle;
393 .headermain {
394     font-weight: bold;
397 #maincontent {
398     display: block;
399     height: 1px;
400     overflow: hidden;
403 img.uihint {
404     cursor: help;
407 #addmembersform table {
408     margin-left: auto;
409     margin-right: auto;
412 table.flexible .emptyrow {
413     display: none;
416 form.popupform,
417 form.popupform div {
418     display: inline;
421 .arrow_button input {
422     overflow: hidden;
424 .no-overflow {
425     overflow: auto;
428 // Minimum height required for a menu in a table inside a scrollable div.
429 // Position required for table sizing inside a flex container.
430 .no-overflow > .generaltable {
431     position: relative;
432     margin-bottom: 0;
433     min-height: 10em;
435 // Accessibility features
437 // Accessibility: text 'seen' by screen readers but not visual users.
438 .accesshide {
439     @include sr-only();
442 span.hide,
443 div.hide,
444 .hidden {
445     display: none;
447 // Accessibility: Skip block link, for keyboard-only users.
448 a.skip-block,
449 a.skip {
450     position: absolute;
451     top: -1000em;
452     font-size: 0.85em;
453     text-decoration: none;
456 a.skip-block:focus,
457 a.skip-block:active,
458 a.skip:focus,
459 a.skip:active {
460     position: static;
461     display: block;
464 .skip-block-to {
465     display: block;
466     height: 1px;
467     overflow: hidden;
469 // Blogs
470 .addbloglink {
471     text-align: center;
474 .blog_entry .audience {
475     text-align: right;
476     padding-right: 4px;
479 .blog_entry .tags {
480     margin-top: 15px;
483 .blog_entry .content {
484     margin-left: 43px;
486 // Group
488 #doc-contents h1 {
489     margin: 1em 0 0 0;
492 #doc-contents ul {
493     margin: 0;
494     padding: 0;
495     width: 90%;
498 #doc-contents ul li {
499     list-style-type: none;
502 .groupmanagementtable td {
503     vertical-align: top;
506 .groupmanagementtable #existingcell,
507 .groupmanagementtable #potentialcell {
508     width: 42%;
511 .groupmanagementtable #buttonscell {
512     width: 16%;
515 .groupmanagementtable #buttonscell p.arrow_button input {
516     width: auto;
517     min-width: 80%;
518     margin: 0 auto;
519     display: block;
522 .groupmanagementtable #removeselect_wrapper,
523 .groupmanagementtable #addselect_wrapper {
524     width: 100%;
527 .groupmanagementtable #removeselect_wrapper label,
528 .groupmanagementtable #addselect_wrapper label {
529     font-weight: normal;
532 #group-usersummary {
533     width: 14em;
536 .groupselector {
537     margin-top: 3px;
538     margin-bottom: 3px;
539     display: inline-block;
542 .groupselector label {
543     display: inline-block;
546 // Login
547 .login-page {
548     [name="username"] {
549         margin-bottom: -1px;
550         border-bottom-right-radius: 0;
551         border-bottom-left-radius: 0;
552     }
554     [type="password"] {
555         margin-bottom: 10px;
556         border-top-left-radius: 0;
557         border-top-right-radius: 0;
558     }
561 // Notes
562 .notepost {
563     margin-bottom: 1em;
566 .notepost .userpicture {
567     float: left;
568     margin-right: 5px;
571 .notepost .content,
572 .notepost .footer {
573     clear: both;
576 .notesgroup {
577     margin-left: 20px;
580 // My Moodle
581 .path-my .coursebox {
582     margin: $spacer 0;
583     padding: 0;
585     .overview {
586         margin: 15px 30px 10px 30px;
587     }
590 .path-my .coursebox .info {
591     float: none;
592     margin: 0;
595 // Modules
596 .mod_introbox {
597     padding: 10px;
600 table.mod_index {
601     width: 100%;
604 // Comments
605 .comment-ctrl {
606     font-size: 12px;
607     display: none;
608     margin: 0;
609     padding: 0;
612 .comment-ctrl h5 {
613     margin: 0;
614     padding: 5px;
617 .comment-area {
618     max-width: 400px;
619     padding: 5px;
622 .comment-area textarea {
623     width: 100%;
624     overflow: auto;
626     &.fullwidth {
627         -webkit-box-sizing: border-box;
628         -moz-box-sizing: border-box;
629         box-sizing: border-box;
630     }
633 .comment-area .fd {
634     text-align: right;
637 .comment-meta span {
638     color: gray;
641 .comment-link img {
642     vertical-align: text-bottom;
645 .comment-list {
646     font-size: 11px;
647     overflow: auto;
648     list-style: none;
649     padding: 0;
650     margin: 0;
653 .comment-list li {
654     margin: 2px;
655     list-style: none;
656     margin-bottom: 5px;
657     clear: both;
658     padding: .3em;
659     position: relative;
662 .comment-list li.first {
663     display: none;
666 .comment-paging {
667     text-align: center;
670 .comment-paging .pageno {
671     padding: 2px;
674 .comment-paging .curpage {
675     border: 1px solid #ccc;
678 .comment-message .picture {
679     width: 20px;
680     float: left;
683 .comment-message .text {
684     margin: 0;
685     padding: 0;
688 .comment-message .text p {
689     padding: 0;
690     margin: 0 18px 0 0;
693 .comment-delete {
694     position: absolute;
695     top: 0;
696     right: 0;
697     margin: .3em;
700 .comment-report-selectall {
701     display: none;
704 .comment-link {
705     display: none;
708 .jsenabled .comment-link {
709     display: block;
712 .jsenabled .showcommentsnonjs {
713     display: none;
716 .jsenabled .comment-report-selectall {
717     display: inline;
719 /**
720 * Completion progress report
721 */
722 .completion-expired {
723     color: map-get($theme-colors, 'warning');
726 .completion-expected {
727     font-size: $font-size-xs;
730 .completion-sortchoice,
731 .completion-identifyfield {
732     font-size: $font-size-xs;
733     vertical-align: bottom;
736 .completion-progresscell {
737     text-align: right;
740 .completion-expired .completion-expected {
741     font-weight: bold;
743 /**
744 * Tags
745 */
746 img.user-image {
747     height: 100px;
748     width: 100px;
751 #tag-search-box {
752     text-align: center;
753     margin: 10px auto;
756 .path-tag .tag-index-items .tagarea {
757     border: 1px solid #e3e3e3;
758     border-radius: 4px;
759     padding: 10px;
760     margin-top: 10px;
763 .path-tag .tag-index-items .tagarea h3 {
764     display: block;
765     padding: 3px 0 10px 0;
766     margin: 0;
767     font-size: 1.1em;
768     font-weight: bold;
769     line-height: 20px;
770     color: #999;
771     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
772     text-transform: uppercase;
773     word-wrap: break-word;
774     border-bottom: solid 1px #e3e3e3;
775     margin-bottom: 10px;
778 .path-tag .tagarea .controls,
779 .path-tag .tagarea .taggeditems {
780     @include clearfix();
783 .path-tag .tagarea .controls,
784 .path-tag .tag-backtoallitems {
785     text-align: center;
788 .path-tag .tagarea .controls .gotopage.nextpage {
789     float: right;
792 .path-tag .tagarea .controls .gotopage.prevpage {
793     float: left;
796 .path-tag .tagarea .controls .exclusivemode {
797     display: inline-block;
800 .path-tag .tagarea .controls.controls-bottom {
801     margin-top: 5px;
804 .path-tag .tagarea .controls .gotopage.nextpage::after {
805     padding-right: 5px;
806     padding-left: 5px;
807     content: "»";
810 .path-tag .tagarea .controls .gotopage.prevpage::before {
811     padding-right: 5px;
812     padding-left: 5px;
813     content: "«";
816 span.flagged-tag,
817 tr.flagged-tag,
818 span.flagged-tag a,
819 tr.flagged-tag a {
820     color: map-get($theme-colors, 'warning');
823 .tag-management-table td,
824 .tag-management-table th {
825     vertical-align: middle;
826     padding: 4px;
829 .tag-management-table .inplaceeditable.inplaceeditingon input {
830     width: 150px;
833 .path-admin-tag .addstandardtags {
834     float: right;
836     img {
837         margin: 0 5px;
838     }
841 .path-tag .tag-relatedtags {
842     padding-top: 10px;
845 .path-tag .tag-management-box {
846     text-align: right;
849 .path-tag .tag-index-toc {
850     padding: 10px;
851     text-align: center;
854 .path-tag .tag-index-toc li,
855 .path-tag .tag-management-box li {
856     margin-left: 5px;
857     margin-right: 5px;
860 .path-tag .tag-management-box li a.edittag {
861     background-image: url([[pix:moodle|i/settings]]);
864 .path-tag .tag-management-box li a.flagasinappropriate {
865     background-image: url([[pix:moodle|i/flagged]]);
868 .path-tag .tag-management-box li a.removefrommyinterests {
869     background-image: url([[pix:moodle|t/delete]]);
872 .path-tag .tag-management-box li a.addtomyinterests {
873     background-image: url([[pix:moodle|t/add]]);
876 .path-tag .tag-management-box li a {
877     background-repeat: no-repeat;
878     background-position: left;
879     padding-left: 17px;
882 .tag_feed.media-list .media .itemimage {
883     float: left;
886 .tag_feed.media-list .media .itemimage img {
887     height: 35px;
888     width: 35px;
891 .tag_feed.media-list .media .media-body {
892     padding-right: 10px;
893     padding-left: 10px;
896 .tag_feed .media .muted a {
897     color: $text-muted;
900 .tag_cloud {
901     text-align: center;
904 .tag_cloud .inline-list li {
905     padding: 0 0.2em;
908 .tag_cloud .tag_overflow {
909     margin-top: 1em;
910     font-style: italic;
913 .tag_cloud .s20 {
914     font-size: 2.7em;
917 .tag_cloud .s19 {
918     font-size: 2.6em;
921 .tag_cloud .s18 {
922     font-size: 2.5em;
925 .tag_cloud .s17 {
926     font-size: 2.4em;
929 .tag_cloud .s16 {
930     font-size: 2.3em;
933 .tag_cloud .s15 {
934     font-size: 2.2em;
937 .tag_cloud .s14 {
938     font-size: 2.1em;
941 .tag_cloud .s13 {
942     font-size: 2em;
945 .tag_cloud .s12 {
946     font-size: 1.9em;
949 .tag_cloud .s11 {
950     font-size: 1.8em;
953 .tag_cloud .s10 {
954     font-size: 1.7em;
957 .tag_cloud .s9 {
958     font-size: 1.6em;
961 .tag_cloud .s8 {
962     font-size: 1.5em;
965 .tag_cloud .s7 {
966     font-size: 1.4em;
969 .tag_cloud .s6 {
970     font-size: 1.3em;
973 .tag_cloud .s5 {
974     font-size: 1.2em;
977 .tag_cloud .s4 {
978     font-size: 1.1em;
981 .tag_cloud .s3 {
982     font-size: 1em;
985 .tag_cloud .s2 {
986     font-size: 0.9em;
989 .tag_cloud .s1 {
990     font-size: 0.8em;
993 .tag_cloud .s0 {
994     font-size: 0.7em;
997 .tag_list ul {
998     display: inline;
1001 .tag_list.hideoverlimit .overlimit {
1002     display: none;
1005 .tag_list .tagmorelink {
1006     display: none;
1009 .tag_list.hideoverlimit .tagmorelink {
1010     display: inline;
1013 .tag_list.hideoverlimit .taglesslink {
1014     display: none;
1017 /**
1018 * Web Service
1019 */
1020 #webservice-doc-generator td {
1021     text-align: left;
1022     border: 0 solid black;
1025 /**
1026 * Enrol
1027 */
1028 .userenrolment {
1029     width: 100%;
1030     border-collapse: collapse;
1033 .userenrolment tr {
1034     vertical-align: top;
1037 .userenrolment td {
1038     padding: 0;
1039     height: 41px;
1042 .userenrolment .subfield {
1043     margin-right: 5px;
1046 .userenrolment .col_userdetails .subfield {
1047     margin-left: 40px;
1050 .userenrolment .col_userdetails .subfield_picture {
1051     float: left;
1052     margin-left: 0;
1055 .userenrolment .col_lastseen {
1056     width: 150px;
1059 .userenrolment .col_role {
1060     width: 262px;
1063 .userenrolment .col_role .roles,
1064 .userenrolment .col_group .groups {
1065     margin-right: 30px;
1068 .userenrolment .col_role .role {
1069     float: left;
1070     padding: 0 3px 3px;
1071     margin: 0 3px 3px;
1072     white-space: nowrap;
1075 .userenrolment .col_group .group {
1076     float: left;
1077     padding: 3px;
1078     margin: 3px;
1079     white-space: nowrap;
1082 .userenrolment .col_role .role a,
1083 .userenrolment .col_group .group a {
1084     margin-left: 3px;
1085     cursor: pointer;
1088 .userenrolment .col_role .addrole,
1089 .userenrolment .col_group .addgroup {
1090     float: right;
1091     padding: 3px;
1092     margin: 3px;
1094     > a:hover {
1095         border-bottom: 1px solid #666;
1096     }
1099 .userenrolment .col_role .addrole img,
1100 .userenrolment .col_group .addgroup img {
1101     vertical-align: baseline;
1104 .userenrolment .hasAllRoles .col_role .addrole {
1105     display: none;
1108 .userenrolment .col_enrol .enrolment {
1109     float: left;
1110     padding: 0 3px 3px;
1111     margin: 0 3px 3px;
1114 .userenrolment .col_enrol .enrolment a {
1115     float: right;
1116     margin-left: 3px;
1119 .corelightbox {
1120     background-color: #ccc;
1121     position: absolute;
1122     top: 0;
1123     left: 0;
1124     width: 100%;
1125     height: 100%;
1126     text-align: center;
1129 .corelightbox img {
1130     position: fixed;
1131     top: 50%;
1132     left: 50%;
1135 .mod-indent-outer {
1136     display: table;
1139 .mod-indent {
1140     display: table-cell;
1143 .label .mod-indent {
1144     float: left;
1145     padding-top: 20px;
1148 @include media-breakpoint-up(sm) {
1149     $mod-indent-size: 30px;
1150     /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1152     @for $i from 1 through 16 {
1153         $width: ($i * $mod-indent-size);
1155         .mod-indent-#{$i} {
1156             width: $width;
1157         }
1158     }
1160     .mod-indent-huge {
1161         width: (16 * $mod-indent-size);
1162     }
1165 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1166 .resourcecontent .mediaplugin_mp3 object {
1167     height: 25px;
1168     width: 600px;
1171 .resourcecontent audio.mediaplugin_html5audio {
1172     width: 600px;
1174 /** Large resource images should avoid hidden overflow **/
1175 .resourceimage {
1176     max-width: 100%;
1178 /* Audio player size in 'inline' mode (can only change width, as above) */
1179 .mediaplugin_mp3 object {
1180     height: 15px;
1181     width: 300px;
1184 audio.mediaplugin_html5audio {
1185     width: 300px;
1187 /* TinyMCE moodle media preview frame should not have padding */
1188 .core_media_preview.pagelayout-embedded #content {
1189     padding: 0;
1192 .core_media_preview.pagelayout-embedded #maincontent {
1193     height: 0;
1196 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1197     padding: 0;
1198     margin: 0;
1199     min-width: 0;
1200     background: none;
1203 .path-rating .ratingtable {
1204     width: 100%;
1205     margin-bottom: 1em;
1208 .path-rating .ratingtable th.rating {
1209     width: 100%;
1212 .path-rating .ratingtable td.rating,
1213 .path-rating .ratingtable td.time {
1214     white-space: nowrap;
1215     text-align: center;
1218 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1219 .moodle-dialogue-base .moodle-dialogue-lightbox {
1220     background-color: $gray-700;
1223 // Prevent adding backdrops to popups in popups.
1224 .pagelayout-popup {
1225     .moodle-dialogue-base {
1226         .moodle-dialogue-lightbox {
1227             background-color: transparent;
1228         }
1229         .moodle-dialogue {
1230             box-shadow: $popover-box-shadow;
1231         }
1232     }
1235 .moodle-dialogue-base .hidden,
1236 .moodle-dialogue-base .moodle-dialogue-hidden {
1237     display: none;
1240 .no-scrolling {
1241     overflow: hidden;
1244 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1245     left: 0;
1246     top: 0;
1247     right: 0;
1248     bottom: -50px;
1249     position: fixed;
1252 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1253     overflow: auto;
1256 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1257     width: 28px;
1258     height: 16px;
1259     background-size: 100%;
1262 .moodle-dialogue-base .moodle-dialogue-wrap {
1263     background-color: #fff;
1264     border: 1px solid #ccc;
1267 // Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1268 // it for a reason (conflicts with jquery .show()).
1269 .modal.show {
1270     display: block;
1273 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1274     display: flex;
1275     padding: 1rem 1rem;
1276     border-bottom: 1px solid #dee2e6;
1279 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1280     // Undo some YUI damage.
1281     min-height: 3rem;
1282     color: initial;
1283     background: initial;
1284     font-size: 1.5rem;
1285     line-height: 1.5;
1288 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1289     font-size: 1.5rem;
1292 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1293     /*rtl:raw:
1294         left: 0;
1295         right: auto;
1296     */
1297     padding: 0;
1298     position: relative;
1299     margin-left: auto;
1302 .moodle-dialogue-base .closebutton {
1303     padding: $modal-header-padding;
1304     margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
1305     position: relative;
1306     background-color: transparent;
1307     border: 0;
1308     background-image: none;
1309     box-shadow: none;
1310     opacity: 0.7;
1311     &:hover,
1312     &:active {
1313         opacity: 1;
1314     }
1315     &::after {
1316         content: "×";
1317     }
1320 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1321     padding: 0.5rem;
1322     body {
1323         background-color: $body-bg;
1324     }
1327 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1328     overflow: auto;
1329     position: absolute;
1330     top: 0;
1331     bottom: 50px;
1332     left: 0;
1333     right: 0;
1334     margin: 0;
1335     border: 0;
1338 .moodle-dialogue-exception .moodle-exception-param label {
1339     font-weight: bold;
1342 .moodle-dialogue-exception .param-stacktrace label {
1343     background-color: #eee;
1344     border: 1px solid #ccc;
1345     border-bottom-width: 0;
1348 .moodle-dialogue-exception .param-stacktrace pre {
1349     border: 1px solid #ccc;
1350     background-color: #fff;
1353 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1354     color: navy;
1355     font-size: $font-size-sm;
1358 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1359     color: map-get($theme-colors, 'warning');
1360     font-size: $font-size-sm;
1363 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1364     color: #333;
1365     font-size: 90%;
1366     border-bottom: 1px solid #eee;
1369 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1370     display: none;
1373 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1374     // Undo some YUI damage.
1375     background: initial;
1378 .moodle-dialogue-confirm .confirmation-message {
1379     margin: 0.5rem 0;
1382 .moodle-dialogue-confirm .confirmation-dialogue input {
1383     min-width: 80px;
1386 .moodle-dialogue-exception .moodle-exception-message {
1387     margin: 1em;
1390 .moodle-dialogue-exception .moodle-exception-param {
1391     margin-bottom: 0.5em;
1394 .moodle-dialogue-exception .moodle-exception-param label {
1395     width: 150px;
1398 .moodle-dialogue-exception .param-stacktrace label {
1399     display: block;
1400     margin: 0;
1401     padding: 4px 1em;
1404 .moodle-dialogue-exception .param-stacktrace pre {
1405     display: block;
1406     height: 200px;
1407     overflow: auto;
1410 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1411     display: inline-block;
1412     margin: 4px 0;
1415 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1416     display: inline-block;
1417     width: 50px;
1418     margin: 4px 1em;
1421 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1422     padding-left: 25px;
1423     margin-bottom: 4px;
1424     padding-bottom: 4px;
1427 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1428     opacity: 0.75;
1429     width: 100%;
1430     height: 100%;
1431     top: 0;
1432     left: 0;
1433     background-color: white;
1434     text-align: center;
1435     padding: 10% 0;
1437 /* Apply a default max-height on tooltip text */
1438 .moodle-dialogue .tooltiptext {
1439     max-height: 300px;
1442 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1443     z-index: 3001;
1445     .moodle-dialogue-bd {
1446         overflow: auto;
1447     }
1450 /**
1451  * Chooser Dialogues (moodle-core-chooserdialogue)
1452  *
1453  * This CSS belong to the chooser dialogue which should work both with, and
1454  * without javascript enabled
1455  */
1456 /* Hide the dialog and it's title */
1457 .chooserdialoguebody,
1458 .choosertitle {
1459     display: none;
1462 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1463     margin: 0;
1466 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1467     padding: 0;
1468     background: #f2f2f2;
1470     @include border-bottom-radius(10px);
1472 /* Center the submit buttons within the area */
1473 .choosercontainer #chooseform .submitbuttons {
1474     padding: 0.7em 0;
1475     text-align: right;
1477 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1479 @media (max-height: 639px) {
1480     .ios .choosercontainer #chooseform .submitbuttons {
1481         padding: 45px 0;
1482     }
1485 .choosercontainer #chooseform .submitbuttons input {
1486     min-width: 100px;
1487     margin: 0 0.5em;
1489 /* Various settings for the options area */
1490 .choosercontainer #chooseform .options {
1491     position: relative;
1492     border-bottom: 1px solid #bbb;
1494 /* Only set these options if we're showing the js container */
1495 .jschooser .choosercontainer #chooseform .alloptions {
1496     overflow-x: hidden;
1497     overflow-y: auto;
1498     max-width: 240px;
1500     .option {
1501         input[type=radio] {
1502             display: inline-block;
1503         }
1505         .typename {
1506             display: inline-block;
1507             width: 55%;
1508         }
1509     }
1511 /* Settings for option rows and option subtypes */
1512 .choosercontainer #chooseform .moduletypetitle,
1513 .choosercontainer #chooseform .option,
1514 .choosercontainer #chooseform .nonoption {
1515     margin-bottom: 0;
1516     padding: 0 1.6em 0 1.6em;
1519 .choosercontainer #chooseform .moduletypetitle {
1520     text-transform: uppercase;
1521     padding-top: 1.2em;
1522     padding-bottom: 0.4em;
1523     margin-bottom: 0.5rem;
1524     font-size: 100%;
1527 .choosercontainer #chooseform .option .typename,
1528 .choosercontainer #chooseform .nonoption .typename {
1529     padding: 0 0 0 0.5em;
1532 .choosercontainer #chooseform .modicon + .typename {
1533     padding-left: 0;
1536 .choosercontainer #chooseform .option input[type=radio],
1537 .choosercontainer #chooseform .option span.typename {
1538     vertical-align: middle;
1541 .choosercontainer #chooseform .option label {
1542     display: block;
1543     margin: 0;
1544     padding: ($spacer / 2) 0;
1545     border-bottom: 1px solid #fff;
1548 .choosercontainer #chooseform .option .icon {
1549     margin: 0;
1550     padding: 0 $spacer;
1553 .choosercontainer #chooseform .nonoption {
1554     padding-left: 2.7em;
1555     padding-top: 0.3em;
1556     padding-bottom: 0.1em;
1559 .choosercontainer #chooseform .subtype {
1560     margin-bottom: 0;
1561     padding: 0 1.6em 0 3.2em;
1564 .choosercontainer #chooseform .subtype .typename {
1565     margin: 0 0 0 0.2em;
1567 /* The instruction/help area */
1568 .jschooser .choosercontainer #chooseform .instruction,
1569 .jschooser .choosercontainer #chooseform .typesummary {
1570     display: none;
1571     position: absolute;
1572     top: 0;
1573     right: 0;
1574     bottom: 0;
1575     left: 240px;
1576     margin: 0;
1577     padding: 1.6em;
1578     background-color: #fff;
1579     overflow-x: hidden;
1580     overflow-y: auto;
1581     line-height: 2em;
1583 /* Selected option settings */
1584 .jschooser .choosercontainer #chooseform .instruction,
1585 .choosercontainer #chooseform .selected .typesummary {
1586     display: block;
1589 .choosercontainer #chooseform .selected {
1590     background-color: #fff;
1591     margin-top: -1px;
1592     padding-top: 1px;
1596 @include media-breakpoint-down(xs) {
1597     .jsenabled .choosercontainer #chooseform .alloptions {
1598         max-width: 100%;
1599     }
1601     .jsenabled .choosercontainer #chooseform .instruction,
1602     .jsenabled .choosercontainer #chooseform .typesummary {
1603         position: static;
1604     }
1607 /**
1608  * Module chooser dialogue (moodle-core-chooserdialogue)
1609  *
1610  * This CSS belong to the chooser dialogue which should work both with, and
1611  * without javascript enabled
1612  */
1613 .modchooser .modal-body {
1614     padding: 0;
1615     overflow-y: auto;
1616     min-height: 640px;
1617     display: flex;
1618     flex-direction: column;
1620     .searchresultitemscontainer-wrapper {
1621         min-height: 495px;
1622     }
1624     .carousel-item.active {
1625         display: flex;
1626     }
1627     .chooser-container {
1628         display: flex;
1629         flex-direction: column;
1630         flex: 1 1 auto;
1631     }
1633     .loading-icon {
1634         opacity: 1;
1635         .icon {
1636             display: block;
1637             font-size: 3em;
1638             height: 1em;
1639             width: 1em;
1640         }
1641     }
1642     .carousel-item .loading-icon .icon {
1643         margin: 1em auto;
1644     }
1645     .searchbar {
1646         width: 100%;
1647     }
1650 .modchooser .modal-footer {
1651     height: 70px;
1652     background: $modal-content-bg;
1653     .moodlenet-logo {
1654         .icon {
1655             height: 2.5rem;
1656             width: 6rem;
1657             margin-bottom: .6rem;
1658         }
1659     }
1662 .modchoosercontainer.noscroll {
1663     overflow-y: hidden;
1666 .modchoosercontainer .optionscontainer,
1667 .modchoosercontainer .searchresultitemscontainer {
1668     overflow-x: hidden;
1669     .option {
1670         // 2 items per line.
1671         flex-basis: calc(50% - 0.5rem);
1672         .optionactions {
1673             .optionaction {
1674                 cursor: pointer;
1675                 color: $gray-600;
1676                 i {
1677                     margin: 0;
1678                 }
1679             }
1680         }
1681         .optioninfo {
1682             a {
1683                 color: $gray-700;
1684                 &:hover {
1685                     text-decoration: none;
1686                 }
1687             }
1688         }
1689     }
1692 .modchooser .modal-body .optionsummary {
1693     background-color: $white;
1694     overflow-x: hidden;
1695     overflow-y: auto;
1696     height: 640px;
1698     .content {
1699         overflow-y: auto;
1700         .heading {
1701             .icon {
1702                 height: 32px;
1703                 width: 32px;
1704                 font-size: 32px;
1705                 padding: 0;
1706             }
1707         }
1708     }
1710     .actions {
1711         border-top: 1px solid $gray-300;
1712         background: $white;
1713     }
1716 @include media-breakpoint-down(xs) {
1717     .path-course-view .modal-dialog.modal-lg,
1718     .path-course-view .modal-content,
1719     .modchooser .modal-body,
1720     .modchooser .modal-body .carousel,
1721     .modchooser .modal-body .carousel-inner,
1722     .modchooser .modal-body .carousel-item,
1723     .modchooser .modal-body .optionsummary,
1724     .modchoosercontainer,
1725     .optionscontainer,
1726     .searchresultitemscontainer {
1727         min-height: auto;
1728         height: 100%;
1729         overflow-y: auto;
1730     }
1731     .path-course-view .modal-dialog.modal-lg {
1732         margin: 0;
1733     }
1734     .modchooser .modal-body .searchresultitemscontainer-wrapper {
1735         min-height: auto;
1736     }
1739 @include media-breakpoint-up(sm) {
1740     .modchoosercontainer .optionscontainer .option,
1741     .modchoosercontainer .searchresultitemscontainer .option {
1742         // Three items per line.
1743         flex-basis: calc(33.33% - 0.5rem);
1744     }
1747 @include media-breakpoint-up(lg) {
1748     .modchoosercontainer .optionscontainer .option,
1749     .modchoosercontainer .searchresultitemscontainer .option {
1750         // Six items per line.
1751         flex-basis: calc(16.66% - 0.5rem);
1752     }
1755 /* Form element: listing */
1756 .formlistingradio {
1757     padding-bottom: 25px;
1758     padding-right: 10px;
1761 .formlistinginputradio {
1762     float: left;
1765 .formlistingmain {
1766     min-height: 225px;
1769 .formlisting {
1770     position: relative;
1771     margin: 15px 0;
1772     padding: 1px 19px 14px;
1773     background-color: white;
1774     border: 1px solid #ddd;
1776     @include border-radius(4px);
1779 .formlistingmore {
1780     position: absolute;
1781     cursor: pointer;
1782     bottom: -1px;
1783     right: -1px;
1784     padding: 3px 7px;
1785     font-size: 12px;
1786     font-weight: bold;
1787     background-color: whitesmoke;
1788     border: 1px solid #ddd;
1789     color: #9da0a4;
1791     @include border-radius(4px 0 4px 0);
1794 .formlistingall {
1795     margin: 15px 0;
1796     padding: 0;
1798     @include border-radius(4px);
1801 .formlistingrow {
1802     cursor: pointer;
1803     border-bottom: 1px solid;
1804     border-color: #e1e1e8;
1805     border-left: 1px solid #e1e1e8;
1806     border-right: 1px solid #e1e1e8;
1807     background-color: #f7f7f9;
1809     @include border-radius(0 0 4px 4px);
1810     padding: 6px;
1811     top: 50%;
1812     left: 50%;
1813     min-height: 34px;
1814     float: left;
1815     width: 150px;
1818 body.jsenabled .formlistingradio {
1819     display: none;
1822 body.jsenabled .formlisting {
1823     display: block;
1826 a.criteria-action {
1827     padding: 0 3px;
1828     float: right;
1831 div.criteria-description {
1832     padding: 10px 15px;
1833     margin: 5px 0;
1834     background: none repeat scroll 0 0 #f9f9f9;
1835     border: 1px solid #eee;
1838 ul.badges {
1839     margin: 0;
1840     list-style: none;
1843 .badges li {
1844     position: relative;
1845     display: inline-block;
1846     padding-top: 1em;
1847     text-align: center;
1848     vertical-align: top;
1849     width: 150px;
1852 .badges li .badge-name {
1853     display: block;
1854     padding: 5px;
1857 .badges li > img {
1858     position: absolute;
1861 .badges li .badge-image {
1862     width: 100px;
1863     height: 100px;
1864     left: 10px;
1865     top: 0;
1866     z-index: 1;
1869 .badges li .badge-actions {
1870     position: relative;
1873 .badges li .expireimage {
1874     width: 100px;
1875     height: 100px;
1876     left: 25px;
1877     top: 0;
1878     position: absolute;
1879     z-index: 10;
1880     opacity: 0.85;
1883 #badge-image {
1884     background-color: transparent;
1885     padding: 0;
1886     position: relative;
1887     min-width: 100px;
1888     width: 20%;
1889     display: inline-block;
1890     vertical-align: top;
1891     margin-top: 17px;
1892     margin-bottom: 20px;
1894     .expireimage {
1895         width: 100px;
1896         height: 100px;
1897         left: 0;
1898         top: 0;
1899         opacity: 0.85;
1900         position: absolute;
1901         z-index: 10;
1902     }
1904     .singlebutton {
1905         padding-top: 5px;
1906         display: block;
1908         button {
1909             margin-left: 4px;
1910         }
1911     }
1914 #badge-details {
1915     display: inline-block;
1916     width: 79%;
1919 #badge-overview dl,
1920 #badge-details dl {
1921     margin: 0;
1923     dt,
1924     dd {
1925         vertical-align: top;
1926         padding: 3px 0;
1927     }
1929     dt {
1930         clear: both;
1931         display: inline-block;
1932         width: 20%;
1933         min-width: 100px;
1934     }
1936     dd {
1937         display: inline-block;
1938         width: 79%;
1939         margin-left: 1%;
1940     }
1943 .badge-profile {
1944     vertical-align: top;
1947 .connected {
1948     color: map-get($theme-colors, 'success');
1951 .notconnected {
1952     color: map-get($theme-colors, 'danger');
1955 .connecting {
1956     color: map-get($theme-colors, 'warning');
1959 #page-badges-award .recipienttable tr td {
1960     vertical-align: top;
1963 #page-badges-award .recipienttable tr td.actions .actionbutton {
1964     margin: 0.3em 0;
1965     padding: 0.5em 0;
1966     width: 100%;
1969 #page-badges-award .recipienttable tr td.existing,
1970 #page-badges-award .recipienttable tr td.potential {
1971     width: 42%;
1974 #issued-badge-table .activatebadge {
1975     display: inline-block;
1978 .statusbox.active {
1979     background-color: $state-success-bg;
1982 .statusbox.inactive {
1983     background-color: $state-warning-bg;
1986 .statusbox {
1987     text-align: center;
1988     margin-bottom: 5px;
1989     padding: 5px;
1992 .statusbox .activatebadge {
1993     display: inline-block;
1996 .statusbox .activatebadge input[type=submit] {
1997     margin: 3px;
2000 .activatebadge {
2001     margin: 0;
2002     text-align: left;
2003     vertical-align: middle;
2006 img#persona_signin {
2007     cursor: pointer;
2010 .addcourse {
2011     float: right;
2014 .invisiblefieldset {
2015     display: inline;
2016     padding: 0;
2017     border-width: 0;
2020 /** Page header */
2021 #page-header {
2022     .logo {
2023         margin: $spacer 0;
2024         img {
2025             max-height: 75px;
2026         }
2027     }
2030 /** Navbar logo. */
2031 nav.navbar .logo img {
2032     max-height: 35px;
2035 .nav.usernav {
2036     .nav-item {
2037         display: flex;
2038     }
2039     .usermenu .dropdown-toggle {
2040         padding: 0 0.5rem;
2041     }
2044 /** Header-bar styles **/
2045 .page-context-header {
2046     // We need to be explicit about the height of the header.
2047     $pageHeaderHeight: 140px;
2049     // Do not remove these rules.
2050     overflow: hidden;
2051     padding: 0.25rem;
2053     .page-header-image,
2054     .page-header-headings {
2055         float: left;
2056         display: block;
2057         position: relative;
2058     }
2060     .page-header-image {
2061         margin-right: 1em;
2062         margin-bottom: 1em;
2063         & > a {
2064             display: inline-block;
2065         }
2066     }
2068     .page-header-headings,
2069     .header-button-group {
2070         position: relative;
2071         line-height: 24px;
2072         vertical-align: middle;
2073     }
2075     .header-button-group {
2076         display: block;
2077         float: left;
2078     }
2081 ul.dragdrop-keyboard-drag li {
2082     list-style-type: none;
2085 a.disabled:hover,
2086 a.disabled {
2087     text-decoration: none;
2088     cursor: default;
2089     font-style: italic;
2090     color: #808080;
2093 body.lockscroll {
2094     height: 100%;
2095     overflow: hidden;
2098 .progressbar_container {
2099     max-width: 500px;
2100     margin: 0 auto;
2103 /* IE10 only fix for calendar titling */
2104 .ie10 .yui3-calendar-header-label {
2105     display: inline-block;
2108 dd:before,
2109 dd:after {
2110     display: block;
2111     content: " ";
2114 dd:after {
2115     clear: both;
2118 // Active tabs with links should have a different
2119 // cursor to indicate they are clickable.
2120 .nav-tabs > .active > a[href],
2121 .nav-tabs > .active > a[href]:hover,
2122 .nav-tabs > .active > a[href]:focus {
2123     cursor: pointer;
2126 .inplaceeditable {
2127     &.inplaceeditingon {
2128         position: relative;
2130         .editinstructions {
2131             margin-top: -30px;
2132             font-weight: normal;
2133             margin-right: 0;
2134             margin-left: 0;
2135             left: 0;
2136             right: auto;
2137             white-space: nowrap;
2138         }
2139         @include media-breakpoint-up(sm) {
2140             input {
2141                 width: 330px;
2142                 vertical-align: text-bottom;
2143                 margin-bottom: 0;
2144             }
2145         }
2147         select {
2148             margin-bottom: 0;
2149         }
2150     }
2152     .quickediticon img {
2153         opacity: 0.2;
2154     }
2156     .quickeditlink {
2157         color: inherit;
2158         text-decoration: inherit;
2159     }
2161     &:hover .quickeditlink .quickediticon img,
2162     .quickeditlink:focus .quickediticon img {
2163         opacity: 1;
2164     }
2166     &.inplaceeditable-toggle .quickediticon {
2167         display: none;
2168     }
2170     &.inplaceeditable-autocomplete {
2171         display: block;
2172     }
2175 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2176     margin-top: -20px;
2179 /** Chart area. */
2180 .chart-area {
2182     .chart-table-data {
2183         display: none;
2184     }
2186     .chart-table {
2187         .chart-output-htmltable caption {
2188             white-space: nowrap;
2189         }
2190         /** When accessible, we display the table only. */
2191         &.accesshide {
2192             .chart-table-expand {
2193                 display: none;
2194             }
2195             .chart-table-data {
2196                 display: block;
2197             }
2198         }
2199     }
2202 // Reset for ul.
2203 ul {
2204     padding-left: 1rem;
2205     -webkit-margin-start: 0.2rem;  /* stylelint-disable-line */
2208 /* YUI 2 Tree View */
2209 /*rtl:raw:
2210 .ygtvtn,
2211 .ygtvtm,
2212 .ygtvtmh,
2213 .ygtvtmhh,
2214 .ygtvtp,
2215 .ygtvtph,
2216 .ygtvtphh,
2217 .ygtvln,
2218 .ygtvlm,
2219 .ygtvlmh,
2220 .ygtvlmhh,
2221 .ygtvlp,
2222 .ygtvlph,
2223 .ygtvlphh,
2224 .ygtvdepthcell,
2225 .ygtvok,
2226 .ygtvok:hover,
2227 .ygtvcancel,
2228 .ygtvcancel:hover {
2229     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
2231 */
2233 .hover-tooltip-container {
2234     position: relative;
2236     .hover-tooltip {
2237         opacity: 0;
2238         visibility: hidden;
2239         position: absolute;
2240         /*rtl:ignore*/
2241         left: 50%;
2242         top: calc(-50% - 5px);
2243         transform: translate(-50%, -50%);
2244         background-color: #fff;
2245         border: 1px solid rgba(0, 0, 0, .2);
2246         border-radius: .3rem;
2247         box-sizing: border-box;
2248         padding: 5px;
2249         white-space: nowrap;
2250         transition: opacity 0.15s, visibility 0.15s;
2251         z-index: 1000;
2253         &:before {
2254             content: '';
2255             display: inline-block;
2256             border-left: 8px solid transparent;
2257             border-right: 8px solid transparent;
2258             border-top: 8px solid rgba(0, 0, 0, .2);
2259             position: absolute;
2260             bottom: -8px;
2261             left: calc(50% - 8px);
2262         }
2264         &:after {
2265             content: '';
2266             display: inline-block;
2267             border-left: 7px solid transparent;
2268             border-right: 7px solid transparent;
2269             border-top: 7px solid #fff;
2270             position: absolute;
2271             bottom: -6px;
2272             left: calc(50% - 7px);
2273             z-index: 2;
2274         }
2275     }
2277     &:hover {
2278         .hover-tooltip {
2279             opacity: 1;
2280             visibility: visible;
2281             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2282         }
2283     }
2286 #region-flat-nav {
2287     padding-right: 0;
2288     padding-left: 0;
2289     .nav {
2290         margin-right: $grid-gutter-width / 2;
2291         background-color: $card-bg;
2292     }
2293     @include media-breakpoint-down(sm) {
2294         .nav {
2295             margin-top: $grid-gutter-width;
2296             margin-right: 0;
2297         }
2298     }
2301 // Footer link colour was added to allow the colour of footer links to be changed,
2302 // but really in bootstrap we want the colour of links on .bg-inverse to be changed
2303 // rather than being specific to the footer. This is kept for backwards compatibility.
2304 $footer-link-color: $bg-inverse-link-color !default;
2305 #page-footer a {
2306     color: $footer-link-color;
2307     text-decoration: underline;
2308     .icon {
2309         color: $footer-link-color;
2310     }
2311     &:focus .icon {
2312         color: $body-color;
2313     }
2316 .bg-inverse a {
2317     color: $bg-inverse-link-color;
2318     text-decoration: underline;
2319     .icon {
2320         color: $bg-inverse-link-color;
2321     }
2324 .sitelink {
2325     img {
2326         width: 112px;
2327     }
2330 // Make links in a menu clickable anywhere in the row.
2331 .dropdown-item a {
2332     display: block;
2333     width: 100%;
2334     color: $body-color;
2336 .dropdown-item:active a {
2337     color: $dropdown-link-active-color;
2340 .competency-tree {
2341     ul {
2342         padding-left: 1.5rem;
2343     }
2346 .sr-only-focusable {
2347     &:active,
2348     &:focus {
2349         z-index: 1031;
2350         position: fixed;
2351         background: #fff;
2352         padding: 7px;
2353         left: 0;
2354         top: 0;
2355     }
2358 [data-drag-type="move"] {
2359     cursor: move;
2360     touch-action: none;
2363 .clickable {
2364     cursor: pointer;
2367 .overlay-icon-container {
2368     position: absolute;
2369     top: 0;
2370     left: 0;
2371     width: 100%;
2372     height: 100%;
2373     background-color: rgba(255, 255, 255, 0.6);
2375     .loading-icon {
2376         position: absolute;
2377         top: 50%;
2378         left: 50%;
2379         transform: translate(-50%, -50%);
2381         .icon {
2382             height: 30px;
2383             width: 30px;
2384             font-size: 30px;
2385         }
2386     }
2389 .w-auto {
2390     width: auto;
2393 .bg-pulse-grey {
2394     animation: bg-pulse-grey 2s infinite linear;
2397 @keyframes bg-pulse-grey {
2398     0% {
2399         background-color: $gray-100;
2400     }
2401     50% {
2402         background-color: darken($gray-100, 5%);
2403     }
2404     100% {
2405         background-color: $gray-100;
2406     }
2409 @each $size, $length in $spacers {
2410     .line-height-#{$size} {
2411         line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2412     }
2415 .dir-rtl {
2416     .dir-rtl-hide {
2417         display: none;
2418     }
2421 .dir-ltr {
2422     .dir-ltr-hide {
2423         display: none;
2424     }
2427 .paged-content-page-container {
2428     min-height: 3.125rem;
2431 body.h5p-embed {
2432     #page-content {
2433         display: inherit;
2434     }
2435     #maincontent {
2436         display: none;
2437     }
2438     .h5pmessages {
2439         min-height: 230px; // This should be the same height as default core_h5p iframes.
2440     }
2443 .text-decoration-none {
2444     text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
2447 .colour-inherit {
2448     color: inherit !important; /* stylelint-disable-line declaration-no-important */
2451 .position-right {
2452     right: 0 !important; /* stylelint-disable-line declaration-no-important */
2455 .overflow-hidden {
2456     overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
2459 .text-break {
2460     overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
2463 .z-index-0 {
2464     z-index: 0 !important; /* stylelint-disable-line declaration-no-important */
2467 .z-index-1 {
2468     z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
2471 // These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
2472 .float-left {
2473     float: left !important; /* stylelint-disable-line declaration-no-important */
2476 .float-right {
2477     float: right !important; /* stylelint-disable-line declaration-no-important */
2480 .img-responsive {
2481     @include img-fluid();
2484 input[disabled] {
2485     cursor: not-allowed;
2488 .custom-select {
2489     width: auto;
2492 .fade.in {
2493     opacity: 1;
2496 .clamp-2 {
2497     display: -webkit-box;
2498     -webkit-box-orient: vertical;
2499     -webkit-line-clamp: 2;
2500     overflow: hidden;
2503 .word-break-all {
2504     word-break: break-all;
2507 .matchtext {
2508     background-color: lighten($primary, 40%);
2509     color: $body-color;
2510     height: 1.5rem;
2513 .border-radius {
2514     @if $enable-rounded {
2515         @include border-radius($card-border-radius);
2516     }
2519 // Emoji picker.
2520 $picker-width: 350px !default;
2521 $picker-width-xs: 320px !default;
2522 $picker-height: 400px !default;
2523 $picker-row-height: 40px !default;
2524 $picker-emoji-button-size: 40px !default;
2525 $picker-emoji-button-font-size: 24px !default;
2526 $picker-emoji-category-count: 9 !default;
2527 $picker-emojis-per-row: 7 !default;
2529 .emoji-picker {
2530     width: $picker-width;
2531     height: $picker-height;
2533     .category-button {
2534         padding: .375rem 0;
2535         height: 100%;
2536         width: $picker-width / $picker-emoji-category-count;
2537         border-top: none;
2538         border-left: none;
2539         border-right: none;
2540         border-bottom: 2px solid transparent;
2542         &.selected {
2543             border-bottom: 2px solid map-get($theme-colors, 'primary');
2544         }
2545     }
2547     .emojis-container,
2548     .search-results-container {
2549         min-width: $picker-emojis-per-row * $picker-emoji-button-size;
2550     }
2552     .picker-row {
2553         height: $picker-row-height;
2555         .category-name {
2556             line-height: $picker-row-height;
2557         }
2559         .emoji-button {
2560             height: $picker-emoji-button-size;
2561             width: $picker-emoji-button-size;
2562             line-height: $picker-emoji-button-size;
2563             font-size: $picker-emoji-button-font-size;
2564             overflow: hidden;
2566             @include hover-focus {
2567                 color: inherit;
2568                 text-decoration: none;
2569             }
2570         }
2571     }
2573     .emoji-preview {
2574         height: $picker-row-height;
2575         font-size: $picker-row-height;
2576         line-height: $picker-row-height;
2577     }
2579     .emoji-short-name {
2580         line-height: $picker-row-height / 2;
2581     }
2583     @include media-breakpoint-down(xs) {
2584         width: $picker-width-xs;
2585     }
2588 .emoji-auto-complete {
2589     height: $picker-row-height;
2591     .btn.btn-link.btn-icon.emoji-button {
2592         height: $picker-emoji-button-size;
2593         width: $picker-emoji-button-size;
2594         line-height: $picker-emoji-button-size;
2595         font-size: $picker-emoji-button-font-size;
2597         &.active {
2598             background-color: $gray-200;
2599         }
2600     }
2603 .toast-wrapper {
2604     max-width: $toast-max-width;
2605     max-height: 0;
2606     // Place these above any modals and other elements.
2607     z-index: 1051;
2609     > :first-child {
2610         margin-top: $spacer;
2611     }
2614 @each $color, $value in $theme-colors {
2615     .alert-#{$color} a {
2616         color: darken(theme-color-level($color, $alert-color-level), 10%);
2617     }
2619 .alert a {
2620     font-weight: $font-weight-bold;
2623 @include media-breakpoint-down(sm) {
2624     #page-navbar {
2625         width: 100%;
2626     }
2628     .breadcrumb:not(:empty) {
2629         width: 100%;
2630         border: ($border-width * 2) solid $gray-200;
2631         padding: $spacer / 4;
2632         margin-bottom: $spacer / 2;
2633         .breadcrumb-item {
2634             padding-top: $spacer / 3;
2635             padding-bottom: $spacer / 3;
2636             display: inline-block;
2637         }
2638     }
2640     .mform {
2641         width: 100%;
2642         padding-right: 15px;
2643         padding-left: 15px;
2644     }
2645     .pagination {
2646         flex-wrap: wrap;
2647         justify-content: center;
2648     }
2649     .custom-select {
2650         max-width: 100%;
2651     }
2652     .card .card-body {
2653         padding: $card-spacer-x / 2;
2654     }
2655     #page-header {
2656         .card {
2657             border: 0;
2658             .card-body {
2659                 padding: 0;
2660             }
2661         }
2662     }
2663     .nav-tabs,
2664     .nav-pills {
2665         margin: 0;
2666         border: 0;
2667         padding: $spacer / 8;
2668         background-color: $gray-200;
2669         .nav-item {
2670             flex: 1 1 auto;
2671             text-align: center;
2672         }
2673         .nav-link {
2674             background: $white;
2675             border: 0;
2676             margin: $spacer / 8;
2677             &.active {
2678                 @include button-outline-variant($gray-600);
2679                 border-color: $gray-600;
2680             }
2681         }
2682     }
2685 @media (max-width: map-get($grid-breakpoints, "sm")) and (max-height: 320px) {
2686     div#page {
2687         margin-top: 0;
2688     }
2689     .navbar.fixed-top {
2690         position: relative;
2691         z-index: inherit;
2692     }
2695 .link-underline {
2696     text-decoration: underline;
2697     &:focus {
2698         text-decoration: none;
2699     }
2702 .alert.cta {
2703     .icon {
2704         padding: 0.3rem;
2705         &.fa {
2706             border-radius: 50%;
2707             border-style: solid;
2708             border-width: 0.125rem;
2709         }
2710     }