MDL-69454 core_search: consistent navbar search
[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 .nav.usernav {
2046     .nav-item {
2047         display: flex;
2048     }
2049     .usermenu .dropdown-toggle {
2050         padding: 0 0.5rem;
2051     }
2054 /** Header-bar styles **/
2055 .page-context-header {
2056     // We need to be explicit about the height of the header.
2057     $pageHeaderHeight: 140px;
2059     // Do not remove these rules.
2060     overflow: hidden;
2061     padding: 0.25rem;
2063     .page-header-image,
2064     .page-header-headings {
2065         float: left;
2066         display: block;
2067         position: relative;
2068     }
2070     .page-header-image {
2071         margin-right: 1em;
2072         margin-bottom: 1em;
2073         & > a {
2074             display: inline-block;
2075         }
2076     }
2078     .page-header-headings,
2079     .header-button-group {
2080         position: relative;
2081         line-height: 24px;
2082         vertical-align: middle;
2083     }
2085     .header-button-group {
2086         display: block;
2087         float: left;
2088     }
2091 ul.dragdrop-keyboard-drag li {
2092     list-style-type: none;
2095 a.disabled:hover,
2096 a.disabled {
2097     text-decoration: none;
2098     cursor: default;
2099     font-style: italic;
2100     color: #808080;
2103 body.lockscroll {
2104     height: 100%;
2105     overflow: hidden;
2108 .progressbar_container {
2109     max-width: 500px;
2110     margin: 0 auto;
2113 /* IE10 only fix for calendar titling */
2114 .ie10 .yui3-calendar-header-label {
2115     display: inline-block;
2118 dd:before,
2119 dd:after {
2120     display: block;
2121     content: " ";
2124 dd:after {
2125     clear: both;
2128 // Active tabs with links should have a different
2129 // cursor to indicate they are clickable.
2130 .nav-tabs > .active > a[href],
2131 .nav-tabs > .active > a[href]:hover,
2132 .nav-tabs > .active > a[href]:focus {
2133     cursor: pointer;
2136 .inplaceeditable {
2137     &.inplaceeditingon {
2138         position: relative;
2140         .editinstructions {
2141             margin-top: -30px;
2142             font-weight: normal;
2143             margin-right: 0;
2144             margin-left: 0;
2145             left: 0;
2146             right: auto;
2147             white-space: nowrap;
2148         }
2149         @include media-breakpoint-up(sm) {
2150             input {
2151                 width: 330px;
2152                 vertical-align: text-bottom;
2153                 margin-bottom: 0;
2154             }
2155         }
2157         select {
2158             margin-bottom: 0;
2159         }
2160     }
2162     .quickediticon img {
2163         opacity: 0.2;
2164     }
2166     .quickeditlink {
2167         color: inherit;
2168         text-decoration: inherit;
2169     }
2171     &:hover .quickeditlink .quickediticon img,
2172     .quickeditlink:focus .quickediticon img {
2173         opacity: 1;
2174     }
2176     &.inplaceeditable-toggle .quickediticon {
2177         display: none;
2178     }
2180     &.inplaceeditable-autocomplete {
2181         display: block;
2182     }
2185 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2186     margin-top: -20px;
2189 /** Chart area. */
2190 .chart-area {
2192     .chart-table-data {
2193         display: none;
2194     }
2196     .chart-table {
2197         .chart-output-htmltable caption {
2198             white-space: nowrap;
2199         }
2200         /** When accessible, we display the table only. */
2201         &.accesshide {
2202             .chart-table-expand {
2203                 display: none;
2204             }
2205             .chart-table-data {
2206                 display: block;
2207             }
2208         }
2209     }
2212 // Reset for ul.
2213 ul {
2214     padding-left: 1rem;
2215     -webkit-margin-start: 0.2rem;  /* stylelint-disable-line */
2218 /* YUI 2 Tree View */
2219 /*rtl:raw:
2220 .ygtvtn,
2221 .ygtvtm,
2222 .ygtvtmh,
2223 .ygtvtmhh,
2224 .ygtvtp,
2225 .ygtvtph,
2226 .ygtvtphh,
2227 .ygtvln,
2228 .ygtvlm,
2229 .ygtvlmh,
2230 .ygtvlmhh,
2231 .ygtvlp,
2232 .ygtvlph,
2233 .ygtvlphh,
2234 .ygtvdepthcell,
2235 .ygtvok,
2236 .ygtvok:hover,
2237 .ygtvcancel,
2238 .ygtvcancel:hover {
2239     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
2241 */
2243 .hover-tooltip-container {
2244     position: relative;
2246     .hover-tooltip {
2247         opacity: 0;
2248         visibility: hidden;
2249         position: absolute;
2250         /*rtl:ignore*/
2251         left: 50%;
2252         top: calc(-50% - 5px);
2253         transform: translate(-50%, -50%);
2254         background-color: #fff;
2255         border: 1px solid rgba(0, 0, 0, .2);
2256         border-radius: .3rem;
2257         box-sizing: border-box;
2258         padding: 5px;
2259         white-space: nowrap;
2260         transition: opacity 0.15s, visibility 0.15s;
2261         z-index: 1000;
2263         &:before {
2264             content: '';
2265             display: inline-block;
2266             border-left: 8px solid transparent;
2267             border-right: 8px solid transparent;
2268             border-top: 8px solid rgba(0, 0, 0, .2);
2269             position: absolute;
2270             bottom: -8px;
2271             left: calc(50% - 8px);
2272         }
2274         &:after {
2275             content: '';
2276             display: inline-block;
2277             border-left: 7px solid transparent;
2278             border-right: 7px solid transparent;
2279             border-top: 7px solid #fff;
2280             position: absolute;
2281             bottom: -6px;
2282             left: calc(50% - 7px);
2283             z-index: 2;
2284         }
2285     }
2287     &:hover {
2288         .hover-tooltip {
2289             opacity: 1;
2290             visibility: visible;
2291             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2292         }
2293     }
2296 #region-flat-nav {
2297     padding-right: 0;
2298     padding-left: 0;
2299     .nav {
2300         margin-right: $grid-gutter-width / 2;
2301         background-color: $card-bg;
2302     }
2303     @include media-breakpoint-down(sm) {
2304         .nav {
2305             margin-top: $grid-gutter-width;
2306             margin-right: 0;
2307         }
2308     }
2311 // Footer link colour was added to allow the colour of footer links to be changed,
2312 // but really in bootstrap we want the colour of links on .bg-inverse to be changed
2313 // rather than being specific to the footer. This is kept for backwards compatibility.
2314 $footer-link-color: $bg-inverse-link-color !default;
2315 #page-footer a {
2316     color: $footer-link-color;
2317     text-decoration: underline;
2318     .icon {
2319         color: $footer-link-color;
2320     }
2321     &:focus .icon {
2322         color: $body-color;
2323     }
2326 .bg-inverse a {
2327     color: $bg-inverse-link-color;
2328     text-decoration: underline;
2329     .icon {
2330         color: $bg-inverse-link-color;
2331     }
2334 .sitelink {
2335     img {
2336         width: 112px;
2337     }
2340 // Make links in a menu clickable anywhere in the row.
2341 .dropdown-item a {
2342     display: block;
2343     width: 100%;
2344     color: $body-color;
2346 .dropdown-item:active a {
2347     color: $dropdown-link-active-color;
2350 .competency-tree {
2351     ul {
2352         padding-left: 1.5rem;
2353     }
2356 .sr-only-focusable {
2357     &:active,
2358     &:focus {
2359         z-index: 1031;
2360         position: fixed;
2361         background: #fff;
2362         padding: 7px;
2363         left: 0;
2364         top: 0;
2365     }
2368 [data-drag-type="move"] {
2369     cursor: move;
2370     touch-action: none;
2373 .clickable {
2374     cursor: pointer;
2377 .overlay-icon-container {
2378     position: absolute;
2379     top: 0;
2380     left: 0;
2381     width: 100%;
2382     height: 100%;
2383     background-color: rgba(255, 255, 255, 0.6);
2385     .loading-icon {
2386         position: absolute;
2387         top: 50%;
2388         left: 50%;
2389         transform: translate(-50%, -50%);
2391         .icon {
2392             height: 30px;
2393             width: 30px;
2394             font-size: 30px;
2395         }
2396     }
2399 .w-auto {
2400     width: auto;
2403 .bg-pulse-grey {
2404     animation: bg-pulse-grey 2s infinite linear;
2407 @keyframes bg-pulse-grey {
2408     0% {
2409         background-color: $gray-100;
2410     }
2411     50% {
2412         background-color: darken($gray-100, 5%);
2413     }
2414     100% {
2415         background-color: $gray-100;
2416     }
2419 @each $size, $length in $spacers {
2420     .line-height-#{$size} {
2421         line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2422     }
2425 .dir-rtl {
2426     .dir-rtl-hide {
2427         display: none;
2428     }
2431 .dir-ltr {
2432     .dir-ltr-hide {
2433         display: none;
2434     }
2437 .paged-content-page-container {
2438     min-height: 3.125rem;
2441 body.h5p-embed {
2442     #page-content {
2443         display: inherit;
2444     }
2445     #maincontent {
2446         display: none;
2447     }
2448     .h5pmessages {
2449         min-height: 230px; // This should be the same height as default core_h5p iframes.
2450     }
2453 .text-decoration-none {
2454     text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
2457 .colour-inherit {
2458     color: inherit !important; /* stylelint-disable-line declaration-no-important */
2461 .position-right {
2462     right: 0 !important; /* stylelint-disable-line declaration-no-important */
2465 .overflow-hidden {
2466     overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
2469 .text-break {
2470     overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
2473 .z-index-0 {
2474     z-index: 0 !important; /* stylelint-disable-line declaration-no-important */
2477 .z-index-1 {
2478     z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
2481 // These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
2482 .float-left {
2483     float: left !important; /* stylelint-disable-line declaration-no-important */
2486 .float-right {
2487     float: right !important; /* stylelint-disable-line declaration-no-important */
2490 .img-responsive {
2491     @include img-fluid();
2494 input[disabled] {
2495     cursor: not-allowed;
2498 .custom-select {
2499     width: auto;
2502 .fade.in {
2503     opacity: 1;
2506 .clamp-2 {
2507     display: -webkit-box;
2508     -webkit-box-orient: vertical;
2509     -webkit-line-clamp: 2;
2510     overflow: hidden;
2513 .word-break-all {
2514     word-break: break-all;
2517 .matchtext {
2518     background-color: lighten($primary, 40%);
2519     color: $body-color;
2520     height: 1.5rem;
2523 .border-radius {
2524     @if $enable-rounded {
2525         @include border-radius($card-border-radius);
2526     }
2529 // Emoji picker.
2530 $picker-width: 350px !default;
2531 $picker-width-xs: 320px !default;
2532 $picker-height: 400px !default;
2533 $picker-row-height: 40px !default;
2534 $picker-emoji-button-size: 40px !default;
2535 $picker-emoji-button-font-size: 24px !default;
2536 $picker-emoji-category-count: 9 !default;
2537 $picker-emojis-per-row: 7 !default;
2539 .emoji-picker {
2540     width: $picker-width;
2541     height: $picker-height;
2543     .category-button {
2544         padding: .375rem 0;
2545         height: 100%;
2546         width: $picker-width / $picker-emoji-category-count;
2547         border-top: none;
2548         border-left: none;
2549         border-right: none;
2550         border-bottom: 2px solid transparent;
2552         &.selected {
2553             border-bottom: 2px solid map-get($theme-colors, 'primary');
2554         }
2555     }
2557     .emojis-container,
2558     .search-results-container {
2559         min-width: $picker-emojis-per-row * $picker-emoji-button-size;
2560     }
2562     .picker-row {
2563         height: $picker-row-height;
2565         .category-name {
2566             line-height: $picker-row-height;
2567         }
2569         .emoji-button {
2570             height: $picker-emoji-button-size;
2571             width: $picker-emoji-button-size;
2572             line-height: $picker-emoji-button-size;
2573             font-size: $picker-emoji-button-font-size;
2574             overflow: hidden;
2576             @include hover-focus {
2577                 color: inherit;
2578                 text-decoration: none;
2579             }
2580         }
2581     }
2583     .emoji-preview {
2584         height: $picker-row-height;
2585         font-size: $picker-row-height;
2586         line-height: $picker-row-height;
2587     }
2589     .emoji-short-name {
2590         line-height: $picker-row-height / 2;
2591     }
2593     @include media-breakpoint-down(xs) {
2594         width: $picker-width-xs;
2595     }
2598 .emoji-auto-complete {
2599     height: $picker-row-height;
2601     .btn.btn-link.btn-icon.emoji-button {
2602         height: $picker-emoji-button-size;
2603         width: $picker-emoji-button-size;
2604         line-height: $picker-emoji-button-size;
2605         font-size: $picker-emoji-button-font-size;
2607         &.active {
2608             background-color: $gray-200;
2609         }
2610     }
2613 .toast-wrapper {
2614     max-width: $toast-max-width;
2615     max-height: 0;
2616     // Place these above any modals and other elements.
2617     z-index: 1051;
2619     > :first-child {
2620         margin-top: $spacer;
2621     }
2624 @each $color, $value in $theme-colors {
2625     .alert-#{$color} a {
2626         color: darken(theme-color-level($color, $alert-color-level), 10%);
2627     }
2629 .alert a {
2630     font-weight: $font-weight-bold;
2633 @include media-breakpoint-down(sm) {
2634     #page-navbar {
2635         width: 100%;
2636     }
2638     .breadcrumb:not(:empty) {
2639         width: 100%;
2640         border: ($border-width * 2) solid $gray-200;
2641         padding: $spacer / 4;
2642         margin-bottom: $spacer / 2;
2643         .breadcrumb-item {
2644             padding-top: $spacer / 3;
2645             padding-bottom: $spacer / 3;
2646             display: inline-block;
2647         }
2648     }
2650     .mform {
2651         width: 100%;
2652         padding-right: 15px;
2653         padding-left: 15px;
2654     }
2655     .pagination {
2656         flex-wrap: wrap;
2657         justify-content: center;
2658     }
2659     .custom-select {
2660         max-width: 100%;
2661     }
2662     .card .card-body {
2663         padding: $card-spacer-x / 2;
2664     }
2665     #page-header {
2666         .card {
2667             border: 0;
2668             .card-body {
2669                 padding: 0;
2670             }
2671         }
2672     }
2673     .nav-tabs,
2674     .nav-pills {
2675         margin: 0;
2676         border: 0;
2677         padding: $spacer / 8;
2678         background-color: $gray-200;
2679         .nav-item {
2680             flex: 1 1 auto;
2681             text-align: center;
2682         }
2683         .nav-link {
2684             background: $white;
2685             border: 0;
2686             margin: $spacer / 8;
2687             &.active {
2688                 @include button-outline-variant($gray-600);
2689                 border-color: $gray-600;
2690             }
2691         }
2692     }
2695 @media (max-width: map-get($grid-breakpoints, "sm")) and (max-height: 320px) {
2696     div#page {
2697         margin-top: 0;
2698     }
2699     .navbar.fixed-top {
2700         position: relative;
2701         z-index: inherit;
2702     }
2705 .link-underline {
2706     text-decoration: underline;
2707     &:focus {
2708         text-decoration: none;
2709     }
2712 .alert.cta {
2713     .icon {
2714         padding: 0.3rem;
2715         &.fa {
2716             border-radius: 50%;
2717             border-style: solid;
2718             border-width: 0.125rem;
2719         }
2720     }