afd70e888eec153ebf3f8ba38d489d888addd8bd
[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 .modchooser .modal-footer {
1635     height: 70px;
1636     background: $modal-content-bg;
1637     .moodlenet-logo {
1638         .icon {
1639             height: 2.5rem;
1640             width: 6rem;
1641             margin-bottom: .6rem;
1642         }
1643     }
1646 .modchoosercontainer.noscroll {
1647     overflow-y: hidden;
1650 .modchooser .searchcontainer .searchbar .input-group-append {
1651     align-items: center;
1653     i {
1654         color: #868e96;
1655         margin: 0;
1656         vertical-align: middle;
1657         font-size: 20px;
1658         height: 20px;
1659         width: 20px;
1660     }
1663 .modchoosercontainer .optionscontainer,
1664 .modchoosercontainer .searchresultitemscontainer {
1665     overflow-x: hidden;
1666     .option {
1667         // 2 items per line.
1668         flex-basis: calc(50% - 0.5rem);
1669         .optionactions {
1670             .optionaction {
1671                 cursor: pointer;
1672                 color: $gray-600;
1673                 i {
1674                     margin: 0;
1675                 }
1676             }
1677         }
1678         .optioninfo {
1679             a {
1680                 color: $gray-700;
1681                 &:hover {
1682                     text-decoration: none;
1683                 }
1684             }
1685         }
1686     }
1689 .modchooser .modal-body .optionsummary {
1690     background-color: $white;
1691     overflow-x: hidden;
1692     overflow-y: auto;
1693     height: 640px;
1695     .content {
1696         overflow-y: auto;
1697         .heading {
1698             .icon {
1699                 height: 32px;
1700                 width: 32px;
1701                 font-size: 32px;
1702                 padding: 0;
1703             }
1704         }
1705     }
1707     .actions {
1708         border-top: 1px solid $gray-300;
1709         background: $white;
1710     }
1713 @include media-breakpoint-down(xs) {
1714     .path-course-view .modal-dialog.modal-lg,
1715     .path-course-view .modal-content,
1716     .modchooser .modal-body,
1717     .modchooser .modal-body .carousel,
1718     .modchooser .modal-body .carousel-inner,
1719     .modchooser .modal-body .carousel-item,
1720     .modchooser .modal-body .optionsummary,
1721     .modchoosercontainer,
1722     .optionscontainer,
1723     .searchresultitemscontainer {
1724         min-height: auto;
1725         height: 100%;
1726         overflow-y: auto;
1727     }
1728     .path-course-view .modal-dialog.modal-lg {
1729         margin: 0;
1730     }
1731     .modchooser .modal-body .searchresultitemscontainer-wrapper {
1732         min-height: auto;
1733     }
1736 @include media-breakpoint-up(sm) {
1737     .modchoosercontainer .optionscontainer .option,
1738     .modchoosercontainer .searchresultitemscontainer .option {
1739         // Three items per line.
1740         flex-basis: calc(33.33% - 0.5rem);
1741     }
1744 @include media-breakpoint-up(lg) {
1745     .modchoosercontainer .optionscontainer .option,
1746     .modchoosercontainer .searchresultitemscontainer .option {
1747         // Six items per line.
1748         flex-basis: calc(16.66% - 0.5rem);
1749     }
1752 /* Form element: listing */
1753 .formlistingradio {
1754     padding-bottom: 25px;
1755     padding-right: 10px;
1758 .formlistinginputradio {
1759     float: left;
1762 .formlistingmain {
1763     min-height: 225px;
1766 .formlisting {
1767     position: relative;
1768     margin: 15px 0;
1769     padding: 1px 19px 14px;
1770     background-color: white;
1771     border: 1px solid #ddd;
1773     @include border-radius(4px);
1776 .formlistingmore {
1777     position: absolute;
1778     cursor: pointer;
1779     bottom: -1px;
1780     right: -1px;
1781     padding: 3px 7px;
1782     font-size: 12px;
1783     font-weight: bold;
1784     background-color: whitesmoke;
1785     border: 1px solid #ddd;
1786     color: #9da0a4;
1788     @include border-radius(4px 0 4px 0);
1791 .formlistingall {
1792     margin: 15px 0;
1793     padding: 0;
1795     @include border-radius(4px);
1798 .formlistingrow {
1799     cursor: pointer;
1800     border-bottom: 1px solid;
1801     border-color: #e1e1e8;
1802     border-left: 1px solid #e1e1e8;
1803     border-right: 1px solid #e1e1e8;
1804     background-color: #f7f7f9;
1806     @include border-radius(0 0 4px 4px);
1807     padding: 6px;
1808     top: 50%;
1809     left: 50%;
1810     min-height: 34px;
1811     float: left;
1812     width: 150px;
1815 body.jsenabled .formlistingradio {
1816     display: none;
1819 body.jsenabled .formlisting {
1820     display: block;
1823 a.criteria-action {
1824     padding: 0 3px;
1825     float: right;
1828 div.criteria-description {
1829     padding: 10px 15px;
1830     margin: 5px 0;
1831     background: none repeat scroll 0 0 #f9f9f9;
1832     border: 1px solid #eee;
1835 ul.badges {
1836     margin: 0;
1837     list-style: none;
1840 .badges li {
1841     position: relative;
1842     display: inline-block;
1843     padding-top: 1em;
1844     text-align: center;
1845     vertical-align: top;
1846     width: 150px;
1849 .badges li .badge-name {
1850     display: block;
1851     padding: 5px;
1854 .badges li > img {
1855     position: absolute;
1858 .badges li .badge-image {
1859     width: 100px;
1860     height: 100px;
1861     left: 10px;
1862     top: 0;
1863     z-index: 1;
1866 .badges li .badge-actions {
1867     position: relative;
1870 .badges li .expireimage {
1871     width: 100px;
1872     height: 100px;
1873     left: 25px;
1874     top: 0;
1875     position: absolute;
1876     z-index: 10;
1877     opacity: 0.85;
1880 #badge-image {
1881     background-color: transparent;
1882     padding: 0;
1883     position: relative;
1884     min-width: 100px;
1885     width: 20%;
1886     display: inline-block;
1887     vertical-align: top;
1888     margin-top: 17px;
1889     margin-bottom: 20px;
1891     .expireimage {
1892         width: 100px;
1893         height: 100px;
1894         left: 0;
1895         top: 0;
1896         opacity: 0.85;
1897         position: absolute;
1898         z-index: 10;
1899     }
1901     .singlebutton {
1902         padding-top: 5px;
1903         display: block;
1905         button {
1906             margin-left: 4px;
1907         }
1908     }
1911 #badge-details {
1912     display: inline-block;
1913     width: 79%;
1916 #badge-overview dl,
1917 #badge-details dl {
1918     margin: 0;
1920     dt,
1921     dd {
1922         vertical-align: top;
1923         padding: 3px 0;
1924     }
1926     dt {
1927         clear: both;
1928         display: inline-block;
1929         width: 20%;
1930         min-width: 100px;
1931     }
1933     dd {
1934         display: inline-block;
1935         width: 79%;
1936         margin-left: 1%;
1937     }
1940 .badge-profile {
1941     vertical-align: top;
1944 .connected {
1945     color: map-get($theme-colors, 'success');
1948 .notconnected {
1949     color: map-get($theme-colors, 'danger');
1952 .connecting {
1953     color: map-get($theme-colors, 'warning');
1956 #page-badges-award .recipienttable tr td {
1957     vertical-align: top;
1960 #page-badges-award .recipienttable tr td.actions .actionbutton {
1961     margin: 0.3em 0;
1962     padding: 0.5em 0;
1963     width: 100%;
1966 #page-badges-award .recipienttable tr td.existing,
1967 #page-badges-award .recipienttable tr td.potential {
1968     width: 42%;
1971 #issued-badge-table .activatebadge {
1972     display: inline-block;
1975 .statusbox.active {
1976     background-color: $state-success-bg;
1979 .statusbox.inactive {
1980     background-color: $state-warning-bg;
1983 .statusbox {
1984     text-align: center;
1985     margin-bottom: 5px;
1986     padding: 5px;
1989 .statusbox .activatebadge {
1990     display: inline-block;
1993 .statusbox .activatebadge input[type=submit] {
1994     margin: 3px;
1997 .activatebadge {
1998     margin: 0;
1999     text-align: left;
2000     vertical-align: middle;
2003 img#persona_signin {
2004     cursor: pointer;
2007 .addcourse {
2008     float: right;
2011 .invisiblefieldset {
2012     display: inline;
2013     padding: 0;
2014     border-width: 0;
2017 /** Page header */
2018 #page-header {
2019     .logo {
2020         margin: $spacer 0;
2021         img {
2022             max-height: 75px;
2023         }
2024     }
2027 /** Navbar logo. */
2028 nav.navbar .logo img {
2029     max-height: 35px;
2032 /** Header-bar styles **/
2033 .page-context-header {
2034     // We need to be explicit about the height of the header.
2035     $pageHeaderHeight: 140px;
2037     // Do not remove these rules.
2038     overflow: hidden;
2039     padding: 0.25rem;
2041     .page-header-image,
2042     .page-header-headings {
2043         float: left;
2044         display: block;
2045         position: relative;
2046     }
2048     .page-header-image {
2049         margin-right: 1em;
2050         margin-bottom: 1em;
2051         & > a {
2052             display: inline-block;
2053         }
2054     }
2056     .page-header-headings,
2057     .header-button-group {
2058         position: relative;
2059         line-height: 24px;
2060         vertical-align: middle;
2061     }
2063     .header-button-group {
2064         display: block;
2065         float: left;
2066     }
2069 ul.dragdrop-keyboard-drag li {
2070     list-style-type: none;
2073 a.disabled:hover,
2074 a.disabled {
2075     text-decoration: none;
2076     cursor: default;
2077     font-style: italic;
2078     color: #808080;
2081 body.lockscroll {
2082     height: 100%;
2083     overflow: hidden;
2086 .progressbar_container {
2087     max-width: 500px;
2088     margin: 0 auto;
2091 /* IE10 only fix for calendar titling */
2092 .ie10 .yui3-calendar-header-label {
2093     display: inline-block;
2096 dd:before,
2097 dd:after {
2098     display: block;
2099     content: " ";
2102 dd:after {
2103     clear: both;
2106 // Active tabs with links should have a different
2107 // cursor to indicate they are clickable.
2108 .nav-tabs > .active > a[href],
2109 .nav-tabs > .active > a[href]:hover,
2110 .nav-tabs > .active > a[href]:focus {
2111     cursor: pointer;
2114 .inplaceeditable {
2115     &.inplaceeditingon {
2116         position: relative;
2118         .editinstructions {
2119             margin-top: -30px;
2120             font-weight: normal;
2121             margin-right: 0;
2122             margin-left: 0;
2123             left: 0;
2124             right: auto;
2125             white-space: nowrap;
2126         }
2127         @include media-breakpoint-up(sm) {
2128             input {
2129                 width: 330px;
2130                 vertical-align: text-bottom;
2131                 margin-bottom: 0;
2132             }
2133         }
2135         select {
2136             margin-bottom: 0;
2137         }
2138     }
2140     .quickediticon img {
2141         opacity: 0.2;
2142     }
2144     .quickeditlink {
2145         color: inherit;
2146         text-decoration: inherit;
2147     }
2149     &:hover .quickeditlink .quickediticon img,
2150     .quickeditlink:focus .quickediticon img {
2151         opacity: 1;
2152     }
2154     &.inplaceeditable-toggle .quickediticon {
2155         display: none;
2156     }
2158     &.inplaceeditable-autocomplete {
2159         display: block;
2160     }
2163 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2164     margin-top: -20px;
2167 /** Chart area. */
2168 .chart-area {
2170     .chart-table-data {
2171         display: none;
2172     }
2174     .chart-table {
2175         .chart-output-htmltable caption {
2176             white-space: nowrap;
2177         }
2178         /** When accessible, we display the table only. */
2179         &.accesshide {
2180             .chart-table-expand {
2181                 display: none;
2182             }
2183             .chart-table-data {
2184                 display: block;
2185             }
2186         }
2187     }
2190 // Reset for ul.
2191 ul {
2192     padding-left: 1rem;
2195 /* YUI 2 Tree View */
2196 /*rtl:raw:
2197 .ygtvtn,
2198 .ygtvtm,
2199 .ygtvtmh,
2200 .ygtvtmhh,
2201 .ygtvtp,
2202 .ygtvtph,
2203 .ygtvtphh,
2204 .ygtvln,
2205 .ygtvlm,
2206 .ygtvlmh,
2207 .ygtvlmhh,
2208 .ygtvlp,
2209 .ygtvlph,
2210 .ygtvlphh,
2211 .ygtvdepthcell,
2212 .ygtvok,
2213 .ygtvok:hover,
2214 .ygtvcancel,
2215 .ygtvcancel:hover {
2216     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
2218 */
2220 .hover-tooltip-container {
2221     position: relative;
2223     .hover-tooltip {
2224         opacity: 0;
2225         visibility: hidden;
2226         position: absolute;
2227         /*rtl:ignore*/
2228         left: 50%;
2229         top: calc(-50% - 5px);
2230         transform: translate(-50%, -50%);
2231         background-color: #fff;
2232         border: 1px solid rgba(0, 0, 0, .2);
2233         border-radius: .3rem;
2234         box-sizing: border-box;
2235         padding: 5px;
2236         white-space: nowrap;
2237         transition: opacity 0.15s, visibility 0.15s;
2238         z-index: 1000;
2240         &:before {
2241             content: '';
2242             display: inline-block;
2243             border-left: 8px solid transparent;
2244             border-right: 8px solid transparent;
2245             border-top: 8px solid rgba(0, 0, 0, .2);
2246             position: absolute;
2247             bottom: -8px;
2248             left: calc(50% - 8px);
2249         }
2251         &:after {
2252             content: '';
2253             display: inline-block;
2254             border-left: 7px solid transparent;
2255             border-right: 7px solid transparent;
2256             border-top: 7px solid #fff;
2257             position: absolute;
2258             bottom: -6px;
2259             left: calc(50% - 7px);
2260             z-index: 2;
2261         }
2262     }
2264     &:hover {
2265         .hover-tooltip {
2266             opacity: 1;
2267             visibility: visible;
2268             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2269         }
2270     }
2273 #region-flat-nav {
2274     padding-right: 0;
2275     padding-left: 0;
2276     .nav {
2277         margin-right: $grid-gutter-width / 2;
2278         background-color: $card-bg;
2279     }
2280     @include media-breakpoint-down(sm) {
2281         .nav {
2282             margin-top: $grid-gutter-width;
2283             margin-right: 0;
2284         }
2285     }
2288 // Footer link colour was added to allow the colour of footer links to be changed,
2289 // but really in bootstrap we want the colour of links on .bg-inverse to be changed
2290 // rather than being specific to the footer. This is kept for backwards compatibility.
2291 $footer-link-color: $bg-inverse-link-color !default;
2292 #page-footer a {
2293     color: $footer-link-color;
2294     text-decoration: underline;
2295     .icon {
2296         color: $footer-link-color;
2297     }
2298     &:focus .icon {
2299         color: $body-color;
2300     }
2303 .bg-inverse a {
2304     color: $bg-inverse-link-color;
2305     text-decoration: underline;
2306     .icon {
2307         color: $bg-inverse-link-color;
2308     }
2311 .sitelink {
2312     img {
2313         width: 112px;
2314     }
2317 // Make links in a menu clickable anywhere in the row.
2318 .dropdown-item a {
2319     display: block;
2320     width: 100%;
2321     color: $body-color;
2323 .dropdown-item:active a {
2324     color: $dropdown-link-active-color;
2327 .competency-tree {
2328     ul {
2329         padding-left: 1.5rem;
2330     }
2333 .sr-only-focusable {
2334     &:active,
2335     &:focus {
2336         z-index: $zindex-navbar-fixed + 1;
2337         position: fixed;
2338         background: #fff;
2339         padding: 7px;
2340         left: 0;
2341         top: 0;
2342     }
2345 [data-drag-type="move"] {
2346     cursor: move;
2347     touch-action: none;
2350 .clickable {
2351     cursor: pointer;
2354 .overlay-icon-container {
2355     position: absolute;
2356     top: 0;
2357     left: 0;
2358     width: 100%;
2359     height: 100%;
2360     background-color: rgba(255, 255, 255, 0.6);
2362     .loading-icon {
2363         position: absolute;
2364         top: 50%;
2365         left: 50%;
2366         transform: translate(-50%, -50%);
2368         .icon {
2369             height: 30px;
2370             width: 30px;
2371             font-size: 30px;
2372         }
2373     }
2376 .open.atto_menu > .dropdown-menu {
2377     display: block;
2379 div.editor_atto_toolbar button .icon {
2380     color: $gray-700;
2382 .w-auto {
2383     width: auto;
2386 .bg-pulse-grey {
2387     animation: bg-pulse-grey 2s infinite linear;
2390 @keyframes bg-pulse-grey {
2391     0% {
2392         background-color: $gray-100;
2393     }
2394     50% {
2395         background-color: darken($gray-100, 5%);
2396     }
2397     100% {
2398         background-color: $gray-100;
2399     }
2402 @each $size, $length in $spacers {
2403     .line-height-#{$size} {
2404         line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2405     }
2408 .dir-rtl {
2409     .dir-rtl-hide {
2410         display: none;
2411     }
2414 .dir-ltr {
2415     .dir-ltr-hide {
2416         display: none;
2417     }
2420 .paged-content-page-container {
2421     min-height: 3.125rem;
2424 body.h5p-embed {
2425     #page-content {
2426         display: inherit;
2427     }
2428     #maincontent {
2429         display: none;
2430     }
2431     .h5pmessages {
2432         min-height: 230px; // This should be the same height as default core_h5p iframes.
2433     }
2436 .text-decoration-none {
2437     text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
2440 .colour-inherit {
2441     color: inherit !important; /* stylelint-disable-line declaration-no-important */
2444 .position-right {
2445     right: 0 !important; /* stylelint-disable-line declaration-no-important */
2448 .overflow-hidden {
2449     overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
2452 .text-break {
2453     overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
2456 .z-index-0 {
2457     z-index: 0 !important; /* stylelint-disable-line declaration-no-important */
2460 .z-index-1 {
2461     z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
2464 // These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
2465 .float-left {
2466     float: left !important; /* stylelint-disable-line declaration-no-important */
2468 .float-right {
2469     float: right !important; /* stylelint-disable-line declaration-no-important */
2472 .clamp-2 {
2473     display: -webkit-box;
2474     -webkit-box-orient: vertical;
2475     -webkit-line-clamp: 2;
2476     overflow: hidden;
2479 .word-break-all {
2480     word-break: break-all;
2483 .matchtext {
2484     background-color: lighten($primary, 40%);
2485     color: $body-color;
2486     height: 1.5rem;
2489 .border-radius {
2490     @if $enable-rounded {
2491         @include border-radius($card-border-radius);
2492     }
2495 // Emoji picker.
2496 $picker-width: 350px !default;
2497 $picker-width-xs: 320px !default;
2498 $picker-height: 400px !default;
2499 $picker-row-height: 40px !default;
2500 $picker-emoji-button-size: 40px !default;
2501 $picker-emoji-button-font-size: 24px !default;
2502 $picker-emoji-category-count: 9 !default;
2503 $picker-emojis-per-row: 7 !default;
2505 .emoji-picker {
2506     width: $picker-width;
2507     height: $picker-height;
2509     .category-button {
2510         padding: .375rem 0;
2511         height: 100%;
2512         width: $picker-width / $picker-emoji-category-count;
2513         border-top: none;
2514         border-left: none;
2515         border-right: none;
2516         border-bottom: 2px solid transparent;
2518         &.selected {
2519             border-bottom: 2px solid map-get($theme-colors, 'primary');
2520         }
2521     }
2523     .emojis-container,
2524     .search-results-container {
2525         min-width: $picker-emojis-per-row * $picker-emoji-button-size;
2526     }
2528     .picker-row {
2529         height: $picker-row-height;
2531         .category-name {
2532             line-height: $picker-row-height;
2533         }
2535         .emoji-button {
2536             height: $picker-emoji-button-size;
2537             width: $picker-emoji-button-size;
2538             line-height: $picker-emoji-button-size;
2539             font-size: $picker-emoji-button-font-size;
2540             overflow: hidden;
2542             @include hover-focus {
2543                 color: inherit;
2544                 text-decoration: none;
2545             }
2546         }
2547     }
2549     .emoji-preview {
2550         height: $picker-row-height;
2551         font-size: $picker-row-height;
2552         line-height: $picker-row-height;
2553     }
2555     .emoji-short-name {
2556         line-height: $picker-row-height / 2;
2557     }
2559     @include media-breakpoint-down(xs) {
2560         width: $picker-width-xs;
2561     }
2564 .emoji-auto-complete {
2565     height: $picker-row-height;
2567     .btn.btn-link.btn-icon.emoji-button {
2568         height: $picker-emoji-button-size;
2569         width: $picker-emoji-button-size;
2570         line-height: $picker-emoji-button-size;
2571         font-size: $picker-emoji-button-font-size;
2573         &.active {
2574             background-color: $gray-200;
2575         }
2576     }
2579 .toast-wrapper {
2580     max-width: $toast-max-width;
2581     max-height: 0;
2582     // Place these above any modals and other elements.
2583     z-index: 1051;
2585     > :first-child {
2586         margin-top: $spacer;
2587     }
2590 @each $color, $value in $theme-colors {
2591     .alert-#{$color} a {
2592         color: darken(theme-color-level($color, $alert-color-level), 10%);
2593     }
2596 @include media-breakpoint-down(sm) {
2597     #page-navbar {
2598         width: 100%;
2599     }
2601     .breadcrumb:not(:empty) {
2602         width: 100%;
2603         border: ($border-width * 2) solid $gray-200;
2604         padding: $spacer / 4;
2605         margin-bottom: $spacer / 2;
2606         .breadcrumb-item {
2607             padding-top: $spacer / 3;
2608             padding-bottom: $spacer / 3;
2609             display: inline-block;
2610         }
2611     }
2613     .mform {
2614         width: 100%;
2615         padding-right: 15px;
2616         padding-left: 15px;
2617     }
2618     .pagination {
2619         flex-wrap: wrap;
2620         justify-content: center;
2621     }
2622     .custom-select {
2623         max-width: 100%;
2624     }
2625     .card .card-body {
2626         padding: $card-spacer-x / 2;
2627     }
2628     #page-header {
2629         .card {
2630             border: 0;
2631             .card-body {
2632                 padding: 0;
2633             }
2634         }
2635     }
2636     .nav-tabs,
2637     .nav-pills {
2638         margin: 0;
2639         border: 0;
2640         padding: $spacer / 8;
2641         background-color: $gray-200;
2642         .nav-item {
2643             flex: 1 1 auto;
2644             text-align: center;
2645         }
2646         .nav-link {
2647             background: $white;
2648             border: 0;
2649             margin: $spacer / 8;
2650             &.active {
2651                 @include button-outline-variant($gray-600);
2652                 border-color: $gray-600;
2653             }
2654         }
2655     }
2658 @media (max-width: map-get($grid-breakpoints, "sm")) and (max-height: 320px) {
2659     div#page {
2660         margin-top: 0;
2661     }
2662     .navbar.fixed-top {
2663         position: relative;
2664         z-index: inherit;
2665     }
2668 .link-underline {
2669     text-decoration: underline;
2670     &:focus {
2671         text-decoration: none;
2672     }
2675 .alert.cta {
2676     .icon {
2677         padding: 0.3rem;
2678         &.fa {
2679             border-radius: 50%;
2680             border-style: solid;
2681             border-width: 0.125rem;
2682         }
2683     }