Merge branch 'MDL-71366-master' of git://github.com/bmbrands/moodle
[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 .editor_atto_toolbar 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-toggle,
170 .modal-dialog[tabindex="0"],
171 .moodle-dialogue-base .closebutton,
172 button.close,
173 .form-autocomplete-selection {
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 // Accessible focus styling for autocomplete elements.
185 .form-autocomplete-suggestions li[aria-selected=true] {
186     outline: 0;
187     box-shadow: $input-btn-focus-box-shadow;
190 // Safari does not allow custom styling of checkboxes.
191 .safari {
192     input[type="checkbox"],
193     input[type="radio"] {
194         &.focus,
195         &:focus {
196             outline: auto;
197         }
198     }
201 .unlist,
202 .unlist li,
203 .inline-list,
204 .inline-list li,
205 .block .list,
206 .block .list li,
207 .section li.activity,
208 .section li.movehere,
209 .tabtree li {
210     list-style: none;
211     margin: 0;
212     padding: 0;
215 .section li.movehere a {
216     display: block;
217     width: 100%;
218     height: 2rem;
219     border: 2px dashed $gray-800;
222 .editing .course-content .hidden.sectionname {
223     visibility: hidden;
224     display: initial;
227 .inline,
228 .inline-list li {
229     display: inline;
232 .notifytiny {
233     font-size: $font-size-xs;
236 .notifytiny li,
237 .notifytiny td {
238     font-size: 100%;
241 .red,
242 .notifyproblem {
243     color: map-get($theme-colors, 'warning');
246 .green,
247 .notifysuccess {
248     color: map-get($theme-colors, 'success');
251 .highlight {
252     color: map-get($theme-colors, 'info');
255 .fitem.advanced .text-info {
256     font-weight: bold;
259 .reportlink {
260     text-align: right;
263 a.autolink.glossary:hover {
264     cursor: help;
266 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
267 .collapsibleregioncaption {
268     white-space: nowrap;
269     min-height: $line-height-base * $font-size-base;
272 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
273     cursor: pointer;
276 .pagelayout-mydashboard #region-main {
277     border: 0;
278     padding: 0;
279     background-color: transparent;
280     margin-top: -1px;
283 @include media-breakpoint-down(sm) {
284     .pagelayout-mydashboard,
285     .pagelayout-login {
286         #region-main-box {
287             padding-left: 0;
288             padding-right: 0;
289         }
290     }
293 .collapsibleregioncaption img {
294     vertical-align: middle;
297 .jsenabled .hiddenifjs {
298     display: none;
301 .visibleifjs {
302     display: none;
305 .jsenabled .visibleifjs {
306     display: inline;
309 .jsenabled .collapsibleregion {
310     overflow: hidden;
311     box-sizing: content-box;
314 .jsenabled .collapsed .collapsibleregioninner {
315     visibility: hidden;
318 .collapsible-actions {
319     display: none;
320     text-align: right;
323 .jsenabled .collapsible-actions {
324     display: block;
327 .collapsible-actions .collapseexpand {
328     padding-left: 20px;
329     background: url([[pix:t/collapsed]]) 2px center no-repeat;
331 /*rtl:raw:
332 .collapsible-actions .collapseexpand {
333     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
335 */
336 .collapsible-actions .collapse-all {
337     background-image: url([[pix:t/expanded]]);
340 .yui-overlay .yui-widget-bd {
341     background-color: #ffee69;
342     border: 1px solid #a6982b;
343     border-top-color: #d4c237;
344     color: #000;
345     left: 0;
346     padding: 2px 5px;
347     position: relative;
348     top: 0;
349     z-index: 1;
352 .clearer {
353     background: transparent;
354     border-width: 0;
355     clear: both;
356     display: block;
357     height: 1px;
358     margin: 0;
359     padding: 0;
362 .bold,
363 .warning,
364 .errorbox .title,
365 .pagingbar .title,
366 .pagingbar .thispage {
367     font-weight: bold;
370 img.userpicture {
371     margin-right: 0.5rem;
374 img.resize {
375     height: 1em;
376     width: 1em;
379 .action-menu .dropdown-toggle {
380     text-decoration: none;
383 .action-menu {
384     white-space: nowrap;
387 .block img.resize {
388     height: 0.9em;
389     width: 0.8em;
391 /* Icon styles */
392 img.activityicon {
393     height: 24px;
394     width: 24px;
395     vertical-align: middle;
398 .headermain {
399     font-weight: bold;
402 #maincontent {
403     display: block;
404     height: 1px;
405     overflow: hidden;
408 img.uihint {
409     cursor: help;
412 #addmembersform table {
413     margin-left: auto;
414     margin-right: auto;
417 table.flexible .emptyrow {
418     display: none;
421 form.popupform,
422 form.popupform div {
423     display: inline;
426 .arrow_button input {
427     overflow: hidden;
429 .no-overflow {
430     overflow: auto;
433 // Minimum height required for a menu in a table inside a scrollable div.
434 // Position required for table sizing inside a flex container.
435 .no-overflow > .generaltable {
436     position: relative;
437     margin-bottom: 0;
438     min-height: 10em;
440 // Accessibility features
442 // Accessibility: text 'seen' by screen readers but not visual users.
443 .accesshide {
444     @include sr-only();
447 span.hide,
448 div.hide,
449 .hidden {
450     display: none;
452 // Accessibility: Skip block link, for keyboard-only users.
453 a.skip-block,
454 a.skip {
455     position: absolute;
456     top: -1000em;
457     font-size: 0.85em;
458     text-decoration: none;
461 a.skip-block:focus,
462 a.skip-block:active,
463 a.skip:focus,
464 a.skip:active {
465     position: static;
466     display: block;
469 .skip-block-to {
470     display: block;
471     height: 1px;
472     overflow: hidden;
474 // Blogs
475 .addbloglink {
476     text-align: center;
479 .blog_entry .audience {
480     text-align: right;
481     padding-right: 4px;
484 .blog_entry .tags {
485     margin-top: 15px;
488 .blog_entry .content {
489     margin-left: 43px;
491 // Group
493 #doc-contents h1 {
494     margin: 1em 0 0 0;
497 #doc-contents ul {
498     margin: 0;
499     padding: 0;
500     width: 90%;
503 #doc-contents ul li {
504     list-style-type: none;
507 .groupmanagementtable td {
508     vertical-align: top;
511 .groupmanagementtable #existingcell,
512 .groupmanagementtable #potentialcell {
513     width: 42%;
516 .groupmanagementtable #buttonscell {
517     width: 16%;
520 .groupmanagementtable #buttonscell p.arrow_button input {
521     width: auto;
522     min-width: 80%;
523     margin: 0 auto;
524     display: block;
527 .groupmanagementtable #removeselect_wrapper,
528 .groupmanagementtable #addselect_wrapper {
529     width: 100%;
532 .groupmanagementtable #removeselect_wrapper label,
533 .groupmanagementtable #addselect_wrapper label {
534     font-weight: normal;
537 #group-usersummary {
538     width: 14em;
541 .groupselector {
542     margin-top: 3px;
543     margin-bottom: 3px;
544     display: inline-block;
547 .groupselector label {
548     display: inline-block;
551 // Login
552 .login-page {
553     [name="username"] {
554         margin-bottom: -1px;
555         border-bottom-right-radius: 0;
556         border-bottom-left-radius: 0;
557     }
559     [type="password"] {
560         margin-bottom: 10px;
561         border-top-left-radius: 0;
562         border-top-right-radius: 0;
563     }
566 // Notes
567 .notepost {
568     margin-bottom: 1em;
571 .notepost .userpicture {
572     float: left;
573     margin-right: 5px;
576 .notepost .content,
577 .notepost .footer {
578     clear: both;
581 .notesgroup {
582     margin-left: 20px;
585 // My Moodle
586 .path-my .coursebox {
587     margin: $spacer 0;
588     padding: 0;
590     .overview {
591         margin: 15px 30px 10px 30px;
592     }
595 .path-my .coursebox .info {
596     float: none;
597     margin: 0;
600 // Modules
601 .mod_introbox {
602     padding: 10px;
605 table.mod_index {
606     width: 100%;
609 // Comments
610 .comment-ctrl {
611     font-size: 12px;
612     display: none;
613     margin: 0;
614     padding: 0;
617 .comment-ctrl h5 {
618     margin: 0;
619     padding: 5px;
622 .comment-area {
623     max-width: 400px;
624     padding: 5px;
627 .comment-area textarea {
628     width: 100%;
629     overflow: auto;
631     &.fullwidth {
632         -webkit-box-sizing: border-box;
633         -moz-box-sizing: border-box;
634         box-sizing: border-box;
635     }
638 .comment-area .fd {
639     text-align: right;
642 .comment-meta span {
643     color: gray;
646 .comment-link img {
647     vertical-align: text-bottom;
650 .comment-list {
651     font-size: 11px;
652     overflow: auto;
653     list-style: none;
654     padding: 0;
655     margin: 0;
658 .comment-list li {
659     margin: 2px;
660     list-style: none;
661     margin-bottom: 5px;
662     clear: both;
663     padding: .3em;
664     position: relative;
667 .comment-list li.first {
668     display: none;
671 .comment-paging {
672     text-align: center;
675 .comment-paging .pageno {
676     padding: 2px;
679 .comment-paging .curpage {
680     border: 1px solid #ccc;
683 .comment-message .picture {
684     width: 20px;
685     float: left;
688 .comment-message .text {
689     margin: 0;
690     padding: 0;
693 .comment-message .text p {
694     padding: 0;
695     margin: 0 18px 0 0;
698 .comment-delete {
699     position: absolute;
700     top: 0;
701     right: 0;
702     margin: .3em;
705 .comment-report-selectall {
706     display: none;
709 .comment-link {
710     display: none;
713 .jsenabled .comment-link {
714     display: block;
717 .jsenabled .showcommentsnonjs {
718     display: none;
721 .jsenabled .comment-report-selectall {
722     display: inline;
724 /**
725 * Completion progress report
726 */
727 .completion-expired {
728     color: map-get($theme-colors, 'warning');
731 .completion-expected {
732     font-size: $font-size-xs;
735 .completion-sortchoice,
736 .completion-identifyfield {
737     font-size: $font-size-xs;
738     vertical-align: bottom;
741 .completion-progresscell {
742     text-align: right;
745 .completion-expired .completion-expected {
746     font-weight: bold;
748 /**
749 * Tags
750 */
751 img.user-image {
752     height: 100px;
753     width: 100px;
756 #tag-search-box {
757     text-align: center;
758     margin: 10px auto;
761 .path-tag .tag-index-items .tagarea {
762     border: 1px solid #e3e3e3;
763     border-radius: 4px;
764     padding: 10px;
765     margin-top: 10px;
768 .path-tag .tag-index-items .tagarea h3 {
769     display: block;
770     padding: 3px 0 10px 0;
771     margin: 0;
772     font-size: 1.1em;
773     font-weight: bold;
774     line-height: 20px;
775     color: #999;
776     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
777     text-transform: uppercase;
778     word-wrap: break-word;
779     border-bottom: solid 1px #e3e3e3;
780     margin-bottom: 10px;
783 .path-tag .tagarea .controls,
784 .path-tag .tagarea .taggeditems {
785     @include clearfix();
788 .path-tag .tagarea .controls,
789 .path-tag .tag-backtoallitems {
790     text-align: center;
793 .path-tag .tagarea .controls .gotopage.nextpage {
794     float: right;
797 .path-tag .tagarea .controls .gotopage.prevpage {
798     float: left;
801 .path-tag .tagarea .controls .exclusivemode {
802     display: inline-block;
805 .path-tag .tagarea .controls.controls-bottom {
806     margin-top: 5px;
809 .path-tag .tagarea .controls .gotopage.nextpage::after {
810     padding-right: 5px;
811     padding-left: 5px;
812     content: "»";
815 .path-tag .tagarea .controls .gotopage.prevpage::before {
816     padding-right: 5px;
817     padding-left: 5px;
818     content: "«";
821 span.flagged-tag,
822 tr.flagged-tag,
823 span.flagged-tag a,
824 tr.flagged-tag a {
825     color: map-get($theme-colors, 'warning');
828 .tag-management-table td,
829 .tag-management-table th {
830     vertical-align: middle;
831     padding: 4px;
834 .tag-management-table .inplaceeditable.inplaceeditingon input {
835     width: 150px;
838 .path-admin-tag .addstandardtags {
839     float: right;
841     img {
842         margin: 0 5px;
843     }
846 .path-tag .tag-relatedtags {
847     padding-top: 10px;
850 .path-tag .tag-management-box {
851     text-align: right;
854 .path-tag .tag-index-toc {
855     padding: 10px;
856     text-align: center;
859 .path-tag .tag-index-toc li,
860 .path-tag .tag-management-box li {
861     margin-left: 5px;
862     margin-right: 5px;
865 .path-tag .tag-management-box li a.edittag {
866     background-image: url([[pix:moodle|i/settings]]);
869 .path-tag .tag-management-box li a.flagasinappropriate {
870     background-image: url([[pix:moodle|i/flagged]]);
873 .path-tag .tag-management-box li a.removefrommyinterests {
874     background-image: url([[pix:moodle|t/delete]]);
877 .path-tag .tag-management-box li a.addtomyinterests {
878     background-image: url([[pix:moodle|t/add]]);
881 .path-tag .tag-management-box li a {
882     background-repeat: no-repeat;
883     background-position: left;
884     padding-left: 17px;
887 .tag_feed.media-list .media .itemimage {
888     float: left;
891 .tag_feed.media-list .media .itemimage img {
892     height: 35px;
893     width: 35px;
896 .tag_feed.media-list .media .media-body {
897     padding-right: 10px;
898     padding-left: 10px;
901 .tag_feed .media .muted a {
902     color: $text-muted;
905 .tag_cloud {
906     text-align: center;
909 .tag_cloud .inline-list li {
910     padding: 0 0.2em;
913 .tag_cloud .tag_overflow {
914     margin-top: 1em;
915     font-style: italic;
918 .tag_cloud .s20 {
919     font-size: 2.7em;
922 .tag_cloud .s19 {
923     font-size: 2.6em;
926 .tag_cloud .s18 {
927     font-size: 2.5em;
930 .tag_cloud .s17 {
931     font-size: 2.4em;
934 .tag_cloud .s16 {
935     font-size: 2.3em;
938 .tag_cloud .s15 {
939     font-size: 2.2em;
942 .tag_cloud .s14 {
943     font-size: 2.1em;
946 .tag_cloud .s13 {
947     font-size: 2em;
950 .tag_cloud .s12 {
951     font-size: 1.9em;
954 .tag_cloud .s11 {
955     font-size: 1.8em;
958 .tag_cloud .s10 {
959     font-size: 1.7em;
962 .tag_cloud .s9 {
963     font-size: 1.6em;
966 .tag_cloud .s8 {
967     font-size: 1.5em;
970 .tag_cloud .s7 {
971     font-size: 1.4em;
974 .tag_cloud .s6 {
975     font-size: 1.3em;
978 .tag_cloud .s5 {
979     font-size: 1.2em;
982 .tag_cloud .s4 {
983     font-size: 1.1em;
986 .tag_cloud .s3 {
987     font-size: 1em;
990 .tag_cloud .s2 {
991     font-size: 0.9em;
994 .tag_cloud .s1 {
995     font-size: 0.8em;
998 .tag_cloud .s0 {
999     font-size: 0.7em;
1002 .tag_list ul {
1003     display: inline;
1006 .tag_list.hideoverlimit .overlimit {
1007     display: none;
1010 .tag_list .tagmorelink {
1011     display: none;
1014 .tag_list.hideoverlimit .tagmorelink {
1015     display: inline;
1018 .tag_list.hideoverlimit .taglesslink {
1019     display: none;
1022 /**
1023 * Web Service
1024 */
1025 #webservice-doc-generator td {
1026     text-align: left;
1027     border: 0 solid black;
1030 /**
1031 * Enrol
1032 */
1033 .userenrolment {
1034     width: 100%;
1035     border-collapse: collapse;
1038 .userenrolment tr {
1039     vertical-align: top;
1042 .userenrolment td {
1043     padding: 0;
1044     height: 41px;
1047 .userenrolment .subfield {
1048     margin-right: 5px;
1051 .userenrolment .col_userdetails .subfield {
1052     margin-left: 40px;
1055 .userenrolment .col_userdetails .subfield_picture {
1056     float: left;
1057     margin-left: 0;
1060 .userenrolment .col_lastseen {
1061     width: 150px;
1064 .userenrolment .col_role {
1065     width: 262px;
1068 .userenrolment .col_role .roles,
1069 .userenrolment .col_group .groups {
1070     margin-right: 30px;
1073 .userenrolment .col_role .role {
1074     float: left;
1075     padding: 0 3px 3px;
1076     margin: 0 3px 3px;
1077     white-space: nowrap;
1080 .userenrolment .col_group .group {
1081     float: left;
1082     padding: 3px;
1083     margin: 3px;
1084     white-space: nowrap;
1087 .userenrolment .col_role .role a,
1088 .userenrolment .col_group .group a {
1089     margin-left: 3px;
1090     cursor: pointer;
1093 .userenrolment .col_role .addrole,
1094 .userenrolment .col_group .addgroup {
1095     float: right;
1096     padding: 3px;
1097     margin: 3px;
1099     > a:hover {
1100         border-bottom: 1px solid #666;
1101     }
1104 .userenrolment .col_role .addrole img,
1105 .userenrolment .col_group .addgroup img {
1106     vertical-align: baseline;
1109 .userenrolment .hasAllRoles .col_role .addrole {
1110     display: none;
1113 .userenrolment .col_enrol .enrolment {
1114     float: left;
1115     padding: 0 3px 3px;
1116     margin: 0 3px 3px;
1119 .userenrolment .col_enrol .enrolment a {
1120     float: right;
1121     margin-left: 3px;
1124 .corelightbox {
1125     background-color: #ccc;
1126     position: absolute;
1127     top: 0;
1128     left: 0;
1129     width: 100%;
1130     height: 100%;
1131     text-align: center;
1134 .corelightbox img {
1135     position: fixed;
1136     top: 50%;
1137     left: 50%;
1140 .mod-indent-outer {
1141     display: table;
1144 .mod-indent {
1145     display: table-cell;
1148 .label .mod-indent {
1149     float: left;
1150     padding-top: 20px;
1153 @include media-breakpoint-up(sm) {
1154     $mod-indent-size: 30px;
1155     /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1157     @for $i from 1 through 16 {
1158         $width: ($i * $mod-indent-size);
1160         .mod-indent-#{$i} {
1161             width: $width;
1162         }
1163     }
1165     .mod-indent-huge {
1166         width: (16 * $mod-indent-size);
1167     }
1170 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1171 .resourcecontent .mediaplugin_mp3 object {
1172     height: 25px;
1173     width: 600px;
1176 .resourcecontent audio.mediaplugin_html5audio {
1177     width: 600px;
1179 /** Large resource images should avoid hidden overflow **/
1180 .resourceimage {
1181     max-width: 100%;
1183 /* Audio player size in 'inline' mode (can only change width, as above) */
1184 .mediaplugin_mp3 object {
1185     height: 15px;
1186     width: 300px;
1189 audio.mediaplugin_html5audio {
1190     width: 300px;
1192 /* TinyMCE moodle media preview frame should not have padding */
1193 .core_media_preview.pagelayout-embedded #content {
1194     padding: 0;
1197 .core_media_preview.pagelayout-embedded #maincontent {
1198     height: 0;
1201 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1202     padding: 0;
1203     margin: 0;
1204     min-width: 0;
1205     background: none;
1208 .path-rating .ratingtable {
1209     width: 100%;
1210     margin-bottom: 1em;
1213 .path-rating .ratingtable th.rating {
1214     width: 100%;
1217 .path-rating .ratingtable td.rating,
1218 .path-rating .ratingtable td.time {
1219     white-space: nowrap;
1220     text-align: center;
1223 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1224 .moodle-dialogue-base .moodle-dialogue-lightbox {
1225     background-color: $gray-700;
1228 // Prevent adding backdrops to popups in popups.
1229 .pagelayout-popup {
1230     .moodle-dialogue-base {
1231         .moodle-dialogue-lightbox {
1232             background-color: transparent;
1233         }
1234         .moodle-dialogue {
1235             box-shadow: $popover-box-shadow;
1236         }
1237     }
1240 .moodle-dialogue-base .hidden,
1241 .moodle-dialogue-base .moodle-dialogue-hidden {
1242     display: none;
1245 .no-scrolling {
1246     overflow: hidden;
1249 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1250     left: 0;
1251     top: 0;
1252     right: 0;
1253     bottom: -50px;
1254     position: fixed;
1257 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1258     overflow: auto;
1261 .moodle-dialogue-base .moodle-dialogue-wrap {
1262     background-color: #fff;
1263     border: 1px solid #ccc;
1266 // Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1267 // it for a reason (conflicts with jquery .show()).
1268 .modal.show {
1269     display: block;
1272 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1273     display: flex;
1274     padding: 1rem 1rem;
1275     border-bottom: 1px solid #dee2e6;
1278 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1279     // Undo some YUI damage.
1280     min-height: 3rem;
1281     color: initial;
1282     background: initial;
1283     font-size: 1.5rem;
1284     line-height: 1.5;
1287 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1288     font-size: 1.5rem;
1291 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1292     /*rtl:raw:
1293         left: 0;
1294         right: auto;
1295     */
1296     padding: 0;
1297     position: relative;
1298     margin-left: auto;
1301 .moodle-dialogue-base .closebutton {
1302     padding: $modal-header-padding;
1303     margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
1304     position: relative;
1305     background-color: transparent;
1306     border: 0;
1307     background-image: none;
1308     box-shadow: none;
1309     opacity: 0.7;
1310     &:hover,
1311     &:active {
1312         opacity: 1;
1313     }
1314     &::after {
1315         content: "×";
1316     }
1319 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1320     padding: 0.5rem;
1321     body {
1322         background-color: $body-bg;
1323     }
1326 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1327     overflow: auto;
1328     position: absolute;
1329     top: 0;
1330     bottom: 50px;
1331     left: 0;
1332     right: 0;
1333     margin: 0;
1334     border: 0;
1337 .moodle-dialogue-exception .moodle-exception-param label {
1338     font-weight: bold;
1341 .moodle-dialogue-exception .param-stacktrace label {
1342     background-color: #eee;
1343     border: 1px solid #ccc;
1344     border-bottom-width: 0;
1347 .moodle-dialogue-exception .param-stacktrace pre {
1348     border: 1px solid #ccc;
1349     background-color: #fff;
1352 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1353     color: navy;
1354     font-size: $font-size-sm;
1357 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1358     color: map-get($theme-colors, 'warning');
1359     font-size: $font-size-sm;
1362 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1363     color: #333;
1364     font-size: 90%;
1365     border-bottom: 1px solid #eee;
1368 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1369     display: none;
1372 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1373     // Undo some YUI damage.
1374     background: initial;
1377 .moodle-dialogue-confirm .confirmation-message {
1378     margin: 0.5rem 0;
1381 .moodle-dialogue-confirm .confirmation-dialogue input {
1382     min-width: 80px;
1385 .moodle-dialogue-exception .moodle-exception-message {
1386     margin: 1em;
1389 .moodle-dialogue-exception .moodle-exception-param {
1390     margin-bottom: 0.5em;
1393 .moodle-dialogue-exception .moodle-exception-param label {
1394     width: 150px;
1397 .moodle-dialogue-exception .param-stacktrace label {
1398     display: block;
1399     margin: 0;
1400     padding: 4px 1em;
1403 .moodle-dialogue-exception .param-stacktrace pre {
1404     display: block;
1405     height: 200px;
1406     overflow: auto;
1409 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1410     display: inline-block;
1411     margin: 4px 0;
1414 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1415     display: inline-block;
1416     width: 50px;
1417     margin: 4px 1em;
1420 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1421     padding-left: 25px;
1422     margin-bottom: 4px;
1423     padding-bottom: 4px;
1426 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1427     opacity: 0.75;
1428     width: 100%;
1429     height: 100%;
1430     top: 0;
1431     left: 0;
1432     background-color: white;
1433     text-align: center;
1434     padding: 10% 0;
1436 /* Apply a default max-height on tooltip text */
1437 .moodle-dialogue .tooltiptext {
1438     max-height: 300px;
1441 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1442     z-index: 3001;
1444     .moodle-dialogue-bd {
1445         overflow: auto;
1446     }
1449 /**
1450  * Chooser Dialogues (moodle-core-chooserdialogue)
1451  *
1452  * This CSS belong to the chooser dialogue which should work both with, and
1453  * without javascript enabled
1454  */
1455 /* Hide the dialog and it's title */
1456 .chooserdialoguebody,
1457 .choosertitle {
1458     display: none;
1461 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1462     margin: 0;
1465 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1466     padding: 0;
1467     background: #f2f2f2;
1469     @include border-bottom-radius(10px);
1471 /* Center the submit buttons within the area */
1472 .choosercontainer #chooseform .submitbuttons {
1473     padding: 0.7em 0;
1474     text-align: right;
1476 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1478 @media (max-height: 639px) {
1479     .ios .choosercontainer #chooseform .submitbuttons {
1480         padding: 45px 0;
1481     }
1484 .choosercontainer #chooseform .submitbuttons input {
1485     min-width: 100px;
1486     margin: 0 0.5em;
1488 /* Various settings for the options area */
1489 .choosercontainer #chooseform .options {
1490     position: relative;
1491     border-bottom: 1px solid #bbb;
1493 /* Only set these options if we're showing the js container */
1494 .jschooser .choosercontainer #chooseform .alloptions {
1495     overflow-x: hidden;
1496     overflow-y: auto;
1497     max-width: 240px;
1499     .option {
1500         input[type=radio] {
1501             display: inline-block;
1502         }
1504         .typename {
1505             display: inline-block;
1506             width: 55%;
1507         }
1508     }
1510 /* Settings for option rows and option subtypes */
1511 .choosercontainer #chooseform .moduletypetitle,
1512 .choosercontainer #chooseform .option,
1513 .choosercontainer #chooseform .nonoption {
1514     margin-bottom: 0;
1515     padding: 0 1.6em 0 1.6em;
1518 .choosercontainer #chooseform .moduletypetitle {
1519     text-transform: uppercase;
1520     padding-top: 1.2em;
1521     padding-bottom: 0.4em;
1522     margin-bottom: 0.5rem;
1523     font-size: 100%;
1526 .choosercontainer #chooseform .option .typename,
1527 .choosercontainer #chooseform .nonoption .typename {
1528     padding: 0 0 0 0.5em;
1531 .choosercontainer #chooseform .modicon + .typename {
1532     padding-left: 0;
1535 .choosercontainer #chooseform .option input[type=radio],
1536 .choosercontainer #chooseform .option span.typename {
1537     vertical-align: middle;
1540 .choosercontainer #chooseform .option label {
1541     display: block;
1542     margin: 0;
1543     padding: ($spacer / 2) 0;
1544     border-bottom: 1px solid #fff;
1547 .choosercontainer #chooseform .option .icon {
1548     margin: 0;
1549     padding: 0 $spacer;
1552 .choosercontainer #chooseform .nonoption {
1553     padding-left: 2.7em;
1554     padding-top: 0.3em;
1555     padding-bottom: 0.1em;
1558 .choosercontainer #chooseform .subtype {
1559     margin-bottom: 0;
1560     padding: 0 1.6em 0 3.2em;
1563 .choosercontainer #chooseform .subtype .typename {
1564     margin: 0 0 0 0.2em;
1566 /* The instruction/help area */
1567 .jschooser .choosercontainer #chooseform .instruction,
1568 .jschooser .choosercontainer #chooseform .typesummary {
1569     display: none;
1570     position: absolute;
1571     top: 0;
1572     right: 0;
1573     bottom: 0;
1574     left: 240px;
1575     margin: 0;
1576     padding: 1.6em;
1577     background-color: #fff;
1578     overflow-x: hidden;
1579     overflow-y: auto;
1580     line-height: 2em;
1582 /* Selected option settings */
1583 .jschooser .choosercontainer #chooseform .instruction,
1584 .choosercontainer #chooseform .selected .typesummary {
1585     display: block;
1588 .choosercontainer #chooseform .selected {
1589     background-color: #fff;
1590     margin-top: -1px;
1591     padding-top: 1px;
1595 @include media-breakpoint-down(xs) {
1596     .jsenabled .choosercontainer #chooseform .alloptions {
1597         max-width: 100%;
1598     }
1600     .jsenabled .choosercontainer #chooseform .instruction,
1601     .jsenabled .choosercontainer #chooseform .typesummary {
1602         position: static;
1603     }
1606 /**
1607  * Module chooser dialogue (moodle-core-chooserdialogue)
1608  *
1609  * This CSS belong to the chooser dialogue which should work both with, and
1610  * without javascript enabled
1611  */
1612 .modchooser .modal-body {
1613     padding: 0;
1614     overflow-y: auto;
1615     min-height: 640px;
1616     display: flex;
1617     flex-direction: column;
1619     .searchresultitemscontainer-wrapper {
1620         min-height: 495px;
1621     }
1623     .carousel-item.active {
1624         display: flex;
1625     }
1626     .chooser-container {
1627         display: flex;
1628         flex-direction: column;
1629         flex: 1 1 auto;
1630     }
1632     .loading-icon {
1633         opacity: 1;
1634         .icon {
1635             display: block;
1636             font-size: 3em;
1637             height: 1em;
1638             width: 1em;
1639         }
1640     }
1641     .carousel-item .loading-icon .icon {
1642         margin: 1em auto;
1643     }
1644     .searchbar {
1645         width: 100%;
1646     }
1649 .modchooser .modal-footer {
1650     height: 70px;
1651     background: $modal-content-bg;
1652     .moodlenet-logo {
1653         .icon {
1654             height: 2.5rem;
1655             width: 6rem;
1656             margin-bottom: .6rem;
1657         }
1658     }
1661 .modchoosercontainer.noscroll {
1662     overflow-y: hidden;
1665 .modchoosercontainer .optionscontainer,
1666 .modchoosercontainer .searchresultitemscontainer {
1667     overflow-x: hidden;
1668     .option {
1669         // 2 items per line.
1670         flex-basis: calc(50% - 0.5rem);
1671         .optionactions {
1672             .optionaction {
1673                 cursor: pointer;
1674                 color: $gray-600;
1675                 i {
1676                     margin: 0;
1677                 }
1678             }
1679         }
1680         .optioninfo {
1681             a {
1682                 color: $gray-700;
1683                 &:hover {
1684                     text-decoration: none;
1685                 }
1686             }
1687         }
1688     }
1691 .modchooser .modal-body .optionsummary {
1692     background-color: $white;
1693     overflow-x: hidden;
1694     overflow-y: auto;
1695     height: 640px;
1697     .content {
1698         overflow-y: auto;
1699         .heading {
1700             .icon {
1701                 height: 32px;
1702                 width: 32px;
1703                 font-size: 32px;
1704                 padding: 0;
1705             }
1706         }
1707     }
1709     .actions {
1710         border-top: 1px solid $gray-300;
1711         background: $white;
1712     }
1715 @include media-breakpoint-down(xs) {
1716     .path-course-view .modal-dialog.modal-lg,
1717     .path-course-view .modal-content,
1718     .modchooser .modal-body,
1719     .modchooser .modal-body .carousel,
1720     .modchooser .modal-body .carousel-inner,
1721     .modchooser .modal-body .carousel-item,
1722     .modchooser .modal-body .optionsummary,
1723     .modchoosercontainer,
1724     .optionscontainer,
1725     .searchresultitemscontainer {
1726         min-height: auto;
1727         height: 100%;
1728         overflow-y: auto;
1729     }
1730     .path-course-view .modal-dialog.modal-lg {
1731         margin: 0;
1732     }
1733     .modchooser .modal-body .searchresultitemscontainer-wrapper {
1734         min-height: auto;
1735     }
1738 @include media-breakpoint-up(sm) {
1739     .modchoosercontainer .optionscontainer .option,
1740     .modchoosercontainer .searchresultitemscontainer .option {
1741         // Three items per line.
1742         flex-basis: calc(33.33% - 0.5rem);
1743     }
1746 @include media-breakpoint-up(lg) {
1747     .modchoosercontainer .optionscontainer .option,
1748     .modchoosercontainer .searchresultitemscontainer .option {
1749         // Six items per line.
1750         flex-basis: calc(16.66% - 0.5rem);
1751     }
1754 /* Form element: listing */
1755 .formlistingradio {
1756     padding-bottom: 25px;
1757     padding-right: 10px;
1760 .formlistinginputradio {
1761     float: left;
1764 .formlistingmain {
1765     min-height: 225px;
1768 .formlisting {
1769     position: relative;
1770     margin: 15px 0;
1771     padding: 1px 19px 14px;
1772     background-color: white;
1773     border: 1px solid #ddd;
1775     @include border-radius(4px);
1778 .formlistingmore {
1779     position: absolute;
1780     cursor: pointer;
1781     bottom: -1px;
1782     right: -1px;
1783     padding: 3px 7px;
1784     font-size: 12px;
1785     font-weight: bold;
1786     background-color: whitesmoke;
1787     border: 1px solid #ddd;
1788     color: #9da0a4;
1790     @include border-radius(4px 0 4px 0);
1793 .formlistingall {
1794     margin: 15px 0;
1795     padding: 0;
1797     @include border-radius(4px);
1800 .formlistingrow {
1801     cursor: pointer;
1802     border-bottom: 1px solid;
1803     border-color: #e1e1e8;
1804     border-left: 1px solid #e1e1e8;
1805     border-right: 1px solid #e1e1e8;
1806     background-color: #f7f7f9;
1808     @include border-radius(0 0 4px 4px);
1809     padding: 6px;
1810     top: 50%;
1811     left: 50%;
1812     min-height: 34px;
1813     float: left;
1814     width: 150px;
1817 body.jsenabled .formlistingradio {
1818     display: none;
1821 body.jsenabled .formlisting {
1822     display: block;
1825 a.criteria-action {
1826     padding: 0 3px;
1827     float: right;
1830 div.criteria-description {
1831     padding: 10px 15px;
1832     margin: 5px 0;
1833     background: none repeat scroll 0 0 #f9f9f9;
1834     border: 1px solid #eee;
1837 ul.badges {
1838     margin: 0;
1839     list-style: none;
1842 .badges li {
1843     position: relative;
1844     display: inline-block;
1845     padding-top: 1em;
1846     text-align: center;
1847     vertical-align: top;
1848     width: 150px;
1851 .badges li .badge-name {
1852     display: block;
1853     padding: 5px;
1856 .badges li > img {
1857     position: absolute;
1860 .badges li .badge-image {
1861     width: 100px;
1862     height: 100px;
1863     left: 10px;
1864     top: 0;
1865     z-index: 1;
1868 .badges li .badge-actions {
1869     position: relative;
1872 .badges li .expireimage {
1873     background-image: url([[pix:i/expired]]);
1874     background-repeat: no-repeat;
1875     background-size: 100px 100px;
1876     width: 100px;
1877     height: 100px;
1878     left: 25px;
1879     top: 15px;
1880     position: absolute;
1881     z-index: 10;
1882     opacity: 0.85;
1885 #badge-image {
1886     background-color: transparent;
1887     padding: 0;
1888     position: relative;
1889     min-width: 100px;
1890     width: 20%;
1891     display: inline-block;
1892     vertical-align: top;
1893     margin-top: 17px;
1894     margin-bottom: 20px;
1896     .expireimage {
1897         background-image: url([[pix:i/expired]]);
1898         background-repeat: no-repeat;
1899         background-size: 100px 100px;
1900         width: 100px;
1901         height: 100px;
1902         left: 0;
1903         top: 0;
1904         opacity: 0.85;
1905         position: absolute;
1906         z-index: 10;
1907     }
1909     .singlebutton {
1910         padding-top: 5px;
1911         display: block;
1913         button {
1914             margin-left: 4px;
1915         }
1916     }
1919 #badge-details {
1920     display: inline-block;
1921     width: 79%;
1924 #badge-overview dl,
1925 #badge-details dl {
1926     margin: 0;
1928     dt,
1929     dd {
1930         vertical-align: top;
1931         padding: 3px 0;
1932     }
1934     dt {
1935         clear: both;
1936         display: inline-block;
1937         width: 20%;
1938         min-width: 100px;
1939     }
1941     dd {
1942         display: inline-block;
1943         width: 79%;
1944         margin-left: 1%;
1945     }
1948 .badge-profile {
1949     vertical-align: top;
1952 .connected {
1953     color: map-get($theme-colors, 'success');
1956 .notconnected {
1957     color: map-get($theme-colors, 'danger');
1960 .connecting {
1961     color: map-get($theme-colors, 'warning');
1964 #page-badges-award .recipienttable tr td {
1965     vertical-align: top;
1968 #page-badges-award .recipienttable tr td.actions .actionbutton {
1969     margin: 0.3em 0;
1970     padding: 0.5em 0;
1971     width: 100%;
1974 #page-badges-award .recipienttable tr td.existing,
1975 #page-badges-award .recipienttable tr td.potential {
1976     width: 42%;
1979 #issued-badge-table .activatebadge {
1980     display: inline-block;
1983 .statusbox.active {
1984     background-color: $state-success-bg;
1987 .statusbox.inactive {
1988     background-color: $state-warning-bg;
1991 .statusbox {
1992     text-align: center;
1993     margin-bottom: 5px;
1994     padding: 5px;
1997 .statusbox .activatebadge {
1998     display: inline-block;
2001 .statusbox .activatebadge input[type=submit] {
2002     margin: 3px;
2005 .activatebadge {
2006     margin: 0;
2007     text-align: left;
2008     vertical-align: middle;
2011 img#persona_signin {
2012     cursor: pointer;
2015 .addcourse {
2016     float: right;
2019 .invisiblefieldset {
2020     display: inline;
2021     padding: 0;
2022     border-width: 0;
2025 /** Page header */
2026 #page-header {
2027     .logo {
2028         margin: $spacer 0;
2029         img {
2030             max-height: 75px;
2031         }
2032     }
2035 /** Navbar logo. */
2036 nav.navbar .logo img {
2037     max-height: 35px;
2040 .nav.usernav {
2041     .nav-item {
2042         display: flex;
2043     }
2044     .usermenu .dropdown-toggle {
2045         padding: 0 0.5rem;
2046     }
2049 /** Header-bar styles **/
2050 .page-context-header {
2051     // We need to be explicit about the height of the header.
2052     $pageHeaderHeight: 140px;
2054     // Do not remove these rules.
2055     overflow: hidden;
2056     padding: 0.25rem;
2058     .page-header-image,
2059     .page-header-headings {
2060         float: left;
2061         display: block;
2062         position: relative;
2063     }
2065     .page-header-image {
2066         margin-right: 1em;
2067         margin-bottom: 1em;
2068         & > a {
2069             display: inline-block;
2070         }
2071     }
2073     .page-header-headings,
2074     .header-button-group {
2075         position: relative;
2076         line-height: 24px;
2077         vertical-align: middle;
2078     }
2080     .header-button-group {
2081         display: block;
2082         float: left;
2083     }
2086 ul.dragdrop-keyboard-drag li {
2087     list-style-type: none;
2090 a.disabled:hover,
2091 a.disabled {
2092     text-decoration: none;
2093     cursor: default;
2094     font-style: italic;
2095     color: #808080;
2098 body.lockscroll {
2099     height: 100%;
2100     overflow: hidden;
2103 .progressbar_container {
2104     max-width: 500px;
2105     margin: 0 auto;
2108 /* IE10 only fix for calendar titling */
2109 .ie10 .yui3-calendar-header-label {
2110     display: inline-block;
2113 dd:before,
2114 dd:after {
2115     display: block;
2116     content: " ";
2119 dd:after {
2120     clear: both;
2123 // Active tabs with links should have a different
2124 // cursor to indicate they are clickable.
2125 .nav-tabs > .active > a[href],
2126 .nav-tabs > .active > a[href]:hover,
2127 .nav-tabs > .active > a[href]:focus {
2128     cursor: pointer;
2131 .inplaceeditable {
2132     &.inplaceeditingon {
2133         position: relative;
2135         .editinstructions {
2136             margin-top: -30px;
2137             font-weight: normal;
2138             margin-right: 0;
2139             margin-left: 0;
2140             left: 0;
2141             right: auto;
2142             white-space: nowrap;
2143         }
2144         @include media-breakpoint-up(sm) {
2145             input {
2146                 width: 330px;
2147                 vertical-align: text-bottom;
2148                 margin-bottom: 0;
2149             }
2150         }
2152         select {
2153             margin-bottom: 0;
2154         }
2155     }
2157     .quickediticon img {
2158         opacity: 0.2;
2159     }
2161     .quickeditlink {
2162         color: inherit;
2163         text-decoration: inherit;
2164     }
2166     &:hover .quickeditlink .quickediticon img,
2167     .quickeditlink:focus .quickediticon img {
2168         opacity: 1;
2169     }
2171     &.inplaceeditable-toggle .quickediticon {
2172         display: none;
2173     }
2175     &.inplaceeditable-autocomplete {
2176         display: block;
2177     }
2180 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2181     margin-top: -20px;
2184 /** Chart area. */
2185 .chart-area {
2187     .chart-table-data {
2188         display: none;
2189     }
2191     .chart-table {
2192         .chart-output-htmltable caption {
2193             white-space: nowrap;
2194         }
2195         /** When accessible, we display the table only. */
2196         &.accesshide {
2197             .chart-table-expand {
2198                 display: none;
2199             }
2200             .chart-table-data {
2201                 display: block;
2202             }
2203         }
2204     }
2207 // Reset for ul.
2208 ul {
2209     padding-left: 1rem;
2210     -webkit-margin-start: 0.2rem;  /* stylelint-disable-line */
2213 /* YUI 2 Tree View */
2214 /*rtl:raw:
2215 .ygtvtn,
2216 .ygtvtm,
2217 .ygtvtmh,
2218 .ygtvtmhh,
2219 .ygtvtp,
2220 .ygtvtph,
2221 .ygtvtphh,
2222 .ygtvln,
2223 .ygtvlm,
2224 .ygtvlmh,
2225 .ygtvlmhh,
2226 .ygtvlp,
2227 .ygtvlph,
2228 .ygtvlphh,
2229 .ygtvdepthcell,
2230 .ygtvok,
2231 .ygtvok:hover,
2232 .ygtvcancel,
2233 .ygtvcancel:hover {
2234     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
2236 */
2238 .hover-tooltip-container {
2239     position: relative;
2241     .hover-tooltip {
2242         opacity: 0;
2243         visibility: hidden;
2244         position: absolute;
2245         /*rtl:ignore*/
2246         left: 50%;
2247         top: calc(-50% - 5px);
2248         transform: translate(-50%, -50%);
2249         background-color: #fff;
2250         border: 1px solid rgba(0, 0, 0, .2);
2251         border-radius: .3rem;
2252         box-sizing: border-box;
2253         padding: 5px;
2254         white-space: nowrap;
2255         transition: opacity 0.15s, visibility 0.15s;
2256         z-index: 1000;
2258         &:before {
2259             content: '';
2260             display: inline-block;
2261             border-left: 8px solid transparent;
2262             border-right: 8px solid transparent;
2263             border-top: 8px solid rgba(0, 0, 0, .2);
2264             position: absolute;
2265             bottom: -8px;
2266             left: calc(50% - 8px);
2267         }
2269         &:after {
2270             content: '';
2271             display: inline-block;
2272             border-left: 7px solid transparent;
2273             border-right: 7px solid transparent;
2274             border-top: 7px solid #fff;
2275             position: absolute;
2276             bottom: -6px;
2277             left: calc(50% - 7px);
2278             z-index: 2;
2279         }
2280     }
2282     &:hover {
2283         .hover-tooltip {
2284             opacity: 1;
2285             visibility: visible;
2286             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2287         }
2288     }
2291 #region-flat-nav {
2292     padding-right: 0;
2293     padding-left: 0;
2294     .nav {
2295         margin-right: $grid-gutter-width / 2;
2296         background-color: $card-bg;
2297     }
2298     @include media-breakpoint-down(sm) {
2299         .nav {
2300             margin-top: $grid-gutter-width;
2301             margin-right: 0;
2302         }
2303     }
2306 // Footer link colour was added to allow the colour of footer links to be changed,
2307 // but really in bootstrap we want the colour of links on .bg-inverse to be changed
2308 // rather than being specific to the footer. This is kept for backwards compatibility.
2309 $footer-link-color: $bg-inverse-link-color !default;
2310 #page-footer a {
2311     color: $footer-link-color;
2312     text-decoration: underline;
2313     .icon {
2314         color: $footer-link-color;
2315     }
2316     &:focus .icon {
2317         color: $body-color;
2318     }
2321 .bg-inverse a {
2322     color: $bg-inverse-link-color;
2323     text-decoration: underline;
2324     .icon {
2325         color: $bg-inverse-link-color;
2326     }
2329 .sitelink {
2330     img {
2331         width: 112px;
2332     }
2335 // Make links in a menu clickable anywhere in the row.
2336 .dropdown-item {
2337     a {
2338         display: block;
2339         width: 100%;
2340         color: $body-color;
2341     }
2342     &:active,
2343     &:hover,
2344     &:focus,
2345     &:focus-within {
2346         outline: 0;
2347         background-color: $dropdown-link-hover-bg;
2348         a {
2349             color: $dropdown-link-active-color;
2350         }
2351     }
2352     &[aria-current="true"] {
2353         position: relative;
2354         display: flex;
2355         align-items: center;
2356         &:before {
2357             @include fa-icon();
2358             content: $fa-var-circle;
2359             position: absolute;
2360             left: 0.4rem;
2361             font-size: 0.7rem;
2362         }
2363     }
2366 .competency-tree {
2367     ul {
2368         padding-left: 1.5rem;
2369     }
2372 .sr-only-focusable {
2373     &:active,
2374     &:focus {
2375         z-index: 1031;
2376         position: fixed;
2377         background: #fff;
2378         padding: 7px;
2379         left: 0;
2380         top: 0;
2381     }
2384 [data-drag-type="move"] {
2385     cursor: move;
2386     touch-action: none;
2389 .clickable {
2390     cursor: pointer;
2393 .overlay-icon-container {
2394     position: absolute;
2395     top: 0;
2396     left: 0;
2397     width: 100%;
2398     height: 100%;
2399     background-color: rgba(255, 255, 255, 0.6);
2401     .loading-icon {
2402         position: absolute;
2403         top: 50%;
2404         left: 50%;
2405         transform: translate(-50%, -50%);
2407         .icon {
2408             height: 30px;
2409             width: 30px;
2410             font-size: 30px;
2411         }
2412     }
2415 .w-auto {
2416     width: auto;
2419 .bg-pulse-grey {
2420     animation: bg-pulse-grey 2s infinite linear;
2423 @keyframes bg-pulse-grey {
2424     0% {
2425         background-color: $gray-100;
2426     }
2427     50% {
2428         background-color: darken($gray-100, 5%);
2429     }
2430     100% {
2431         background-color: $gray-100;
2432     }
2435 @each $size, $length in $spacers {
2436     .line-height-#{$size} {
2437         line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2438     }
2441 .dir-rtl {
2442     .dir-rtl-hide {
2443         display: none;
2444     }
2447 .dir-ltr {
2448     .dir-ltr-hide {
2449         display: none;
2450     }
2453 .paged-content-page-container {
2454     min-height: 3.125rem;
2457 body.h5p-embed {
2458     #page-content {
2459         display: inherit;
2460     }
2461     #maincontent {
2462         display: none;
2463     }
2464     .h5pmessages {
2465         min-height: 230px; // This should be the same height as default core_h5p iframes.
2466     }
2469 #h5pcontenttypes td {
2470     vertical-align: middle;
2473 .text-decoration-none {
2474     text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
2477 .colour-inherit {
2478     color: inherit !important; /* stylelint-disable-line declaration-no-important */
2481 .position-right {
2482     right: 0 !important; /* stylelint-disable-line declaration-no-important */
2485 .overflow-hidden {
2486     overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
2489 .text-break {
2490     overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
2493 .word-break {
2494     word-break: break-word !important; /* stylelint-disable-line declaration-no-important */
2497 .z-index-0 {
2498     z-index: 0 !important; /* stylelint-disable-line declaration-no-important */
2501 .z-index-1 {
2502     z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
2505 // These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
2506 .float-left {
2507     float: left !important; /* stylelint-disable-line declaration-no-important */
2510 .float-right {
2511     float: right !important; /* stylelint-disable-line declaration-no-important */
2514 .img-responsive {
2515     @include img-fluid();
2518 input[disabled] {
2519     cursor: not-allowed;
2522 .custom-select {
2523     width: auto;
2526 .fade.in {
2527     opacity: 1;
2530 .clamp-2 {
2531     display: -webkit-box;
2532     -webkit-box-orient: vertical;
2533     -webkit-line-clamp: 2;
2534     overflow: hidden;
2537 .word-break-all {
2538     word-break: break-all;
2541 .matchtext {
2542     background-color: lighten($primary, 40%);
2543     color: $body-color;
2544     height: 1.5rem;
2547 .border-radius {
2548     @if $enable-rounded {
2549         @include border-radius($card-border-radius);
2550     }
2553 // Emoji picker.
2554 $picker-width: 350px !default;
2555 $picker-width-xs: 320px !default;
2556 $picker-height: 400px !default;
2557 $picker-row-height: 40px !default;
2558 $picker-emoji-button-size: 40px !default;
2559 $picker-emoji-button-font-size: 24px !default;
2560 $picker-emoji-category-count: 9 !default;
2561 $picker-emojis-per-row: 7 !default;
2563 .emoji-picker {
2564     width: $picker-width;
2565     height: $picker-height;
2567     .category-button {
2568         padding: .375rem 0;
2569         height: 100%;
2570         width: $picker-width / $picker-emoji-category-count;
2571         border-top: none;
2572         border-left: none;
2573         border-right: none;
2574         border-bottom: 2px solid transparent;
2576         &.selected {
2577             border-bottom: 2px solid map-get($theme-colors, 'primary');
2578         }
2579     }
2581     .emojis-container,
2582     .search-results-container {
2583         min-width: $picker-emojis-per-row * $picker-emoji-button-size;
2584     }
2586     .picker-row {
2587         height: $picker-row-height;
2589         .category-name {
2590             line-height: $picker-row-height;
2591         }
2593         .emoji-button {
2594             height: $picker-emoji-button-size;
2595             width: $picker-emoji-button-size;
2596             line-height: $picker-emoji-button-size;
2597             font-size: $picker-emoji-button-font-size;
2598             overflow: hidden;
2600             @include hover-focus {
2601                 color: inherit;
2602                 text-decoration: none;
2603             }
2604         }
2605     }
2607     .emoji-preview {
2608         height: $picker-row-height;
2609         font-size: $picker-row-height;
2610         line-height: $picker-row-height;
2611     }
2613     .emoji-short-name {
2614         line-height: $picker-row-height / 2;
2615     }
2617     @include media-breakpoint-down(xs) {
2618         width: $picker-width-xs;
2619     }
2622 .emoji-auto-complete {
2623     height: $picker-row-height;
2625     .btn.btn-link.btn-icon.emoji-button {
2626         height: $picker-emoji-button-size;
2627         width: $picker-emoji-button-size;
2628         line-height: $picker-emoji-button-size;
2629         font-size: $picker-emoji-button-font-size;
2631         &.active {
2632             background-color: $gray-200;
2633         }
2634     }
2637 .toast-wrapper {
2638     max-width: $toast-max-width;
2639     max-height: 0;
2640     // Place these above any modals and other elements.
2641     z-index: 1051;
2643     > :first-child {
2644         margin-top: $spacer;
2645     }
2648 @each $color, $value in $theme-colors {
2649     .alert-#{$color} a {
2650         color: darken(theme-color-level($color, $alert-color-level), 10%);
2651     }
2653 .alert a {
2654     font-weight: $font-weight-bold;
2657 @include media-breakpoint-down(sm) {
2658     #page-navbar {
2659         width: 100%;
2660     }
2662     .breadcrumb:not(:empty) {
2663         width: 100%;
2664         border: ($border-width * 2) solid $gray-200;
2665         padding: $spacer / 4;
2666         margin-bottom: $spacer / 2;
2667         .breadcrumb-item {
2668             padding-top: $spacer / 3;
2669             padding-bottom: $spacer / 3;
2670             display: inline-block;
2671         }
2672     }
2674     .mform {
2675         width: 100%;
2676         padding-right: 15px;
2677         padding-left: 15px;
2678     }
2679     .pagination {
2680         flex-wrap: wrap;
2681         justify-content: center;
2682     }
2683     .custom-select {
2684         max-width: 100%;
2685     }
2686     .card .card-body {
2687         padding: $card-spacer-x / 2;
2688     }
2689     #page-header {
2690         .card {
2691             border: 0;
2692             .card-body {
2693                 padding: 0;
2694             }
2695         }
2696     }
2697     .nav-tabs,
2698     .nav-pills {
2699         margin: 0;
2700         border: 0;
2701         padding: $spacer / 8;
2702         background-color: $gray-200;
2703         .nav-item {
2704             flex: 1 1 auto;
2705             text-align: center;
2706         }
2707         .nav-link {
2708             background: $white;
2709             border: 0;
2710             margin: $spacer / 8;
2711             &.active {
2712                 @include button-outline-variant($gray-600);
2713                 border-color: $gray-600;
2714             }
2715         }
2716     }
2719 @media (max-width: map-get($grid-breakpoints, "sm")) and (max-height: 320px) {
2720     div#page {
2721         margin-top: 0;
2722     }
2723     .navbar.fixed-top {
2724         position: relative;
2725         z-index: inherit;
2726     }
2729 .link-underline {
2730     text-decoration: underline;
2731     &:focus {
2732         text-decoration: none;
2733     }
2736 .alert.cta {
2737     .icon {
2738         padding: 0.3rem;
2739         &.fa {
2740             border-radius: 50%;
2741             border-style: solid;
2742             border-width: 0.125rem;
2743         }
2744     }
2746 .core_payment_gateways_modal .custom-control-label::before,
2747 .core_payment_gateways_modal .custom-control-label::after {
2748     top: 45%;
2751 $scrollbar-thumb: $primary;
2752 $scrollbar-track: lighten($primary, 40%);
2753 // simple scrollbars
2754 .visual-scroll-x {
2755     scrollbar-width: thin;
2756     scrollbar-color: $scrollbar-thumb $scrollbar-track;
2757     -ms-overflow-style: -ms-autohiding-scrollbar;
2758     &::-webkit-scrollbar {
2759         height: 8px; // for horizontal scrollbars
2760         -webkit-appearance: none;
2761         appearance: none;
2762     }
2763     &::-webkit-scrollbar-thumb {
2764         background-color: $scrollbar-thumb;
2765         border-right: $border-width solid $white;
2766     }
2767     &::-webkit-scrollbar-track {
2768         background-color: $scrollbar-track;
2769         border-right: $border-width solid $white;
2770     }