MDL-68963 theme_boost: fix safari focus outline for radio and checkbox
[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;
52     bottom: $gototop-bottom-position;
53     right: 0;
54     a {
55         position: absolute;
56         right: 0;
57         transform: translateY(-100%);
58     }
59 }
61 @include media-breakpoint-down(sm) {
62     #goto-top-link {
63         bottom: 0;
64     }
65 }
67 body.scrolled #goto-top-link {
68     opacity: 1;
69     visibility: visible;
70     transition: visibility 0s ease 0s, opacity .7s ease .1s;
71 }
73 .context-header-settings-menu .dropdown-toggle > .icon,
74 #region-main-settings-menu .dropdown-toggle > .icon {
75     height: 24px;
76     font-size: 24px;
77     width: auto;
78 }
79 /** Prevent user notifications overlapping with region main settings menu */
80 #user-notifications {
81     display: block;
82     overflow: hidden;
83 }
85 /** Page layout CSS starts **/
86 .layout-option-noheader #page-header,
87 .layout-option-nonavbar #page-navbar,
88 .layout-option-nofooter #page-footer,
89 .layout-option-nocourseheader .course-content-header,
90 .layout-option-nocoursefooter .course-content-footer {
91     display: none;
92 }
94 /** Page layout CSS ends **/
96 .mdl-left {
97     text-align: left;
98 }
100 .mdl-right {
101     text-align: right;
104 /*rtl:ignore*/
105 .text-ltr {
106     direction: ltr !important; /* stylelint-disable-line declaration-no-important */
109 #add,
110 #remove,
111 .centerpara,
112 .mdl-align {
113     text-align: center;
116 a.dimmed,
117 a.dimmed:link,
118 a.dimmed:visited,
119 a.dimmed_text,
120 a.dimmed_text:link,
121 a.dimmed_text:visited,
122 .dimmed_text,
123 .dimmed_text a,
124 .dimmed_text a:link,
125 .dimmed_text a:visited,
126 .usersuspended,
127 .usersuspended a,
128 .usersuspended a:link,
129 .usersuspended a:visited,
130 .dimmed_category,
131 .dimmed_category a {
132     color: $text-muted;
135 // Accessible focus styling for links, add .aalink to links with custom css classes to get
136 // accessible focus styles.
137 .aalink,
138 #page-footer a:not([class]),
139 .arrow_link,
140 a:not([class]),
141 .activityinstance > a {
142     &.focus,
143     &:focus {
144         outline: $btn-focus-width solid transparent;
145         color: $gray-900;
146         background-color: lighten($primary, 50%);
147         box-shadow: 0 -#{$btn-focus-width} lighten($primary, 50%), 0 $btn-focus-width $gray-800;
148     }
149     &:focus:hover {
150         text-decoration: none;
151     }
154 // Accessible focus styling for buttons like elements that do not use the .btn class. Add
155 // .aabtn to you element if you need the same focus styles.
156 .aabtn,
157 .btn-link,
158 .nav-link,
159 .atto_link_button,
160 [role="button"],
161 .list-group-item-action,
162 input[type="checkbox"],
163 input[type="radio"],
164 input[type="file"],
165 input[type="image"],
166 .sr-only-focusable,
167 a.dropdown-item,
168 a.dropdown-toggle,
169 .modal-dialog[tabindex="0"],
170 .moodle-dialogue-base .closebutton,
171 button.close {
172     &.focus,
173     &:focus {
174         outline: 0;
175         box-shadow: $input-btn-focus-box-shadow;
176     }
177     &:focus:hover {
178         text-decoration: none;
179     }
182 // Safari does not allow custom styling of checkboxes.
183 .safari {
184     input[type="checkbox"],
185     input[type="radio"] {
186         &.focus,
187         &:focus {
188             outline: auto;
189         }
190     }
193 .usermenu,
194 div.dropdown-item {
195     a,
196     a[role="button"] {
197         outline: 0;
198         box-shadow: none;
199     }
200     &:focus-within {
201         outline: 0;
202         box-shadow: $input-btn-focus-box-shadow;
203     }
206 .unlist,
207 .unlist li,
208 .inline-list,
209 .inline-list li,
210 .block .list,
211 .block .list li,
212 .section li.activity,
213 .section li.movehere,
214 .tabtree li {
215     list-style: none;
216     margin: 0;
217     padding: 0;
220 .inline,
221 .inline-list li {
222     display: inline;
225 .notifytiny {
226     font-size: $font-size-xs;
229 .notifytiny li,
230 .notifytiny td {
231     font-size: 100%;
234 .red,
235 .notifyproblem {
236     color: map-get($theme-colors, 'warning');
239 .green,
240 .notifysuccess {
241     color: map-get($theme-colors, 'success');
244 .highlight {
245     color: map-get($theme-colors, 'info');
248 .fitem.advanced .text-info {
249     font-weight: bold;
252 .reportlink {
253     text-align: right;
256 a.autolink.glossary:hover {
257     cursor: help;
259 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
260 .collapsibleregioncaption {
261     white-space: nowrap;
262     min-height: $line-height-base * $font-size-base;
265 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
266     cursor: pointer;
269 .pagelayout-mydashboard #region-main {
270     border: 0;
271     padding: 0;
272     background-color: transparent;
273     margin-top: -1px;
276 @include media-breakpoint-down(sm) {
277     .pagelayout-mydashboard,
278     .pagelayout-login {
279         #region-main-box {
280             padding-left: 0;
281             padding-right: 0;
282         }
283     }
286 .collapsibleregioncaption img {
287     vertical-align: middle;
290 .jsenabled .hiddenifjs {
291     display: none;
294 .visibleifjs {
295     display: none;
298 .jsenabled .visibleifjs {
299     display: inline;
302 .jsenabled .collapsibleregion {
303     overflow: hidden;
304     box-sizing: content-box;
307 .jsenabled .collapsed .collapsibleregioninner {
308     visibility: hidden;
311 .collapsible-actions {
312     display: none;
313     text-align: right;
316 .jsenabled .collapsible-actions {
317     display: block;
320 .collapsible-actions .collapseexpand {
321     padding-left: 20px;
322     background: url([[pix:t/collapsed]]) 2px center no-repeat;
324 /*rtl:raw:
325 .collapsible-actions .collapseexpand {
326     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
328 */
329 .collapsible-actions .collapse-all {
330     background-image: url([[pix:t/expanded]]);
333 .yui-overlay .yui-widget-bd {
334     background-color: #ffee69;
335     border: 1px solid #a6982b;
336     border-top-color: #d4c237;
337     color: #000;
338     left: 0;
339     padding: 2px 5px;
340     position: relative;
341     top: 0;
342     z-index: 1;
345 .clearer {
346     background: transparent;
347     border-width: 0;
348     clear: both;
349     display: block;
350     height: 1px;
351     margin: 0;
352     padding: 0;
355 .bold,
356 .warning,
357 .errorbox .title,
358 .pagingbar .title,
359 .pagingbar .thispage {
360     font-weight: bold;
363 img.userpicture {
364     margin-right: 0.5rem;
367 img.resize {
368     height: 1em;
369     width: 1em;
372 .action-menu .dropdown-toggle {
373     text-decoration: none;
376 .action-menu {
377     white-space: nowrap;
380 .block img.resize {
381     height: 0.9em;
382     width: 0.8em;
384 /* Icon styles */
385 img.activityicon {
386     height: 24px;
387     width: 24px;
388     vertical-align: middle;
391 .headermain {
392     font-weight: bold;
395 #maincontent {
396     display: block;
397     height: 1px;
398     overflow: hidden;
401 img.uihint {
402     cursor: help;
405 #addmembersform table {
406     margin-left: auto;
407     margin-right: auto;
410 table.flexible .emptyrow {
411     display: none;
414 form.popupform,
415 form.popupform div {
416     display: inline;
419 .arrow_button input {
420     overflow: hidden;
422 .no-overflow {
423     overflow: auto;
426 // Minimum height required for a menu in a table inside a scrollable div.
427 // Position required for table sizing inside a flex container.
428 .no-overflow > .generaltable {
429     position: relative;
430     margin-bottom: 0;
431     min-height: 10em;
433 // Accessibility features
435 // Accessibility: text 'seen' by screen readers but not visual users.
436 .accesshide {
437     @include sr-only();
440 span.hide,
441 div.hide,
442 .hidden {
443     display: none;
445 // Accessibility: Skip block link, for keyboard-only users.
446 a.skip-block,
447 a.skip {
448     position: absolute;
449     top: -1000em;
450     font-size: 0.85em;
451     text-decoration: none;
454 a.skip-block:focus,
455 a.skip-block:active,
456 a.skip:focus,
457 a.skip:active {
458     position: static;
459     display: block;
462 .skip-block-to {
463     display: block;
464     height: 1px;
465     overflow: hidden;
467 // Blogs
468 .addbloglink {
469     text-align: center;
472 .blog_entry .audience {
473     text-align: right;
474     padding-right: 4px;
477 .blog_entry .tags {
478     margin-top: 15px;
481 .blog_entry .content {
482     margin-left: 43px;
484 // Group
486 #doc-contents h1 {
487     margin: 1em 0 0 0;
490 #doc-contents ul {
491     margin: 0;
492     padding: 0;
493     width: 90%;
496 #doc-contents ul li {
497     list-style-type: none;
500 .groupmanagementtable td {
501     vertical-align: top;
504 .groupmanagementtable #existingcell,
505 .groupmanagementtable #potentialcell {
506     width: 42%;
509 .groupmanagementtable #buttonscell {
510     width: 16%;
513 .groupmanagementtable #buttonscell p.arrow_button input {
514     width: auto;
515     min-width: 80%;
516     margin: 0 auto;
517     display: block;
520 .groupmanagementtable #removeselect_wrapper,
521 .groupmanagementtable #addselect_wrapper {
522     width: 100%;
525 .groupmanagementtable #removeselect_wrapper label,
526 .groupmanagementtable #addselect_wrapper label {
527     font-weight: normal;
530 #group-usersummary {
531     width: 14em;
534 .groupselector {
535     margin-top: 3px;
536     margin-bottom: 3px;
537     display: inline-block;
540 .groupselector label {
541     display: inline-block;
544 // Login
545 .login-page {
546     [name="username"] {
547         margin-bottom: -1px;
548         border-bottom-right-radius: 0;
549         border-bottom-left-radius: 0;
550     }
552     [type="password"] {
553         margin-bottom: 10px;
554         border-top-left-radius: 0;
555         border-top-right-radius: 0;
556     }
559 // Notes
560 .notepost {
561     margin-bottom: 1em;
564 .notepost .userpicture {
565     float: left;
566     margin-right: 5px;
569 .notepost .content,
570 .notepost .footer {
571     clear: both;
574 .notesgroup {
575     margin-left: 20px;
578 // My Moodle
579 .path-my .coursebox {
580     margin: $spacer-y 0;
581     padding: 0;
583     .overview {
584         margin: 15px 30px 10px 30px;
585     }
588 .path-my .coursebox .info {
589     float: none;
590     margin: 0;
593 // Modules
594 .mod_introbox {
595     padding: 10px;
598 table.mod_index {
599     width: 100%;
602 // Comments
603 .comment-ctrl {
604     font-size: 12px;
605     display: none;
606     margin: 0;
607     padding: 0;
610 .comment-ctrl h5 {
611     margin: 0;
612     padding: 5px;
615 .comment-area {
616     max-width: 400px;
617     padding: 5px;
620 .comment-area textarea {
621     width: 100%;
622     overflow: auto;
624     &.fullwidth {
625         -webkit-box-sizing: border-box;
626         -moz-box-sizing: border-box;
627         box-sizing: border-box;
628     }
631 .comment-area .fd {
632     text-align: right;
635 .comment-meta span {
636     color: gray;
639 .comment-link img {
640     vertical-align: text-bottom;
643 .comment-list {
644     font-size: 11px;
645     overflow: auto;
646     list-style: none;
647     padding: 0;
648     margin: 0;
651 .comment-list li {
652     margin: 2px;
653     list-style: none;
654     margin-bottom: 5px;
655     clear: both;
656     padding: .3em;
657     position: relative;
660 .comment-list li.first {
661     display: none;
664 .comment-paging {
665     text-align: center;
668 .comment-paging .pageno {
669     padding: 2px;
672 .comment-paging .curpage {
673     border: 1px solid #ccc;
676 .comment-message .picture {
677     width: 20px;
678     float: left;
681 .comment-message .text {
682     margin: 0;
683     padding: 0;
686 .comment-message .text p {
687     padding: 0;
688     margin: 0 18px 0 0;
691 .comment-delete {
692     position: absolute;
693     top: 0;
694     right: 0;
695     margin: .3em;
698 .comment-report-selectall {
699     display: none;
702 .comment-link {
703     display: none;
706 .jsenabled .comment-link {
707     display: block;
710 .jsenabled .showcommentsnonjs {
711     display: none;
714 .jsenabled .comment-report-selectall {
715     display: inline;
717 /**
718 * Completion progress report
719 */
720 .completion-expired {
721     color: map-get($theme-colors, 'warning');
724 .completion-expected {
725     font-size: $font-size-xs;
728 .completion-sortchoice,
729 .completion-identifyfield {
730     font-size: $font-size-xs;
731     vertical-align: bottom;
734 .completion-progresscell {
735     text-align: right;
738 .completion-expired .completion-expected {
739     font-weight: bold;
741 /**
742 * Tags
743 */
744 img.user-image {
745     height: 100px;
746     width: 100px;
749 #tag-search-box {
750     text-align: center;
751     margin: 10px auto;
754 .path-tag .tag-index-items .tagarea {
755     border: 1px solid #e3e3e3;
756     border-radius: 4px;
757     padding: 10px;
758     margin-top: 10px;
761 .path-tag .tag-index-items .tagarea h3 {
762     display: block;
763     padding: 3px 0 10px 0;
764     margin: 0;
765     font-size: 1.1em;
766     font-weight: bold;
767     line-height: 20px;
768     color: #999;
769     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
770     text-transform: uppercase;
771     word-wrap: break-word;
772     border-bottom: solid 1px #e3e3e3;
773     margin-bottom: 10px;
776 .path-tag .tagarea .controls,
777 .path-tag .tagarea .taggeditems {
778     @include clearfix();
781 .path-tag .tagarea .controls,
782 .path-tag .tag-backtoallitems {
783     text-align: center;
786 .path-tag .tagarea .controls .gotopage.nextpage {
787     float: right;
790 .path-tag .tagarea .controls .gotopage.prevpage {
791     float: left;
794 .path-tag .tagarea .controls .exclusivemode {
795     display: inline-block;
798 .path-tag .tagarea .controls.controls-bottom {
799     margin-top: 5px;
802 .path-tag .tagarea .controls .gotopage.nextpage::after {
803     padding-right: 5px;
804     padding-left: 5px;
805     content: "»";
808 .path-tag .tagarea .controls .gotopage.prevpage::before {
809     padding-right: 5px;
810     padding-left: 5px;
811     content: "«";
814 span.flagged-tag,
815 tr.flagged-tag,
816 span.flagged-tag a,
817 tr.flagged-tag a {
818     color: map-get($theme-colors, 'warning');
821 .tag-management-table td,
822 .tag-management-table th {
823     vertical-align: middle;
824     padding: 4px;
827 .tag-management-table .inplaceeditable.inplaceeditingon input {
828     width: 150px;
831 .path-admin-tag .addstandardtags {
832     float: right;
834     img {
835         margin: 0 5px;
836     }
839 .path-tag .tag-relatedtags {
840     padding-top: 10px;
843 .path-tag .tag-management-box {
844     text-align: right;
847 .path-tag .tag-index-toc {
848     padding: 10px;
849     text-align: center;
852 .path-tag .tag-index-toc li,
853 .path-tag .tag-management-box li {
854     margin-left: 5px;
855     margin-right: 5px;
858 .path-tag .tag-management-box li a.edittag {
859     background-image: url([[pix:moodle|i/settings]]);
862 .path-tag .tag-management-box li a.flagasinappropriate {
863     background-image: url([[pix:moodle|i/flagged]]);
866 .path-tag .tag-management-box li a.removefrommyinterests {
867     background-image: url([[pix:moodle|t/delete]]);
870 .path-tag .tag-management-box li a.addtomyinterests {
871     background-image: url([[pix:moodle|t/add]]);
874 .path-tag .tag-management-box li a {
875     background-repeat: no-repeat;
876     background-position: left;
877     padding-left: 17px;
880 .tag_feed.media-list .media .itemimage {
881     float: left;
884 .tag_feed.media-list .media .itemimage img {
885     height: 35px;
886     width: 35px;
889 .tag_feed.media-list .media .media-body {
890     padding-right: 10px;
891     padding-left: 10px;
894 .tag_feed .media .muted a {
895     color: $text-muted;
898 .tag_cloud {
899     text-align: center;
902 .tag_cloud .inline-list li {
903     padding: 0 0.2em;
906 .tag_cloud .tag_overflow {
907     margin-top: 1em;
908     font-style: italic;
911 .tag_cloud .s20 {
912     font-size: 2.7em;
915 .tag_cloud .s19 {
916     font-size: 2.6em;
919 .tag_cloud .s18 {
920     font-size: 2.5em;
923 .tag_cloud .s17 {
924     font-size: 2.4em;
927 .tag_cloud .s16 {
928     font-size: 2.3em;
931 .tag_cloud .s15 {
932     font-size: 2.2em;
935 .tag_cloud .s14 {
936     font-size: 2.1em;
939 .tag_cloud .s13 {
940     font-size: 2em;
943 .tag_cloud .s12 {
944     font-size: 1.9em;
947 .tag_cloud .s11 {
948     font-size: 1.8em;
951 .tag_cloud .s10 {
952     font-size: 1.7em;
955 .tag_cloud .s9 {
956     font-size: 1.6em;
959 .tag_cloud .s8 {
960     font-size: 1.5em;
963 .tag_cloud .s7 {
964     font-size: 1.4em;
967 .tag_cloud .s6 {
968     font-size: 1.3em;
971 .tag_cloud .s5 {
972     font-size: 1.2em;
975 .tag_cloud .s4 {
976     font-size: 1.1em;
979 .tag_cloud .s3 {
980     font-size: 1em;
983 .tag_cloud .s2 {
984     font-size: 0.9em;
987 .tag_cloud .s1 {
988     font-size: 0.8em;
991 .tag_cloud .s0 {
992     font-size: 0.7em;
995 .tag_list ul {
996     display: inline;
999 .tag_list.hideoverlimit .overlimit {
1000     display: none;
1003 .tag_list .tagmorelink {
1004     display: none;
1007 .tag_list.hideoverlimit .tagmorelink {
1008     display: inline;
1011 .tag_list.hideoverlimit .taglesslink {
1012     display: none;
1015 /**
1016 * Web Service
1017 */
1018 #webservice-doc-generator td {
1019     text-align: left;
1020     border: 0 solid black;
1023 /**
1024 * Enrol
1025 */
1026 .userenrolment {
1027     width: 100%;
1028     border-collapse: collapse;
1031 .userenrolment tr {
1032     vertical-align: top;
1035 .userenrolment td {
1036     padding: 0;
1037     height: 41px;
1040 .userenrolment .subfield {
1041     margin-right: 5px;
1044 .userenrolment .col_userdetails .subfield {
1045     margin-left: 40px;
1048 .userenrolment .col_userdetails .subfield_picture {
1049     float: left;
1050     margin-left: 0;
1053 .userenrolment .col_lastseen {
1054     width: 150px;
1057 .userenrolment .col_role {
1058     width: 262px;
1061 .userenrolment .col_role .roles,
1062 .userenrolment .col_group .groups {
1063     margin-right: 30px;
1066 .userenrolment .col_role .role {
1067     float: left;
1068     padding: 0 3px 3px;
1069     margin: 0 3px 3px;
1070     white-space: nowrap;
1073 .userenrolment .col_group .group {
1074     float: left;
1075     padding: 3px;
1076     margin: 3px;
1077     white-space: nowrap;
1080 .userenrolment .col_role .role a,
1081 .userenrolment .col_group .group a {
1082     margin-left: 3px;
1083     cursor: pointer;
1086 .userenrolment .col_role .addrole,
1087 .userenrolment .col_group .addgroup {
1088     float: right;
1089     padding: 3px;
1090     margin: 3px;
1092     > a:hover {
1093         border-bottom: 1px solid #666;
1094     }
1097 .userenrolment .col_role .addrole img,
1098 .userenrolment .col_group .addgroup img {
1099     vertical-align: baseline;
1102 .userenrolment .hasAllRoles .col_role .addrole {
1103     display: none;
1106 .userenrolment .col_enrol .enrolment {
1107     float: left;
1108     padding: 0 3px 3px;
1109     margin: 0 3px 3px;
1112 .userenrolment .col_enrol .enrolment a {
1113     float: right;
1114     margin-left: 3px;
1117 .corelightbox {
1118     background-color: #ccc;
1119     position: absolute;
1120     top: 0;
1121     left: 0;
1122     width: 100%;
1123     height: 100%;
1124     text-align: center;
1127 .corelightbox img {
1128     position: fixed;
1129     top: 50%;
1130     left: 50%;
1133 .mod-indent-outer {
1134     display: table;
1137 .mod-indent {
1138     display: table-cell;
1141 .label .mod-indent {
1142     float: left;
1143     padding-top: 20px;
1146 @include media-breakpoint-up(sm) {
1147     $mod-indent-size: 30px;
1148     /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1150     @for $i from 1 through 16 {
1151         $width: ($i * $mod-indent-size);
1153         .mod-indent-#{$i} {
1154             width: $width;
1155         }
1156     }
1158     .mod-indent-huge {
1159         width: (16 * $mod-indent-size);
1160     }
1163 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1164 .resourcecontent .mediaplugin_mp3 object {
1165     height: 25px;
1166     width: 600px;
1169 .resourcecontent audio.mediaplugin_html5audio {
1170     width: 600px;
1172 /** Large resource images should avoid hidden overflow **/
1173 .resourceimage {
1174     max-width: 100%;
1176 /* Audio player size in 'inline' mode (can only change width, as above) */
1177 .mediaplugin_mp3 object {
1178     height: 15px;
1179     width: 300px;
1182 audio.mediaplugin_html5audio {
1183     width: 300px;
1185 /* TinyMCE moodle media preview frame should not have padding */
1186 .core_media_preview.pagelayout-embedded #content {
1187     padding: 0;
1190 .core_media_preview.pagelayout-embedded #maincontent {
1191     height: 0;
1194 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1195     padding: 0;
1196     margin: 0;
1197     min-width: 0;
1198     background: none;
1201 .path-rating .ratingtable {
1202     width: 100%;
1203     margin-bottom: 1em;
1206 .path-rating .ratingtable th.rating {
1207     width: 100%;
1210 .path-rating .ratingtable td.rating,
1211 .path-rating .ratingtable td.time {
1212     white-space: nowrap;
1213     text-align: center;
1216 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1217 .moodle-dialogue-base .moodle-dialogue-lightbox {
1218     background-color: $gray;
1221 // Prevent adding backdrops to popups in popups.
1222 .pagelayout-popup {
1223     .moodle-dialogue-base {
1224         .moodle-dialogue-lightbox {
1225             background-color: transparent;
1226         }
1227         .moodle-dialogue {
1228             box-shadow: $popover-box-shadow;
1229         }
1230     }
1233 .moodle-dialogue-base .hidden,
1234 .moodle-dialogue-base .moodle-dialogue-hidden {
1235     display: none;
1238 .no-scrolling {
1239     overflow: hidden;
1242 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1243     left: 0;
1244     top: 0;
1245     right: 0;
1246     bottom: -50px;
1247     position: fixed;
1250 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1251     overflow: auto;
1254 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1255     width: 28px;
1256     height: 16px;
1257     background-size: 100%;
1260 .moodle-dialogue-base .moodle-dialogue-wrap {
1261     background-color: #fff;
1262     border: 1px solid #ccc;
1265 // Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1266 // it for a reason (conflicts with jquery .show()).
1267 .modal.show {
1268     display: block;
1271 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1272     display: flex;
1273     padding: 1rem 1rem;
1274     border-bottom: 1px solid #dee2e6;
1277 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1278     // Undo some YUI damage.
1279     min-height: 3rem;
1280     color: initial;
1281     background: initial;
1282     font-size: 1.5rem;
1283     line-height: 1.5;
1286 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1287     font-size: 1.5rem;
1290 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1291     /*rtl:raw:
1292         left: 0;
1293         right: auto;
1294     */
1295     padding: 0;
1296     position: relative;
1297     margin-left: auto;
1300 .moodle-dialogue-base .closebutton {
1301     padding: $modal-header-padding;
1302     margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
1303     position: relative;
1304     background-color: transparent;
1305     border: 0;
1306     background-image: none;
1307     box-shadow: none;
1308     opacity: 0.7;
1309     &:hover,
1310     &:active {
1311         opacity: 1;
1312     }
1313     &::after {
1314         content: "×";
1315     }
1318 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1319     padding: 0.5rem;
1320     body {
1321         background-color: $body-bg;
1322     }
1325 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1326     overflow: auto;
1327     position: absolute;
1328     top: 0;
1329     bottom: 50px;
1330     left: 0;
1331     right: 0;
1332     margin: 0;
1333     border: 0;
1336 .moodle-dialogue-exception .moodle-exception-param label {
1337     font-weight: bold;
1340 .moodle-dialogue-exception .param-stacktrace label {
1341     background-color: #eee;
1342     border: 1px solid #ccc;
1343     border-bottom-width: 0;
1346 .moodle-dialogue-exception .param-stacktrace pre {
1347     border: 1px solid #ccc;
1348     background-color: #fff;
1351 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1352     color: navy;
1353     font-size: $font-size-sm;
1356 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1357     color: map-get($theme-colors, 'warning');
1358     font-size: $font-size-sm;
1361 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1362     color: #333;
1363     font-size: 90%;
1364     border-bottom: 1px solid #eee;
1367 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1368     display: none;
1371 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1372     // Undo some YUI damage.
1373     background: initial;
1376 .moodle-dialogue-confirm .confirmation-message {
1377     margin: 0.5rem 0;
1380 .moodle-dialogue-confirm .confirmation-dialogue input {
1381     min-width: 80px;
1384 .moodle-dialogue-exception .moodle-exception-message {
1385     margin: 1em;
1388 .moodle-dialogue-exception .moodle-exception-param {
1389     margin-bottom: 0.5em;
1392 .moodle-dialogue-exception .moodle-exception-param label {
1393     width: 150px;
1396 .moodle-dialogue-exception .param-stacktrace label {
1397     display: block;
1398     margin: 0;
1399     padding: 4px 1em;
1402 .moodle-dialogue-exception .param-stacktrace pre {
1403     display: block;
1404     height: 200px;
1405     overflow: auto;
1408 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1409     display: inline-block;
1410     margin: 4px 0;
1413 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1414     display: inline-block;
1415     width: 50px;
1416     margin: 4px 1em;
1419 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1420     padding-left: 25px;
1421     margin-bottom: 4px;
1422     padding-bottom: 4px;
1425 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1426     opacity: 0.75;
1427     width: 100%;
1428     height: 100%;
1429     top: 0;
1430     left: 0;
1431     background-color: white;
1432     text-align: center;
1433     padding: 10% 0;
1435 /* Apply a default max-height on tooltip text */
1436 .moodle-dialogue .tooltiptext {
1437     max-height: 300px;
1440 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1441     z-index: 3001;
1443     .moodle-dialogue-bd {
1444         overflow: auto;
1445     }
1448 /**
1449  * Chooser Dialogues (moodle-core-chooserdialogue)
1450  *
1451  * This CSS belong to the chooser dialogue which should work both with, and
1452  * without javascript enabled
1453  */
1454 /* Hide the dialog and it's title */
1455 .chooserdialoguebody,
1456 .choosertitle {
1457     display: none;
1460 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1461     margin: 0;
1464 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1465     padding: 0;
1466     background: #f2f2f2;
1468     @include border-bottom-radius(10px);
1470 /* Center the submit buttons within the area */
1471 .choosercontainer #chooseform .submitbuttons {
1472     padding: 0.7em 0;
1473     text-align: right;
1475 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1477 @media (max-height: 639px) {
1478     .ios .choosercontainer #chooseform .submitbuttons {
1479         padding: 45px 0;
1480     }
1483 .choosercontainer #chooseform .submitbuttons input {
1484     min-width: 100px;
1485     margin: 0 0.5em;
1487 /* Various settings for the options area */
1488 .choosercontainer #chooseform .options {
1489     position: relative;
1490     border-bottom: 1px solid #bbb;
1492 /* Only set these options if we're showing the js container */
1493 .jschooser .choosercontainer #chooseform .alloptions {
1494     overflow-x: hidden;
1495     overflow-y: auto;
1496     max-width: 240px;
1498     .option {
1499         input[type=radio] {
1500             display: inline-block;
1501         }
1503         .typename {
1504             display: inline-block;
1505             width: 55%;
1506         }
1507     }
1509 /* Settings for option rows and option subtypes */
1510 .choosercontainer #chooseform .moduletypetitle,
1511 .choosercontainer #chooseform .option,
1512 .choosercontainer #chooseform .nonoption {
1513     margin-bottom: 0;
1514     padding: 0 1.6em 0 1.6em;
1517 .choosercontainer #chooseform .moduletypetitle {
1518     text-transform: uppercase;
1519     padding-top: 1.2em;
1520     padding-bottom: 0.4em;
1521     margin-bottom: 0.5rem;
1522     font-size: 100%;
1525 .choosercontainer #chooseform .option .typename,
1526 .choosercontainer #chooseform .nonoption .typename {
1527     padding: 0 0 0 0.5em;
1530 .choosercontainer #chooseform .modicon + .typename {
1531     padding-left: 0;
1534 .choosercontainer #chooseform .option input[type=radio],
1535 .choosercontainer #chooseform .option span.typename {
1536     vertical-align: middle;
1539 .choosercontainer #chooseform .option label {
1540     display: block;
1541     margin: 0;
1542     padding: ($spacer / 2) 0;
1543     border-bottom: 1px solid #fff;
1546 .choosercontainer #chooseform .option .icon {
1547     margin: 0;
1548     padding: 0 $spacer;
1551 .choosercontainer #chooseform .nonoption {
1552     padding-left: 2.7em;
1553     padding-top: 0.3em;
1554     padding-bottom: 0.1em;
1557 .choosercontainer #chooseform .subtype {
1558     margin-bottom: 0;
1559     padding: 0 1.6em 0 3.2em;
1562 .choosercontainer #chooseform .subtype .typename {
1563     margin: 0 0 0 0.2em;
1565 /* The instruction/help area */
1566 .jschooser .choosercontainer #chooseform .instruction,
1567 .jschooser .choosercontainer #chooseform .typesummary {
1568     display: none;
1569     position: absolute;
1570     top: 0;
1571     right: 0;
1572     bottom: 0;
1573     left: 240px;
1574     margin: 0;
1575     padding: 1.6em;
1576     background-color: #fff;
1577     overflow-x: hidden;
1578     overflow-y: auto;
1579     line-height: 2em;
1581 /* Selected option settings */
1582 .jschooser .choosercontainer #chooseform .instruction,
1583 .choosercontainer #chooseform .selected .typesummary {
1584     display: block;
1587 .choosercontainer #chooseform .selected {
1588     background-color: #fff;
1589     margin-top: -1px;
1590     padding-top: 1px;
1594 @include media-breakpoint-down(xs) {
1595     .jsenabled .choosercontainer #chooseform .alloptions {
1596         max-width: 100%;
1597     }
1599     .jsenabled .choosercontainer #chooseform .instruction,
1600     .jsenabled .choosercontainer #chooseform .typesummary {
1601         position: static;
1602     }
1605 /**
1606  * Module chooser dialogue (moodle-core-chooserdialogue)
1607  *
1608  * This CSS belong to the chooser dialogue which should work both with, and
1609  * without javascript enabled
1610  */
1611 .modchooser .modal-body {
1612     padding: 0;
1613     overflow-y: auto;
1614     min-height: 640px;
1615     display: flex;
1616     flex-direction: column;
1618     .searchresultitemscontainer-wrapper {
1619         min-height: 495px;
1620     }
1622     .carousel-item.active {
1623         display: flex;
1624     }
1625     .chooser-container {
1626         display: flex;
1627         flex-direction: column;
1628         flex: 1 1 auto;
1629     }
1631     .loading-icon {
1632         opacity: 1;
1633         .icon {
1634             display: block;
1635             font-size: 3em;
1636             height: 1em;
1637             width: 1em;
1638         }
1639     }
1640     .carousel-item .loading-icon .icon {
1641         margin: 1em auto;
1642     }
1645 .modchooser .modal-footer {
1646     height: 70px;
1647     background: $modal-content-bg;
1648     .moodlenet-logo {
1649         .icon {
1650             height: 2.5rem;
1651             width: 6rem;
1652             margin-bottom: .6rem;
1653         }
1654     }
1657 .modchoosercontainer.noscroll {
1658     overflow-y: hidden;
1661 .modchooser .searchcontainer .searchbar .input-group-append {
1662     align-items: center;
1664     i {
1665         color: #868e96;
1666         margin: 0;
1667         vertical-align: middle;
1668         font-size: 20px;
1669         height: 20px;
1670         width: 20px;
1671     }
1674 .modchoosercontainer .optionscontainer,
1675 .modchoosercontainer .searchresultitemscontainer {
1676     overflow-x: hidden;
1677     .option {
1678         // 2 items per line.
1679         flex-basis: calc(50% - 0.5rem);
1680         .optionactions {
1681             .optionaction {
1682                 cursor: pointer;
1683                 color: $gray-600;
1684                 i {
1685                     margin: 0;
1686                 }
1687             }
1688         }
1689         .optioninfo {
1690             a {
1691                 color: $gray-700;
1692                 &:hover {
1693                     text-decoration: none;
1694                 }
1695             }
1696         }
1697     }
1700 .modchooser .modal-body .optionsummary {
1701     background-color: $white;
1702     overflow-x: hidden;
1703     overflow-y: auto;
1704     height: 640px;
1706     .content {
1707         overflow-y: auto;
1708         .heading {
1709             .icon {
1710                 height: 32px;
1711                 width: 32px;
1712                 font-size: 32px;
1713                 padding: 0;
1714             }
1715         }
1716     }
1718     .actions {
1719         border-top: 1px solid $gray-300;
1720         background: $white;
1721     }
1724 @include media-breakpoint-down(xs) {
1725     .path-course-view .modal-dialog.modal-lg,
1726     .path-course-view .modal-content,
1727     .modchooser .modal-body,
1728     .modchooser .modal-body .carousel,
1729     .modchooser .modal-body .carousel-inner,
1730     .modchooser .modal-body .carousel-item,
1731     .modchooser .modal-body .optionsummary,
1732     .modchoosercontainer,
1733     .optionscontainer,
1734     .searchresultitemscontainer {
1735         min-height: auto;
1736         height: 100%;
1737         overflow-y: auto;
1738     }
1739     .path-course-view .modal-dialog.modal-lg {
1740         margin: 0;
1741     }
1742     .modchooser .modal-body .searchresultitemscontainer-wrapper {
1743         min-height: auto;
1744     }
1747 @include media-breakpoint-up(sm) {
1748     .modchoosercontainer .optionscontainer .option,
1749     .modchoosercontainer .searchresultitemscontainer .option {
1750         // Three items per line.
1751         flex-basis: calc(33.33% - 0.5rem);
1752     }
1755 @include media-breakpoint-up(lg) {
1756     .modchoosercontainer .optionscontainer .option,
1757     .modchoosercontainer .searchresultitemscontainer .option {
1758         // Six items per line.
1759         flex-basis: calc(16.66% - 0.5rem);
1760     }
1763 /* Form element: listing */
1764 .formlistingradio {
1765     padding-bottom: 25px;
1766     padding-right: 10px;
1769 .formlistinginputradio {
1770     float: left;
1773 .formlistingmain {
1774     min-height: 225px;
1777 .formlisting {
1778     position: relative;
1779     margin: 15px 0;
1780     padding: 1px 19px 14px;
1781     background-color: white;
1782     border: 1px solid #ddd;
1784     @include border-radius(4px);
1787 .formlistingmore {
1788     position: absolute;
1789     cursor: pointer;
1790     bottom: -1px;
1791     right: -1px;
1792     padding: 3px 7px;
1793     font-size: 12px;
1794     font-weight: bold;
1795     background-color: whitesmoke;
1796     border: 1px solid #ddd;
1797     color: #9da0a4;
1799     @include border-radius(4px 0 4px 0);
1802 .formlistingall {
1803     margin: 15px 0;
1804     padding: 0;
1806     @include border-radius(4px);
1809 .formlistingrow {
1810     cursor: pointer;
1811     border-bottom: 1px solid;
1812     border-color: #e1e1e8;
1813     border-left: 1px solid #e1e1e8;
1814     border-right: 1px solid #e1e1e8;
1815     background-color: #f7f7f9;
1817     @include border-radius(0 0 4px 4px);
1818     padding: 6px;
1819     top: 50%;
1820     left: 50%;
1821     min-height: 34px;
1822     float: left;
1823     width: 150px;
1826 body.jsenabled .formlistingradio {
1827     display: none;
1830 body.jsenabled .formlisting {
1831     display: block;
1834 a.criteria-action {
1835     padding: 0 3px;
1836     float: right;
1839 div.criteria-description {
1840     padding: 10px 15px;
1841     margin: 5px 0;
1842     background: none repeat scroll 0 0 #f9f9f9;
1843     border: 1px solid #eee;
1846 ul.badges {
1847     margin: 0;
1848     list-style: none;
1851 .badges li {
1852     position: relative;
1853     display: inline-block;
1854     padding-top: 1em;
1855     text-align: center;
1856     vertical-align: top;
1857     width: 150px;
1860 .badges li .badge-name {
1861     display: block;
1862     padding: 5px;
1865 .badges li > img {
1866     position: absolute;
1869 .badges li .badge-image {
1870     width: 100px;
1871     height: 100px;
1872     left: 10px;
1873     top: 0;
1874     z-index: 1;
1877 .badges li .badge-actions {
1878     position: relative;
1881 .badges li .expireimage {
1882     width: 100px;
1883     height: 100px;
1884     left: 25px;
1885     top: 0;
1886     position: absolute;
1887     z-index: 10;
1888     opacity: 0.85;
1891 #badge-image {
1892     background-color: transparent;
1893     padding: 0;
1894     position: relative;
1895     min-width: 100px;
1896     width: 20%;
1897     display: inline-block;
1898     vertical-align: top;
1899     margin-top: 17px;
1900     margin-bottom: 20px;
1902     .expireimage {
1903         width: 100px;
1904         height: 100px;
1905         left: 0;
1906         top: 0;
1907         opacity: 0.85;
1908         position: absolute;
1909         z-index: 10;
1910     }
1912     .singlebutton {
1913         padding-top: 5px;
1914         display: block;
1916         button {
1917             margin-left: 4px;
1918         }
1919     }
1922 #badge-details {
1923     display: inline-block;
1924     width: 79%;
1927 #badge-overview dl,
1928 #badge-details dl {
1929     margin: 0;
1931     dt,
1932     dd {
1933         vertical-align: top;
1934         padding: 3px 0;
1935     }
1937     dt {
1938         clear: both;
1939         display: inline-block;
1940         width: 20%;
1941         min-width: 100px;
1942     }
1944     dd {
1945         display: inline-block;
1946         width: 79%;
1947         margin-left: 1%;
1948     }
1951 .badge-profile {
1952     vertical-align: top;
1955 .connected {
1956     color: map-get($theme-colors, 'success');
1959 .notconnected {
1960     color: map-get($theme-colors, 'danger');
1963 .connecting {
1964     color: map-get($theme-colors, 'warning');
1967 #page-badges-award .recipienttable tr td {
1968     vertical-align: top;
1971 #page-badges-award .recipienttable tr td.actions .actionbutton {
1972     margin: 0.3em 0;
1973     padding: 0.5em 0;
1974     width: 100%;
1977 #page-badges-award .recipienttable tr td.existing,
1978 #page-badges-award .recipienttable tr td.potential {
1979     width: 42%;
1982 #issued-badge-table .activatebadge {
1983     display: inline-block;
1986 .statusbox.active {
1987     background-color: $state-success-bg;
1990 .statusbox.inactive {
1991     background-color: $state-warning-bg;
1994 .statusbox {
1995     text-align: center;
1996     margin-bottom: 5px;
1997     padding: 5px;
2000 .statusbox .activatebadge {
2001     display: inline-block;
2004 .statusbox .activatebadge input[type=submit] {
2005     margin: 3px;
2008 .activatebadge {
2009     margin: 0;
2010     text-align: left;
2011     vertical-align: middle;
2014 img#persona_signin {
2015     cursor: pointer;
2018 .addcourse {
2019     float: right;
2022 .invisiblefieldset {
2023     display: inline;
2024     padding: 0;
2025     border-width: 0;
2028 /** Page header */
2029 #page-header {
2030     .logo {
2031         margin: $spacer 0;
2032         img {
2033             max-height: 75px;
2034         }
2035     }
2038 /** Navbar logo. */
2039 nav.navbar .logo img {
2040     max-height: 35px;
2043 /** Header-bar styles **/
2044 .page-context-header {
2045     // We need to be explicit about the height of the header.
2046     $pageHeaderHeight: 140px;
2048     // Do not remove these rules.
2049     overflow: hidden;
2050     padding: 0.25rem;
2052     .page-header-image,
2053     .page-header-headings {
2054         float: left;
2055         display: block;
2056         position: relative;
2057     }
2059     .page-header-image {
2060         margin-right: 1em;
2061         margin-bottom: 1em;
2062         & > a {
2063             display: inline-block;
2064         }
2065     }
2067     .page-header-headings,
2068     .header-button-group {
2069         position: relative;
2070         line-height: 24px;
2071         vertical-align: middle;
2072     }
2074     .header-button-group {
2075         display: block;
2076         float: left;
2077     }
2080 ul.dragdrop-keyboard-drag li {
2081     list-style-type: none;
2084 a.disabled:hover,
2085 a.disabled {
2086     text-decoration: none;
2087     cursor: default;
2088     font-style: italic;
2089     color: #808080;
2092 body.lockscroll {
2093     height: 100%;
2094     overflow: hidden;
2097 .progressbar_container {
2098     max-width: 500px;
2099     margin: 0 auto;
2102 /* IE10 only fix for calendar titling */
2103 .ie10 .yui3-calendar-header-label {
2104     display: inline-block;
2107 dd:before,
2108 dd:after {
2109     display: block;
2110     content: " ";
2113 dd:after {
2114     clear: both;
2117 // Active tabs with links should have a different
2118 // cursor to indicate they are clickable.
2119 .nav-tabs > .active > a[href],
2120 .nav-tabs > .active > a[href]:hover,
2121 .nav-tabs > .active > a[href]:focus {
2122     cursor: pointer;
2125 .inplaceeditable {
2126     &.inplaceeditingon {
2127         position: relative;
2129         .editinstructions {
2130             margin-top: -30px;
2131             font-weight: normal;
2132             margin-right: 0;
2133             margin-left: 0;
2134             left: 0;
2135             right: auto;
2136             white-space: nowrap;
2137         }
2138         @include media-breakpoint-up(sm) {
2139             input {
2140                 width: 330px;
2141                 vertical-align: text-bottom;
2142                 margin-bottom: 0;
2143             }
2144         }
2146         select {
2147             margin-bottom: 0;
2148         }
2149     }
2151     .quickediticon img {
2152         opacity: 0.2;
2153     }
2155     .quickeditlink {
2156         color: inherit;
2157         text-decoration: inherit;
2158     }
2160     &:hover .quickeditlink .quickediticon img,
2161     .quickeditlink:focus .quickediticon img {
2162         opacity: 1;
2163     }
2165     &.inplaceeditable-toggle .quickediticon {
2166         display: none;
2167     }
2169     &.inplaceeditable-autocomplete {
2170         display: block;
2171     }
2174 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2175     margin-top: -20px;
2178 /** Chart area. */
2179 .chart-area {
2181     .chart-table-data {
2182         display: none;
2183     }
2185     .chart-table {
2186         .chart-output-htmltable caption {
2187             white-space: nowrap;
2188         }
2189         /** When accessible, we display the table only. */
2190         &.accesshide {
2191             .chart-table-expand {
2192                 display: none;
2193             }
2194             .chart-table-data {
2195                 display: block;
2196             }
2197         }
2198     }
2201 // Reset for ul.
2202 ul {
2203     padding-left: 1rem;
2206 /* YUI 2 Tree View */
2207 /*rtl:raw:
2208 .ygtvtn,
2209 .ygtvtm,
2210 .ygtvtmh,
2211 .ygtvtmhh,
2212 .ygtvtp,
2213 .ygtvtph,
2214 .ygtvtphh,
2215 .ygtvln,
2216 .ygtvlm,
2217 .ygtvlmh,
2218 .ygtvlmhh,
2219 .ygtvlp,
2220 .ygtvlph,
2221 .ygtvlphh,
2222 .ygtvdepthcell,
2223 .ygtvok,
2224 .ygtvok:hover,
2225 .ygtvcancel,
2226 .ygtvcancel:hover {
2227     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
2229 */
2231 .hover-tooltip-container {
2232     position: relative;
2234     .hover-tooltip {
2235         opacity: 0;
2236         visibility: hidden;
2237         position: absolute;
2238         /*rtl:ignore*/
2239         left: 50%;
2240         top: calc(-50% - 5px);
2241         transform: translate(-50%, -50%);
2242         background-color: #fff;
2243         border: 1px solid rgba(0, 0, 0, .2);
2244         border-radius: .3rem;
2245         box-sizing: border-box;
2246         padding: 5px;
2247         white-space: nowrap;
2248         transition: opacity 0.15s, visibility 0.15s;
2249         z-index: 1000;
2251         &:before {
2252             content: '';
2253             display: inline-block;
2254             border-left: 8px solid transparent;
2255             border-right: 8px solid transparent;
2256             border-top: 8px solid rgba(0, 0, 0, .2);
2257             position: absolute;
2258             bottom: -8px;
2259             left: calc(50% - 8px);
2260         }
2262         &:after {
2263             content: '';
2264             display: inline-block;
2265             border-left: 7px solid transparent;
2266             border-right: 7px solid transparent;
2267             border-top: 7px solid #fff;
2268             position: absolute;
2269             bottom: -6px;
2270             left: calc(50% - 7px);
2271             z-index: 2;
2272         }
2273     }
2275     &:hover {
2276         .hover-tooltip {
2277             opacity: 1;
2278             visibility: visible;
2279             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2280         }
2281     }
2284 #region-flat-nav {
2285     padding-right: 0;
2286     padding-left: 0;
2287     .nav {
2288         margin-right: $grid-gutter-width / 2;
2289         background-color: $card-bg;
2290     }
2291     @include media-breakpoint-down(sm) {
2292         .nav {
2293             margin-top: $grid-gutter-width;
2294             margin-right: 0;
2295         }
2296     }
2299 // Footer link colour was added to allow the colour of footer links to be changed,
2300 // but really in bootstrap we want the colour of links on .bg-inverse to be changed
2301 // rather than being specific to the footer. This is kept for backwards compatibility.
2302 $footer-link-color: $bg-inverse-link-color !default;
2303 #page-footer a {
2304     color: $footer-link-color;
2305     text-decoration: underline;
2306     .icon {
2307         color: $footer-link-color;
2308     }
2309     &:focus .icon {
2310         color: $body-color;
2311     }
2314 .bg-inverse a {
2315     color: $bg-inverse-link-color;
2316     text-decoration: underline;
2317     .icon {
2318         color: $bg-inverse-link-color;
2319     }
2322 .sitelink {
2323     img {
2324         width: 112px;
2325     }
2328 // Make links in a menu clickable anywhere in the row.
2329 .dropdown-item a {
2330     display: block;
2331     width: 100%;
2332     color: $body-color;
2334 .dropdown-item:active a {
2335     color: $dropdown-link-active-color;
2338 .competency-tree {
2339     ul {
2340         padding-left: 1.5rem;
2341     }
2344 .sr-only-focusable {
2345     &:active,
2346     &:focus {
2347         z-index: $zindex-navbar-fixed + 1;
2348         position: fixed;
2349         background: #fff;
2350         padding: 7px;
2351         left: 0;
2352         top: 0;
2353     }
2356 [data-drag-type="move"] {
2357     cursor: move;
2358     touch-action: none;
2361 .clickable {
2362     cursor: pointer;
2365 .overlay-icon-container {
2366     position: absolute;
2367     top: 0;
2368     left: 0;
2369     width: 100%;
2370     height: 100%;
2371     background-color: rgba(255, 255, 255, 0.6);
2373     .loading-icon {
2374         position: absolute;
2375         top: 50%;
2376         left: 50%;
2377         transform: translate(-50%, -50%);
2379         .icon {
2380             height: 30px;
2381             width: 30px;
2382             font-size: 30px;
2383         }
2384     }
2387 .open.atto_menu > .dropdown-menu {
2388     display: block;
2390 div.editor_atto_toolbar button .icon {
2391     color: $gray-700;
2393 .w-auto {
2394     width: auto;
2397 .bg-pulse-grey {
2398     animation: bg-pulse-grey 2s infinite linear;
2401 @keyframes bg-pulse-grey {
2402     0% {
2403         background-color: $gray-100;
2404     }
2405     50% {
2406         background-color: darken($gray-100, 5%);
2407     }
2408     100% {
2409         background-color: $gray-100;
2410     }
2413 @each $size, $length in $spacers {
2414     .line-height-#{$size} {
2415         line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2416     }
2419 .dir-rtl {
2420     .dir-rtl-hide {
2421         display: none;
2422     }
2425 .dir-ltr {
2426     .dir-ltr-hide {
2427         display: none;
2428     }
2431 .paged-content-page-container {
2432     min-height: 3.125rem;
2435 body.h5p-embed {
2436     #page-content {
2437         display: inherit;
2438     }
2439     #maincontent {
2440         display: none;
2441     }
2442     .h5pmessages {
2443         min-height: 230px; // This should be the same height as default core_h5p iframes.
2444     }
2447 .text-decoration-none {
2448     text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
2451 .colour-inherit {
2452     color: inherit !important; /* stylelint-disable-line declaration-no-important */
2455 .position-right {
2456     right: 0 !important; /* stylelint-disable-line declaration-no-important */
2459 .overflow-hidden {
2460     overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
2463 .text-break {
2464     overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
2467 .z-index-0 {
2468     z-index: 0 !important; /* stylelint-disable-line declaration-no-important */
2471 .z-index-1 {
2472     z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
2475 // These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
2476 .float-left {
2477     float: left !important; /* stylelint-disable-line declaration-no-important */
2479 .float-right {
2480     float: right !important; /* stylelint-disable-line declaration-no-important */
2483 .clamp-2 {
2484     display: -webkit-box;
2485     -webkit-box-orient: vertical;
2486     -webkit-line-clamp: 2;
2487     overflow: hidden;
2490 .word-break-all {
2491     word-break: break-all;
2494 .matchtext {
2495     background-color: lighten($primary, 40%);
2496     color: $body-color;
2497     height: 1.5rem;
2500 .border-radius {
2501     @if $enable-rounded {
2502         @include border-radius($card-border-radius);
2503     }
2506 // Emoji picker.
2507 $picker-width: 350px !default;
2508 $picker-width-xs: 320px !default;
2509 $picker-height: 400px !default;
2510 $picker-row-height: 40px !default;
2511 $picker-emoji-button-size: 40px !default;
2512 $picker-emoji-button-font-size: 24px !default;
2513 $picker-emoji-category-count: 9 !default;
2514 $picker-emojis-per-row: 7 !default;
2516 .emoji-picker {
2517     width: $picker-width;
2518     height: $picker-height;
2520     .category-button {
2521         padding: .375rem 0;
2522         height: 100%;
2523         width: $picker-width / $picker-emoji-category-count;
2524         border-top: none;
2525         border-left: none;
2526         border-right: none;
2527         border-bottom: 2px solid transparent;
2529         &.selected {
2530             border-bottom: 2px solid map-get($theme-colors, 'primary');
2531         }
2532     }
2534     .emojis-container,
2535     .search-results-container {
2536         min-width: $picker-emojis-per-row * $picker-emoji-button-size;
2537     }
2539     .picker-row {
2540         height: $picker-row-height;
2542         .category-name {
2543             line-height: $picker-row-height;
2544         }
2546         .emoji-button {
2547             height: $picker-emoji-button-size;
2548             width: $picker-emoji-button-size;
2549             line-height: $picker-emoji-button-size;
2550             font-size: $picker-emoji-button-font-size;
2551             overflow: hidden;
2553             @include hover-focus {
2554                 color: inherit;
2555                 text-decoration: none;
2556             }
2557         }
2558     }
2560     .emoji-preview {
2561         height: $picker-row-height;
2562         font-size: $picker-row-height;
2563         line-height: $picker-row-height;
2564     }
2566     .emoji-short-name {
2567         line-height: $picker-row-height / 2;
2568     }
2570     @include media-breakpoint-down(xs) {
2571         width: $picker-width-xs;
2572     }
2575 .emoji-auto-complete {
2576     height: $picker-row-height;
2578     .btn.btn-link.btn-icon.emoji-button {
2579         height: $picker-emoji-button-size;
2580         width: $picker-emoji-button-size;
2581         line-height: $picker-emoji-button-size;
2582         font-size: $picker-emoji-button-font-size;
2584         &.active {
2585             background-color: $gray-200;
2586         }
2587     }
2590 .toast-wrapper {
2591     max-width: $toast-max-width;
2592     max-height: 0;
2593     // Place these above any modals and other elements.
2594     z-index: 1051;
2596     > :first-child {
2597         margin-top: $spacer;
2598     }
2601 @each $color, $value in $theme-colors {
2602     .alert-#{$color} a {
2603         color: darken(theme-color-level($color, $alert-color-level), 10%);
2604     }
2607 @include media-breakpoint-down(sm) {
2608     #page-navbar {
2609         width: 100%;
2610     }
2612     .breadcrumb:not(:empty) {
2613         width: 100%;
2614         border: ($border-width * 2) solid $gray-200;
2615         padding: $spacer / 4;
2616         margin-bottom: $spacer / 2;
2617         .breadcrumb-item {
2618             padding-top: $spacer / 3;
2619             padding-bottom: $spacer / 3;
2620             display: inline-block;
2621         }
2622     }
2624     .mform {
2625         width: 100%;
2626         padding-right: 15px;
2627         padding-left: 15px;
2628     }
2629     .pagination {
2630         flex-wrap: wrap;
2631         justify-content: center;
2632     }
2633     .custom-select {
2634         max-width: 100%;
2635     }
2636     .card .card-body {
2637         padding: $card-spacer-x / 2;
2638     }
2639     #page-header {
2640         .card {
2641             border: 0;
2642             .card-body {
2643                 padding: 0;
2644             }
2645         }
2646     }
2647     .nav-tabs,
2648     .nav-pills {
2649         margin: 0;
2650         border: 0;
2651         padding: $spacer / 8;
2652         background-color: $gray-200;
2653         .nav-item {
2654             flex: 1 1 auto;
2655             text-align: center;
2656         }
2657         .nav-link {
2658             background: $white;
2659             border: 0;
2660             margin: $spacer / 8;
2661             &.active {
2662                 @include button-outline-variant($gray-600);
2663                 border-color: $gray-600;
2664             }
2665         }
2666     }
2669 @media (max-width: map-get($grid-breakpoints, "sm")) and (max-height: 320px) {
2670     div#page {
2671         margin-top: 0;
2672     }
2673     .navbar.fixed-top {
2674         position: relative;
2675         z-index: inherit;
2676     }
2679 .link-underline {
2680     text-decoration: underline;
2681     &:focus {
2682         text-decoration: none;
2683     }
2686 .alert.cta {
2687     .icon {
2688         padding: 0.3rem;
2689         &.fa {
2690             border-radius: 50%;
2691             border-style: solid;
2692             border-width: 0.125rem;
2693         }
2694     }