MDL-68891 theme_boost: Fix go to top link position on horizontal scroll
[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 .usermenu,
183 div.dropdown-item {
184     a,
185     a[role="button"] {
186         outline: 0;
187         box-shadow: none;
188     }
189     &:focus-within {
190         outline: 0;
191         box-shadow: $input-btn-focus-box-shadow;
192     }
195 .unlist,
196 .unlist li,
197 .inline-list,
198 .inline-list li,
199 .block .list,
200 .block .list li,
201 .section li.activity,
202 .section li.movehere,
203 .tabtree li {
204     list-style: none;
205     margin: 0;
206     padding: 0;
209 .inline,
210 .inline-list li {
211     display: inline;
214 .notifytiny {
215     font-size: $font-size-xs;
218 .notifytiny li,
219 .notifytiny td {
220     font-size: 100%;
223 .red,
224 .notifyproblem {
225     color: map-get($theme-colors, 'warning');
228 .green,
229 .notifysuccess {
230     color: map-get($theme-colors, 'success');
233 .highlight {
234     color: map-get($theme-colors, 'info');
237 .fitem.advanced .text-info {
238     font-weight: bold;
241 .reportlink {
242     text-align: right;
245 a.autolink.glossary:hover {
246     cursor: help;
248 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
249 .collapsibleregioncaption {
250     white-space: nowrap;
251     min-height: $line-height-base * $font-size-base;
254 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
255     cursor: pointer;
258 .pagelayout-mydashboard #region-main {
259     border: 0;
260     padding: 0;
261     background-color: transparent;
262     margin-top: -1px;
265 @include media-breakpoint-down(sm) {
266     .pagelayout-mydashboard,
267     .pagelayout-login {
268         #region-main-box {
269             padding-left: 0;
270             padding-right: 0;
271         }
272     }
275 .collapsibleregioncaption img {
276     vertical-align: middle;
279 .jsenabled .hiddenifjs {
280     display: none;
283 .visibleifjs {
284     display: none;
287 .jsenabled .visibleifjs {
288     display: inline;
291 .jsenabled .collapsibleregion {
292     overflow: hidden;
293     box-sizing: content-box;
296 .jsenabled .collapsed .collapsibleregioninner {
297     visibility: hidden;
300 .collapsible-actions {
301     display: none;
302     text-align: right;
305 .jsenabled .collapsible-actions {
306     display: block;
309 .collapsible-actions .collapseexpand {
310     padding-left: 20px;
311     background: url([[pix:t/collapsed]]) 2px center no-repeat;
313 /*rtl:raw:
314 .collapsible-actions .collapseexpand {
315     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
317 */
318 .collapsible-actions .collapse-all {
319     background-image: url([[pix:t/expanded]]);
322 .yui-overlay .yui-widget-bd {
323     background-color: #ffee69;
324     border: 1px solid #a6982b;
325     border-top-color: #d4c237;
326     color: #000;
327     left: 0;
328     padding: 2px 5px;
329     position: relative;
330     top: 0;
331     z-index: 1;
334 .clearer {
335     background: transparent;
336     border-width: 0;
337     clear: both;
338     display: block;
339     height: 1px;
340     margin: 0;
341     padding: 0;
344 .bold,
345 .warning,
346 .errorbox .title,
347 .pagingbar .title,
348 .pagingbar .thispage {
349     font-weight: bold;
352 img.userpicture {
353     margin-right: 0.5rem;
356 img.resize {
357     height: 1em;
358     width: 1em;
361 .action-menu .dropdown-toggle {
362     text-decoration: none;
365 .action-menu {
366     white-space: nowrap;
369 .block img.resize {
370     height: 0.9em;
371     width: 0.8em;
373 /* Icon styles */
374 img.activityicon {
375     height: 24px;
376     width: 24px;
377     vertical-align: middle;
380 .headermain {
381     font-weight: bold;
384 #maincontent {
385     display: block;
386     height: 1px;
387     overflow: hidden;
390 img.uihint {
391     cursor: help;
394 #addmembersform table {
395     margin-left: auto;
396     margin-right: auto;
399 table.flexible .emptyrow {
400     display: none;
403 form.popupform,
404 form.popupform div {
405     display: inline;
408 .arrow_button input {
409     overflow: hidden;
411 .no-overflow {
412     overflow: auto;
415 // Minimum height required for a menu in a table inside a scrollable div.
416 // Position required for table sizing inside a flex container.
417 .no-overflow > .generaltable {
418     position: relative;
419     margin-bottom: 0;
420     min-height: 10em;
422 // Accessibility features
424 // Accessibility: text 'seen' by screen readers but not visual users.
425 .accesshide {
426     @include sr-only();
429 span.hide,
430 div.hide,
431 .hidden {
432     display: none;
434 // Accessibility: Skip block link, for keyboard-only users.
435 a.skip-block,
436 a.skip {
437     position: absolute;
438     top: -1000em;
439     font-size: 0.85em;
440     text-decoration: none;
443 a.skip-block:focus,
444 a.skip-block:active,
445 a.skip:focus,
446 a.skip:active {
447     position: static;
448     display: block;
451 .skip-block-to {
452     display: block;
453     height: 1px;
454     overflow: hidden;
456 // Blogs
457 .addbloglink {
458     text-align: center;
461 .blog_entry .audience {
462     text-align: right;
463     padding-right: 4px;
466 .blog_entry .tags {
467     margin-top: 15px;
470 .blog_entry .content {
471     margin-left: 43px;
473 // Group
475 #doc-contents h1 {
476     margin: 1em 0 0 0;
479 #doc-contents ul {
480     margin: 0;
481     padding: 0;
482     width: 90%;
485 #doc-contents ul li {
486     list-style-type: none;
489 .groupmanagementtable td {
490     vertical-align: top;
493 .groupmanagementtable #existingcell,
494 .groupmanagementtable #potentialcell {
495     width: 42%;
498 .groupmanagementtable #buttonscell {
499     width: 16%;
502 .groupmanagementtable #buttonscell p.arrow_button input {
503     width: auto;
504     min-width: 80%;
505     margin: 0 auto;
506     display: block;
509 .groupmanagementtable #removeselect_wrapper,
510 .groupmanagementtable #addselect_wrapper {
511     width: 100%;
514 .groupmanagementtable #removeselect_wrapper label,
515 .groupmanagementtable #addselect_wrapper label {
516     font-weight: normal;
519 #group-usersummary {
520     width: 14em;
523 .groupselector {
524     margin-top: 3px;
525     margin-bottom: 3px;
526     display: inline-block;
529 .groupselector label {
530     display: inline-block;
533 // Login
534 .login-page {
535     [name="username"] {
536         margin-bottom: -1px;
537         border-bottom-right-radius: 0;
538         border-bottom-left-radius: 0;
539     }
541     [type="password"] {
542         margin-bottom: 10px;
543         border-top-left-radius: 0;
544         border-top-right-radius: 0;
545     }
548 // Notes
549 .notepost {
550     margin-bottom: 1em;
553 .notepost .userpicture {
554     float: left;
555     margin-right: 5px;
558 .notepost .content,
559 .notepost .footer {
560     clear: both;
563 .notesgroup {
564     margin-left: 20px;
567 // My Moodle
568 .path-my .coursebox {
569     margin: $spacer-y 0;
570     padding: 0;
572     .overview {
573         margin: 15px 30px 10px 30px;
574     }
577 .path-my .coursebox .info {
578     float: none;
579     margin: 0;
582 // Modules
583 .mod_introbox {
584     padding: 10px;
587 table.mod_index {
588     width: 100%;
591 // Comments
592 .comment-ctrl {
593     font-size: 12px;
594     display: none;
595     margin: 0;
596     padding: 0;
599 .comment-ctrl h5 {
600     margin: 0;
601     padding: 5px;
604 .comment-area {
605     max-width: 400px;
606     padding: 5px;
609 .comment-area textarea {
610     width: 100%;
611     overflow: auto;
613     &.fullwidth {
614         -webkit-box-sizing: border-box;
615         -moz-box-sizing: border-box;
616         box-sizing: border-box;
617     }
620 .comment-area .fd {
621     text-align: right;
624 .comment-meta span {
625     color: gray;
628 .comment-link img {
629     vertical-align: text-bottom;
632 .comment-list {
633     font-size: 11px;
634     overflow: auto;
635     list-style: none;
636     padding: 0;
637     margin: 0;
640 .comment-list li {
641     margin: 2px;
642     list-style: none;
643     margin-bottom: 5px;
644     clear: both;
645     padding: .3em;
646     position: relative;
649 .comment-list li.first {
650     display: none;
653 .comment-paging {
654     text-align: center;
657 .comment-paging .pageno {
658     padding: 2px;
661 .comment-paging .curpage {
662     border: 1px solid #ccc;
665 .comment-message .picture {
666     width: 20px;
667     float: left;
670 .comment-message .text {
671     margin: 0;
672     padding: 0;
675 .comment-message .text p {
676     padding: 0;
677     margin: 0 18px 0 0;
680 .comment-delete {
681     position: absolute;
682     top: 0;
683     right: 0;
684     margin: .3em;
687 .comment-report-selectall {
688     display: none;
691 .comment-link {
692     display: none;
695 .jsenabled .comment-link {
696     display: block;
699 .jsenabled .showcommentsnonjs {
700     display: none;
703 .jsenabled .comment-report-selectall {
704     display: inline;
706 /**
707 * Completion progress report
708 */
709 .completion-expired {
710     color: map-get($theme-colors, 'warning');
713 .completion-expected {
714     font-size: $font-size-xs;
717 .completion-sortchoice,
718 .completion-identifyfield {
719     font-size: $font-size-xs;
720     vertical-align: bottom;
723 .completion-progresscell {
724     text-align: right;
727 .completion-expired .completion-expected {
728     font-weight: bold;
730 /**
731 * Tags
732 */
733 img.user-image {
734     height: 100px;
735     width: 100px;
738 #tag-search-box {
739     text-align: center;
740     margin: 10px auto;
743 .path-tag .tag-index-items .tagarea {
744     border: 1px solid #e3e3e3;
745     border-radius: 4px;
746     padding: 10px;
747     margin-top: 10px;
750 .path-tag .tag-index-items .tagarea h3 {
751     display: block;
752     padding: 3px 0 10px 0;
753     margin: 0;
754     font-size: 1.1em;
755     font-weight: bold;
756     line-height: 20px;
757     color: #999;
758     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
759     text-transform: uppercase;
760     word-wrap: break-word;
761     border-bottom: solid 1px #e3e3e3;
762     margin-bottom: 10px;
765 .path-tag .tagarea .controls,
766 .path-tag .tagarea .taggeditems {
767     @include clearfix();
770 .path-tag .tagarea .controls,
771 .path-tag .tag-backtoallitems {
772     text-align: center;
775 .path-tag .tagarea .controls .gotopage.nextpage {
776     float: right;
779 .path-tag .tagarea .controls .gotopage.prevpage {
780     float: left;
783 .path-tag .tagarea .controls .exclusivemode {
784     display: inline-block;
787 .path-tag .tagarea .controls.controls-bottom {
788     margin-top: 5px;
791 .path-tag .tagarea .controls .gotopage.nextpage::after {
792     padding-right: 5px;
793     padding-left: 5px;
794     content: "»";
797 .path-tag .tagarea .controls .gotopage.prevpage::before {
798     padding-right: 5px;
799     padding-left: 5px;
800     content: "«";
803 span.flagged-tag,
804 tr.flagged-tag,
805 span.flagged-tag a,
806 tr.flagged-tag a {
807     color: map-get($theme-colors, 'warning');
810 .tag-management-table td,
811 .tag-management-table th {
812     vertical-align: middle;
813     padding: 4px;
816 .tag-management-table .inplaceeditable.inplaceeditingon input {
817     width: 150px;
820 .path-admin-tag .addstandardtags {
821     float: right;
823     img {
824         margin: 0 5px;
825     }
828 .path-tag .tag-relatedtags {
829     padding-top: 10px;
832 .path-tag .tag-management-box {
833     text-align: right;
836 .path-tag .tag-index-toc {
837     padding: 10px;
838     text-align: center;
841 .path-tag .tag-index-toc li,
842 .path-tag .tag-management-box li {
843     margin-left: 5px;
844     margin-right: 5px;
847 .path-tag .tag-management-box li a.edittag {
848     background-image: url([[pix:moodle|i/settings]]);
851 .path-tag .tag-management-box li a.flagasinappropriate {
852     background-image: url([[pix:moodle|i/flagged]]);
855 .path-tag .tag-management-box li a.removefrommyinterests {
856     background-image: url([[pix:moodle|t/delete]]);
859 .path-tag .tag-management-box li a.addtomyinterests {
860     background-image: url([[pix:moodle|t/add]]);
863 .path-tag .tag-management-box li a {
864     background-repeat: no-repeat;
865     background-position: left;
866     padding-left: 17px;
869 .tag_feed.media-list .media .itemimage {
870     float: left;
873 .tag_feed.media-list .media .itemimage img {
874     height: 35px;
875     width: 35px;
878 .tag_feed.media-list .media .media-body {
879     padding-right: 10px;
880     padding-left: 10px;
883 .tag_feed .media .muted a {
884     color: $text-muted;
887 .tag_cloud {
888     text-align: center;
891 .tag_cloud .inline-list li {
892     padding: 0 0.2em;
895 .tag_cloud .tag_overflow {
896     margin-top: 1em;
897     font-style: italic;
900 .tag_cloud .s20 {
901     font-size: 2.7em;
904 .tag_cloud .s19 {
905     font-size: 2.6em;
908 .tag_cloud .s18 {
909     font-size: 2.5em;
912 .tag_cloud .s17 {
913     font-size: 2.4em;
916 .tag_cloud .s16 {
917     font-size: 2.3em;
920 .tag_cloud .s15 {
921     font-size: 2.2em;
924 .tag_cloud .s14 {
925     font-size: 2.1em;
928 .tag_cloud .s13 {
929     font-size: 2em;
932 .tag_cloud .s12 {
933     font-size: 1.9em;
936 .tag_cloud .s11 {
937     font-size: 1.8em;
940 .tag_cloud .s10 {
941     font-size: 1.7em;
944 .tag_cloud .s9 {
945     font-size: 1.6em;
948 .tag_cloud .s8 {
949     font-size: 1.5em;
952 .tag_cloud .s7 {
953     font-size: 1.4em;
956 .tag_cloud .s6 {
957     font-size: 1.3em;
960 .tag_cloud .s5 {
961     font-size: 1.2em;
964 .tag_cloud .s4 {
965     font-size: 1.1em;
968 .tag_cloud .s3 {
969     font-size: 1em;
972 .tag_cloud .s2 {
973     font-size: 0.9em;
976 .tag_cloud .s1 {
977     font-size: 0.8em;
980 .tag_cloud .s0 {
981     font-size: 0.7em;
984 .tag_list ul {
985     display: inline;
988 .tag_list.hideoverlimit .overlimit {
989     display: none;
992 .tag_list .tagmorelink {
993     display: none;
996 .tag_list.hideoverlimit .tagmorelink {
997     display: inline;
1000 .tag_list.hideoverlimit .taglesslink {
1001     display: none;
1004 /**
1005 * Web Service
1006 */
1007 #webservice-doc-generator td {
1008     text-align: left;
1009     border: 0 solid black;
1012 /**
1013 * Enrol
1014 */
1015 .userenrolment {
1016     width: 100%;
1017     border-collapse: collapse;
1020 .userenrolment tr {
1021     vertical-align: top;
1024 .userenrolment td {
1025     padding: 0;
1026     height: 41px;
1029 .userenrolment .subfield {
1030     margin-right: 5px;
1033 .userenrolment .col_userdetails .subfield {
1034     margin-left: 40px;
1037 .userenrolment .col_userdetails .subfield_picture {
1038     float: left;
1039     margin-left: 0;
1042 .userenrolment .col_lastseen {
1043     width: 150px;
1046 .userenrolment .col_role {
1047     width: 262px;
1050 .userenrolment .col_role .roles,
1051 .userenrolment .col_group .groups {
1052     margin-right: 30px;
1055 .userenrolment .col_role .role {
1056     float: left;
1057     padding: 0 3px 3px;
1058     margin: 0 3px 3px;
1059     white-space: nowrap;
1062 .userenrolment .col_group .group {
1063     float: left;
1064     padding: 3px;
1065     margin: 3px;
1066     white-space: nowrap;
1069 .userenrolment .col_role .role a,
1070 .userenrolment .col_group .group a {
1071     margin-left: 3px;
1072     cursor: pointer;
1075 .userenrolment .col_role .addrole,
1076 .userenrolment .col_group .addgroup {
1077     float: right;
1078     padding: 3px;
1079     margin: 3px;
1081     > a:hover {
1082         border-bottom: 1px solid #666;
1083     }
1086 .userenrolment .col_role .addrole img,
1087 .userenrolment .col_group .addgroup img {
1088     vertical-align: baseline;
1091 .userenrolment .hasAllRoles .col_role .addrole {
1092     display: none;
1095 .userenrolment .col_enrol .enrolment {
1096     float: left;
1097     padding: 0 3px 3px;
1098     margin: 0 3px 3px;
1101 .userenrolment .col_enrol .enrolment a {
1102     float: right;
1103     margin-left: 3px;
1106 .corelightbox {
1107     background-color: #ccc;
1108     position: absolute;
1109     top: 0;
1110     left: 0;
1111     width: 100%;
1112     height: 100%;
1113     text-align: center;
1116 .corelightbox img {
1117     position: fixed;
1118     top: 50%;
1119     left: 50%;
1122 .mod-indent-outer {
1123     display: table;
1126 .mod-indent {
1127     display: table-cell;
1130 .label .mod-indent {
1131     float: left;
1132     padding-top: 20px;
1135 @include media-breakpoint-up(sm) {
1136     $mod-indent-size: 30px;
1137     /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1139     @for $i from 1 through 16 {
1140         $width: ($i * $mod-indent-size);
1142         .mod-indent-#{$i} {
1143             width: $width;
1144         }
1145     }
1147     .mod-indent-huge {
1148         width: (16 * $mod-indent-size);
1149     }
1152 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1153 .resourcecontent .mediaplugin_mp3 object {
1154     height: 25px;
1155     width: 600px;
1158 .resourcecontent audio.mediaplugin_html5audio {
1159     width: 600px;
1161 /** Large resource images should avoid hidden overflow **/
1162 .resourceimage {
1163     max-width: 100%;
1165 /* Audio player size in 'inline' mode (can only change width, as above) */
1166 .mediaplugin_mp3 object {
1167     height: 15px;
1168     width: 300px;
1171 audio.mediaplugin_html5audio {
1172     width: 300px;
1174 /* TinyMCE moodle media preview frame should not have padding */
1175 .core_media_preview.pagelayout-embedded #content {
1176     padding: 0;
1179 .core_media_preview.pagelayout-embedded #maincontent {
1180     height: 0;
1183 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1184     padding: 0;
1185     margin: 0;
1186     min-width: 0;
1187     background: none;
1190 .path-rating .ratingtable {
1191     width: 100%;
1192     margin-bottom: 1em;
1195 .path-rating .ratingtable th.rating {
1196     width: 100%;
1199 .path-rating .ratingtable td.rating,
1200 .path-rating .ratingtable td.time {
1201     white-space: nowrap;
1202     text-align: center;
1205 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1206 .moodle-dialogue-base .moodle-dialogue-lightbox {
1207     background-color: $gray;
1210 // Prevent adding backdrops to popups in popups.
1211 .pagelayout-popup {
1212     .moodle-dialogue-base {
1213         .moodle-dialogue-lightbox {
1214             background-color: transparent;
1215         }
1216         .moodle-dialogue {
1217             box-shadow: $popover-box-shadow;
1218         }
1219     }
1222 .moodle-dialogue-base .hidden,
1223 .moodle-dialogue-base .moodle-dialogue-hidden {
1224     display: none;
1227 .no-scrolling {
1228     overflow: hidden;
1231 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1232     left: 0;
1233     top: 0;
1234     right: 0;
1235     bottom: -50px;
1236     position: fixed;
1239 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1240     overflow: auto;
1243 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1244     width: 28px;
1245     height: 16px;
1246     background-size: 100%;
1249 .moodle-dialogue-base .moodle-dialogue-wrap {
1250     background-color: #fff;
1251     border: 1px solid #ccc;
1254 // Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1255 // it for a reason (conflicts with jquery .show()).
1256 .modal.show {
1257     display: block;
1260 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1261     display: flex;
1262     padding: 1rem 1rem;
1263     border-bottom: 1px solid #dee2e6;
1266 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1267     // Undo some YUI damage.
1268     min-height: 3rem;
1269     color: initial;
1270     background: initial;
1271     font-size: 1.5rem;
1272     line-height: 1.5;
1275 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1276     font-size: 1.5rem;
1279 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1280     /*rtl:raw:
1281         left: 0;
1282         right: auto;
1283     */
1284     padding: 0;
1285     position: relative;
1286     margin-left: auto;
1289 .moodle-dialogue-base .closebutton {
1290     padding: $modal-header-padding;
1291     margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
1292     position: relative;
1293     background-color: transparent;
1294     border: 0;
1295     background-image: none;
1296     box-shadow: none;
1297     opacity: 0.7;
1298     &:hover,
1299     &:active {
1300         opacity: 1;
1301     }
1302     &::after {
1303         content: "×";
1304     }
1307 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1308     padding: 0.5rem;
1309     body {
1310         background-color: $body-bg;
1311     }
1314 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1315     overflow: auto;
1316     position: absolute;
1317     top: 0;
1318     bottom: 50px;
1319     left: 0;
1320     right: 0;
1321     margin: 0;
1322     border: 0;
1325 .moodle-dialogue-exception .moodle-exception-param label {
1326     font-weight: bold;
1329 .moodle-dialogue-exception .param-stacktrace label {
1330     background-color: #eee;
1331     border: 1px solid #ccc;
1332     border-bottom-width: 0;
1335 .moodle-dialogue-exception .param-stacktrace pre {
1336     border: 1px solid #ccc;
1337     background-color: #fff;
1340 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1341     color: navy;
1342     font-size: $font-size-sm;
1345 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1346     color: map-get($theme-colors, 'warning');
1347     font-size: $font-size-sm;
1350 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1351     color: #333;
1352     font-size: 90%;
1353     border-bottom: 1px solid #eee;
1356 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1357     display: none;
1360 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1361     // Undo some YUI damage.
1362     background: initial;
1365 .moodle-dialogue-confirm .confirmation-message {
1366     margin: 0.5rem 0;
1369 .moodle-dialogue-confirm .confirmation-dialogue input {
1370     min-width: 80px;
1373 .moodle-dialogue-exception .moodle-exception-message {
1374     margin: 1em;
1377 .moodle-dialogue-exception .moodle-exception-param {
1378     margin-bottom: 0.5em;
1381 .moodle-dialogue-exception .moodle-exception-param label {
1382     width: 150px;
1385 .moodle-dialogue-exception .param-stacktrace label {
1386     display: block;
1387     margin: 0;
1388     padding: 4px 1em;
1391 .moodle-dialogue-exception .param-stacktrace pre {
1392     display: block;
1393     height: 200px;
1394     overflow: auto;
1397 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1398     display: inline-block;
1399     margin: 4px 0;
1402 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1403     display: inline-block;
1404     width: 50px;
1405     margin: 4px 1em;
1408 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1409     padding-left: 25px;
1410     margin-bottom: 4px;
1411     padding-bottom: 4px;
1414 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1415     opacity: 0.75;
1416     width: 100%;
1417     height: 100%;
1418     top: 0;
1419     left: 0;
1420     background-color: white;
1421     text-align: center;
1422     padding: 10% 0;
1424 /* Apply a default max-height on tooltip text */
1425 .moodle-dialogue .tooltiptext {
1426     max-height: 300px;
1429 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1430     z-index: 3001;
1432     .moodle-dialogue-bd {
1433         overflow: auto;
1434     }
1437 /**
1438  * Chooser Dialogues (moodle-core-chooserdialogue)
1439  *
1440  * This CSS belong to the chooser dialogue which should work both with, and
1441  * without javascript enabled
1442  */
1443 /* Hide the dialog and it's title */
1444 .chooserdialoguebody,
1445 .choosertitle {
1446     display: none;
1449 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1450     margin: 0;
1453 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1454     padding: 0;
1455     background: #f2f2f2;
1457     @include border-bottom-radius(10px);
1459 /* Center the submit buttons within the area */
1460 .choosercontainer #chooseform .submitbuttons {
1461     padding: 0.7em 0;
1462     text-align: right;
1464 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1466 @media (max-height: 639px) {
1467     .ios .choosercontainer #chooseform .submitbuttons {
1468         padding: 45px 0;
1469     }
1472 .choosercontainer #chooseform .submitbuttons input {
1473     min-width: 100px;
1474     margin: 0 0.5em;
1476 /* Various settings for the options area */
1477 .choosercontainer #chooseform .options {
1478     position: relative;
1479     border-bottom: 1px solid #bbb;
1481 /* Only set these options if we're showing the js container */
1482 .jschooser .choosercontainer #chooseform .alloptions {
1483     overflow-x: hidden;
1484     overflow-y: auto;
1485     max-width: 240px;
1487     .option {
1488         input[type=radio] {
1489             display: inline-block;
1490         }
1492         .typename {
1493             display: inline-block;
1494             width: 55%;
1495         }
1496     }
1498 /* Settings for option rows and option subtypes */
1499 .choosercontainer #chooseform .moduletypetitle,
1500 .choosercontainer #chooseform .option,
1501 .choosercontainer #chooseform .nonoption {
1502     margin-bottom: 0;
1503     padding: 0 1.6em 0 1.6em;
1506 .choosercontainer #chooseform .moduletypetitle {
1507     text-transform: uppercase;
1508     padding-top: 1.2em;
1509     padding-bottom: 0.4em;
1510     margin-bottom: 0.5rem;
1511     font-size: 100%;
1514 .choosercontainer #chooseform .option .typename,
1515 .choosercontainer #chooseform .nonoption .typename {
1516     padding: 0 0 0 0.5em;
1519 .choosercontainer #chooseform .modicon + .typename {
1520     padding-left: 0;
1523 .choosercontainer #chooseform .option input[type=radio],
1524 .choosercontainer #chooseform .option span.typename {
1525     vertical-align: middle;
1528 .choosercontainer #chooseform .option label {
1529     display: block;
1530     margin: 0;
1531     padding: ($spacer / 2) 0;
1532     border-bottom: 1px solid #fff;
1535 .choosercontainer #chooseform .option .icon {
1536     margin: 0;
1537     padding: 0 $spacer;
1540 .choosercontainer #chooseform .nonoption {
1541     padding-left: 2.7em;
1542     padding-top: 0.3em;
1543     padding-bottom: 0.1em;
1546 .choosercontainer #chooseform .subtype {
1547     margin-bottom: 0;
1548     padding: 0 1.6em 0 3.2em;
1551 .choosercontainer #chooseform .subtype .typename {
1552     margin: 0 0 0 0.2em;
1554 /* The instruction/help area */
1555 .jschooser .choosercontainer #chooseform .instruction,
1556 .jschooser .choosercontainer #chooseform .typesummary {
1557     display: none;
1558     position: absolute;
1559     top: 0;
1560     right: 0;
1561     bottom: 0;
1562     left: 240px;
1563     margin: 0;
1564     padding: 1.6em;
1565     background-color: #fff;
1566     overflow-x: hidden;
1567     overflow-y: auto;
1568     line-height: 2em;
1570 /* Selected option settings */
1571 .jschooser .choosercontainer #chooseform .instruction,
1572 .choosercontainer #chooseform .selected .typesummary {
1573     display: block;
1576 .choosercontainer #chooseform .selected {
1577     background-color: #fff;
1578     margin-top: -1px;
1579     padding-top: 1px;
1583 @include media-breakpoint-down(xs) {
1584     .jsenabled .choosercontainer #chooseform .alloptions {
1585         max-width: 100%;
1586     }
1588     .jsenabled .choosercontainer #chooseform .instruction,
1589     .jsenabled .choosercontainer #chooseform .typesummary {
1590         position: static;
1591     }
1594 /**
1595  * Module chooser dialogue (moodle-core-chooserdialogue)
1596  *
1597  * This CSS belong to the chooser dialogue which should work both with, and
1598  * without javascript enabled
1599  */
1600 .modchooser .modal-body {
1601     padding: 0;
1602     overflow-y: auto;
1603     min-height: 640px;
1604     display: flex;
1605     flex-direction: column;
1607     .searchresultitemscontainer-wrapper {
1608         min-height: 495px;
1609     }
1611     .carousel-item.active {
1612         display: flex;
1613     }
1614     .chooser-container {
1615         display: flex;
1616         flex-direction: column;
1617         flex: 1 1 auto;
1618     }
1620     .loading-icon {
1621         opacity: 1;
1622         .icon {
1623             display: block;
1624             font-size: 3em;
1625             height: 1em;
1626             width: 1em;
1627         }
1628     }
1629     .carousel-item .loading-icon .icon {
1630         margin: 1em auto;
1631     }
1634 .modchoosercontainer.noscroll {
1635     overflow-y: hidden;
1638 .modchooser .searchcontainer .searchbar .input-group-append {
1639     align-items: center;
1641     i {
1642         color: #868e96;
1643         margin: 0;
1644         vertical-align: middle;
1645         font-size: 20px;
1646         height: 20px;
1647         width: 20px;
1648     }
1651 .modchoosercontainer .optionscontainer,
1652 .modchoosercontainer .searchresultitemscontainer {
1653     overflow-x: hidden;
1654     .option {
1655         // 2 items per line.
1656         flex-basis: calc(50% - 0.5rem);
1657         .optionactions {
1658             .optionaction {
1659                 cursor: pointer;
1660                 color: $gray-600;
1661                 i {
1662                     margin: 0;
1663                 }
1664             }
1665         }
1666         .optioninfo {
1667             a {
1668                 color: $gray-700;
1669                 &:hover {
1670                     text-decoration: none;
1671                 }
1672             }
1673         }
1674     }
1677 .modchooser .modal-body .optionsummary {
1678     background-color: $white;
1679     overflow-x: hidden;
1680     overflow-y: auto;
1681     min-height: 640px;
1683     .content {
1684         overflow-y: auto;
1685         .heading {
1686             .icon {
1687                 height: 32px;
1688                 width: 32px;
1689                 font-size: 32px;
1690                 padding: 0;
1691             }
1692         }
1693     }
1695     .actions {
1696         border-top: 1px solid $gray-300;
1697         background: $white;
1698     }
1701 @include media-breakpoint-down(xs) {
1702     .path-course-view .modal-dialog.modal-lg,
1703     .path-course-view .modal-content,
1704     .modchooser .modal-body,
1705     .modchooser .modal-body .carousel,
1706     .modchooser .modal-body .carousel-inner,
1707     .modchooser .modal-body .carousel-item,
1708     .modchooser .modal-body .optionsummary,
1709     .modchoosercontainer,
1710     .optionscontainer,
1711     .searchresultitemscontainer {
1712         min-height: auto;
1713         height: 100%;
1714         overflow-y: auto;
1715     }
1716     .path-course-view .modal-dialog.modal-lg {
1717         margin: 0;
1718     }
1719     .modchooser .modal-body .searchresultitemscontainer-wrapper {
1720         min-height: auto;
1721     }
1724 @include media-breakpoint-up(sm) {
1725     .modchoosercontainer .optionscontainer .option,
1726     .modchoosercontainer .searchresultitemscontainer .option {
1727         // Three items per line.
1728         flex-basis: calc(33.33% - 0.5rem);
1729     }
1732 @include media-breakpoint-up(lg) {
1733     .modchoosercontainer .optionscontainer .option,
1734     .modchoosercontainer .searchresultitemscontainer .option {
1735         // Six items per line.
1736         flex-basis: calc(16.66% - 0.5rem);
1737     }
1740 /* Form element: listing */
1741 .formlistingradio {
1742     padding-bottom: 25px;
1743     padding-right: 10px;
1746 .formlistinginputradio {
1747     float: left;
1750 .formlistingmain {
1751     min-height: 225px;
1754 .formlisting {
1755     position: relative;
1756     margin: 15px 0;
1757     padding: 1px 19px 14px;
1758     background-color: white;
1759     border: 1px solid #ddd;
1761     @include border-radius(4px);
1764 .formlistingmore {
1765     position: absolute;
1766     cursor: pointer;
1767     bottom: -1px;
1768     right: -1px;
1769     padding: 3px 7px;
1770     font-size: 12px;
1771     font-weight: bold;
1772     background-color: whitesmoke;
1773     border: 1px solid #ddd;
1774     color: #9da0a4;
1776     @include border-radius(4px 0 4px 0);
1779 .formlistingall {
1780     margin: 15px 0;
1781     padding: 0;
1783     @include border-radius(4px);
1786 .formlistingrow {
1787     cursor: pointer;
1788     border-bottom: 1px solid;
1789     border-color: #e1e1e8;
1790     border-left: 1px solid #e1e1e8;
1791     border-right: 1px solid #e1e1e8;
1792     background-color: #f7f7f9;
1794     @include border-radius(0 0 4px 4px);
1795     padding: 6px;
1796     top: 50%;
1797     left: 50%;
1798     min-height: 34px;
1799     float: left;
1800     width: 150px;
1803 body.jsenabled .formlistingradio {
1804     display: none;
1807 body.jsenabled .formlisting {
1808     display: block;
1811 a.criteria-action {
1812     padding: 0 3px;
1813     float: right;
1816 div.criteria-description {
1817     padding: 10px 15px;
1818     margin: 5px 0;
1819     background: none repeat scroll 0 0 #f9f9f9;
1820     border: 1px solid #eee;
1823 ul.badges {
1824     margin: 0;
1825     list-style: none;
1828 .badges li {
1829     position: relative;
1830     display: inline-block;
1831     padding-top: 1em;
1832     text-align: center;
1833     vertical-align: top;
1834     width: 150px;
1837 .badges li .badge-name {
1838     display: block;
1839     padding: 5px;
1842 .badges li > img {
1843     position: absolute;
1846 .badges li .badge-image {
1847     width: 100px;
1848     height: 100px;
1849     left: 10px;
1850     top: 0;
1851     z-index: 1;
1854 .badges li .badge-actions {
1855     position: relative;
1858 .badges li .expireimage {
1859     width: 100px;
1860     height: 100px;
1861     left: 25px;
1862     top: 0;
1863     position: absolute;
1864     z-index: 10;
1865     opacity: 0.85;
1868 #badge-image {
1869     background-color: transparent;
1870     padding: 0;
1871     position: relative;
1872     min-width: 100px;
1873     width: 20%;
1874     display: inline-block;
1875     vertical-align: top;
1876     margin-top: 17px;
1877     margin-bottom: 20px;
1879     .expireimage {
1880         width: 100px;
1881         height: 100px;
1882         left: 0;
1883         top: 0;
1884         opacity: 0.85;
1885         position: absolute;
1886         z-index: 10;
1887     }
1889     .singlebutton {
1890         padding-top: 5px;
1891         display: block;
1893         button {
1894             margin-left: 4px;
1895         }
1896     }
1899 #badge-details {
1900     display: inline-block;
1901     width: 79%;
1904 #badge-overview dl,
1905 #badge-details dl {
1906     margin: 0;
1908     dt,
1909     dd {
1910         vertical-align: top;
1911         padding: 3px 0;
1912     }
1914     dt {
1915         clear: both;
1916         display: inline-block;
1917         width: 20%;
1918         min-width: 100px;
1919     }
1921     dd {
1922         display: inline-block;
1923         width: 79%;
1924         margin-left: 1%;
1925     }
1928 .badge-profile {
1929     vertical-align: top;
1932 .connected {
1933     color: map-get($theme-colors, 'success');
1936 .notconnected {
1937     color: map-get($theme-colors, 'danger');
1940 .connecting {
1941     color: map-get($theme-colors, 'warning');
1944 #page-badges-award .recipienttable tr td {
1945     vertical-align: top;
1948 #page-badges-award .recipienttable tr td.actions .actionbutton {
1949     margin: 0.3em 0;
1950     padding: 0.5em 0;
1951     width: 100%;
1954 #page-badges-award .recipienttable tr td.existing,
1955 #page-badges-award .recipienttable tr td.potential {
1956     width: 42%;
1959 #issued-badge-table .activatebadge {
1960     display: inline-block;
1963 .statusbox.active {
1964     background-color: $state-success-bg;
1967 .statusbox.inactive {
1968     background-color: $state-warning-bg;
1971 .statusbox {
1972     text-align: center;
1973     margin-bottom: 5px;
1974     padding: 5px;
1977 .statusbox .activatebadge {
1978     display: inline-block;
1981 .statusbox .activatebadge input[type=submit] {
1982     margin: 3px;
1985 .activatebadge {
1986     margin: 0;
1987     text-align: left;
1988     vertical-align: middle;
1991 img#persona_signin {
1992     cursor: pointer;
1995 .addcourse {
1996     float: right;
1999 .invisiblefieldset {
2000     display: inline;
2001     padding: 0;
2002     border-width: 0;
2005 /** Page header */
2006 #page-header {
2007     .logo {
2008         margin: $spacer 0;
2009         img {
2010             max-height: 75px;
2011         }
2012     }
2015 /** Navbar logo. */
2016 nav.navbar .logo img {
2017     max-height: 35px;
2020 /** Header-bar styles **/
2021 .page-context-header {
2022     // We need to be explicit about the height of the header.
2023     $pageHeaderHeight: 140px;
2025     // Do not remove these rules.
2026     overflow: hidden;
2027     padding: 0.25rem;
2029     .page-header-image,
2030     .page-header-headings {
2031         float: left;
2032         display: block;
2033         position: relative;
2034     }
2036     .page-header-image {
2037         margin-right: 1em;
2038         margin-bottom: 1em;
2039         & > a {
2040             display: inline-block;
2041         }
2042     }
2044     .page-header-headings,
2045     .header-button-group {
2046         position: relative;
2047         line-height: 24px;
2048         vertical-align: middle;
2049     }
2051     .header-button-group {
2052         display: block;
2053         float: left;
2054     }
2057 ul.dragdrop-keyboard-drag li {
2058     list-style-type: none;
2061 a.disabled:hover,
2062 a.disabled {
2063     text-decoration: none;
2064     cursor: default;
2065     font-style: italic;
2066     color: #808080;
2069 body.lockscroll {
2070     height: 100%;
2071     overflow: hidden;
2074 .progressbar_container {
2075     max-width: 500px;
2076     margin: 0 auto;
2079 /* IE10 only fix for calendar titling */
2080 .ie10 .yui3-calendar-header-label {
2081     display: inline-block;
2084 dd:before,
2085 dd:after {
2086     display: block;
2087     content: " ";
2090 dd:after {
2091     clear: both;
2094 // Active tabs with links should have a different
2095 // cursor to indicate they are clickable.
2096 .nav-tabs > .active > a[href],
2097 .nav-tabs > .active > a[href]:hover,
2098 .nav-tabs > .active > a[href]:focus {
2099     cursor: pointer;
2102 .inplaceeditable {
2103     &.inplaceeditingon {
2104         position: relative;
2106         .editinstructions {
2107             margin-top: -30px;
2108             font-weight: normal;
2109             margin-right: 0;
2110             margin-left: 0;
2111             left: 0;
2112             right: auto;
2113             white-space: nowrap;
2114         }
2115         @include media-breakpoint-up(sm) {
2116             input {
2117                 width: 330px;
2118                 vertical-align: text-bottom;
2119                 margin-bottom: 0;
2120             }
2121         }
2123         select {
2124             margin-bottom: 0;
2125         }
2126     }
2128     .quickediticon img {
2129         opacity: 0.2;
2130     }
2132     .quickeditlink {
2133         color: inherit;
2134         text-decoration: inherit;
2135     }
2137     &:hover .quickeditlink .quickediticon img,
2138     .quickeditlink:focus .quickediticon img {
2139         opacity: 1;
2140     }
2142     &.inplaceeditable-toggle .quickediticon {
2143         display: none;
2144     }
2146     &.inplaceeditable-autocomplete {
2147         display: block;
2148     }
2151 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2152     margin-top: -20px;
2155 /** Chart area. */
2156 .chart-area {
2158     .chart-table-data {
2159         display: none;
2160     }
2162     .chart-table {
2163         .chart-output-htmltable caption {
2164             white-space: nowrap;
2165         }
2166         /** When accessible, we display the table only. */
2167         &.accesshide {
2168             .chart-table-expand {
2169                 display: none;
2170             }
2171             .chart-table-data {
2172                 display: block;
2173             }
2174         }
2175     }
2178 // Reset for ul.
2179 ul {
2180     padding-left: 1rem;
2183 /* YUI 2 Tree View */
2184 /*rtl:raw:
2185 .ygtvtn,
2186 .ygtvtm,
2187 .ygtvtmh,
2188 .ygtvtmhh,
2189 .ygtvtp,
2190 .ygtvtph,
2191 .ygtvtphh,
2192 .ygtvln,
2193 .ygtvlm,
2194 .ygtvlmh,
2195 .ygtvlmhh,
2196 .ygtvlp,
2197 .ygtvlph,
2198 .ygtvlphh,
2199 .ygtvdepthcell,
2200 .ygtvok,
2201 .ygtvok:hover,
2202 .ygtvcancel,
2203 .ygtvcancel:hover {
2204     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
2206 */
2208 .hover-tooltip-container {
2209     position: relative;
2211     .hover-tooltip {
2212         opacity: 0;
2213         visibility: hidden;
2214         position: absolute;
2215         /*rtl:ignore*/
2216         left: 50%;
2217         top: calc(-50% - 5px);
2218         transform: translate(-50%, -50%);
2219         background-color: #fff;
2220         border: 1px solid rgba(0, 0, 0, .2);
2221         border-radius: .3rem;
2222         box-sizing: border-box;
2223         padding: 5px;
2224         white-space: nowrap;
2225         transition: opacity 0.15s, visibility 0.15s;
2226         z-index: 1000;
2228         &:before {
2229             content: '';
2230             display: inline-block;
2231             border-left: 8px solid transparent;
2232             border-right: 8px solid transparent;
2233             border-top: 8px solid rgba(0, 0, 0, .2);
2234             position: absolute;
2235             bottom: -8px;
2236             left: calc(50% - 8px);
2237         }
2239         &:after {
2240             content: '';
2241             display: inline-block;
2242             border-left: 7px solid transparent;
2243             border-right: 7px solid transparent;
2244             border-top: 7px solid #fff;
2245             position: absolute;
2246             bottom: -6px;
2247             left: calc(50% - 7px);
2248             z-index: 2;
2249         }
2250     }
2252     &:hover {
2253         .hover-tooltip {
2254             opacity: 1;
2255             visibility: visible;
2256             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2257         }
2258     }
2261 #region-flat-nav {
2262     padding-right: 0;
2263     padding-left: 0;
2264     .nav {
2265         margin-right: $grid-gutter-width / 2;
2266         background-color: $card-bg;
2267     }
2268     @include media-breakpoint-down(sm) {
2269         .nav {
2270             margin-top: $grid-gutter-width;
2271             margin-right: 0;
2272         }
2273     }
2276 // Footer link colour was added to allow the colour of footer links to be changed,
2277 // but really in bootstrap we want the colour of links on .bg-inverse to be changed
2278 // rather than being specific to the footer. This is kept for backwards compatibility.
2279 $footer-link-color: $bg-inverse-link-color !default;
2280 #page-footer a {
2281     color: $footer-link-color;
2282     text-decoration: underline;
2283     .icon {
2284         color: $footer-link-color;
2285     }
2286     &:focus .icon {
2287         color: $body-color;
2288     }
2291 .bg-inverse a {
2292     color: $bg-inverse-link-color;
2293     text-decoration: underline;
2294     .icon {
2295         color: $bg-inverse-link-color;
2296     }
2299 .sitelink {
2300     img {
2301         width: 112px;
2302     }
2305 // Make links in a menu clickable anywhere in the row.
2306 .dropdown-item a {
2307     display: block;
2308     width: 100%;
2309     color: $body-color;
2311 .dropdown-item:active a {
2312     color: $dropdown-link-active-color;
2315 .competency-tree {
2316     ul {
2317         padding-left: 1.5rem;
2318     }
2321 .sr-only-focusable {
2322     &:active,
2323     &:focus {
2324         z-index: $zindex-navbar-fixed + 1;
2325         position: fixed;
2326         background: #fff;
2327         padding: 7px;
2328         left: 0;
2329         top: 0;
2330     }
2333 [data-drag-type="move"] {
2334     cursor: move;
2335     touch-action: none;
2338 .clickable {
2339     cursor: pointer;
2342 .overlay-icon-container {
2343     position: absolute;
2344     top: 0;
2345     left: 0;
2346     width: 100%;
2347     height: 100%;
2348     background-color: rgba(255, 255, 255, 0.6);
2350     .loading-icon {
2351         position: absolute;
2352         top: 50%;
2353         left: 50%;
2354         transform: translate(-50%, -50%);
2356         .icon {
2357             height: 30px;
2358             width: 30px;
2359             font-size: 30px;
2360         }
2361     }
2364 .open.atto_menu > .dropdown-menu {
2365     display: block;
2367 div.editor_atto_toolbar button .icon {
2368     color: $gray-700;
2370 .w-auto {
2371     width: auto;
2374 .bg-pulse-grey {
2375     animation: bg-pulse-grey 2s infinite linear;
2378 @keyframes bg-pulse-grey {
2379     0% {
2380         background-color: $gray-100;
2381     }
2382     50% {
2383         background-color: darken($gray-100, 5%);
2384     }
2385     100% {
2386         background-color: $gray-100;
2387     }
2390 @each $size, $length in $spacers {
2391     .line-height-#{$size} {
2392         line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2393     }
2396 .dir-rtl {
2397     .dir-rtl-hide {
2398         display: none;
2399     }
2402 .dir-ltr {
2403     .dir-ltr-hide {
2404         display: none;
2405     }
2408 .paged-content-page-container {
2409     min-height: 3.125rem;
2412 body.h5p-embed {
2413     #page-content {
2414         display: inherit;
2415     }
2416     #maincontent {
2417         display: none;
2418     }
2419     .h5pmessages {
2420         min-height: 230px; // This should be the same height as default core_h5p iframes.
2421     }
2424 .text-decoration-none {
2425     text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
2428 .colour-inherit {
2429     color: inherit !important; /* stylelint-disable-line declaration-no-important */
2432 .position-right {
2433     right: 0 !important; /* stylelint-disable-line declaration-no-important */
2436 .overflow-hidden {
2437     overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
2440 .text-break {
2441     overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
2444 .z-index-1 {
2445     z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
2448 // These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
2449 .float-left {
2450     float: left !important; /* stylelint-disable-line declaration-no-important */
2452 .float-right {
2453     float: right !important; /* stylelint-disable-line declaration-no-important */
2456 .clamp-2 {
2457     display: -webkit-box;
2458     -webkit-box-orient: vertical;
2459     -webkit-line-clamp: 2;
2460     overflow: hidden;
2463 .word-break-all {
2464     word-break: break-all;
2467 .matchtext {
2468     background-color: lighten($primary, 40%);
2469     color: $body-color;
2470     height: 1.5rem;
2473 .border-radius {
2474     @if $enable-rounded {
2475         @include border-radius($card-border-radius);
2476     }
2479 // Emoji picker.
2480 $picker-width: 350px !default;
2481 $picker-width-xs: 320px !default;
2482 $picker-height: 400px !default;
2483 $picker-row-height: 40px !default;
2484 $picker-emoji-button-size: 40px !default;
2485 $picker-emoji-button-font-size: 24px !default;
2486 $picker-emoji-category-count: 9 !default;
2487 $picker-emojis-per-row: 7 !default;
2489 .emoji-picker {
2490     width: $picker-width;
2491     height: $picker-height;
2493     .category-button {
2494         padding: .375rem 0;
2495         height: 100%;
2496         width: $picker-width / $picker-emoji-category-count;
2497         border-top: none;
2498         border-left: none;
2499         border-right: none;
2500         border-bottom: 2px solid transparent;
2502         &.selected {
2503             border-bottom: 2px solid map-get($theme-colors, 'primary');
2504         }
2505     }
2507     .emojis-container,
2508     .search-results-container {
2509         min-width: $picker-emojis-per-row * $picker-emoji-button-size;
2510     }
2512     .picker-row {
2513         height: $picker-row-height;
2515         .category-name {
2516             line-height: $picker-row-height;
2517         }
2519         .emoji-button {
2520             height: $picker-emoji-button-size;
2521             width: $picker-emoji-button-size;
2522             line-height: $picker-emoji-button-size;
2523             font-size: $picker-emoji-button-font-size;
2524             overflow: hidden;
2526             @include hover-focus {
2527                 color: inherit;
2528                 text-decoration: none;
2529             }
2530         }
2531     }
2533     .emoji-preview {
2534         height: $picker-row-height;
2535         font-size: $picker-row-height;
2536         line-height: $picker-row-height;
2537     }
2539     .emoji-short-name {
2540         line-height: $picker-row-height / 2;
2541     }
2543     @include media-breakpoint-down(xs) {
2544         width: $picker-width-xs;
2545     }
2548 .emoji-auto-complete {
2549     height: $picker-row-height;
2551     .btn.btn-link.btn-icon.emoji-button {
2552         height: $picker-emoji-button-size;
2553         width: $picker-emoji-button-size;
2554         line-height: $picker-emoji-button-size;
2555         font-size: $picker-emoji-button-font-size;
2557         &.active {
2558             background-color: $gray-200;
2559         }
2560     }
2563 .toast-wrapper {
2564     max-width: $toast-max-width;
2565     max-height: 0;
2566     // Place these above any modals and other elements.
2567     z-index: 1051;
2569     > :first-child {
2570         margin-top: $spacer;
2571     }
2574 @each $color, $value in $theme-colors {
2575     .alert-#{$color} a {
2576         color: darken(theme-color-level($color, $alert-color-level), 10%);
2577     }
2580 @include media-breakpoint-down(sm) {
2581     #page-navbar {
2582         width: 100%;
2583     }
2585     .breadcrumb:not(:empty) {
2586         width: 100%;
2587         border: ($border-width * 2) solid $gray-200;
2588         padding: $spacer / 4;
2589         margin-bottom: $spacer / 2;
2590         .breadcrumb-item {
2591             padding-top: $spacer / 3;
2592             padding-bottom: $spacer / 3;
2593             display: inline-block;
2594         }
2595     }
2597     .mform {
2598         width: 100%;
2599         padding-right: 15px;
2600         padding-left: 15px;
2601     }
2602     .pagination {
2603         flex-wrap: wrap;
2604         justify-content: center;
2605     }
2606     .custom-select {
2607         max-width: 100%;
2608     }
2609     .card .card-body {
2610         padding: $card-spacer-x / 2;
2611     }
2612     #page-header {
2613         .card {
2614             border: 0;
2615             .card-body {
2616                 padding: 0;
2617             }
2618         }
2619     }
2620     .nav-tabs,
2621     .nav-pills {
2622         margin: 0;
2623         border: 0;
2624         padding: $spacer / 8;
2625         background-color: $gray-200;
2626         .nav-item {
2627             flex: 1 1 auto;
2628             text-align: center;
2629         }
2630         .nav-link {
2631             background: $white;
2632             border: 0;
2633             margin: $spacer / 8;
2634             &.active {
2635                 @include button-outline-variant($gray-600);
2636                 border-color: $gray-600;
2637             }
2638         }
2639     }
2642 @media (max-width: map-get($grid-breakpoints, "sm")) and (max-height: 320px) {
2643     div#page {
2644         margin-top: 0;
2645     }
2646     .navbar.fixed-top {
2647         position: relative;
2648         z-index: inherit;
2649     }