2ddbc8b4d9a9adabd78dea719551997a69638692
[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     }
1647 .modchooser .modal-footer {
1648     height: 70px;
1649     background: $modal-content-bg;
1650     .moodlenet-logo {
1651         .icon {
1652             height: 2.5rem;
1653             width: 6rem;
1654             margin-bottom: .6rem;
1655         }
1656     }
1659 .modchoosercontainer.noscroll {
1660     overflow-y: hidden;
1663 .modchooser .searchcontainer .searchbar .input-group-append {
1664     align-items: center;
1666     i {
1667         color: #868e96;
1668         margin: 0;
1669         vertical-align: middle;
1670         font-size: 20px;
1671         height: 20px;
1672         width: 20px;
1673     }
1676 .modchoosercontainer .optionscontainer,
1677 .modchoosercontainer .searchresultitemscontainer {
1678     overflow-x: hidden;
1679     .option {
1680         // 2 items per line.
1681         flex-basis: calc(50% - 0.5rem);
1682         .optionactions {
1683             .optionaction {
1684                 cursor: pointer;
1685                 color: $gray-600;
1686                 i {
1687                     margin: 0;
1688                 }
1689             }
1690         }
1691         .optioninfo {
1692             a {
1693                 color: $gray-700;
1694                 &:hover {
1695                     text-decoration: none;
1696                 }
1697             }
1698         }
1699     }
1702 .modchooser .modal-body .optionsummary {
1703     background-color: $white;
1704     overflow-x: hidden;
1705     overflow-y: auto;
1706     height: 640px;
1708     .content {
1709         overflow-y: auto;
1710         .heading {
1711             .icon {
1712                 height: 32px;
1713                 width: 32px;
1714                 font-size: 32px;
1715                 padding: 0;
1716             }
1717         }
1718     }
1720     .actions {
1721         border-top: 1px solid $gray-300;
1722         background: $white;
1723     }
1726 @include media-breakpoint-down(xs) {
1727     .path-course-view .modal-dialog.modal-lg,
1728     .path-course-view .modal-content,
1729     .modchooser .modal-body,
1730     .modchooser .modal-body .carousel,
1731     .modchooser .modal-body .carousel-inner,
1732     .modchooser .modal-body .carousel-item,
1733     .modchooser .modal-body .optionsummary,
1734     .modchoosercontainer,
1735     .optionscontainer,
1736     .searchresultitemscontainer {
1737         min-height: auto;
1738         height: 100%;
1739         overflow-y: auto;
1740     }
1741     .path-course-view .modal-dialog.modal-lg {
1742         margin: 0;
1743     }
1744     .modchooser .modal-body .searchresultitemscontainer-wrapper {
1745         min-height: auto;
1746     }
1749 @include media-breakpoint-up(sm) {
1750     .modchoosercontainer .optionscontainer .option,
1751     .modchoosercontainer .searchresultitemscontainer .option {
1752         // Three items per line.
1753         flex-basis: calc(33.33% - 0.5rem);
1754     }
1757 @include media-breakpoint-up(lg) {
1758     .modchoosercontainer .optionscontainer .option,
1759     .modchoosercontainer .searchresultitemscontainer .option {
1760         // Six items per line.
1761         flex-basis: calc(16.66% - 0.5rem);
1762     }
1765 /* Form element: listing */
1766 .formlistingradio {
1767     padding-bottom: 25px;
1768     padding-right: 10px;
1771 .formlistinginputradio {
1772     float: left;
1775 .formlistingmain {
1776     min-height: 225px;
1779 .formlisting {
1780     position: relative;
1781     margin: 15px 0;
1782     padding: 1px 19px 14px;
1783     background-color: white;
1784     border: 1px solid #ddd;
1786     @include border-radius(4px);
1789 .formlistingmore {
1790     position: absolute;
1791     cursor: pointer;
1792     bottom: -1px;
1793     right: -1px;
1794     padding: 3px 7px;
1795     font-size: 12px;
1796     font-weight: bold;
1797     background-color: whitesmoke;
1798     border: 1px solid #ddd;
1799     color: #9da0a4;
1801     @include border-radius(4px 0 4px 0);
1804 .formlistingall {
1805     margin: 15px 0;
1806     padding: 0;
1808     @include border-radius(4px);
1811 .formlistingrow {
1812     cursor: pointer;
1813     border-bottom: 1px solid;
1814     border-color: #e1e1e8;
1815     border-left: 1px solid #e1e1e8;
1816     border-right: 1px solid #e1e1e8;
1817     background-color: #f7f7f9;
1819     @include border-radius(0 0 4px 4px);
1820     padding: 6px;
1821     top: 50%;
1822     left: 50%;
1823     min-height: 34px;
1824     float: left;
1825     width: 150px;
1828 body.jsenabled .formlistingradio {
1829     display: none;
1832 body.jsenabled .formlisting {
1833     display: block;
1836 a.criteria-action {
1837     padding: 0 3px;
1838     float: right;
1841 div.criteria-description {
1842     padding: 10px 15px;
1843     margin: 5px 0;
1844     background: none repeat scroll 0 0 #f9f9f9;
1845     border: 1px solid #eee;
1848 ul.badges {
1849     margin: 0;
1850     list-style: none;
1853 .badges li {
1854     position: relative;
1855     display: inline-block;
1856     padding-top: 1em;
1857     text-align: center;
1858     vertical-align: top;
1859     width: 150px;
1862 .badges li .badge-name {
1863     display: block;
1864     padding: 5px;
1867 .badges li > img {
1868     position: absolute;
1871 .badges li .badge-image {
1872     width: 100px;
1873     height: 100px;
1874     left: 10px;
1875     top: 0;
1876     z-index: 1;
1879 .badges li .badge-actions {
1880     position: relative;
1883 .badges li .expireimage {
1884     width: 100px;
1885     height: 100px;
1886     left: 25px;
1887     top: 0;
1888     position: absolute;
1889     z-index: 10;
1890     opacity: 0.85;
1893 #badge-image {
1894     background-color: transparent;
1895     padding: 0;
1896     position: relative;
1897     min-width: 100px;
1898     width: 20%;
1899     display: inline-block;
1900     vertical-align: top;
1901     margin-top: 17px;
1902     margin-bottom: 20px;
1904     .expireimage {
1905         width: 100px;
1906         height: 100px;
1907         left: 0;
1908         top: 0;
1909         opacity: 0.85;
1910         position: absolute;
1911         z-index: 10;
1912     }
1914     .singlebutton {
1915         padding-top: 5px;
1916         display: block;
1918         button {
1919             margin-left: 4px;
1920         }
1921     }
1924 #badge-details {
1925     display: inline-block;
1926     width: 79%;
1929 #badge-overview dl,
1930 #badge-details dl {
1931     margin: 0;
1933     dt,
1934     dd {
1935         vertical-align: top;
1936         padding: 3px 0;
1937     }
1939     dt {
1940         clear: both;
1941         display: inline-block;
1942         width: 20%;
1943         min-width: 100px;
1944     }
1946     dd {
1947         display: inline-block;
1948         width: 79%;
1949         margin-left: 1%;
1950     }
1953 .badge-profile {
1954     vertical-align: top;
1957 .connected {
1958     color: map-get($theme-colors, 'success');
1961 .notconnected {
1962     color: map-get($theme-colors, 'danger');
1965 .connecting {
1966     color: map-get($theme-colors, 'warning');
1969 #page-badges-award .recipienttable tr td {
1970     vertical-align: top;
1973 #page-badges-award .recipienttable tr td.actions .actionbutton {
1974     margin: 0.3em 0;
1975     padding: 0.5em 0;
1976     width: 100%;
1979 #page-badges-award .recipienttable tr td.existing,
1980 #page-badges-award .recipienttable tr td.potential {
1981     width: 42%;
1984 #issued-badge-table .activatebadge {
1985     display: inline-block;
1988 .statusbox.active {
1989     background-color: $state-success-bg;
1992 .statusbox.inactive {
1993     background-color: $state-warning-bg;
1996 .statusbox {
1997     text-align: center;
1998     margin-bottom: 5px;
1999     padding: 5px;
2002 .statusbox .activatebadge {
2003     display: inline-block;
2006 .statusbox .activatebadge input[type=submit] {
2007     margin: 3px;
2010 .activatebadge {
2011     margin: 0;
2012     text-align: left;
2013     vertical-align: middle;
2016 img#persona_signin {
2017     cursor: pointer;
2020 .addcourse {
2021     float: right;
2024 .invisiblefieldset {
2025     display: inline;
2026     padding: 0;
2027     border-width: 0;
2030 /** Page header */
2031 #page-header {
2032     .logo {
2033         margin: $spacer 0;
2034         img {
2035             max-height: 75px;
2036         }
2037     }
2040 /** Navbar logo. */
2041 nav.navbar .logo img {
2042     max-height: 35px;
2045 /** Header-bar styles **/
2046 .page-context-header {
2047     // We need to be explicit about the height of the header.
2048     $pageHeaderHeight: 140px;
2050     // Do not remove these rules.
2051     overflow: hidden;
2052     padding: 0.25rem;
2054     .page-header-image,
2055     .page-header-headings {
2056         float: left;
2057         display: block;
2058         position: relative;
2059     }
2061     .page-header-image {
2062         margin-right: 1em;
2063         margin-bottom: 1em;
2064         & > a {
2065             display: inline-block;
2066         }
2067     }
2069     .page-header-headings,
2070     .header-button-group {
2071         position: relative;
2072         line-height: 24px;
2073         vertical-align: middle;
2074     }
2076     .header-button-group {
2077         display: block;
2078         float: left;
2079     }
2082 ul.dragdrop-keyboard-drag li {
2083     list-style-type: none;
2086 a.disabled:hover,
2087 a.disabled {
2088     text-decoration: none;
2089     cursor: default;
2090     font-style: italic;
2091     color: #808080;
2094 body.lockscroll {
2095     height: 100%;
2096     overflow: hidden;
2099 .progressbar_container {
2100     max-width: 500px;
2101     margin: 0 auto;
2104 /* IE10 only fix for calendar titling */
2105 .ie10 .yui3-calendar-header-label {
2106     display: inline-block;
2109 dd:before,
2110 dd:after {
2111     display: block;
2112     content: " ";
2115 dd:after {
2116     clear: both;
2119 // Active tabs with links should have a different
2120 // cursor to indicate they are clickable.
2121 .nav-tabs > .active > a[href],
2122 .nav-tabs > .active > a[href]:hover,
2123 .nav-tabs > .active > a[href]:focus {
2124     cursor: pointer;
2127 .inplaceeditable {
2128     &.inplaceeditingon {
2129         position: relative;
2131         .editinstructions {
2132             margin-top: -30px;
2133             font-weight: normal;
2134             margin-right: 0;
2135             margin-left: 0;
2136             left: 0;
2137             right: auto;
2138             white-space: nowrap;
2139         }
2140         @include media-breakpoint-up(sm) {
2141             input {
2142                 width: 330px;
2143                 vertical-align: text-bottom;
2144                 margin-bottom: 0;
2145             }
2146         }
2148         select {
2149             margin-bottom: 0;
2150         }
2151     }
2153     .quickediticon img {
2154         opacity: 0.2;
2155     }
2157     .quickeditlink {
2158         color: inherit;
2159         text-decoration: inherit;
2160     }
2162     &:hover .quickeditlink .quickediticon img,
2163     .quickeditlink:focus .quickediticon img {
2164         opacity: 1;
2165     }
2167     &.inplaceeditable-toggle .quickediticon {
2168         display: none;
2169     }
2171     &.inplaceeditable-autocomplete {
2172         display: block;
2173     }
2176 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2177     margin-top: -20px;
2180 /** Chart area. */
2181 .chart-area {
2183     .chart-table-data {
2184         display: none;
2185     }
2187     .chart-table {
2188         .chart-output-htmltable caption {
2189             white-space: nowrap;
2190         }
2191         /** When accessible, we display the table only. */
2192         &.accesshide {
2193             .chart-table-expand {
2194                 display: none;
2195             }
2196             .chart-table-data {
2197                 display: block;
2198             }
2199         }
2200     }
2203 // Reset for ul.
2204 ul {
2205     padding-left: 1rem;
2206     -webkit-margin-start: 0.2rem;  /* stylelint-disable-line */
2209 /* YUI 2 Tree View */
2210 /*rtl:raw:
2211 .ygtvtn,
2212 .ygtvtm,
2213 .ygtvtmh,
2214 .ygtvtmhh,
2215 .ygtvtp,
2216 .ygtvtph,
2217 .ygtvtphh,
2218 .ygtvln,
2219 .ygtvlm,
2220 .ygtvlmh,
2221 .ygtvlmhh,
2222 .ygtvlp,
2223 .ygtvlph,
2224 .ygtvlphh,
2225 .ygtvdepthcell,
2226 .ygtvok,
2227 .ygtvok:hover,
2228 .ygtvcancel,
2229 .ygtvcancel:hover {
2230     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
2232 */
2234 .hover-tooltip-container {
2235     position: relative;
2237     .hover-tooltip {
2238         opacity: 0;
2239         visibility: hidden;
2240         position: absolute;
2241         /*rtl:ignore*/
2242         left: 50%;
2243         top: calc(-50% - 5px);
2244         transform: translate(-50%, -50%);
2245         background-color: #fff;
2246         border: 1px solid rgba(0, 0, 0, .2);
2247         border-radius: .3rem;
2248         box-sizing: border-box;
2249         padding: 5px;
2250         white-space: nowrap;
2251         transition: opacity 0.15s, visibility 0.15s;
2252         z-index: 1000;
2254         &:before {
2255             content: '';
2256             display: inline-block;
2257             border-left: 8px solid transparent;
2258             border-right: 8px solid transparent;
2259             border-top: 8px solid rgba(0, 0, 0, .2);
2260             position: absolute;
2261             bottom: -8px;
2262             left: calc(50% - 8px);
2263         }
2265         &:after {
2266             content: '';
2267             display: inline-block;
2268             border-left: 7px solid transparent;
2269             border-right: 7px solid transparent;
2270             border-top: 7px solid #fff;
2271             position: absolute;
2272             bottom: -6px;
2273             left: calc(50% - 7px);
2274             z-index: 2;
2275         }
2276     }
2278     &:hover {
2279         .hover-tooltip {
2280             opacity: 1;
2281             visibility: visible;
2282             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2283         }
2284     }
2287 #region-flat-nav {
2288     padding-right: 0;
2289     padding-left: 0;
2290     .nav {
2291         margin-right: $grid-gutter-width / 2;
2292         background-color: $card-bg;
2293     }
2294     @include media-breakpoint-down(sm) {
2295         .nav {
2296             margin-top: $grid-gutter-width;
2297             margin-right: 0;
2298         }
2299     }
2302 // Footer link colour was added to allow the colour of footer links to be changed,
2303 // but really in bootstrap we want the colour of links on .bg-inverse to be changed
2304 // rather than being specific to the footer. This is kept for backwards compatibility.
2305 $footer-link-color: $bg-inverse-link-color !default;
2306 #page-footer a {
2307     color: $footer-link-color;
2308     text-decoration: underline;
2309     .icon {
2310         color: $footer-link-color;
2311     }
2312     &:focus .icon {
2313         color: $body-color;
2314     }
2317 .bg-inverse a {
2318     color: $bg-inverse-link-color;
2319     text-decoration: underline;
2320     .icon {
2321         color: $bg-inverse-link-color;
2322     }
2325 .sitelink {
2326     img {
2327         width: 112px;
2328     }
2331 // Make links in a menu clickable anywhere in the row.
2332 .dropdown-item a {
2333     display: block;
2334     width: 100%;
2335     color: $body-color;
2337 .dropdown-item:active a {
2338     color: $dropdown-link-active-color;
2341 .competency-tree {
2342     ul {
2343         padding-left: 1.5rem;
2344     }
2347 .sr-only-focusable {
2348     &:active,
2349     &:focus {
2350         z-index: 1031;
2351         position: fixed;
2352         background: #fff;
2353         padding: 7px;
2354         left: 0;
2355         top: 0;
2356     }
2359 [data-drag-type="move"] {
2360     cursor: move;
2361     touch-action: none;
2364 .clickable {
2365     cursor: pointer;
2368 .overlay-icon-container {
2369     position: absolute;
2370     top: 0;
2371     left: 0;
2372     width: 100%;
2373     height: 100%;
2374     background-color: rgba(255, 255, 255, 0.6);
2376     .loading-icon {
2377         position: absolute;
2378         top: 50%;
2379         left: 50%;
2380         transform: translate(-50%, -50%);
2382         .icon {
2383             height: 30px;
2384             width: 30px;
2385             font-size: 30px;
2386         }
2387     }
2390 .w-auto {
2391     width: auto;
2394 .bg-pulse-grey {
2395     animation: bg-pulse-grey 2s infinite linear;
2398 @keyframes bg-pulse-grey {
2399     0% {
2400         background-color: $gray-100;
2401     }
2402     50% {
2403         background-color: darken($gray-100, 5%);
2404     }
2405     100% {
2406         background-color: $gray-100;
2407     }
2410 @each $size, $length in $spacers {
2411     .line-height-#{$size} {
2412         line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2413     }
2416 .dir-rtl {
2417     .dir-rtl-hide {
2418         display: none;
2419     }
2422 .dir-ltr {
2423     .dir-ltr-hide {
2424         display: none;
2425     }
2428 .paged-content-page-container {
2429     min-height: 3.125rem;
2432 body.h5p-embed {
2433     #page-content {
2434         display: inherit;
2435     }
2436     #maincontent {
2437         display: none;
2438     }
2439     .h5pmessages {
2440         min-height: 230px; // This should be the same height as default core_h5p iframes.
2441     }
2444 .text-decoration-none {
2445     text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
2448 .colour-inherit {
2449     color: inherit !important; /* stylelint-disable-line declaration-no-important */
2452 .position-right {
2453     right: 0 !important; /* stylelint-disable-line declaration-no-important */
2456 .overflow-hidden {
2457     overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
2460 .text-break {
2461     overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
2464 .z-index-0 {
2465     z-index: 0 !important; /* stylelint-disable-line declaration-no-important */
2468 .z-index-1 {
2469     z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
2472 // These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
2473 .float-left {
2474     float: left !important; /* stylelint-disable-line declaration-no-important */
2477 .float-right {
2478     float: right !important; /* stylelint-disable-line declaration-no-important */
2481 .img-responsive {
2482     @include img-fluid();
2485 input[disabled] {
2486     cursor: not-allowed;
2489 .custom-select {
2490     width: auto;
2493 .fade.in {
2494     opacity: 1;
2497 .clamp-2 {
2498     display: -webkit-box;
2499     -webkit-box-orient: vertical;
2500     -webkit-line-clamp: 2;
2501     overflow: hidden;
2504 .word-break-all {
2505     word-break: break-all;
2508 .matchtext {
2509     background-color: lighten($primary, 40%);
2510     color: $body-color;
2511     height: 1.5rem;
2514 .border-radius {
2515     @if $enable-rounded {
2516         @include border-radius($card-border-radius);
2517     }
2520 // Emoji picker.
2521 $picker-width: 350px !default;
2522 $picker-width-xs: 320px !default;
2523 $picker-height: 400px !default;
2524 $picker-row-height: 40px !default;
2525 $picker-emoji-button-size: 40px !default;
2526 $picker-emoji-button-font-size: 24px !default;
2527 $picker-emoji-category-count: 9 !default;
2528 $picker-emojis-per-row: 7 !default;
2530 .emoji-picker {
2531     width: $picker-width;
2532     height: $picker-height;
2534     .category-button {
2535         padding: .375rem 0;
2536         height: 100%;
2537         width: $picker-width / $picker-emoji-category-count;
2538         border-top: none;
2539         border-left: none;
2540         border-right: none;
2541         border-bottom: 2px solid transparent;
2543         &.selected {
2544             border-bottom: 2px solid map-get($theme-colors, 'primary');
2545         }
2546     }
2548     .emojis-container,
2549     .search-results-container {
2550         min-width: $picker-emojis-per-row * $picker-emoji-button-size;
2551     }
2553     .picker-row {
2554         height: $picker-row-height;
2556         .category-name {
2557             line-height: $picker-row-height;
2558         }
2560         .emoji-button {
2561             height: $picker-emoji-button-size;
2562             width: $picker-emoji-button-size;
2563             line-height: $picker-emoji-button-size;
2564             font-size: $picker-emoji-button-font-size;
2565             overflow: hidden;
2567             @include hover-focus {
2568                 color: inherit;
2569                 text-decoration: none;
2570             }
2571         }
2572     }
2574     .emoji-preview {
2575         height: $picker-row-height;
2576         font-size: $picker-row-height;
2577         line-height: $picker-row-height;
2578     }
2580     .emoji-short-name {
2581         line-height: $picker-row-height / 2;
2582     }
2584     @include media-breakpoint-down(xs) {
2585         width: $picker-width-xs;
2586     }
2589 .emoji-auto-complete {
2590     height: $picker-row-height;
2592     .btn.btn-link.btn-icon.emoji-button {
2593         height: $picker-emoji-button-size;
2594         width: $picker-emoji-button-size;
2595         line-height: $picker-emoji-button-size;
2596         font-size: $picker-emoji-button-font-size;
2598         &.active {
2599             background-color: $gray-200;
2600         }
2601     }
2604 .toast-wrapper {
2605     max-width: $toast-max-width;
2606     max-height: 0;
2607     // Place these above any modals and other elements.
2608     z-index: 1051;
2610     > :first-child {
2611         margin-top: $spacer;
2612     }
2615 @each $color, $value in $theme-colors {
2616     .alert-#{$color} a {
2617         color: darken(theme-color-level($color, $alert-color-level), 10%);
2618     }
2620 .alert a {
2621     font-weight: $font-weight-bold;
2624 @include media-breakpoint-down(sm) {
2625     #page-navbar {
2626         width: 100%;
2627     }
2629     .breadcrumb:not(:empty) {
2630         width: 100%;
2631         border: ($border-width * 2) solid $gray-200;
2632         padding: $spacer / 4;
2633         margin-bottom: $spacer / 2;
2634         .breadcrumb-item {
2635             padding-top: $spacer / 3;
2636             padding-bottom: $spacer / 3;
2637             display: inline-block;
2638         }
2639     }
2641     .mform {
2642         width: 100%;
2643         padding-right: 15px;
2644         padding-left: 15px;
2645     }
2646     .pagination {
2647         flex-wrap: wrap;
2648         justify-content: center;
2649     }
2650     .custom-select {
2651         max-width: 100%;
2652     }
2653     .card .card-body {
2654         padding: $card-spacer-x / 2;
2655     }
2656     #page-header {
2657         .card {
2658             border: 0;
2659             .card-body {
2660                 padding: 0;
2661             }
2662         }
2663     }
2664     .nav-tabs,
2665     .nav-pills {
2666         margin: 0;
2667         border: 0;
2668         padding: $spacer / 8;
2669         background-color: $gray-200;
2670         .nav-item {
2671             flex: 1 1 auto;
2672             text-align: center;
2673         }
2674         .nav-link {
2675             background: $white;
2676             border: 0;
2677             margin: $spacer / 8;
2678             &.active {
2679                 @include button-outline-variant($gray-600);
2680                 border-color: $gray-600;
2681             }
2682         }
2683     }
2686 @media (max-width: map-get($grid-breakpoints, "sm")) and (max-height: 320px) {
2687     div#page {
2688         margin-top: 0;
2689     }
2690     .navbar.fixed-top {
2691         position: relative;
2692         z-index: inherit;
2693     }
2696 .link-underline {
2697     text-decoration: underline;
2698     &:focus {
2699         text-decoration: none;
2700     }
2703 .alert.cta {
2704     .icon {
2705         padding: 0.3rem;
2706         &.fa {
2707             border-radius: 50%;
2708             border-style: solid;
2709             border-width: 0.125rem;
2710         }
2711     }