MDL-68076 core: Introduced \core\notification::cta()
[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 #region-main {
9     overflow-x: auto;
10     overflow-y: visible;
11     background-color: $body-bg;
12 }
14 @include media-breakpoint-up(sm) {
15     #region-main {
16         border: $card-border-width solid $card-border-color;
17         @if $enable-rounded {
18             @include border-radius($card-border-radius);
19         }
20         padding: $card-spacer-x;
21     }
22 }
24 @include media-breakpoint-up(sm) {
25     .context-header-settings-menu,
26     .region-main-settings-menu {
27         float: right;
28         width: auto;
29         max-width: 4em;
30         height: 2em;
31         display: block;
32         margin-top: 4px;
33     }
34 }
36 @include media-breakpoint-down(sm) {
37     .context-header-settings-menu,
38     .region-main-settings-menu {
39         display: flex;
40         justify-content: flex-end;
41     }
42 }
44 $gototop-bottom-position: 50px !default;
46 #goto-top-link {
47     visibility: hidden;
48     opacity: 0;
49     transition: opacity .7s ease 0s, visibility .1s ease .8s;
50     display: block;
51     position: fixed; /* IE compatibility hack */
52     @supports (position: sticky) {
53         position: sticky;
54     }
55     @supports (-ms-ime-align:auto) {
56         position: fixed; /* Edge compatibility hack */
57     }
58     bottom: $gototop-bottom-position;
59     right: 0;
60     a {
61         position: absolute;
62         right: 0;
63         transform: translateY(-100%);
64     }
65 }
67 @include media-breakpoint-down(sm) {
68     #goto-top-link {
69         bottom: 0;
70     }
71 }
73 body.scrolled #goto-top-link {
74     opacity: 1;
75     visibility: visible;
76     transition: visibility 0s ease 0s, opacity .7s ease .1s;
77 }
79 .context-header-settings-menu .dropdown-toggle > .icon,
80 #region-main-settings-menu .dropdown-toggle > .icon {
81     height: 24px;
82     font-size: 24px;
83     width: auto;
84 }
85 /** Prevent user notifications overlapping with region main settings menu */
86 #user-notifications {
87     display: block;
88     overflow: hidden;
89 }
91 /** Page layout CSS starts **/
92 .layout-option-noheader #page-header,
93 .layout-option-nonavbar #page-navbar,
94 .layout-option-nofooter #page-footer,
95 .layout-option-nocourseheader .course-content-header,
96 .layout-option-nocoursefooter .course-content-footer {
97     display: none;
98 }
100 /** Page layout CSS ends **/
102 .mdl-left {
103     text-align: left;
106 .mdl-right {
107     text-align: right;
110 /*rtl:ignore*/
111 .text-ltr {
112     direction: ltr !important; /* stylelint-disable-line declaration-no-important */
115 #add,
116 #remove,
117 .centerpara,
118 .mdl-align {
119     text-align: center;
122 a.dimmed,
123 a.dimmed:link,
124 a.dimmed:visited,
125 a.dimmed_text,
126 a.dimmed_text:link,
127 a.dimmed_text:visited,
128 .dimmed_text,
129 .dimmed_text a,
130 .dimmed_text a:link,
131 .dimmed_text a:visited,
132 .usersuspended,
133 .usersuspended a,
134 .usersuspended a:link,
135 .usersuspended a:visited,
136 .dimmed_category,
137 .dimmed_category a {
138     color: $text-muted;
141 // Accessible focus styling for links, add .aalink to links with custom css classes to get
142 // accessible focus styles.
143 .aalink,
144 #page-footer a:not([class]),
145 .arrow_link,
146 a:not([class]),
147 .activityinstance > a {
148     &.focus,
149     &:focus {
150         outline: $btn-focus-width solid transparent;
151         color: $gray-900;
152         background-color: lighten($primary, 50%);
153         box-shadow: 0 -#{$btn-focus-width} lighten($primary, 50%), 0 $btn-focus-width $gray-800;
154     }
155     &:focus:hover {
156         text-decoration: none;
157     }
160 // Accessible focus styling for buttons like elements that do not use the .btn class. Add
161 // .aabtn to you element if you need the same focus styles.
162 .aabtn,
163 .btn-link,
164 .nav-link,
165 .atto_link_button,
166 [role="button"],
167 .list-group-item-action,
168 input[type="checkbox"],
169 input[type="radio"],
170 input[type="file"],
171 input[type="image"],
172 .sr-only-focusable,
173 a.dropdown-item,
174 a.dropdown-toggle,
175 .modal-dialog[tabindex="0"],
176 .moodle-dialogue-base .closebutton,
177 button.close {
178     &.focus,
179     &:focus {
180         outline: 0;
181         box-shadow: $input-btn-focus-box-shadow;
182     }
183     &:focus:hover {
184         text-decoration: none;
185     }
188 .usermenu,
189 div.dropdown-item {
190     a,
191     a[role="button"] {
192         outline: 0;
193         box-shadow: none;
194     }
195     &:focus-within {
196         outline: 0;
197         box-shadow: $input-btn-focus-box-shadow;
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 .inline,
216 .inline-list li {
217     display: inline;
220 .notifytiny {
221     font-size: $font-size-xs;
224 .notifytiny li,
225 .notifytiny td {
226     font-size: 100%;
229 .red,
230 .notifyproblem {
231     color: map-get($theme-colors, 'warning');
234 .green,
235 .notifysuccess {
236     color: map-get($theme-colors, 'success');
239 .highlight {
240     color: map-get($theme-colors, 'info');
243 .fitem.advanced .text-info {
244     font-weight: bold;
247 .reportlink {
248     text-align: right;
251 a.autolink.glossary:hover {
252     cursor: help;
254 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
255 .collapsibleregioncaption {
256     white-space: nowrap;
257     min-height: $line-height-base * $font-size-base;
260 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
261     cursor: pointer;
264 .pagelayout-mydashboard #region-main {
265     border: 0;
266     padding: 0;
267     background-color: transparent;
268     margin-top: -1px;
271 @include media-breakpoint-down(sm) {
272     .pagelayout-mydashboard,
273     .pagelayout-login {
274         #region-main-box {
275             padding-left: 0;
276             padding-right: 0;
277         }
278     }
281 .collapsibleregioncaption img {
282     vertical-align: middle;
285 .jsenabled .hiddenifjs {
286     display: none;
289 .visibleifjs {
290     display: none;
293 .jsenabled .visibleifjs {
294     display: inline;
297 .jsenabled .collapsibleregion {
298     overflow: hidden;
299     box-sizing: content-box;
302 .jsenabled .collapsed .collapsibleregioninner {
303     visibility: hidden;
306 .collapsible-actions {
307     display: none;
308     text-align: right;
311 .jsenabled .collapsible-actions {
312     display: block;
315 .collapsible-actions .collapseexpand {
316     padding-left: 20px;
317     background: url([[pix:t/collapsed]]) 2px center no-repeat;
319 /*rtl:raw:
320 .collapsible-actions .collapseexpand {
321     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
323 */
324 .collapsible-actions .collapse-all {
325     background-image: url([[pix:t/expanded]]);
328 .yui-overlay .yui-widget-bd {
329     background-color: #ffee69;
330     border: 1px solid #a6982b;
331     border-top-color: #d4c237;
332     color: #000;
333     left: 0;
334     padding: 2px 5px;
335     position: relative;
336     top: 0;
337     z-index: 1;
340 .clearer {
341     background: transparent;
342     border-width: 0;
343     clear: both;
344     display: block;
345     height: 1px;
346     margin: 0;
347     padding: 0;
350 .bold,
351 .warning,
352 .errorbox .title,
353 .pagingbar .title,
354 .pagingbar .thispage {
355     font-weight: bold;
358 img.userpicture {
359     margin-right: 0.5rem;
362 img.resize {
363     height: 1em;
364     width: 1em;
367 .action-menu .dropdown-toggle {
368     text-decoration: none;
371 .action-menu {
372     white-space: nowrap;
375 .block img.resize {
376     height: 0.9em;
377     width: 0.8em;
379 /* Icon styles */
380 img.activityicon {
381     height: 24px;
382     width: 24px;
383     vertical-align: middle;
386 .headermain {
387     font-weight: bold;
390 #maincontent {
391     display: block;
392     height: 1px;
393     overflow: hidden;
396 img.uihint {
397     cursor: help;
400 #addmembersform table {
401     margin-left: auto;
402     margin-right: auto;
405 table.flexible .emptyrow {
406     display: none;
409 form.popupform,
410 form.popupform div {
411     display: inline;
414 .arrow_button input {
415     overflow: hidden;
417 .no-overflow {
418     overflow: auto;
421 // Minimum height required for a menu in a table inside a scrollable div.
422 // Position required for table sizing inside a flex container.
423 .no-overflow > .generaltable {
424     position: relative;
425     margin-bottom: 0;
426     min-height: 10em;
428 // Accessibility features
430 // Accessibility: text 'seen' by screen readers but not visual users.
431 .accesshide {
432     @include sr-only();
435 span.hide,
436 div.hide,
437 .hidden {
438     display: none;
440 // Accessibility: Skip block link, for keyboard-only users.
441 a.skip-block,
442 a.skip {
443     position: absolute;
444     top: -1000em;
445     font-size: 0.85em;
446     text-decoration: none;
449 a.skip-block:focus,
450 a.skip-block:active,
451 a.skip:focus,
452 a.skip:active {
453     position: static;
454     display: block;
457 .skip-block-to {
458     display: block;
459     height: 1px;
460     overflow: hidden;
462 // Blogs
463 .addbloglink {
464     text-align: center;
467 .blog_entry .audience {
468     text-align: right;
469     padding-right: 4px;
472 .blog_entry .tags {
473     margin-top: 15px;
476 .blog_entry .content {
477     margin-left: 43px;
479 // Group
481 #doc-contents h1 {
482     margin: 1em 0 0 0;
485 #doc-contents ul {
486     margin: 0;
487     padding: 0;
488     width: 90%;
491 #doc-contents ul li {
492     list-style-type: none;
495 .groupmanagementtable td {
496     vertical-align: top;
499 .groupmanagementtable #existingcell,
500 .groupmanagementtable #potentialcell {
501     width: 42%;
504 .groupmanagementtable #buttonscell {
505     width: 16%;
508 .groupmanagementtable #buttonscell p.arrow_button input {
509     width: auto;
510     min-width: 80%;
511     margin: 0 auto;
512     display: block;
515 .groupmanagementtable #removeselect_wrapper,
516 .groupmanagementtable #addselect_wrapper {
517     width: 100%;
520 .groupmanagementtable #removeselect_wrapper label,
521 .groupmanagementtable #addselect_wrapper label {
522     font-weight: normal;
525 #group-usersummary {
526     width: 14em;
529 .groupselector {
530     margin-top: 3px;
531     margin-bottom: 3px;
532     display: inline-block;
535 .groupselector label {
536     display: inline-block;
539 // Login
540 .login-page {
541     [name="username"] {
542         margin-bottom: -1px;
543         border-bottom-right-radius: 0;
544         border-bottom-left-radius: 0;
545     }
547     [type="password"] {
548         margin-bottom: 10px;
549         border-top-left-radius: 0;
550         border-top-right-radius: 0;
551     }
554 // Notes
555 .notepost {
556     margin-bottom: 1em;
559 .notepost .userpicture {
560     float: left;
561     margin-right: 5px;
564 .notepost .content,
565 .notepost .footer {
566     clear: both;
569 .notesgroup {
570     margin-left: 20px;
573 // My Moodle
574 .path-my .coursebox {
575     margin: $spacer-y 0;
576     padding: 0;
578     .overview {
579         margin: 15px 30px 10px 30px;
580     }
583 .path-my .coursebox .info {
584     float: none;
585     margin: 0;
588 // Modules
589 .mod_introbox {
590     padding: 10px;
593 table.mod_index {
594     width: 100%;
597 // Comments
598 .comment-ctrl {
599     font-size: 12px;
600     display: none;
601     margin: 0;
602     padding: 0;
605 .comment-ctrl h5 {
606     margin: 0;
607     padding: 5px;
610 .comment-area {
611     max-width: 400px;
612     padding: 5px;
615 .comment-area textarea {
616     width: 100%;
617     overflow: auto;
619     &.fullwidth {
620         -webkit-box-sizing: border-box;
621         -moz-box-sizing: border-box;
622         box-sizing: border-box;
623     }
626 .comment-area .fd {
627     text-align: right;
630 .comment-meta span {
631     color: gray;
634 .comment-link img {
635     vertical-align: text-bottom;
638 .comment-list {
639     font-size: 11px;
640     overflow: auto;
641     list-style: none;
642     padding: 0;
643     margin: 0;
646 .comment-list li {
647     margin: 2px;
648     list-style: none;
649     margin-bottom: 5px;
650     clear: both;
651     padding: .3em;
652     position: relative;
655 .comment-list li.first {
656     display: none;
659 .comment-paging {
660     text-align: center;
663 .comment-paging .pageno {
664     padding: 2px;
667 .comment-paging .curpage {
668     border: 1px solid #ccc;
671 .comment-message .picture {
672     width: 20px;
673     float: left;
676 .comment-message .text {
677     margin: 0;
678     padding: 0;
681 .comment-message .text p {
682     padding: 0;
683     margin: 0 18px 0 0;
686 .comment-delete {
687     position: absolute;
688     top: 0;
689     right: 0;
690     margin: .3em;
693 .comment-report-selectall {
694     display: none;
697 .comment-link {
698     display: none;
701 .jsenabled .comment-link {
702     display: block;
705 .jsenabled .showcommentsnonjs {
706     display: none;
709 .jsenabled .comment-report-selectall {
710     display: inline;
712 /**
713 * Completion progress report
714 */
715 .completion-expired {
716     color: map-get($theme-colors, 'warning');
719 .completion-expected {
720     font-size: $font-size-xs;
723 .completion-sortchoice,
724 .completion-identifyfield {
725     font-size: $font-size-xs;
726     vertical-align: bottom;
729 .completion-progresscell {
730     text-align: right;
733 .completion-expired .completion-expected {
734     font-weight: bold;
736 /**
737 * Tags
738 */
739 img.user-image {
740     height: 100px;
741     width: 100px;
744 #tag-search-box {
745     text-align: center;
746     margin: 10px auto;
749 .path-tag .tag-index-items .tagarea {
750     border: 1px solid #e3e3e3;
751     border-radius: 4px;
752     padding: 10px;
753     margin-top: 10px;
756 .path-tag .tag-index-items .tagarea h3 {
757     display: block;
758     padding: 3px 0 10px 0;
759     margin: 0;
760     font-size: 1.1em;
761     font-weight: bold;
762     line-height: 20px;
763     color: #999;
764     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
765     text-transform: uppercase;
766     word-wrap: break-word;
767     border-bottom: solid 1px #e3e3e3;
768     margin-bottom: 10px;
771 .path-tag .tagarea .controls,
772 .path-tag .tagarea .taggeditems {
773     @include clearfix();
776 .path-tag .tagarea .controls,
777 .path-tag .tag-backtoallitems {
778     text-align: center;
781 .path-tag .tagarea .controls .gotopage.nextpage {
782     float: right;
785 .path-tag .tagarea .controls .gotopage.prevpage {
786     float: left;
789 .path-tag .tagarea .controls .exclusivemode {
790     display: inline-block;
793 .path-tag .tagarea .controls.controls-bottom {
794     margin-top: 5px;
797 .path-tag .tagarea .controls .gotopage.nextpage::after {
798     padding-right: 5px;
799     padding-left: 5px;
800     content: "»";
803 .path-tag .tagarea .controls .gotopage.prevpage::before {
804     padding-right: 5px;
805     padding-left: 5px;
806     content: "«";
809 span.flagged-tag,
810 tr.flagged-tag,
811 span.flagged-tag a,
812 tr.flagged-tag a {
813     color: map-get($theme-colors, 'warning');
816 .tag-management-table td,
817 .tag-management-table th {
818     vertical-align: middle;
819     padding: 4px;
822 .tag-management-table .inplaceeditable.inplaceeditingon input {
823     width: 150px;
826 .path-admin-tag .addstandardtags {
827     float: right;
829     img {
830         margin: 0 5px;
831     }
834 .path-tag .tag-relatedtags {
835     padding-top: 10px;
838 .path-tag .tag-management-box {
839     text-align: right;
842 .path-tag .tag-index-toc {
843     padding: 10px;
844     text-align: center;
847 .path-tag .tag-index-toc li,
848 .path-tag .tag-management-box li {
849     margin-left: 5px;
850     margin-right: 5px;
853 .path-tag .tag-management-box li a.edittag {
854     background-image: url([[pix:moodle|i/settings]]);
857 .path-tag .tag-management-box li a.flagasinappropriate {
858     background-image: url([[pix:moodle|i/flagged]]);
861 .path-tag .tag-management-box li a.removefrommyinterests {
862     background-image: url([[pix:moodle|t/delete]]);
865 .path-tag .tag-management-box li a.addtomyinterests {
866     background-image: url([[pix:moodle|t/add]]);
869 .path-tag .tag-management-box li a {
870     background-repeat: no-repeat;
871     background-position: left;
872     padding-left: 17px;
875 .tag_feed.media-list .media .itemimage {
876     float: left;
879 .tag_feed.media-list .media .itemimage img {
880     height: 35px;
881     width: 35px;
884 .tag_feed.media-list .media .media-body {
885     padding-right: 10px;
886     padding-left: 10px;
889 .tag_feed .media .muted a {
890     color: $text-muted;
893 .tag_cloud {
894     text-align: center;
897 .tag_cloud .inline-list li {
898     padding: 0 0.2em;
901 .tag_cloud .tag_overflow {
902     margin-top: 1em;
903     font-style: italic;
906 .tag_cloud .s20 {
907     font-size: 2.7em;
910 .tag_cloud .s19 {
911     font-size: 2.6em;
914 .tag_cloud .s18 {
915     font-size: 2.5em;
918 .tag_cloud .s17 {
919     font-size: 2.4em;
922 .tag_cloud .s16 {
923     font-size: 2.3em;
926 .tag_cloud .s15 {
927     font-size: 2.2em;
930 .tag_cloud .s14 {
931     font-size: 2.1em;
934 .tag_cloud .s13 {
935     font-size: 2em;
938 .tag_cloud .s12 {
939     font-size: 1.9em;
942 .tag_cloud .s11 {
943     font-size: 1.8em;
946 .tag_cloud .s10 {
947     font-size: 1.7em;
950 .tag_cloud .s9 {
951     font-size: 1.6em;
954 .tag_cloud .s8 {
955     font-size: 1.5em;
958 .tag_cloud .s7 {
959     font-size: 1.4em;
962 .tag_cloud .s6 {
963     font-size: 1.3em;
966 .tag_cloud .s5 {
967     font-size: 1.2em;
970 .tag_cloud .s4 {
971     font-size: 1.1em;
974 .tag_cloud .s3 {
975     font-size: 1em;
978 .tag_cloud .s2 {
979     font-size: 0.9em;
982 .tag_cloud .s1 {
983     font-size: 0.8em;
986 .tag_cloud .s0 {
987     font-size: 0.7em;
990 .tag_list ul {
991     display: inline;
994 .tag_list.hideoverlimit .overlimit {
995     display: none;
998 .tag_list .tagmorelink {
999     display: none;
1002 .tag_list.hideoverlimit .tagmorelink {
1003     display: inline;
1006 .tag_list.hideoverlimit .taglesslink {
1007     display: none;
1010 /**
1011 * Web Service
1012 */
1013 #webservice-doc-generator td {
1014     text-align: left;
1015     border: 0 solid black;
1018 /**
1019 * Enrol
1020 */
1021 .userenrolment {
1022     width: 100%;
1023     border-collapse: collapse;
1026 .userenrolment tr {
1027     vertical-align: top;
1030 .userenrolment td {
1031     padding: 0;
1032     height: 41px;
1035 .userenrolment .subfield {
1036     margin-right: 5px;
1039 .userenrolment .col_userdetails .subfield {
1040     margin-left: 40px;
1043 .userenrolment .col_userdetails .subfield_picture {
1044     float: left;
1045     margin-left: 0;
1048 .userenrolment .col_lastseen {
1049     width: 150px;
1052 .userenrolment .col_role {
1053     width: 262px;
1056 .userenrolment .col_role .roles,
1057 .userenrolment .col_group .groups {
1058     margin-right: 30px;
1061 .userenrolment .col_role .role {
1062     float: left;
1063     padding: 0 3px 3px;
1064     margin: 0 3px 3px;
1065     white-space: nowrap;
1068 .userenrolment .col_group .group {
1069     float: left;
1070     padding: 3px;
1071     margin: 3px;
1072     white-space: nowrap;
1075 .userenrolment .col_role .role a,
1076 .userenrolment .col_group .group a {
1077     margin-left: 3px;
1078     cursor: pointer;
1081 .userenrolment .col_role .addrole,
1082 .userenrolment .col_group .addgroup {
1083     float: right;
1084     padding: 3px;
1085     margin: 3px;
1087     > a:hover {
1088         border-bottom: 1px solid #666;
1089     }
1092 .userenrolment .col_role .addrole img,
1093 .userenrolment .col_group .addgroup img {
1094     vertical-align: baseline;
1097 .userenrolment .hasAllRoles .col_role .addrole {
1098     display: none;
1101 .userenrolment .col_enrol .enrolment {
1102     float: left;
1103     padding: 0 3px 3px;
1104     margin: 0 3px 3px;
1107 .userenrolment .col_enrol .enrolment a {
1108     float: right;
1109     margin-left: 3px;
1112 .corelightbox {
1113     background-color: #ccc;
1114     position: absolute;
1115     top: 0;
1116     left: 0;
1117     width: 100%;
1118     height: 100%;
1119     text-align: center;
1122 .corelightbox img {
1123     position: fixed;
1124     top: 50%;
1125     left: 50%;
1128 .mod-indent-outer {
1129     display: table;
1132 .mod-indent {
1133     display: table-cell;
1136 .label .mod-indent {
1137     float: left;
1138     padding-top: 20px;
1141 @include media-breakpoint-up(sm) {
1142     $mod-indent-size: 30px;
1143     /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1145     @for $i from 1 through 16 {
1146         $width: ($i * $mod-indent-size);
1148         .mod-indent-#{$i} {
1149             width: $width;
1150         }
1151     }
1153     .mod-indent-huge {
1154         width: (16 * $mod-indent-size);
1155     }
1158 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1159 .resourcecontent .mediaplugin_mp3 object {
1160     height: 25px;
1161     width: 600px;
1164 .resourcecontent audio.mediaplugin_html5audio {
1165     width: 600px;
1167 /** Large resource images should avoid hidden overflow **/
1168 .resourceimage {
1169     max-width: 100%;
1171 /* Audio player size in 'inline' mode (can only change width, as above) */
1172 .mediaplugin_mp3 object {
1173     height: 15px;
1174     width: 300px;
1177 audio.mediaplugin_html5audio {
1178     width: 300px;
1180 /* TinyMCE moodle media preview frame should not have padding */
1181 .core_media_preview.pagelayout-embedded #content {
1182     padding: 0;
1185 .core_media_preview.pagelayout-embedded #maincontent {
1186     height: 0;
1189 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1190     padding: 0;
1191     margin: 0;
1192     min-width: 0;
1193     background: none;
1196 .path-rating .ratingtable {
1197     width: 100%;
1198     margin-bottom: 1em;
1201 .path-rating .ratingtable th.rating {
1202     width: 100%;
1205 .path-rating .ratingtable td.rating,
1206 .path-rating .ratingtable td.time {
1207     white-space: nowrap;
1208     text-align: center;
1211 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1212 .moodle-dialogue-base .moodle-dialogue-lightbox {
1213     background-color: $gray;
1216 // Prevent adding backdrops to popups in popups.
1217 .pagelayout-popup {
1218     .moodle-dialogue-base {
1219         .moodle-dialogue-lightbox {
1220             background-color: transparent;
1221         }
1222         .moodle-dialogue {
1223             box-shadow: $popover-box-shadow;
1224         }
1225     }
1228 .moodle-dialogue-base .hidden,
1229 .moodle-dialogue-base .moodle-dialogue-hidden {
1230     display: none;
1233 .no-scrolling {
1234     overflow: hidden;
1237 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1238     left: 0;
1239     top: 0;
1240     right: 0;
1241     bottom: -50px;
1242     position: fixed;
1245 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1246     overflow: auto;
1249 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1250     width: 28px;
1251     height: 16px;
1252     background-size: 100%;
1255 .moodle-dialogue-base .moodle-dialogue-wrap {
1256     background-color: #fff;
1257     border: 1px solid #ccc;
1260 // Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1261 // it for a reason (conflicts with jquery .show()).
1262 .modal.show {
1263     display: block;
1266 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1267     display: flex;
1268     padding: 1rem 1rem;
1269     border-bottom: 1px solid #dee2e6;
1272 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1273     // Undo some YUI damage.
1274     min-height: 3rem;
1275     color: initial;
1276     background: initial;
1277     font-size: 1.5rem;
1278     line-height: 1.5;
1281 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1282     font-size: 1.5rem;
1285 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1286     /*rtl:raw:
1287         left: 0;
1288         right: auto;
1289     */
1290     padding: 0;
1291     position: relative;
1292     margin-left: auto;
1295 .moodle-dialogue-base .closebutton {
1296     padding: $modal-header-padding;
1297     margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
1298     position: relative;
1299     background-color: transparent;
1300     border: 0;
1301     background-image: none;
1302     box-shadow: none;
1303     opacity: 0.7;
1304     &:hover,
1305     &:active {
1306         opacity: 1;
1307     }
1308     &::after {
1309         content: "×";
1310     }
1313 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1314     padding: 0.5rem;
1315     body {
1316         background-color: $body-bg;
1317     }
1320 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1321     overflow: auto;
1322     position: absolute;
1323     top: 0;
1324     bottom: 50px;
1325     left: 0;
1326     right: 0;
1327     margin: 0;
1328     border: 0;
1331 .moodle-dialogue-exception .moodle-exception-param label {
1332     font-weight: bold;
1335 .moodle-dialogue-exception .param-stacktrace label {
1336     background-color: #eee;
1337     border: 1px solid #ccc;
1338     border-bottom-width: 0;
1341 .moodle-dialogue-exception .param-stacktrace pre {
1342     border: 1px solid #ccc;
1343     background-color: #fff;
1346 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1347     color: navy;
1348     font-size: $font-size-sm;
1351 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1352     color: map-get($theme-colors, 'warning');
1353     font-size: $font-size-sm;
1356 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1357     color: #333;
1358     font-size: 90%;
1359     border-bottom: 1px solid #eee;
1362 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1363     display: none;
1366 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1367     // Undo some YUI damage.
1368     background: initial;
1371 .moodle-dialogue-confirm .confirmation-message {
1372     margin: 0.5rem 0;
1375 .moodle-dialogue-confirm .confirmation-dialogue input {
1376     min-width: 80px;
1379 .moodle-dialogue-exception .moodle-exception-message {
1380     margin: 1em;
1383 .moodle-dialogue-exception .moodle-exception-param {
1384     margin-bottom: 0.5em;
1387 .moodle-dialogue-exception .moodle-exception-param label {
1388     width: 150px;
1391 .moodle-dialogue-exception .param-stacktrace label {
1392     display: block;
1393     margin: 0;
1394     padding: 4px 1em;
1397 .moodle-dialogue-exception .param-stacktrace pre {
1398     display: block;
1399     height: 200px;
1400     overflow: auto;
1403 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1404     display: inline-block;
1405     margin: 4px 0;
1408 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1409     display: inline-block;
1410     width: 50px;
1411     margin: 4px 1em;
1414 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1415     padding-left: 25px;
1416     margin-bottom: 4px;
1417     padding-bottom: 4px;
1420 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1421     opacity: 0.75;
1422     width: 100%;
1423     height: 100%;
1424     top: 0;
1425     left: 0;
1426     background-color: white;
1427     text-align: center;
1428     padding: 10% 0;
1430 /* Apply a default max-height on tooltip text */
1431 .moodle-dialogue .tooltiptext {
1432     max-height: 300px;
1435 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1436     z-index: 3001;
1438     .moodle-dialogue-bd {
1439         overflow: auto;
1440     }
1443 /**
1444  * Chooser Dialogues (moodle-core-chooserdialogue)
1445  *
1446  * This CSS belong to the chooser dialogue which should work both with, and
1447  * without javascript enabled
1448  */
1449 /* Hide the dialog and it's title */
1450 .chooserdialoguebody,
1451 .choosertitle {
1452     display: none;
1455 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1456     margin: 0;
1459 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1460     padding: 0;
1461     background: #f2f2f2;
1463     @include border-bottom-radius(10px);
1465 /* Center the submit buttons within the area */
1466 .choosercontainer #chooseform .submitbuttons {
1467     padding: 0.7em 0;
1468     text-align: right;
1470 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1472 @media (max-height: 639px) {
1473     .ios .choosercontainer #chooseform .submitbuttons {
1474         padding: 45px 0;
1475     }
1478 .choosercontainer #chooseform .submitbuttons input {
1479     min-width: 100px;
1480     margin: 0 0.5em;
1482 /* Various settings for the options area */
1483 .choosercontainer #chooseform .options {
1484     position: relative;
1485     border-bottom: 1px solid #bbb;
1487 /* Only set these options if we're showing the js container */
1488 .jschooser .choosercontainer #chooseform .alloptions {
1489     overflow-x: hidden;
1490     overflow-y: auto;
1491     max-width: 240px;
1493     .option {
1494         input[type=radio] {
1495             display: inline-block;
1496         }
1498         .typename {
1499             display: inline-block;
1500             width: 55%;
1501         }
1502     }
1504 /* Settings for option rows and option subtypes */
1505 .choosercontainer #chooseform .moduletypetitle,
1506 .choosercontainer #chooseform .option,
1507 .choosercontainer #chooseform .nonoption {
1508     margin-bottom: 0;
1509     padding: 0 1.6em 0 1.6em;
1512 .choosercontainer #chooseform .moduletypetitle {
1513     text-transform: uppercase;
1514     padding-top: 1.2em;
1515     padding-bottom: 0.4em;
1516     margin-bottom: 0.5rem;
1517     font-size: 100%;
1520 .choosercontainer #chooseform .option .typename,
1521 .choosercontainer #chooseform .nonoption .typename {
1522     padding: 0 0 0 0.5em;
1525 .choosercontainer #chooseform .modicon + .typename {
1526     padding-left: 0;
1529 .choosercontainer #chooseform .option input[type=radio],
1530 .choosercontainer #chooseform .option span.typename {
1531     vertical-align: middle;
1534 .choosercontainer #chooseform .option label {
1535     display: block;
1536     margin: 0;
1537     padding: ($spacer / 2) 0;
1538     border-bottom: 1px solid #fff;
1541 .choosercontainer #chooseform .option .icon {
1542     margin: 0;
1543     padding: 0 $spacer;
1546 .choosercontainer #chooseform .nonoption {
1547     padding-left: 2.7em;
1548     padding-top: 0.3em;
1549     padding-bottom: 0.1em;
1552 .choosercontainer #chooseform .subtype {
1553     margin-bottom: 0;
1554     padding: 0 1.6em 0 3.2em;
1557 .choosercontainer #chooseform .subtype .typename {
1558     margin: 0 0 0 0.2em;
1560 /* The instruction/help area */
1561 .jschooser .choosercontainer #chooseform .instruction,
1562 .jschooser .choosercontainer #chooseform .typesummary {
1563     display: none;
1564     position: absolute;
1565     top: 0;
1566     right: 0;
1567     bottom: 0;
1568     left: 240px;
1569     margin: 0;
1570     padding: 1.6em;
1571     background-color: #fff;
1572     overflow-x: hidden;
1573     overflow-y: auto;
1574     line-height: 2em;
1576 /* Selected option settings */
1577 .jschooser .choosercontainer #chooseform .instruction,
1578 .choosercontainer #chooseform .selected .typesummary {
1579     display: block;
1582 .choosercontainer #chooseform .selected {
1583     background-color: #fff;
1584     margin-top: -1px;
1585     padding-top: 1px;
1589 @include media-breakpoint-down(xs) {
1590     .jsenabled .choosercontainer #chooseform .alloptions {
1591         max-width: 100%;
1592     }
1594     .jsenabled .choosercontainer #chooseform .instruction,
1595     .jsenabled .choosercontainer #chooseform .typesummary {
1596         position: static;
1597     }
1600 /**
1601  * Module chooser dialogue (moodle-core-chooserdialogue)
1602  *
1603  * This CSS belong to the chooser dialogue which should work both with, and
1604  * without javascript enabled
1605  */
1606 .modchooser .modal-body {
1607     padding: 0;
1608     overflow-y: auto;
1609     min-height: 640px;
1610     display: flex;
1611     flex-direction: column;
1613     .searchresultitemscontainer-wrapper {
1614         min-height: 495px;
1615     }
1617     .carousel-item.active {
1618         display: flex;
1619     }
1620     .chooser-container {
1621         display: flex;
1622         flex-direction: column;
1623         flex: 1 1 auto;
1624     }
1626     .loading-icon {
1627         opacity: 1;
1628         .icon {
1629             display: block;
1630             font-size: 3em;
1631             height: 1em;
1632             width: 1em;
1633         }
1634     }
1635     .carousel-item .loading-icon .icon {
1636         margin: 1em auto;
1637     }
1640 .modchoosercontainer.noscroll {
1641     overflow-y: hidden;
1644 .modchooser .searchcontainer .searchbar .input-group-append {
1645     align-items: center;
1647     i {
1648         color: #868e96;
1649         margin: 0;
1650         vertical-align: middle;
1651         font-size: 20px;
1652         height: 20px;
1653         width: 20px;
1654     }
1657 .modchoosercontainer .optionscontainer,
1658 .modchoosercontainer .searchresultitemscontainer {
1659     overflow-x: hidden;
1660     .option {
1661         // 2 items per line.
1662         flex-basis: calc(50% - 0.5rem);
1663         .optionactions {
1664             .optionaction {
1665                 cursor: pointer;
1666                 color: $gray-600;
1667                 i {
1668                     margin: 0;
1669                 }
1670             }
1671         }
1672         .optioninfo {
1673             a {
1674                 color: $gray-700;
1675                 &:hover {
1676                     text-decoration: none;
1677                 }
1678             }
1679         }
1680     }
1683 .modchooser .modal-body .optionsummary {
1684     background-color: $white;
1685     overflow-x: hidden;
1686     overflow-y: auto;
1687     min-height: 640px;
1689     .content {
1690         overflow-y: auto;
1691         .heading {
1692             .icon {
1693                 height: 32px;
1694                 width: 32px;
1695                 font-size: 32px;
1696                 padding: 0;
1697             }
1698         }
1699     }
1701     .actions {
1702         border-top: 1px solid $gray-300;
1703         background: $white;
1704     }
1707 @include media-breakpoint-down(xs) {
1708     .path-course-view .modal-dialog.modal-lg,
1709     .path-course-view .modal-content,
1710     .modchooser .modal-body,
1711     .modchooser .modal-body .carousel,
1712     .modchooser .modal-body .carousel-inner,
1713     .modchooser .modal-body .carousel-item,
1714     .modchooser .modal-body .optionsummary,
1715     .modchoosercontainer,
1716     .optionscontainer,
1717     .searchresultitemscontainer {
1718         min-height: auto;
1719         height: 100%;
1720         overflow-y: auto;
1721     }
1722     .path-course-view .modal-dialog.modal-lg {
1723         margin: 0;
1724     }
1725     .modchooser .modal-body .searchresultitemscontainer-wrapper {
1726         min-height: auto;
1727     }
1730 @include media-breakpoint-up(sm) {
1731     .modchoosercontainer .optionscontainer .option,
1732     .modchoosercontainer .searchresultitemscontainer .option {
1733         // Three items per line.
1734         flex-basis: calc(33.33% - 0.5rem);
1735     }
1738 @include media-breakpoint-up(lg) {
1739     .modchoosercontainer .optionscontainer .option,
1740     .modchoosercontainer .searchresultitemscontainer .option {
1741         // Six items per line.
1742         flex-basis: calc(16.66% - 0.5rem);
1743     }
1746 /* Form element: listing */
1747 .formlistingradio {
1748     padding-bottom: 25px;
1749     padding-right: 10px;
1752 .formlistinginputradio {
1753     float: left;
1756 .formlistingmain {
1757     min-height: 225px;
1760 .formlisting {
1761     position: relative;
1762     margin: 15px 0;
1763     padding: 1px 19px 14px;
1764     background-color: white;
1765     border: 1px solid #ddd;
1767     @include border-radius(4px);
1770 .formlistingmore {
1771     position: absolute;
1772     cursor: pointer;
1773     bottom: -1px;
1774     right: -1px;
1775     padding: 3px 7px;
1776     font-size: 12px;
1777     font-weight: bold;
1778     background-color: whitesmoke;
1779     border: 1px solid #ddd;
1780     color: #9da0a4;
1782     @include border-radius(4px 0 4px 0);
1785 .formlistingall {
1786     margin: 15px 0;
1787     padding: 0;
1789     @include border-radius(4px);
1792 .formlistingrow {
1793     cursor: pointer;
1794     border-bottom: 1px solid;
1795     border-color: #e1e1e8;
1796     border-left: 1px solid #e1e1e8;
1797     border-right: 1px solid #e1e1e8;
1798     background-color: #f7f7f9;
1800     @include border-radius(0 0 4px 4px);
1801     padding: 6px;
1802     top: 50%;
1803     left: 50%;
1804     min-height: 34px;
1805     float: left;
1806     width: 150px;
1809 body.jsenabled .formlistingradio {
1810     display: none;
1813 body.jsenabled .formlisting {
1814     display: block;
1817 a.criteria-action {
1818     padding: 0 3px;
1819     float: right;
1822 div.criteria-description {
1823     padding: 10px 15px;
1824     margin: 5px 0;
1825     background: none repeat scroll 0 0 #f9f9f9;
1826     border: 1px solid #eee;
1829 ul.badges {
1830     margin: 0;
1831     list-style: none;
1834 .badges li {
1835     position: relative;
1836     display: inline-block;
1837     padding-top: 1em;
1838     text-align: center;
1839     vertical-align: top;
1840     width: 150px;
1843 .badges li .badge-name {
1844     display: block;
1845     padding: 5px;
1848 .badges li > img {
1849     position: absolute;
1852 .badges li .badge-image {
1853     width: 100px;
1854     height: 100px;
1855     left: 10px;
1856     top: 0;
1857     z-index: 1;
1860 .badges li .badge-actions {
1861     position: relative;
1864 .badges li .expireimage {
1865     width: 100px;
1866     height: 100px;
1867     left: 25px;
1868     top: 0;
1869     position: absolute;
1870     z-index: 10;
1871     opacity: 0.85;
1874 #badge-image {
1875     background-color: transparent;
1876     padding: 0;
1877     position: relative;
1878     min-width: 100px;
1879     width: 20%;
1880     display: inline-block;
1881     vertical-align: top;
1882     margin-top: 17px;
1883     margin-bottom: 20px;
1885     .expireimage {
1886         width: 100px;
1887         height: 100px;
1888         left: 0;
1889         top: 0;
1890         opacity: 0.85;
1891         position: absolute;
1892         z-index: 10;
1893     }
1895     .singlebutton {
1896         padding-top: 5px;
1897         display: block;
1899         button {
1900             margin-left: 4px;
1901         }
1902     }
1905 #badge-details {
1906     display: inline-block;
1907     width: 79%;
1910 #badge-overview dl,
1911 #badge-details dl {
1912     margin: 0;
1914     dt,
1915     dd {
1916         vertical-align: top;
1917         padding: 3px 0;
1918     }
1920     dt {
1921         clear: both;
1922         display: inline-block;
1923         width: 20%;
1924         min-width: 100px;
1925     }
1927     dd {
1928         display: inline-block;
1929         width: 79%;
1930         margin-left: 1%;
1931     }
1934 .badge-profile {
1935     vertical-align: top;
1938 .connected {
1939     color: map-get($theme-colors, 'success');
1942 .notconnected {
1943     color: map-get($theme-colors, 'danger');
1946 .connecting {
1947     color: map-get($theme-colors, 'warning');
1950 #page-badges-award .recipienttable tr td {
1951     vertical-align: top;
1954 #page-badges-award .recipienttable tr td.actions .actionbutton {
1955     margin: 0.3em 0;
1956     padding: 0.5em 0;
1957     width: 100%;
1960 #page-badges-award .recipienttable tr td.existing,
1961 #page-badges-award .recipienttable tr td.potential {
1962     width: 42%;
1965 #issued-badge-table .activatebadge {
1966     display: inline-block;
1969 .statusbox.active {
1970     background-color: $state-success-bg;
1973 .statusbox.inactive {
1974     background-color: $state-warning-bg;
1977 .statusbox {
1978     text-align: center;
1979     margin-bottom: 5px;
1980     padding: 5px;
1983 .statusbox .activatebadge {
1984     display: inline-block;
1987 .statusbox .activatebadge input[type=submit] {
1988     margin: 3px;
1991 .activatebadge {
1992     margin: 0;
1993     text-align: left;
1994     vertical-align: middle;
1997 img#persona_signin {
1998     cursor: pointer;
2001 .addcourse {
2002     float: right;
2005 .invisiblefieldset {
2006     display: inline;
2007     padding: 0;
2008     border-width: 0;
2011 /** Page header */
2012 #page-header {
2013     .logo {
2014         margin: $spacer 0;
2015         img {
2016             max-height: 75px;
2017         }
2018     }
2021 /** Navbar logo. */
2022 nav.navbar .logo img {
2023     max-height: 35px;
2026 /** Header-bar styles **/
2027 .page-context-header {
2028     // We need to be explicit about the height of the header.
2029     $pageHeaderHeight: 140px;
2031     // Do not remove these rules.
2032     overflow: hidden;
2033     padding: 0.25rem;
2035     .page-header-image,
2036     .page-header-headings {
2037         float: left;
2038         display: block;
2039         position: relative;
2040     }
2042     .page-header-image {
2043         margin-right: 1em;
2044         margin-bottom: 1em;
2045         & > a {
2046             display: inline-block;
2047         }
2048     }
2050     .page-header-headings,
2051     .header-button-group {
2052         position: relative;
2053         line-height: 24px;
2054         vertical-align: middle;
2055     }
2057     .header-button-group {
2058         display: block;
2059         float: left;
2060     }
2063 ul.dragdrop-keyboard-drag li {
2064     list-style-type: none;
2067 a.disabled:hover,
2068 a.disabled {
2069     text-decoration: none;
2070     cursor: default;
2071     font-style: italic;
2072     color: #808080;
2075 body.lockscroll {
2076     height: 100%;
2077     overflow: hidden;
2080 .progressbar_container {
2081     max-width: 500px;
2082     margin: 0 auto;
2085 /* IE10 only fix for calendar titling */
2086 .ie10 .yui3-calendar-header-label {
2087     display: inline-block;
2090 dd:before,
2091 dd:after {
2092     display: block;
2093     content: " ";
2096 dd:after {
2097     clear: both;
2100 // Active tabs with links should have a different
2101 // cursor to indicate they are clickable.
2102 .nav-tabs > .active > a[href],
2103 .nav-tabs > .active > a[href]:hover,
2104 .nav-tabs > .active > a[href]:focus {
2105     cursor: pointer;
2108 .inplaceeditable {
2109     &.inplaceeditingon {
2110         position: relative;
2112         .editinstructions {
2113             margin-top: -30px;
2114             font-weight: normal;
2115             margin-right: 0;
2116             margin-left: 0;
2117             left: 0;
2118             right: auto;
2119             white-space: nowrap;
2120         }
2121         @include media-breakpoint-up(sm) {
2122             input {
2123                 width: 330px;
2124                 vertical-align: text-bottom;
2125                 margin-bottom: 0;
2126             }
2127         }
2129         select {
2130             margin-bottom: 0;
2131         }
2132     }
2134     .quickediticon img {
2135         opacity: 0.2;
2136     }
2138     .quickeditlink {
2139         color: inherit;
2140         text-decoration: inherit;
2141     }
2143     &:hover .quickeditlink .quickediticon img,
2144     .quickeditlink:focus .quickediticon img {
2145         opacity: 1;
2146     }
2148     &.inplaceeditable-toggle .quickediticon {
2149         display: none;
2150     }
2152     &.inplaceeditable-autocomplete {
2153         display: block;
2154     }
2157 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2158     margin-top: -20px;
2161 /** Chart area. */
2162 .chart-area {
2164     .chart-table-data {
2165         display: none;
2166     }
2168     .chart-table {
2169         .chart-output-htmltable caption {
2170             white-space: nowrap;
2171         }
2172         /** When accessible, we display the table only. */
2173         &.accesshide {
2174             .chart-table-expand {
2175                 display: none;
2176             }
2177             .chart-table-data {
2178                 display: block;
2179             }
2180         }
2181     }
2184 // Reset for ul.
2185 ul {
2186     padding-left: 1rem;
2189 /* YUI 2 Tree View */
2190 /*rtl:raw:
2191 .ygtvtn,
2192 .ygtvtm,
2193 .ygtvtmh,
2194 .ygtvtmhh,
2195 .ygtvtp,
2196 .ygtvtph,
2197 .ygtvtphh,
2198 .ygtvln,
2199 .ygtvlm,
2200 .ygtvlmh,
2201 .ygtvlmhh,
2202 .ygtvlp,
2203 .ygtvlph,
2204 .ygtvlphh,
2205 .ygtvdepthcell,
2206 .ygtvok,
2207 .ygtvok:hover,
2208 .ygtvcancel,
2209 .ygtvcancel:hover {
2210     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
2212 */
2214 .hover-tooltip-container {
2215     position: relative;
2217     .hover-tooltip {
2218         opacity: 0;
2219         visibility: hidden;
2220         position: absolute;
2221         /*rtl:ignore*/
2222         left: 50%;
2223         top: calc(-50% - 5px);
2224         transform: translate(-50%, -50%);
2225         background-color: #fff;
2226         border: 1px solid rgba(0, 0, 0, .2);
2227         border-radius: .3rem;
2228         box-sizing: border-box;
2229         padding: 5px;
2230         white-space: nowrap;
2231         transition: opacity 0.15s, visibility 0.15s;
2232         z-index: 1000;
2234         &:before {
2235             content: '';
2236             display: inline-block;
2237             border-left: 8px solid transparent;
2238             border-right: 8px solid transparent;
2239             border-top: 8px solid rgba(0, 0, 0, .2);
2240             position: absolute;
2241             bottom: -8px;
2242             left: calc(50% - 8px);
2243         }
2245         &:after {
2246             content: '';
2247             display: inline-block;
2248             border-left: 7px solid transparent;
2249             border-right: 7px solid transparent;
2250             border-top: 7px solid #fff;
2251             position: absolute;
2252             bottom: -6px;
2253             left: calc(50% - 7px);
2254             z-index: 2;
2255         }
2256     }
2258     &:hover {
2259         .hover-tooltip {
2260             opacity: 1;
2261             visibility: visible;
2262             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2263         }
2264     }
2267 #region-flat-nav {
2268     padding-right: 0;
2269     padding-left: 0;
2270     .nav {
2271         margin-right: $grid-gutter-width / 2;
2272         background-color: $card-bg;
2273     }
2274     @include media-breakpoint-down(sm) {
2275         .nav {
2276             margin-top: $grid-gutter-width;
2277             margin-right: 0;
2278         }
2279     }
2282 // Footer link colour was added to allow the colour of footer links to be changed,
2283 // but really in bootstrap we want the colour of links on .bg-inverse to be changed
2284 // rather than being specific to the footer. This is kept for backwards compatibility.
2285 $footer-link-color: $bg-inverse-link-color !default;
2286 #page-footer a {
2287     color: $footer-link-color;
2288     text-decoration: underline;
2289     .icon {
2290         color: $footer-link-color;
2291     }
2292     &:focus .icon {
2293         color: $body-color;
2294     }
2297 .bg-inverse a {
2298     color: $bg-inverse-link-color;
2299     text-decoration: underline;
2300     .icon {
2301         color: $bg-inverse-link-color;
2302     }
2305 .sitelink {
2306     img {
2307         width: 112px;
2308     }
2311 // Make links in a menu clickable anywhere in the row.
2312 .dropdown-item a {
2313     display: block;
2314     width: 100%;
2315     color: $body-color;
2317 .dropdown-item:active a {
2318     color: $dropdown-link-active-color;
2321 .competency-tree {
2322     ul {
2323         padding-left: 1.5rem;
2324     }
2327 .sr-only-focusable {
2328     &:active,
2329     &:focus {
2330         z-index: $zindex-navbar-fixed + 1;
2331         position: fixed;
2332         background: #fff;
2333         padding: 7px;
2334         left: 0;
2335         top: 0;
2336     }
2339 [data-drag-type="move"] {
2340     cursor: move;
2341     touch-action: none;
2344 .clickable {
2345     cursor: pointer;
2348 .overlay-icon-container {
2349     position: absolute;
2350     top: 0;
2351     left: 0;
2352     width: 100%;
2353     height: 100%;
2354     background-color: rgba(255, 255, 255, 0.6);
2356     .loading-icon {
2357         position: absolute;
2358         top: 50%;
2359         left: 50%;
2360         transform: translate(-50%, -50%);
2362         .icon {
2363             height: 30px;
2364             width: 30px;
2365             font-size: 30px;
2366         }
2367     }
2370 .open.atto_menu > .dropdown-menu {
2371     display: block;
2373 div.editor_atto_toolbar button .icon {
2374     color: $gray-700;
2376 .w-auto {
2377     width: auto;
2380 .bg-pulse-grey {
2381     animation: bg-pulse-grey 2s infinite linear;
2384 @keyframes bg-pulse-grey {
2385     0% {
2386         background-color: $gray-100;
2387     }
2388     50% {
2389         background-color: darken($gray-100, 5%);
2390     }
2391     100% {
2392         background-color: $gray-100;
2393     }
2396 @each $size, $length in $spacers {
2397     .line-height-#{$size} {
2398         line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2399     }
2402 .dir-rtl {
2403     .dir-rtl-hide {
2404         display: none;
2405     }
2408 .dir-ltr {
2409     .dir-ltr-hide {
2410         display: none;
2411     }
2414 .paged-content-page-container {
2415     min-height: 3.125rem;
2418 body.h5p-embed {
2419     #page-content {
2420         display: inherit;
2421     }
2422     #maincontent {
2423         display: none;
2424     }
2425     .h5pmessages {
2426         min-height: 230px; // This should be the same height as default core_h5p iframes.
2427     }
2430 .text-decoration-none {
2431     text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
2434 .colour-inherit {
2435     color: inherit !important; /* stylelint-disable-line declaration-no-important */
2438 .position-right {
2439     right: 0 !important; /* stylelint-disable-line declaration-no-important */
2442 .overflow-hidden {
2443     overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
2446 .text-break {
2447     overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
2450 .z-index-1 {
2451     z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
2454 // These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
2455 .float-left {
2456     float: left !important; /* stylelint-disable-line declaration-no-important */
2458 .float-right {
2459     float: right !important; /* stylelint-disable-line declaration-no-important */
2462 .clamp-2 {
2463     display: -webkit-box;
2464     -webkit-box-orient: vertical;
2465     -webkit-line-clamp: 2;
2466     overflow: hidden;
2469 .word-break-all {
2470     word-break: break-all;
2473 .matchtext {
2474     background-color: lighten($primary, 40%);
2475     color: $body-color;
2476     height: 1.5rem;
2479 .border-radius {
2480     @if $enable-rounded {
2481         @include border-radius($card-border-radius);
2482     }
2485 // Emoji picker.
2486 $picker-width: 350px !default;
2487 $picker-width-xs: 320px !default;
2488 $picker-height: 400px !default;
2489 $picker-row-height: 40px !default;
2490 $picker-emoji-button-size: 40px !default;
2491 $picker-emoji-button-font-size: 24px !default;
2492 $picker-emoji-category-count: 9 !default;
2493 $picker-emojis-per-row: 7 !default;
2495 .emoji-picker {
2496     width: $picker-width;
2497     height: $picker-height;
2499     .category-button {
2500         padding: .375rem 0;
2501         height: 100%;
2502         width: $picker-width / $picker-emoji-category-count;
2503         border-top: none;
2504         border-left: none;
2505         border-right: none;
2506         border-bottom: 2px solid transparent;
2508         &.selected {
2509             border-bottom: 2px solid map-get($theme-colors, 'primary');
2510         }
2511     }
2513     .emojis-container,
2514     .search-results-container {
2515         min-width: $picker-emojis-per-row * $picker-emoji-button-size;
2516     }
2518     .picker-row {
2519         height: $picker-row-height;
2521         .category-name {
2522             line-height: $picker-row-height;
2523         }
2525         .emoji-button {
2526             height: $picker-emoji-button-size;
2527             width: $picker-emoji-button-size;
2528             line-height: $picker-emoji-button-size;
2529             font-size: $picker-emoji-button-font-size;
2530             overflow: hidden;
2532             @include hover-focus {
2533                 color: inherit;
2534                 text-decoration: none;
2535             }
2536         }
2537     }
2539     .emoji-preview {
2540         height: $picker-row-height;
2541         font-size: $picker-row-height;
2542         line-height: $picker-row-height;
2543     }
2545     .emoji-short-name {
2546         line-height: $picker-row-height / 2;
2547     }
2549     @include media-breakpoint-down(xs) {
2550         width: $picker-width-xs;
2551     }
2554 .emoji-auto-complete {
2555     height: $picker-row-height;
2557     .btn.btn-link.btn-icon.emoji-button {
2558         height: $picker-emoji-button-size;
2559         width: $picker-emoji-button-size;
2560         line-height: $picker-emoji-button-size;
2561         font-size: $picker-emoji-button-font-size;
2563         &.active {
2564             background-color: $gray-200;
2565         }
2566     }
2569 .toast-wrapper {
2570     max-width: $toast-max-width;
2571     max-height: 0;
2572     // Place these above any modals and other elements.
2573     z-index: 1051;
2575     > :first-child {
2576         margin-top: $spacer;
2577     }
2580 @each $color, $value in $theme-colors {
2581     .alert-#{$color} a {
2582         color: darken(theme-color-level($color, $alert-color-level), 10%);
2583     }
2586 @include media-breakpoint-down(sm) {
2587     #page-navbar {
2588         width: 100%;
2589     }
2591     .breadcrumb:not(:empty) {
2592         width: 100%;
2593         border: ($border-width * 2) solid $gray-200;
2594         padding: $spacer / 4;
2595         margin-bottom: $spacer / 2;
2596         .breadcrumb-item {
2597             padding-top: $spacer / 3;
2598             padding-bottom: $spacer / 3;
2599             display: inline-block;
2600         }
2601     }
2603     .mform {
2604         width: 100%;
2605         padding-right: 15px;
2606         padding-left: 15px;
2607     }
2608     .pagination {
2609         flex-wrap: wrap;
2610         justify-content: center;
2611     }
2612     .custom-select {
2613         max-width: 100%;
2614     }
2615     .card .card-body {
2616         padding: $card-spacer-x / 2;
2617     }
2618     #page-header {
2619         .card {
2620             border: 0;
2621             .card-body {
2622                 padding: 0;
2623             }
2624         }
2625     }
2626     .nav-tabs,
2627     .nav-pills {
2628         margin: 0;
2629         border: 0;
2630         padding: $spacer / 8;
2631         background-color: $gray-200;
2632         .nav-item {
2633             flex: 1 1 auto;
2634             text-align: center;
2635         }
2636         .nav-link {
2637             background: $white;
2638             border: 0;
2639             margin: $spacer / 8;
2640             &.active {
2641                 @include button-outline-variant($gray-600);
2642                 border-color: $gray-600;
2643             }
2644         }
2645     }
2648 @media (max-width: map-get($grid-breakpoints, "sm")) and (max-height: 320px) {
2649     div#page {
2650         margin-top: 0;
2651     }
2652     .navbar.fixed-top {
2653         position: relative;
2654         z-index: inherit;
2655     }
2658 .link-underline {
2659     text-decoration: underline;
2660     &:focus {
2661         text-decoration: none;
2662     }
2665 .alert.cta {
2666     .icon {
2667         padding: 0.3rem;
2668         &.fa {
2669             border-radius: 50%;
2670             border-style: solid;
2671             border-width: 0.125rem;
2672         }
2673     }