MDL-69453 core_form: improve form UI icons and alignment
[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-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-fullscreen .closebutton {
1262     width: 28px;
1263     height: 16px;
1264     background-size: 100%;
1267 .moodle-dialogue-base .moodle-dialogue-wrap {
1268     background-color: #fff;
1269     border: 1px solid #ccc;
1272 // Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1273 // it for a reason (conflicts with jquery .show()).
1274 .modal.show {
1275     display: block;
1278 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1279     display: flex;
1280     padding: 1rem 1rem;
1281     border-bottom: 1px solid #dee2e6;
1284 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1285     // Undo some YUI damage.
1286     min-height: 3rem;
1287     color: initial;
1288     background: initial;
1289     font-size: 1.5rem;
1290     line-height: 1.5;
1293 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1294     font-size: 1.5rem;
1297 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1298     /*rtl:raw:
1299         left: 0;
1300         right: auto;
1301     */
1302     padding: 0;
1303     position: relative;
1304     margin-left: auto;
1307 .moodle-dialogue-base .closebutton {
1308     padding: $modal-header-padding;
1309     margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
1310     position: relative;
1311     background-color: transparent;
1312     border: 0;
1313     background-image: none;
1314     box-shadow: none;
1315     opacity: 0.7;
1316     &:hover,
1317     &:active {
1318         opacity: 1;
1319     }
1320     &::after {
1321         content: "×";
1322     }
1325 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1326     padding: 0.5rem;
1327     body {
1328         background-color: $body-bg;
1329     }
1332 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1333     overflow: auto;
1334     position: absolute;
1335     top: 0;
1336     bottom: 50px;
1337     left: 0;
1338     right: 0;
1339     margin: 0;
1340     border: 0;
1343 .moodle-dialogue-exception .moodle-exception-param label {
1344     font-weight: bold;
1347 .moodle-dialogue-exception .param-stacktrace label {
1348     background-color: #eee;
1349     border: 1px solid #ccc;
1350     border-bottom-width: 0;
1353 .moodle-dialogue-exception .param-stacktrace pre {
1354     border: 1px solid #ccc;
1355     background-color: #fff;
1358 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1359     color: navy;
1360     font-size: $font-size-sm;
1363 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1364     color: map-get($theme-colors, 'warning');
1365     font-size: $font-size-sm;
1368 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1369     color: #333;
1370     font-size: 90%;
1371     border-bottom: 1px solid #eee;
1374 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1375     display: none;
1378 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1379     // Undo some YUI damage.
1380     background: initial;
1383 .moodle-dialogue-confirm .confirmation-message {
1384     margin: 0.5rem 0;
1387 .moodle-dialogue-confirm .confirmation-dialogue input {
1388     min-width: 80px;
1391 .moodle-dialogue-exception .moodle-exception-message {
1392     margin: 1em;
1395 .moodle-dialogue-exception .moodle-exception-param {
1396     margin-bottom: 0.5em;
1399 .moodle-dialogue-exception .moodle-exception-param label {
1400     width: 150px;
1403 .moodle-dialogue-exception .param-stacktrace label {
1404     display: block;
1405     margin: 0;
1406     padding: 4px 1em;
1409 .moodle-dialogue-exception .param-stacktrace pre {
1410     display: block;
1411     height: 200px;
1412     overflow: auto;
1415 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1416     display: inline-block;
1417     margin: 4px 0;
1420 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1421     display: inline-block;
1422     width: 50px;
1423     margin: 4px 1em;
1426 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1427     padding-left: 25px;
1428     margin-bottom: 4px;
1429     padding-bottom: 4px;
1432 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1433     opacity: 0.75;
1434     width: 100%;
1435     height: 100%;
1436     top: 0;
1437     left: 0;
1438     background-color: white;
1439     text-align: center;
1440     padding: 10% 0;
1442 /* Apply a default max-height on tooltip text */
1443 .moodle-dialogue .tooltiptext {
1444     max-height: 300px;
1447 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1448     z-index: 3001;
1450     .moodle-dialogue-bd {
1451         overflow: auto;
1452     }
1455 /**
1456  * Chooser Dialogues (moodle-core-chooserdialogue)
1457  *
1458  * This CSS belong to the chooser dialogue which should work both with, and
1459  * without javascript enabled
1460  */
1461 /* Hide the dialog and it's title */
1462 .chooserdialoguebody,
1463 .choosertitle {
1464     display: none;
1467 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1468     margin: 0;
1471 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1472     padding: 0;
1473     background: #f2f2f2;
1475     @include border-bottom-radius(10px);
1477 /* Center the submit buttons within the area */
1478 .choosercontainer #chooseform .submitbuttons {
1479     padding: 0.7em 0;
1480     text-align: right;
1482 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1484 @media (max-height: 639px) {
1485     .ios .choosercontainer #chooseform .submitbuttons {
1486         padding: 45px 0;
1487     }
1490 .choosercontainer #chooseform .submitbuttons input {
1491     min-width: 100px;
1492     margin: 0 0.5em;
1494 /* Various settings for the options area */
1495 .choosercontainer #chooseform .options {
1496     position: relative;
1497     border-bottom: 1px solid #bbb;
1499 /* Only set these options if we're showing the js container */
1500 .jschooser .choosercontainer #chooseform .alloptions {
1501     overflow-x: hidden;
1502     overflow-y: auto;
1503     max-width: 240px;
1505     .option {
1506         input[type=radio] {
1507             display: inline-block;
1508         }
1510         .typename {
1511             display: inline-block;
1512             width: 55%;
1513         }
1514     }
1516 /* Settings for option rows and option subtypes */
1517 .choosercontainer #chooseform .moduletypetitle,
1518 .choosercontainer #chooseform .option,
1519 .choosercontainer #chooseform .nonoption {
1520     margin-bottom: 0;
1521     padding: 0 1.6em 0 1.6em;
1524 .choosercontainer #chooseform .moduletypetitle {
1525     text-transform: uppercase;
1526     padding-top: 1.2em;
1527     padding-bottom: 0.4em;
1528     margin-bottom: 0.5rem;
1529     font-size: 100%;
1532 .choosercontainer #chooseform .option .typename,
1533 .choosercontainer #chooseform .nonoption .typename {
1534     padding: 0 0 0 0.5em;
1537 .choosercontainer #chooseform .modicon + .typename {
1538     padding-left: 0;
1541 .choosercontainer #chooseform .option input[type=radio],
1542 .choosercontainer #chooseform .option span.typename {
1543     vertical-align: middle;
1546 .choosercontainer #chooseform .option label {
1547     display: block;
1548     margin: 0;
1549     padding: ($spacer / 2) 0;
1550     border-bottom: 1px solid #fff;
1553 .choosercontainer #chooseform .option .icon {
1554     margin: 0;
1555     padding: 0 $spacer;
1558 .choosercontainer #chooseform .nonoption {
1559     padding-left: 2.7em;
1560     padding-top: 0.3em;
1561     padding-bottom: 0.1em;
1564 .choosercontainer #chooseform .subtype {
1565     margin-bottom: 0;
1566     padding: 0 1.6em 0 3.2em;
1569 .choosercontainer #chooseform .subtype .typename {
1570     margin: 0 0 0 0.2em;
1572 /* The instruction/help area */
1573 .jschooser .choosercontainer #chooseform .instruction,
1574 .jschooser .choosercontainer #chooseform .typesummary {
1575     display: none;
1576     position: absolute;
1577     top: 0;
1578     right: 0;
1579     bottom: 0;
1580     left: 240px;
1581     margin: 0;
1582     padding: 1.6em;
1583     background-color: #fff;
1584     overflow-x: hidden;
1585     overflow-y: auto;
1586     line-height: 2em;
1588 /* Selected option settings */
1589 .jschooser .choosercontainer #chooseform .instruction,
1590 .choosercontainer #chooseform .selected .typesummary {
1591     display: block;
1594 .choosercontainer #chooseform .selected {
1595     background-color: #fff;
1596     margin-top: -1px;
1597     padding-top: 1px;
1601 @include media-breakpoint-down(xs) {
1602     .jsenabled .choosercontainer #chooseform .alloptions {
1603         max-width: 100%;
1604     }
1606     .jsenabled .choosercontainer #chooseform .instruction,
1607     .jsenabled .choosercontainer #chooseform .typesummary {
1608         position: static;
1609     }
1612 /**
1613  * Module chooser dialogue (moodle-core-chooserdialogue)
1614  *
1615  * This CSS belong to the chooser dialogue which should work both with, and
1616  * without javascript enabled
1617  */
1618 .modchooser .modal-body {
1619     padding: 0;
1620     overflow-y: auto;
1621     min-height: 640px;
1622     display: flex;
1623     flex-direction: column;
1625     .searchresultitemscontainer-wrapper {
1626         min-height: 495px;
1627     }
1629     .carousel-item.active {
1630         display: flex;
1631     }
1632     .chooser-container {
1633         display: flex;
1634         flex-direction: column;
1635         flex: 1 1 auto;
1636     }
1638     .loading-icon {
1639         opacity: 1;
1640         .icon {
1641             display: block;
1642             font-size: 3em;
1643             height: 1em;
1644             width: 1em;
1645         }
1646     }
1647     .carousel-item .loading-icon .icon {
1648         margin: 1em auto;
1649     }
1650     .searchbar {
1651         width: 100%;
1652     }
1655 .modchooser .modal-footer {
1656     height: 70px;
1657     background: $modal-content-bg;
1658     .moodlenet-logo {
1659         .icon {
1660             height: 2.5rem;
1661             width: 6rem;
1662             margin-bottom: .6rem;
1663         }
1664     }
1667 .modchoosercontainer.noscroll {
1668     overflow-y: hidden;
1671 .modchoosercontainer .optionscontainer,
1672 .modchoosercontainer .searchresultitemscontainer {
1673     overflow-x: hidden;
1674     .option {
1675         // 2 items per line.
1676         flex-basis: calc(50% - 0.5rem);
1677         .optionactions {
1678             .optionaction {
1679                 cursor: pointer;
1680                 color: $gray-600;
1681                 i {
1682                     margin: 0;
1683                 }
1684             }
1685         }
1686         .optioninfo {
1687             a {
1688                 color: $gray-700;
1689                 &:hover {
1690                     text-decoration: none;
1691                 }
1692             }
1693         }
1694     }
1697 .modchooser .modal-body .optionsummary {
1698     background-color: $white;
1699     overflow-x: hidden;
1700     overflow-y: auto;
1701     height: 640px;
1703     .content {
1704         overflow-y: auto;
1705         .heading {
1706             .icon {
1707                 height: 32px;
1708                 width: 32px;
1709                 font-size: 32px;
1710                 padding: 0;
1711             }
1712         }
1713     }
1715     .actions {
1716         border-top: 1px solid $gray-300;
1717         background: $white;
1718     }
1721 @include media-breakpoint-down(xs) {
1722     .path-course-view .modal-dialog.modal-lg,
1723     .path-course-view .modal-content,
1724     .modchooser .modal-body,
1725     .modchooser .modal-body .carousel,
1726     .modchooser .modal-body .carousel-inner,
1727     .modchooser .modal-body .carousel-item,
1728     .modchooser .modal-body .optionsummary,
1729     .modchoosercontainer,
1730     .optionscontainer,
1731     .searchresultitemscontainer {
1732         min-height: auto;
1733         height: 100%;
1734         overflow-y: auto;
1735     }
1736     .path-course-view .modal-dialog.modal-lg {
1737         margin: 0;
1738     }
1739     .modchooser .modal-body .searchresultitemscontainer-wrapper {
1740         min-height: auto;
1741     }
1744 @include media-breakpoint-up(sm) {
1745     .modchoosercontainer .optionscontainer .option,
1746     .modchoosercontainer .searchresultitemscontainer .option {
1747         // Three items per line.
1748         flex-basis: calc(33.33% - 0.5rem);
1749     }
1752 @include media-breakpoint-up(lg) {
1753     .modchoosercontainer .optionscontainer .option,
1754     .modchoosercontainer .searchresultitemscontainer .option {
1755         // Six items per line.
1756         flex-basis: calc(16.66% - 0.5rem);
1757     }
1760 /* Form element: listing */
1761 .formlistingradio {
1762     padding-bottom: 25px;
1763     padding-right: 10px;
1766 .formlistinginputradio {
1767     float: left;
1770 .formlistingmain {
1771     min-height: 225px;
1774 .formlisting {
1775     position: relative;
1776     margin: 15px 0;
1777     padding: 1px 19px 14px;
1778     background-color: white;
1779     border: 1px solid #ddd;
1781     @include border-radius(4px);
1784 .formlistingmore {
1785     position: absolute;
1786     cursor: pointer;
1787     bottom: -1px;
1788     right: -1px;
1789     padding: 3px 7px;
1790     font-size: 12px;
1791     font-weight: bold;
1792     background-color: whitesmoke;
1793     border: 1px solid #ddd;
1794     color: #9da0a4;
1796     @include border-radius(4px 0 4px 0);
1799 .formlistingall {
1800     margin: 15px 0;
1801     padding: 0;
1803     @include border-radius(4px);
1806 .formlistingrow {
1807     cursor: pointer;
1808     border-bottom: 1px solid;
1809     border-color: #e1e1e8;
1810     border-left: 1px solid #e1e1e8;
1811     border-right: 1px solid #e1e1e8;
1812     background-color: #f7f7f9;
1814     @include border-radius(0 0 4px 4px);
1815     padding: 6px;
1816     top: 50%;
1817     left: 50%;
1818     min-height: 34px;
1819     float: left;
1820     width: 150px;
1823 body.jsenabled .formlistingradio {
1824     display: none;
1827 body.jsenabled .formlisting {
1828     display: block;
1831 a.criteria-action {
1832     padding: 0 3px;
1833     float: right;
1836 div.criteria-description {
1837     padding: 10px 15px;
1838     margin: 5px 0;
1839     background: none repeat scroll 0 0 #f9f9f9;
1840     border: 1px solid #eee;
1843 ul.badges {
1844     margin: 0;
1845     list-style: none;
1848 .badges li {
1849     position: relative;
1850     display: inline-block;
1851     padding-top: 1em;
1852     text-align: center;
1853     vertical-align: top;
1854     width: 150px;
1857 .badges li .badge-name {
1858     display: block;
1859     padding: 5px;
1862 .badges li > img {
1863     position: absolute;
1866 .badges li .badge-image {
1867     width: 100px;
1868     height: 100px;
1869     left: 10px;
1870     top: 0;
1871     z-index: 1;
1874 .badges li .badge-actions {
1875     position: relative;
1878 .badges li .expireimage {
1879     width: 100px;
1880     height: 100px;
1881     left: 25px;
1882     top: 0;
1883     position: absolute;
1884     z-index: 10;
1885     opacity: 0.85;
1888 #badge-image {
1889     background-color: transparent;
1890     padding: 0;
1891     position: relative;
1892     min-width: 100px;
1893     width: 20%;
1894     display: inline-block;
1895     vertical-align: top;
1896     margin-top: 17px;
1897     margin-bottom: 20px;
1899     .expireimage {
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 .text-decoration-none {
2470     text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
2473 .colour-inherit {
2474     color: inherit !important; /* stylelint-disable-line declaration-no-important */
2477 .position-right {
2478     right: 0 !important; /* stylelint-disable-line declaration-no-important */
2481 .overflow-hidden {
2482     overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
2485 .text-break {
2486     overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
2489 .word-break {
2490     word-break: break-word !important; /* stylelint-disable-line declaration-no-important */
2493 .z-index-0 {
2494     z-index: 0 !important; /* stylelint-disable-line declaration-no-important */
2497 .z-index-1 {
2498     z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
2501 // These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
2502 .float-left {
2503     float: left !important; /* stylelint-disable-line declaration-no-important */
2506 .float-right {
2507     float: right !important; /* stylelint-disable-line declaration-no-important */
2510 .img-responsive {
2511     @include img-fluid();
2514 input[disabled] {
2515     cursor: not-allowed;
2518 .custom-select {
2519     width: auto;
2522 .fade.in {
2523     opacity: 1;
2526 .clamp-2 {
2527     display: -webkit-box;
2528     -webkit-box-orient: vertical;
2529     -webkit-line-clamp: 2;
2530     overflow: hidden;
2533 .word-break-all {
2534     word-break: break-all;
2537 .matchtext {
2538     background-color: lighten($primary, 40%);
2539     color: $body-color;
2540     height: 1.5rem;
2543 .border-radius {
2544     @if $enable-rounded {
2545         @include border-radius($card-border-radius);
2546     }
2549 // Emoji picker.
2550 $picker-width: 350px !default;
2551 $picker-width-xs: 320px !default;
2552 $picker-height: 400px !default;
2553 $picker-row-height: 40px !default;
2554 $picker-emoji-button-size: 40px !default;
2555 $picker-emoji-button-font-size: 24px !default;
2556 $picker-emoji-category-count: 9 !default;
2557 $picker-emojis-per-row: 7 !default;
2559 .emoji-picker {
2560     width: $picker-width;
2561     height: $picker-height;
2563     .category-button {
2564         padding: .375rem 0;
2565         height: 100%;
2566         width: $picker-width / $picker-emoji-category-count;
2567         border-top: none;
2568         border-left: none;
2569         border-right: none;
2570         border-bottom: 2px solid transparent;
2572         &.selected {
2573             border-bottom: 2px solid map-get($theme-colors, 'primary');
2574         }
2575     }
2577     .emojis-container,
2578     .search-results-container {
2579         min-width: $picker-emojis-per-row * $picker-emoji-button-size;
2580     }
2582     .picker-row {
2583         height: $picker-row-height;
2585         .category-name {
2586             line-height: $picker-row-height;
2587         }
2589         .emoji-button {
2590             height: $picker-emoji-button-size;
2591             width: $picker-emoji-button-size;
2592             line-height: $picker-emoji-button-size;
2593             font-size: $picker-emoji-button-font-size;
2594             overflow: hidden;
2596             @include hover-focus {
2597                 color: inherit;
2598                 text-decoration: none;
2599             }
2600         }
2601     }
2603     .emoji-preview {
2604         height: $picker-row-height;
2605         font-size: $picker-row-height;
2606         line-height: $picker-row-height;
2607     }
2609     .emoji-short-name {
2610         line-height: $picker-row-height / 2;
2611     }
2613     @include media-breakpoint-down(xs) {
2614         width: $picker-width-xs;
2615     }
2618 .emoji-auto-complete {
2619     height: $picker-row-height;
2621     .btn.btn-link.btn-icon.emoji-button {
2622         height: $picker-emoji-button-size;
2623         width: $picker-emoji-button-size;
2624         line-height: $picker-emoji-button-size;
2625         font-size: $picker-emoji-button-font-size;
2627         &.active {
2628             background-color: $gray-200;
2629         }
2630     }
2633 .toast-wrapper {
2634     max-width: $toast-max-width;
2635     max-height: 0;
2636     // Place these above any modals and other elements.
2637     z-index: 1051;
2639     > :first-child {
2640         margin-top: $spacer;
2641     }
2644 @each $color, $value in $theme-colors {
2645     .alert-#{$color} a {
2646         color: darken(theme-color-level($color, $alert-color-level), 10%);
2647     }
2649 .alert a {
2650     font-weight: $font-weight-bold;
2653 @include media-breakpoint-down(sm) {
2654     #page-navbar {
2655         width: 100%;
2656     }
2658     .breadcrumb:not(:empty) {
2659         width: 100%;
2660         border: ($border-width * 2) solid $gray-200;
2661         padding: $spacer / 4;
2662         margin-bottom: $spacer / 2;
2663         .breadcrumb-item {
2664             padding-top: $spacer / 3;
2665             padding-bottom: $spacer / 3;
2666             display: inline-block;
2667         }
2668     }
2670     .mform {
2671         width: 100%;
2672         padding-right: 15px;
2673         padding-left: 15px;
2674     }
2675     .pagination {
2676         flex-wrap: wrap;
2677         justify-content: center;
2678     }
2679     .custom-select {
2680         max-width: 100%;
2681     }
2682     .card .card-body {
2683         padding: $card-spacer-x / 2;
2684     }
2685     #page-header {
2686         .card {
2687             border: 0;
2688             .card-body {
2689                 padding: 0;
2690             }
2691         }
2692     }
2693     .nav-tabs,
2694     .nav-pills {
2695         margin: 0;
2696         border: 0;
2697         padding: $spacer / 8;
2698         background-color: $gray-200;
2699         .nav-item {
2700             flex: 1 1 auto;
2701             text-align: center;
2702         }
2703         .nav-link {
2704             background: $white;
2705             border: 0;
2706             margin: $spacer / 8;
2707             &.active {
2708                 @include button-outline-variant($gray-600);
2709                 border-color: $gray-600;
2710             }
2711         }
2712     }
2715 @media (max-width: map-get($grid-breakpoints, "sm")) and (max-height: 320px) {
2716     div#page {
2717         margin-top: 0;
2718     }
2719     .navbar.fixed-top {
2720         position: relative;
2721         z-index: inherit;
2722     }
2725 .link-underline {
2726     text-decoration: underline;
2727     &:focus {
2728         text-decoration: none;
2729     }
2732 .alert.cta {
2733     .icon {
2734         padding: 0.3rem;
2735         &.fa {
2736             border-radius: 50%;
2737             border-style: solid;
2738             border-width: 0.125rem;
2739         }
2740     }
2742 .core_payment_gateways_modal .custom-control-label::before,
2743 .core_payment_gateways_modal .custom-control-label::after {
2744     top: 45%;