MDL-67883 core: Make core ready for MoodleNet.
[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 .modchooser .modal-footer {
1641     height: 70px;
1642     .moodlenet-logo {
1643         .icon {
1644             height: 2.5rem;
1645             width: 6rem;
1646             margin-bottom: .6rem;
1647         }
1648     }
1651 .modchoosercontainer.noscroll {
1652     overflow-y: hidden;
1655 .modchooser .searchcontainer .searchbar .input-group-append {
1656     align-items: center;
1658     i {
1659         color: #868e96;
1660         margin: 0;
1661         vertical-align: middle;
1662         font-size: 20px;
1663         height: 20px;
1664         width: 20px;
1665     }
1668 .modchoosercontainer .optionscontainer,
1669 .modchoosercontainer .searchresultitemscontainer {
1670     overflow-x: hidden;
1671     .option {
1672         // 2 items per line.
1673         flex-basis: calc(50% - 0.5rem);
1674         .optionactions {
1675             .optionaction {
1676                 cursor: pointer;
1677                 color: $gray-600;
1678                 i {
1679                     margin: 0;
1680                 }
1681             }
1682         }
1683         .optioninfo {
1684             a {
1685                 color: $gray-700;
1686                 &:hover {
1687                     text-decoration: none;
1688                 }
1689             }
1690         }
1691     }
1694 .modchooser .modal-body .optionsummary {
1695     background-color: $white;
1696     overflow-x: hidden;
1697     overflow-y: auto;
1698     height: 640px;
1700     .content {
1701         overflow-y: auto;
1702         .heading {
1703             .icon {
1704                 height: 32px;
1705                 width: 32px;
1706                 font-size: 32px;
1707                 padding: 0;
1708             }
1709         }
1710     }
1712     .actions {
1713         border-top: 1px solid $gray-300;
1714         background: $white;
1715     }
1718 @include media-breakpoint-down(xs) {
1719     .path-course-view .modal-dialog.modal-lg,
1720     .path-course-view .modal-content,
1721     .modchooser .modal-body,
1722     .modchooser .modal-body .carousel,
1723     .modchooser .modal-body .carousel-inner,
1724     .modchooser .modal-body .carousel-item,
1725     .modchooser .modal-body .optionsummary,
1726     .modchoosercontainer,
1727     .optionscontainer,
1728     .searchresultitemscontainer {
1729         min-height: auto;
1730         height: 100%;
1731         overflow-y: auto;
1732     }
1733     .path-course-view .modal-dialog.modal-lg {
1734         margin: 0;
1735     }
1736     .modchooser .modal-body .searchresultitemscontainer-wrapper {
1737         min-height: auto;
1738     }
1741 @include media-breakpoint-up(sm) {
1742     .modchoosercontainer .optionscontainer .option,
1743     .modchoosercontainer .searchresultitemscontainer .option {
1744         // Three items per line.
1745         flex-basis: calc(33.33% - 0.5rem);
1746     }
1749 @include media-breakpoint-up(lg) {
1750     .modchoosercontainer .optionscontainer .option,
1751     .modchoosercontainer .searchresultitemscontainer .option {
1752         // Six items per line.
1753         flex-basis: calc(16.66% - 0.5rem);
1754     }
1757 /* Form element: listing */
1758 .formlistingradio {
1759     padding-bottom: 25px;
1760     padding-right: 10px;
1763 .formlistinginputradio {
1764     float: left;
1767 .formlistingmain {
1768     min-height: 225px;
1771 .formlisting {
1772     position: relative;
1773     margin: 15px 0;
1774     padding: 1px 19px 14px;
1775     background-color: white;
1776     border: 1px solid #ddd;
1778     @include border-radius(4px);
1781 .formlistingmore {
1782     position: absolute;
1783     cursor: pointer;
1784     bottom: -1px;
1785     right: -1px;
1786     padding: 3px 7px;
1787     font-size: 12px;
1788     font-weight: bold;
1789     background-color: whitesmoke;
1790     border: 1px solid #ddd;
1791     color: #9da0a4;
1793     @include border-radius(4px 0 4px 0);
1796 .formlistingall {
1797     margin: 15px 0;
1798     padding: 0;
1800     @include border-radius(4px);
1803 .formlistingrow {
1804     cursor: pointer;
1805     border-bottom: 1px solid;
1806     border-color: #e1e1e8;
1807     border-left: 1px solid #e1e1e8;
1808     border-right: 1px solid #e1e1e8;
1809     background-color: #f7f7f9;
1811     @include border-radius(0 0 4px 4px);
1812     padding: 6px;
1813     top: 50%;
1814     left: 50%;
1815     min-height: 34px;
1816     float: left;
1817     width: 150px;
1820 body.jsenabled .formlistingradio {
1821     display: none;
1824 body.jsenabled .formlisting {
1825     display: block;
1828 a.criteria-action {
1829     padding: 0 3px;
1830     float: right;
1833 div.criteria-description {
1834     padding: 10px 15px;
1835     margin: 5px 0;
1836     background: none repeat scroll 0 0 #f9f9f9;
1837     border: 1px solid #eee;
1840 ul.badges {
1841     margin: 0;
1842     list-style: none;
1845 .badges li {
1846     position: relative;
1847     display: inline-block;
1848     padding-top: 1em;
1849     text-align: center;
1850     vertical-align: top;
1851     width: 150px;
1854 .badges li .badge-name {
1855     display: block;
1856     padding: 5px;
1859 .badges li > img {
1860     position: absolute;
1863 .badges li .badge-image {
1864     width: 100px;
1865     height: 100px;
1866     left: 10px;
1867     top: 0;
1868     z-index: 1;
1871 .badges li .badge-actions {
1872     position: relative;
1875 .badges li .expireimage {
1876     width: 100px;
1877     height: 100px;
1878     left: 25px;
1879     top: 0;
1880     position: absolute;
1881     z-index: 10;
1882     opacity: 0.85;
1885 #badge-image {
1886     background-color: transparent;
1887     padding: 0;
1888     position: relative;
1889     min-width: 100px;
1890     width: 20%;
1891     display: inline-block;
1892     vertical-align: top;
1893     margin-top: 17px;
1894     margin-bottom: 20px;
1896     .expireimage {
1897         width: 100px;
1898         height: 100px;
1899         left: 0;
1900         top: 0;
1901         opacity: 0.85;
1902         position: absolute;
1903         z-index: 10;
1904     }
1906     .singlebutton {
1907         padding-top: 5px;
1908         display: block;
1910         button {
1911             margin-left: 4px;
1912         }
1913     }
1916 #badge-details {
1917     display: inline-block;
1918     width: 79%;
1921 #badge-overview dl,
1922 #badge-details dl {
1923     margin: 0;
1925     dt,
1926     dd {
1927         vertical-align: top;
1928         padding: 3px 0;
1929     }
1931     dt {
1932         clear: both;
1933         display: inline-block;
1934         width: 20%;
1935         min-width: 100px;
1936     }
1938     dd {
1939         display: inline-block;
1940         width: 79%;
1941         margin-left: 1%;
1942     }
1945 .badge-profile {
1946     vertical-align: top;
1949 .connected {
1950     color: map-get($theme-colors, 'success');
1953 .notconnected {
1954     color: map-get($theme-colors, 'danger');
1957 .connecting {
1958     color: map-get($theme-colors, 'warning');
1961 #page-badges-award .recipienttable tr td {
1962     vertical-align: top;
1965 #page-badges-award .recipienttable tr td.actions .actionbutton {
1966     margin: 0.3em 0;
1967     padding: 0.5em 0;
1968     width: 100%;
1971 #page-badges-award .recipienttable tr td.existing,
1972 #page-badges-award .recipienttable tr td.potential {
1973     width: 42%;
1976 #issued-badge-table .activatebadge {
1977     display: inline-block;
1980 .statusbox.active {
1981     background-color: $state-success-bg;
1984 .statusbox.inactive {
1985     background-color: $state-warning-bg;
1988 .statusbox {
1989     text-align: center;
1990     margin-bottom: 5px;
1991     padding: 5px;
1994 .statusbox .activatebadge {
1995     display: inline-block;
1998 .statusbox .activatebadge input[type=submit] {
1999     margin: 3px;
2002 .activatebadge {
2003     margin: 0;
2004     text-align: left;
2005     vertical-align: middle;
2008 img#persona_signin {
2009     cursor: pointer;
2012 .addcourse {
2013     float: right;
2016 .invisiblefieldset {
2017     display: inline;
2018     padding: 0;
2019     border-width: 0;
2022 /** Page header */
2023 #page-header {
2024     .logo {
2025         margin: $spacer 0;
2026         img {
2027             max-height: 75px;
2028         }
2029     }
2032 /** Navbar logo. */
2033 nav.navbar .logo img {
2034     max-height: 35px;
2037 /** Header-bar styles **/
2038 .page-context-header {
2039     // We need to be explicit about the height of the header.
2040     $pageHeaderHeight: 140px;
2042     // Do not remove these rules.
2043     overflow: hidden;
2044     padding: 0.25rem;
2046     .page-header-image,
2047     .page-header-headings {
2048         float: left;
2049         display: block;
2050         position: relative;
2051     }
2053     .page-header-image {
2054         margin-right: 1em;
2055         margin-bottom: 1em;
2056         & > a {
2057             display: inline-block;
2058         }
2059     }
2061     .page-header-headings,
2062     .header-button-group {
2063         position: relative;
2064         line-height: 24px;
2065         vertical-align: middle;
2066     }
2068     .header-button-group {
2069         display: block;
2070         float: left;
2071     }
2074 ul.dragdrop-keyboard-drag li {
2075     list-style-type: none;
2078 a.disabled:hover,
2079 a.disabled {
2080     text-decoration: none;
2081     cursor: default;
2082     font-style: italic;
2083     color: #808080;
2086 body.lockscroll {
2087     height: 100%;
2088     overflow: hidden;
2091 .progressbar_container {
2092     max-width: 500px;
2093     margin: 0 auto;
2096 /* IE10 only fix for calendar titling */
2097 .ie10 .yui3-calendar-header-label {
2098     display: inline-block;
2101 dd:before,
2102 dd:after {
2103     display: block;
2104     content: " ";
2107 dd:after {
2108     clear: both;
2111 // Active tabs with links should have a different
2112 // cursor to indicate they are clickable.
2113 .nav-tabs > .active > a[href],
2114 .nav-tabs > .active > a[href]:hover,
2115 .nav-tabs > .active > a[href]:focus {
2116     cursor: pointer;
2119 .inplaceeditable {
2120     &.inplaceeditingon {
2121         position: relative;
2123         .editinstructions {
2124             margin-top: -30px;
2125             font-weight: normal;
2126             margin-right: 0;
2127             margin-left: 0;
2128             left: 0;
2129             right: auto;
2130             white-space: nowrap;
2131         }
2132         @include media-breakpoint-up(sm) {
2133             input {
2134                 width: 330px;
2135                 vertical-align: text-bottom;
2136                 margin-bottom: 0;
2137             }
2138         }
2140         select {
2141             margin-bottom: 0;
2142         }
2143     }
2145     .quickediticon img {
2146         opacity: 0.2;
2147     }
2149     .quickeditlink {
2150         color: inherit;
2151         text-decoration: inherit;
2152     }
2154     &:hover .quickeditlink .quickediticon img,
2155     .quickeditlink:focus .quickediticon img {
2156         opacity: 1;
2157     }
2159     &.inplaceeditable-toggle .quickediticon {
2160         display: none;
2161     }
2163     &.inplaceeditable-autocomplete {
2164         display: block;
2165     }
2168 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2169     margin-top: -20px;
2172 /** Chart area. */
2173 .chart-area {
2175     .chart-table-data {
2176         display: none;
2177     }
2179     .chart-table {
2180         .chart-output-htmltable caption {
2181             white-space: nowrap;
2182         }
2183         /** When accessible, we display the table only. */
2184         &.accesshide {
2185             .chart-table-expand {
2186                 display: none;
2187             }
2188             .chart-table-data {
2189                 display: block;
2190             }
2191         }
2192     }
2195 // Reset for ul.
2196 ul {
2197     padding-left: 1rem;
2200 /* YUI 2 Tree View */
2201 /*rtl:raw:
2202 .ygtvtn,
2203 .ygtvtm,
2204 .ygtvtmh,
2205 .ygtvtmhh,
2206 .ygtvtp,
2207 .ygtvtph,
2208 .ygtvtphh,
2209 .ygtvln,
2210 .ygtvlm,
2211 .ygtvlmh,
2212 .ygtvlmhh,
2213 .ygtvlp,
2214 .ygtvlph,
2215 .ygtvlphh,
2216 .ygtvdepthcell,
2217 .ygtvok,
2218 .ygtvok:hover,
2219 .ygtvcancel,
2220 .ygtvcancel:hover {
2221     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
2223 */
2225 .hover-tooltip-container {
2226     position: relative;
2228     .hover-tooltip {
2229         opacity: 0;
2230         visibility: hidden;
2231         position: absolute;
2232         /*rtl:ignore*/
2233         left: 50%;
2234         top: calc(-50% - 5px);
2235         transform: translate(-50%, -50%);
2236         background-color: #fff;
2237         border: 1px solid rgba(0, 0, 0, .2);
2238         border-radius: .3rem;
2239         box-sizing: border-box;
2240         padding: 5px;
2241         white-space: nowrap;
2242         transition: opacity 0.15s, visibility 0.15s;
2243         z-index: 1000;
2245         &:before {
2246             content: '';
2247             display: inline-block;
2248             border-left: 8px solid transparent;
2249             border-right: 8px solid transparent;
2250             border-top: 8px solid rgba(0, 0, 0, .2);
2251             position: absolute;
2252             bottom: -8px;
2253             left: calc(50% - 8px);
2254         }
2256         &:after {
2257             content: '';
2258             display: inline-block;
2259             border-left: 7px solid transparent;
2260             border-right: 7px solid transparent;
2261             border-top: 7px solid #fff;
2262             position: absolute;
2263             bottom: -6px;
2264             left: calc(50% - 7px);
2265             z-index: 2;
2266         }
2267     }
2269     &:hover {
2270         .hover-tooltip {
2271             opacity: 1;
2272             visibility: visible;
2273             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2274         }
2275     }
2278 #region-flat-nav {
2279     padding-right: 0;
2280     padding-left: 0;
2281     .nav {
2282         margin-right: $grid-gutter-width / 2;
2283         background-color: $card-bg;
2284     }
2285     @include media-breakpoint-down(sm) {
2286         .nav {
2287             margin-top: $grid-gutter-width;
2288             margin-right: 0;
2289         }
2290     }
2293 // Footer link colour was added to allow the colour of footer links to be changed,
2294 // but really in bootstrap we want the colour of links on .bg-inverse to be changed
2295 // rather than being specific to the footer. This is kept for backwards compatibility.
2296 $footer-link-color: $bg-inverse-link-color !default;
2297 #page-footer a {
2298     color: $footer-link-color;
2299     text-decoration: underline;
2300     .icon {
2301         color: $footer-link-color;
2302     }
2303     &:focus .icon {
2304         color: $body-color;
2305     }
2308 .bg-inverse a {
2309     color: $bg-inverse-link-color;
2310     text-decoration: underline;
2311     .icon {
2312         color: $bg-inverse-link-color;
2313     }
2316 .sitelink {
2317     img {
2318         width: 112px;
2319     }
2322 // Make links in a menu clickable anywhere in the row.
2323 .dropdown-item a {
2324     display: block;
2325     width: 100%;
2326     color: $body-color;
2328 .dropdown-item:active a {
2329     color: $dropdown-link-active-color;
2332 .competency-tree {
2333     ul {
2334         padding-left: 1.5rem;
2335     }
2338 .sr-only-focusable {
2339     &:active,
2340     &:focus {
2341         z-index: $zindex-navbar-fixed + 1;
2342         position: fixed;
2343         background: #fff;
2344         padding: 7px;
2345         left: 0;
2346         top: 0;
2347     }
2350 [data-drag-type="move"] {
2351     cursor: move;
2352     touch-action: none;
2355 .clickable {
2356     cursor: pointer;
2359 .overlay-icon-container {
2360     position: absolute;
2361     top: 0;
2362     left: 0;
2363     width: 100%;
2364     height: 100%;
2365     background-color: rgba(255, 255, 255, 0.6);
2367     .loading-icon {
2368         position: absolute;
2369         top: 50%;
2370         left: 50%;
2371         transform: translate(-50%, -50%);
2373         .icon {
2374             height: 30px;
2375             width: 30px;
2376             font-size: 30px;
2377         }
2378     }
2381 .open.atto_menu > .dropdown-menu {
2382     display: block;
2384 div.editor_atto_toolbar button .icon {
2385     color: $gray-700;
2387 .w-auto {
2388     width: auto;
2391 .bg-pulse-grey {
2392     animation: bg-pulse-grey 2s infinite linear;
2395 @keyframes bg-pulse-grey {
2396     0% {
2397         background-color: $gray-100;
2398     }
2399     50% {
2400         background-color: darken($gray-100, 5%);
2401     }
2402     100% {
2403         background-color: $gray-100;
2404     }
2407 @each $size, $length in $spacers {
2408     .line-height-#{$size} {
2409         line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2410     }
2413 .dir-rtl {
2414     .dir-rtl-hide {
2415         display: none;
2416     }
2419 .dir-ltr {
2420     .dir-ltr-hide {
2421         display: none;
2422     }
2425 .paged-content-page-container {
2426     min-height: 3.125rem;
2429 body.h5p-embed {
2430     #page-content {
2431         display: inherit;
2432     }
2433     #maincontent {
2434         display: none;
2435     }
2436     .h5pmessages {
2437         min-height: 230px; // This should be the same height as default core_h5p iframes.
2438     }
2441 .text-decoration-none {
2442     text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
2445 .colour-inherit {
2446     color: inherit !important; /* stylelint-disable-line declaration-no-important */
2449 .position-right {
2450     right: 0 !important; /* stylelint-disable-line declaration-no-important */
2453 .overflow-hidden {
2454     overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
2457 .text-break {
2458     overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
2461 .z-index-0 {
2462     z-index: 0 !important; /* stylelint-disable-line declaration-no-important */
2465 .z-index-1 {
2466     z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
2469 // These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
2470 .float-left {
2471     float: left !important; /* stylelint-disable-line declaration-no-important */
2473 .float-right {
2474     float: right !important; /* stylelint-disable-line declaration-no-important */
2477 .clamp-2 {
2478     display: -webkit-box;
2479     -webkit-box-orient: vertical;
2480     -webkit-line-clamp: 2;
2481     overflow: hidden;
2484 .word-break-all {
2485     word-break: break-all;
2488 .matchtext {
2489     background-color: lighten($primary, 40%);
2490     color: $body-color;
2491     height: 1.5rem;
2494 .border-radius {
2495     @if $enable-rounded {
2496         @include border-radius($card-border-radius);
2497     }
2500 // Emoji picker.
2501 $picker-width: 350px !default;
2502 $picker-width-xs: 320px !default;
2503 $picker-height: 400px !default;
2504 $picker-row-height: 40px !default;
2505 $picker-emoji-button-size: 40px !default;
2506 $picker-emoji-button-font-size: 24px !default;
2507 $picker-emoji-category-count: 9 !default;
2508 $picker-emojis-per-row: 7 !default;
2510 .emoji-picker {
2511     width: $picker-width;
2512     height: $picker-height;
2514     .category-button {
2515         padding: .375rem 0;
2516         height: 100%;
2517         width: $picker-width / $picker-emoji-category-count;
2518         border-top: none;
2519         border-left: none;
2520         border-right: none;
2521         border-bottom: 2px solid transparent;
2523         &.selected {
2524             border-bottom: 2px solid map-get($theme-colors, 'primary');
2525         }
2526     }
2528     .emojis-container,
2529     .search-results-container {
2530         min-width: $picker-emojis-per-row * $picker-emoji-button-size;
2531     }
2533     .picker-row {
2534         height: $picker-row-height;
2536         .category-name {
2537             line-height: $picker-row-height;
2538         }
2540         .emoji-button {
2541             height: $picker-emoji-button-size;
2542             width: $picker-emoji-button-size;
2543             line-height: $picker-emoji-button-size;
2544             font-size: $picker-emoji-button-font-size;
2545             overflow: hidden;
2547             @include hover-focus {
2548                 color: inherit;
2549                 text-decoration: none;
2550             }
2551         }
2552     }
2554     .emoji-preview {
2555         height: $picker-row-height;
2556         font-size: $picker-row-height;
2557         line-height: $picker-row-height;
2558     }
2560     .emoji-short-name {
2561         line-height: $picker-row-height / 2;
2562     }
2564     @include media-breakpoint-down(xs) {
2565         width: $picker-width-xs;
2566     }
2569 .emoji-auto-complete {
2570     height: $picker-row-height;
2572     .btn.btn-link.btn-icon.emoji-button {
2573         height: $picker-emoji-button-size;
2574         width: $picker-emoji-button-size;
2575         line-height: $picker-emoji-button-size;
2576         font-size: $picker-emoji-button-font-size;
2578         &.active {
2579             background-color: $gray-200;
2580         }
2581     }
2584 .toast-wrapper {
2585     max-width: $toast-max-width;
2586     max-height: 0;
2587     // Place these above any modals and other elements.
2588     z-index: 1051;
2590     > :first-child {
2591         margin-top: $spacer;
2592     }
2595 @each $color, $value in $theme-colors {
2596     .alert-#{$color} a {
2597         color: darken(theme-color-level($color, $alert-color-level), 10%);
2598     }
2601 @include media-breakpoint-down(sm) {
2602     #page-navbar {
2603         width: 100%;
2604     }
2606     .breadcrumb:not(:empty) {
2607         width: 100%;
2608         border: ($border-width * 2) solid $gray-200;
2609         padding: $spacer / 4;
2610         margin-bottom: $spacer / 2;
2611         .breadcrumb-item {
2612             padding-top: $spacer / 3;
2613             padding-bottom: $spacer / 3;
2614             display: inline-block;
2615         }
2616     }
2618     .mform {
2619         width: 100%;
2620         padding-right: 15px;
2621         padding-left: 15px;
2622     }
2623     .pagination {
2624         flex-wrap: wrap;
2625         justify-content: center;
2626     }
2627     .custom-select {
2628         max-width: 100%;
2629     }
2630     .card .card-body {
2631         padding: $card-spacer-x / 2;
2632     }
2633     #page-header {
2634         .card {
2635             border: 0;
2636             .card-body {
2637                 padding: 0;
2638             }
2639         }
2640     }
2641     .nav-tabs,
2642     .nav-pills {
2643         margin: 0;
2644         border: 0;
2645         padding: $spacer / 8;
2646         background-color: $gray-200;
2647         .nav-item {
2648             flex: 1 1 auto;
2649             text-align: center;
2650         }
2651         .nav-link {
2652             background: $white;
2653             border: 0;
2654             margin: $spacer / 8;
2655             &.active {
2656                 @include button-outline-variant($gray-600);
2657                 border-color: $gray-600;
2658             }
2659         }
2660     }
2663 @media (max-width: map-get($grid-breakpoints, "sm")) and (max-height: 320px) {
2664     div#page {
2665         margin-top: 0;
2666     }
2667     .navbar.fixed-top {
2668         position: relative;
2669         z-index: inherit;
2670     }