Merge branch 'MDL-63041-master' of git://github.com/bmbrands/moodle
[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     border: $card-border-width solid $card-border-color;
12     padding: $card-spacer-x;
13     background-color: $body-bg;
14 }
16 .context-header-settings-menu,
17 .region-main-settings-menu {
18     float: right;
19     width: auto;
20     max-width: 4em;
21     height: 2em;
22     display: block;
23     margin-top: 4px;
24 }
26 .context-header-settings-menu .dropdown-toggle > .icon,
27 #region-main-settings-menu .dropdown-toggle > .icon {
28     height: 24px;
29     font-size: 24px;
30     width: auto;
31 }
32 /** Prevent user notifications overlapping with region main settings menu */
33 #user-notifications {
34     display: block;
35     overflow: hidden;
36 }
38 /** Page layout CSS starts **/
39 .layout-option-noheader #page-header,
40 .layout-option-nonavbar #page-navbar,
41 .layout-option-nofooter #page-footer,
42 .layout-option-nocourseheader .course-content-header,
43 .layout-option-nocoursefooter .course-content-footer {
44     display: none;
45 }
47 /** Page layout CSS ends **/
49 .mdl-left {
50     text-align: left;
51 }
53 .mdl-right {
54     text-align: right;
55 }
57 /*rtl:ignore*/
58 .text-ltr {
59     direction: ltr !important; /* stylelint-disable-line declaration-no-important */
60 }
62 #add,
63 #remove,
64 .centerpara,
65 .mdl-align {
66     text-align: center;
67 }
69 a.dimmed,
70 a.dimmed:link,
71 a.dimmed:visited,
72 a.dimmed_text,
73 a.dimmed_text:link,
74 a.dimmed_text:visited,
75 .dimmed_text,
76 .dimmed_text a,
77 .dimmed_text a:link,
78 .dimmed_text a:visited,
79 .usersuspended,
80 .usersuspended a,
81 .usersuspended a:link,
82 .usersuspended a:visited,
83 .dimmed_category,
84 .dimmed_category a {
85     @extend .text-muted;
86 }
88 .unlist,
89 .unlist li,
90 .inline-list,
91 .inline-list li,
92 .block .list,
93 .block .list li,
94 .section li.activity,
95 .section li.movehere,
96 .tabtree li {
97     list-style: none;
98     margin: 0;
99     padding: 0;
102 .inline,
103 .inline-list li {
104     display: inline;
107 .notifytiny {
108     font-size: $font-size-xs;
111 .notifytiny li,
112 .notifytiny td {
113     font-size: 100%;
116 .red,
117 .notifyproblem {
118     @extend .text-warning;
121 .green,
122 .notifysuccess {
123     @extend .text-success;
126 .highlight {
127     @extend .text-info;
130 .fitem.advanced .text-info {
131     font-weight: bold;
134 .reportlink {
135     text-align: right;
138 a.autolink.glossary:hover {
139     cursor: help;
141 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
142 .collapsibleregioncaption {
143     white-space: nowrap;
144     min-height: $line-height-base * $font-size-base;
147 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
148     cursor: pointer;
151 .pagelayout-mydashboard #region-main {
152     border: 0;
153     padding: 0;
154     background-color: transparent;
155     margin-top: -1px;
158 .collapsibleregioncaption img {
159     vertical-align: middle;
162 .jsenabled .hiddenifjs {
163     display: none;
166 .visibleifjs {
167     display: none;
170 .jsenabled .visibleifjs {
171     display: inline;
174 .jsenabled .collapsibleregion {
175     overflow: hidden;
176     box-sizing: content-box;
179 .jsenabled .collapsed .collapsibleregioninner {
180     visibility: hidden;
183 .collapsible-actions {
184     display: none;
185     text-align: right;
188 .jsenabled .collapsible-actions {
189     display: block;
192 .collapsible-actions .collapseexpand {
193     padding-left: 20px;
194     background: url([[pix:t/collapsed]]) 2px center no-repeat;
196 /*rtl:raw:
197 .collapsible-actions .collapseexpand {
198     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
200 */
201 .collapsible-actions .collapse-all {
202     background-image: url([[pix:t/expanded]]);
205 .yui-overlay .yui-widget-bd {
206     background-color: #ffee69;
207     border: 1px solid #a6982b;
208     border-top-color: #d4c237;
209     color: #000;
210     left: 0;
211     padding: 2px 5px;
212     position: relative;
213     top: 0;
214     z-index: 1;
217 .clearer {
218     background: transparent;
219     border-width: 0;
220     clear: both;
221     display: block;
222     height: 1px;
223     margin: 0;
224     padding: 0;
227 .bold,
228 .warning,
229 .errorbox .title,
230 .pagingbar .title,
231 .pagingbar .thispage {
232     font-weight: bold;
235 img.userpicture {
236     margin-right: 0.5rem;
239 img.resize {
240     height: 1em;
241     width: 1em;
244 .action-menu .dropdown-toggle {
245     text-decoration: none;
248 .action-menu {
249     white-space: nowrap;
252 .block img.resize {
253     height: 0.9em;
254     width: 0.8em;
256 /* Icon styles */
257 img.activityicon {
258     height: 24px;
259     width: 24px;
260     vertical-align: middle;
263 .headermain {
264     font-weight: bold;
267 #maincontent {
268     display: block;
269     height: 1px;
270     overflow: hidden;
273 img.uihint {
274     cursor: help;
277 #addmembersform table {
278     margin-left: auto;
279     margin-right: auto;
282 table.flexible .emptyrow {
283     display: none;
286 form.popupform,
287 form.popupform div {
288     display: inline;
291 .arrow_button input {
292     overflow: hidden;
294 .no-overflow {
295     overflow: auto;
298 // Minimum height required for a menu in a table inside a scrollable div.
299 .no-overflow > .generaltable {
300     margin-bottom: 0;
301     min-height: 10em;
303 // Accessibility features
305 // Accessibility: text 'seen' by screen readers but not visual users.
306 .accesshide {
307     @include sr-only();
310 span.hide,
311 div.hide,
312 .hidden {
313     display: none;
315 // Accessibility: Skip block link, for keyboard-only users.
316 a.skip-block,
317 a.skip {
318     position: absolute;
319     top: -1000em;
320     font-size: 0.85em;
321     text-decoration: none;
324 a.skip-block:focus,
325 a.skip-block:active,
326 a.skip:focus,
327 a.skip:active {
328     position: static;
329     display: block;
332 .skip-block-to {
333     display: block;
334     height: 1px;
335     overflow: hidden;
337 // Blogs
338 .addbloglink {
339     text-align: center;
342 .blog_entry .audience {
343     text-align: right;
344     padding-right: 4px;
347 .blog_entry .tags {
348     margin-top: 15px;
351 .blog_entry .content {
352     margin-left: 43px;
354 // Group
356 #doc-contents h1 {
357     margin: 1em 0 0 0;
360 #doc-contents ul {
361     margin: 0;
362     padding: 0;
363     width: 90%;
366 #doc-contents ul li {
367     list-style-type: none;
370 .groupmanagementtable td {
371     vertical-align: top;
374 .groupmanagementtable #existingcell,
375 .groupmanagementtable #potentialcell {
376     width: 42%;
379 .groupmanagementtable #buttonscell {
380     width: 16%;
383 .groupmanagementtable #buttonscell p.arrow_button input {
384     width: auto;
385     min-width: 80%;
386     margin: 0 auto;
389 .groupmanagementtable #removeselect_wrapper,
390 .groupmanagementtable #addselect_wrapper {
391     width: 100%;
394 .groupmanagementtable #removeselect_wrapper label,
395 .groupmanagementtable #addselect_wrapper label {
396     font-weight: normal;
399 #group-usersummary {
400     width: 14em;
403 .groupselector {
404     margin-top: 3px;
405     margin-bottom: 3px;
406     display: inline-block;
409 .groupselector label {
410     display: inline-block;
413 // Login
414 .login-page {
415     [name="username"] {
416         margin-bottom: -1px;
417         border-bottom-right-radius: 0;
418         border-bottom-left-radius: 0;
419     }
421     [type="password"] {
422         margin-bottom: 10px;
423         border-top-left-radius: 0;
424         border-top-right-radius: 0;
425     }
428 // Notes
429 .notepost {
430     margin-bottom: 1em;
433 .notepost .userpicture {
434     float: left;
435     margin-right: 5px;
438 .notepost .content,
439 .notepost .footer {
440     clear: both;
443 .notesgroup {
444     margin-left: 20px;
447 // My Moodle
448 .path-my .coursebox {
449     margin: $spacer-y 0;
450     padding: 0;
452     .overview {
453         margin: 15px 30px 10px 30px;
454     }
457 .path-my .coursebox .info {
458     float: none;
459     margin: 0;
462 // Modules
463 .mod_introbox {
464     padding: 10px;
467 table.mod_index {
468     width: 100%;
471 // Comments
472 .comment-ctrl {
473     font-size: 12px;
474     display: none;
475     margin: 0;
476     padding: 0;
479 .comment-ctrl h5 {
480     margin: 0;
481     padding: 5px;
484 .comment-area {
485     max-width: 400px;
486     padding: 5px;
489 .comment-area textarea {
490     width: 100%;
491     overflow: auto;
493     &.fullwidth {
494         -webkit-box-sizing: border-box;
495         -moz-box-sizing: border-box;
496         box-sizing: border-box;
497     }
500 .comment-area .fd {
501     text-align: right;
504 .comment-meta span {
505     color: gray;
508 .comment-link img {
509     vertical-align: text-bottom;
512 .comment-list {
513     font-size: 11px;
514     overflow: auto;
515     list-style: none;
516     padding: 0;
517     margin: 0;
520 .comment-list li {
521     margin: 2px;
522     list-style: none;
523     margin-bottom: 5px;
524     clear: both;
525     padding: .3em;
526     position: relative;
529 .comment-list li.first {
530     display: none;
533 .comment-paging {
534     text-align: center;
537 .comment-paging .pageno {
538     padding: 2px;
541 .comment-paging .curpage {
542     border: 1px solid #ccc;
545 .comment-message .picture {
546     width: 20px;
547     float: left;
550 .comment-message .text {
551     margin: 0;
552     padding: 0;
555 .comment-message .text p {
556     padding: 0;
557     margin: 0 18px 0 0;
560 .comment-delete {
561     position: absolute;
562     top: 0;
563     right: 0;
564     margin: .3em;
567 .comment-report-selectall {
568     display: none;
571 .comment-link {
572     display: none;
575 .jsenabled .comment-link {
576     display: block;
579 .jsenabled .showcommentsnonjs {
580     display: none;
583 .jsenabled .comment-report-selectall {
584     display: inline;
586 /**
587 * Completion progress report
588 */
589 .completion-expired {
590     @extend .text-warning;
593 .completion-expected {
594     font-size: $font-size-xs;
597 .completion-sortchoice,
598 .completion-identifyfield {
599     font-size: $font-size-xs;
600     vertical-align: bottom;
603 .completion-progresscell {
604     text-align: right;
607 .completion-expired .completion-expected {
608     font-weight: bold;
610 /**
611 * Tags
612 */
613 img.user-image {
614     height: 100px;
615     width: 100px;
618 #tag-search-box {
619     text-align: center;
620     margin: 10px auto;
623 .path-tag .tag-index-items .tagarea {
624     border: 1px solid #e3e3e3;
625     border-radius: 4px;
626     padding: 10px;
627     margin-top: 10px;
630 .path-tag .tag-index-items .tagarea h3 {
631     display: block;
632     padding: 3px 0 10px 0;
633     margin: 0;
634     font-size: 1.1em;
635     font-weight: bold;
636     line-height: 20px;
637     color: #999;
638     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
639     text-transform: uppercase;
640     word-wrap: break-word;
641     border-bottom: solid 1px #e3e3e3;
642     margin-bottom: 10px;
645 .path-tag .tagarea .controls,
646 .path-tag .tagarea .taggeditems {
647     @include clearfix();
650 .path-tag .tagarea .controls,
651 .path-tag .tag-backtoallitems {
652     text-align: center;
655 .path-tag .tagarea .controls .gotopage.nextpage {
656     float: right;
659 .path-tag .tagarea .controls .gotopage.prevpage {
660     float: left;
663 .path-tag .tagarea .controls .exclusivemode {
664     display: inline-block;
667 .path-tag .tagarea .controls.controls-bottom {
668     margin-top: 5px;
671 .path-tag .tagarea .controls .gotopage.nextpage::after {
672     padding-right: 5px;
673     padding-left: 5px;
674     content: "»";
677 .path-tag .tagarea .controls .gotopage.prevpage::before {
678     padding-right: 5px;
679     padding-left: 5px;
680     content: "«";
683 span.flagged-tag,
684 tr.flagged-tag,
685 span.flagged-tag a,
686 tr.flagged-tag a {
687     @extend .text-warning;
690 .tag-management-table td,
691 .tag-management-table th {
692     vertical-align: middle;
693     padding: 4px;
696 .tag-management-table .inplaceeditable.inplaceeditingon input {
697     width: 150px;
700 .path-admin-tag .addstandardtags {
701     float: right;
703     img {
704         margin: 0 5px;
705     }
708 .path-tag .tag-relatedtags {
709     padding-top: 10px;
712 .path-tag .tag-management-box {
713     text-align: right;
716 .path-tag .tag-index-toc {
717     padding: 10px;
718     text-align: center;
721 .path-tag .tag-index-toc li,
722 .path-tag .tag-management-box li {
723     margin-left: 5px;
724     margin-right: 5px;
727 .path-tag .tag-management-box li a.edittag {
728     background-image: url([[pix:moodle|i/settings]]);
731 .path-tag .tag-management-box li a.flagasinappropriate {
732     background-image: url([[pix:moodle|i/flagged]]);
735 .path-tag .tag-management-box li a.removefrommyinterests {
736     background-image: url([[pix:moodle|t/delete]]);
739 .path-tag .tag-management-box li a.addtomyinterests {
740     background-image: url([[pix:moodle|t/add]]);
743 .path-tag .tag-management-box li a {
744     background-repeat: no-repeat;
745     background-position: left;
746     padding-left: 17px;
749 .tag_feed.media-list .media .itemimage {
750     float: left;
753 .tag_feed.media-list .media .itemimage img {
754     height: 35px;
755     width: 35px;
758 .tag_feed.media-list .media .media-body {
759     padding-right: 10px;
760     padding-left: 10px;
763 .tag_feed .media .muted a {
764     @extend .text-muted;
767 .tag_cloud {
768     text-align: center;
771 .tag_cloud .inline-list li {
772     padding: 0 0.2em;
775 .tag_cloud .tag_overflow {
776     margin-top: 1em;
777     font-style: italic;
780 .tag_cloud .s20 {
781     font-size: 2.7em;
784 .tag_cloud .s19 {
785     font-size: 2.6em;
788 .tag_cloud .s18 {
789     font-size: 2.5em;
792 .tag_cloud .s17 {
793     font-size: 2.4em;
796 .tag_cloud .s16 {
797     font-size: 2.3em;
800 .tag_cloud .s15 {
801     font-size: 2.2em;
804 .tag_cloud .s14 {
805     font-size: 2.1em;
808 .tag_cloud .s13 {
809     font-size: 2em;
812 .tag_cloud .s12 {
813     font-size: 1.9em;
816 .tag_cloud .s11 {
817     font-size: 1.8em;
820 .tag_cloud .s10 {
821     font-size: 1.7em;
824 .tag_cloud .s9 {
825     font-size: 1.6em;
828 .tag_cloud .s8 {
829     font-size: 1.5em;
832 .tag_cloud .s7 {
833     font-size: 1.4em;
836 .tag_cloud .s6 {
837     font-size: 1.3em;
840 .tag_cloud .s5 {
841     font-size: 1.2em;
844 .tag_cloud .s4 {
845     font-size: 1.1em;
848 .tag_cloud .s3 {
849     font-size: 1em;
852 .tag_cloud .s2 {
853     font-size: 0.9em;
856 .tag_cloud .s1 {
857     font-size: 0.8em;
860 .tag_cloud .s0 {
861     font-size: 0.7em;
864 .tag_list ul {
865     display: inline;
868 .tag_list.hideoverlimit .overlimit {
869     display: none;
872 .tag_list .tagmorelink {
873     display: none;
876 .tag_list.hideoverlimit .tagmorelink {
877     display: inline;
880 .tag_list.hideoverlimit .taglesslink {
881     display: none;
884 /**
885 * Web Service
886 */
887 #webservice-doc-generator td {
888     text-align: left;
889     border: 0 solid black;
892 /**
893 * Enrol
894 */
895 .userenrolment {
896     width: 100%;
897     border-collapse: collapse;
900 .userenrolment tr {
901     vertical-align: top;
904 .userenrolment td {
905     padding: 0;
906     height: 41px;
909 .userenrolment .subfield {
910     margin-right: 5px;
913 .userenrolment .col_userdetails .subfield {
914     margin-left: 40px;
917 .userenrolment .col_userdetails .subfield_picture {
918     float: left;
919     margin-left: 0;
922 .userenrolment .col_lastseen {
923     width: 150px;
926 .userenrolment .col_role {
927     width: 262px;
930 .userenrolment .col_role .roles,
931 .userenrolment .col_group .groups {
932     margin-right: 30px;
935 .userenrolment .col_role .role {
936     float: left;
937     padding: 0 3px 3px;
938     margin: 0 3px 3px;
939     white-space: nowrap;
942 .userenrolment .col_group .group {
943     float: left;
944     padding: 3px;
945     margin: 3px;
946     white-space: nowrap;
949 .userenrolment .col_role .role a,
950 .userenrolment .col_group .group a {
951     margin-left: 3px;
952     cursor: pointer;
955 .userenrolment .col_role .addrole,
956 .userenrolment .col_group .addgroup {
957     float: right;
958     padding: 3px;
959     margin: 3px;
961     > a:hover {
962         border-bottom: 1px solid #666;
963     }
966 .userenrolment .col_role .addrole img,
967 .userenrolment .col_group .addgroup img {
968     vertical-align: baseline;
971 .userenrolment .hasAllRoles .col_role .addrole {
972     display: none;
975 .userenrolment .col_enrol .enrolment {
976     float: left;
977     padding: 0 3px 3px;
978     margin: 0 3px 3px;
981 .userenrolment .col_enrol .enrolment a {
982     float: right;
983     margin-left: 3px;
986 #page-enrol-users {
987     .enrol_user_buttons {
988         text-align: right;
990     }
992     #filterform {
993         @extend .card;
994         @extend .card-block;
995     }
998 #page-enrol-users .enrol-users-page-action input {
999     margin-left: 0;
1002 .corelightbox {
1003     background-color: #ccc;
1004     position: absolute;
1005     top: 0;
1006     left: 0;
1007     width: 100%;
1008     height: 100%;
1009     text-align: center;
1012 .corelightbox img {
1013     position: fixed;
1014     top: 50%;
1015     left: 50%;
1018 .mod-indent-outer {
1019     display: table;
1022 .mod-indent {
1023     display: table-cell;
1026 .label .mod-indent {
1027     float: left;
1028     padding-top: 20px;
1030 $mod-indent-size: 30px;
1031 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1033 @for $i from 1 through 16 {
1034     $width: ($i * $mod-indent-size);
1036     .mod-indent-#{$i} {
1037         width: $width;
1038     }
1041 .mod-indent-huge {
1042     width: (16 * $mod-indent-size);
1045 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1046 .resourcecontent .mediaplugin_mp3 object {
1047     height: 25px;
1048     width: 600px;
1051 .resourcecontent audio.mediaplugin_html5audio {
1052     width: 600px;
1054 /** Large resource images should avoid hidden overflow **/
1055 .resourceimage {
1056     max-width: 100%;
1058 /* Audio player size in 'inline' mode (can only change width, as above) */
1059 .mediaplugin_mp3 object {
1060     height: 15px;
1061     width: 300px;
1064 audio.mediaplugin_html5audio {
1065     width: 300px;
1067 /* TinyMCE moodle media preview frame should not have padding */
1068 .core_media_preview.pagelayout-embedded #content {
1069     padding: 0;
1072 .core_media_preview.pagelayout-embedded #maincontent {
1073     height: 0;
1076 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1077     padding: 0;
1078     margin: 0;
1079     min-width: 0;
1080     background: none;
1083 .path-rating .ratingtable {
1084     width: 100%;
1085     margin-bottom: 1em;
1088 .path-rating .ratingtable th.rating {
1089     width: 100%;
1092 .path-rating .ratingtable td.rating,
1093 .path-rating .ratingtable td.time {
1094     white-space: nowrap;
1095     text-align: center;
1098 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1099 .moodle-dialogue-base .moodle-dialogue-lightbox {
1100     background-color: $gray;
1103 // Prevent adding backdrops to popups in popups.
1104 .pagelayout-popup {
1105     .moodle-dialogue-base {
1106         .moodle-dialogue-lightbox {
1107             background-color: transparent;
1108         }
1109         .moodle-dialogue {
1110             box-shadow: $popover-box-shadow;
1111         }
1112     }
1115 .moodle-dialogue-base .hidden,
1116 .moodle-dialogue-base .moodle-dialogue-hidden {
1117     display: none;
1120 .no-scrolling {
1121     overflow: hidden;
1124 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1125     left: 0;
1126     top: 0;
1127     right: 0;
1128     bottom: -50px;
1129     position: fixed;
1132 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1133     overflow: auto;
1136 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1137     width: 28px;
1138     height: 16px;
1139     background-size: 100%;
1142 .moodle-dialogue-base .moodle-dialogue-wrap {
1143     background-color: #fff;
1144     border: 1px solid #ccc;
1147 // Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1148 // it for a reason (conflicts with jquery .show()).
1149 .modal.show {
1150     display: block;
1153 .moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content {
1154     @extend .modal-content;
1157 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1158     @extend .modal-header;
1161 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1162     // Undo some YUI damage.
1163     min-height: 3rem;
1164     color: initial;
1165     background: initial;
1166     font-size: 1.5rem;
1167     line-height: 1.5;
1170 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1171     @extend .modal-title;
1172     font-size: 1.5rem;
1175 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1176     /*rtl:raw:
1177         left: 0;
1178         right: auto;
1179     */
1180     padding: $spacer;
1183 .moodle-dialogue-base .closebutton {
1184     @extend .close;
1185     box-shadow: none;
1186     &::after {
1187         content: "×";
1188     }
1191 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1192     padding: 0.5rem;
1195 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1196     overflow: auto;
1197     position: absolute;
1198     top: 0;
1199     bottom: 50px;
1200     left: 0;
1201     right: 0;
1202     margin: 0;
1203     border: 0;
1206 .moodle-dialogue-exception .moodle-exception-param label {
1207     font-weight: bold;
1210 .moodle-dialogue-exception .param-stacktrace label {
1211     background-color: #eee;
1212     border: 1px solid #ccc;
1213     border-bottom-width: 0;
1216 .moodle-dialogue-exception .param-stacktrace pre {
1217     border: 1px solid #ccc;
1218     background-color: #fff;
1221 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1222     color: navy;
1223     font-size: $font-size-sm;
1226 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1227     @extend .text-warning;
1228     font-size: $font-size-sm;
1231 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1232     color: #333;
1233     font-size: 90%;
1234     border-bottom: 1px solid #eee;
1237 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1238     @extend .modal-footer;
1241 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1242     display: none;
1245 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1246     // Undo some YUI damage.
1247     background: initial;
1250 .moodle-dialogue-confirm .confirmation-message {
1251     margin: 0.5rem 0;
1254 .moodle-dialogue-confirm .confirmation-dialogue input {
1255     min-width: 80px;
1258 .moodle-dialogue-exception .moodle-exception-message {
1259     margin: 1em;
1262 .moodle-dialogue-exception .moodle-exception-param {
1263     margin-bottom: 0.5em;
1266 .moodle-dialogue-exception .moodle-exception-param label {
1267     width: 150px;
1270 .moodle-dialogue-exception .param-stacktrace label {
1271     display: block;
1272     margin: 0;
1273     padding: 4px 1em;
1276 .moodle-dialogue-exception .param-stacktrace pre {
1277     display: block;
1278     height: 200px;
1279     overflow: auto;
1282 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1283     display: inline-block;
1284     margin: 4px 0;
1287 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1288     display: inline-block;
1289     width: 50px;
1290     margin: 4px 1em;
1293 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1294     padding-left: 25px;
1295     margin-bottom: 4px;
1296     padding-bottom: 4px;
1299 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1300     opacity: 0.75;
1301     width: 100%;
1302     height: 100%;
1303     top: 0;
1304     left: 0;
1305     background-color: white;
1306     text-align: center;
1307     padding: 10% 0;
1309 /* Apply a default max-height on tooltip text */
1310 .moodle-dialogue .tooltiptext {
1311     max-height: 300px;
1314 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1315     z-index: 3001;
1317     .moodle-dialogue-bd {
1318         overflow: auto;
1319     }
1322 /**
1323  * Chooser Dialogues (moodle-core-chooserdialogue)
1324  *
1325  * This CSS belong to the chooser dialogue which should work both with, and
1326  * without javascript enabled
1327  */
1328 /* Hide the dialog and it's title */
1329 .chooserdialoguebody,
1330 .choosertitle {
1331     display: none;
1334 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1335     margin: 0;
1338 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1339     padding: 0;
1340     background: #f2f2f2;
1342     @include border-bottom-radius(10px);
1344 /* Center the submit buttons within the area */
1345 .choosercontainer #chooseform .submitbuttons {
1346     padding: 0.7em 0;
1347     text-align: right;
1349 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1351 @media (max-height: 639px) {
1352     .ios .choosercontainer #chooseform .submitbuttons {
1353         padding: 45px 0;
1354     }
1357 .choosercontainer #chooseform .submitbuttons input {
1358     min-width: 100px;
1359     margin: 0 0.5em;
1361 /* Various settings for the options area */
1362 .choosercontainer #chooseform .options {
1363     position: relative;
1364     border-bottom: 1px solid #bbb;
1366 /* Only set these options if we're showing the js container */
1367 .jschooser .choosercontainer #chooseform .alloptions {
1368     overflow-x: hidden;
1369     overflow-y: auto;
1370     max-width: 240px;
1372     .option {
1373         input[type=radio] {
1374             display: inline-block;
1375         }
1377         .typename {
1378             display: inline-block;
1379             width: 55%;
1380         }
1381     }
1383 /* Settings for option rows and option subtypes */
1384 .choosercontainer #chooseform .moduletypetitle,
1385 .choosercontainer #chooseform .option,
1386 .choosercontainer #chooseform .nonoption {
1387     margin-bottom: 0;
1388     padding: 0 1.6em 0 1.6em;
1391 .choosercontainer #chooseform .moduletypetitle {
1392     text-transform: uppercase;
1393     padding-top: 1.2em;
1394     padding-bottom: 0.4em;
1397 .choosercontainer #chooseform .option .typename,
1398 .choosercontainer #chooseform .nonoption .typename {
1399     padding: 0 0 0 0.5em;
1402 .choosercontainer #chooseform .modicon + .typename {
1403     padding-left: 0;
1406 .choosercontainer #chooseform .option input[type=radio],
1407 .choosercontainer #chooseform .option span.typename {
1408     vertical-align: middle;
1411 .choosercontainer #chooseform .option label {
1412     display: block;
1413     margin: 0;
1414     padding: ($spacer / 2) 0;
1415     border-bottom: 1px solid #fff;
1418 .choosercontainer #chooseform .option .icon {
1419     margin: 0;
1420     padding: 0 $spacer;
1423 .choosercontainer #chooseform .nonoption {
1424     padding-left: 2.7em;
1425     padding-top: 0.3em;
1426     padding-bottom: 0.1em;
1429 .choosercontainer #chooseform .subtype {
1430     margin-bottom: 0;
1431     padding: 0 1.6em 0 3.2em;
1434 .choosercontainer #chooseform .subtype .typename {
1435     margin: 0 0 0 0.2em;
1437 /* The instruction/help area */
1438 .jschooser .choosercontainer #chooseform .instruction,
1439 .jschooser .choosercontainer #chooseform .typesummary {
1440     display: none;
1441     position: absolute;
1442     top: 0;
1443     right: 0;
1444     bottom: 0;
1445     left: 240px;
1446     margin: 0;
1447     padding: 1.6em;
1448     background-color: #fff;
1449     overflow-x: hidden;
1450     overflow-y: auto;
1451     line-height: 2em;
1453 /* Selected option settings */
1454 .jschooser .choosercontainer #chooseform .instruction,
1455 .choosercontainer #chooseform .selected .typesummary {
1456     display: block;
1459 .choosercontainer #chooseform .selected {
1460     background-color: #fff;
1461     margin-top: -1px;
1462     padding-top: 1px;
1465 .chooserdialogue-course-modchooser .modicon .icon {
1466     width: 24px;
1467     height: 24px;
1468     font-size: 24px;
1471 @include media-breakpoint-down(xs) {
1472     .jsenabled .choosercontainer #chooseform .alloptions {
1473         max-width: 100%;
1474     }
1476     .jsenabled .choosercontainer #chooseform .instruction,
1477     .jsenabled .choosercontainer #chooseform .typesummary {
1478         position: static;
1479     }
1482 /* Form element: listing */
1483 .formlistingradio {
1484     padding-bottom: 25px;
1485     padding-right: 10px;
1488 .formlistinginputradio {
1489     float: left;
1492 .formlistingmain {
1493     min-height: 225px;
1496 .formlisting {
1497     position: relative;
1498     margin: 15px 0;
1499     padding: 1px 19px 14px;
1500     background-color: white;
1501     border: 1px solid #ddd;
1503     @include border-radius(4px);
1506 .formlistingmore {
1507     position: absolute;
1508     cursor: pointer;
1509     bottom: -1px;
1510     right: -1px;
1511     padding: 3px 7px;
1512     font-size: 12px;
1513     font-weight: bold;
1514     background-color: whitesmoke;
1515     border: 1px solid #ddd;
1516     color: #9da0a4;
1518     @include border-radius(4px 0 4px 0);
1521 .formlistingall {
1522     margin: 15px 0;
1523     padding: 0;
1525     @include border-radius(4px);
1528 .formlistingrow {
1529     cursor: pointer;
1530     border-bottom: 1px solid;
1531     border-color: #e1e1e8;
1532     border-left: 1px solid #e1e1e8;
1533     border-right: 1px solid #e1e1e8;
1534     background-color: #f7f7f9;
1536     @include border-radius(0 0 4px 4px);
1537     padding: 6px;
1538     top: 50%;
1539     left: 50%;
1540     min-height: 34px;
1541     float: left;
1542     width: 150px;
1545 body.jsenabled .formlistingradio {
1546     display: none;
1549 body.jsenabled .formlisting {
1550     display: block;
1553 /* Badges styles */
1554 table.collection {
1555     @extend .table;
1556     @extend .table-bordered;
1557     @extend .table-striped;
1560 a.criteria-action {
1561     padding: 0 3px;
1562     float: right;
1565 div.criteria-description {
1566     padding: 10px 15px;
1567     margin: 5px 0;
1568     background: none repeat scroll 0 0 #f9f9f9;
1569     border: 1px solid #eee;
1572 ul.badges {
1573     margin: 0;
1574     list-style: none;
1577 .badges li {
1578     position: relative;
1579     display: inline-block;
1580     padding-top: 1em;
1581     text-align: center;
1582     vertical-align: top;
1583     width: 150px;
1586 .badges li .badge-name {
1587     display: block;
1588     padding: 5px;
1591 .badges li > img {
1592     position: absolute;
1595 .badges li .badge-image {
1596     width: 100px;
1597     height: 100px;
1598     left: 10px;
1599     top: 0;
1600     z-index: 1;
1603 .badges li .badge-actions {
1604     position: relative;
1607 .badges li .expireimage {
1608     width: 100px;
1609     height: 100px;
1610     left: 25px;
1611     top: 0;
1612     position: absolute;
1613     z-index: 10;
1614     opacity: 0.85;
1617 #badge-image {
1618     background-color: transparent;
1619     padding: 0;
1620     position: relative;
1621     min-width: 100px;
1622     width: 20%;
1623     display: inline-block;
1624     vertical-align: top;
1625     margin-top: 17px;
1626     margin-bottom: 20px;
1628     .expireimage {
1629         width: 100px;
1630         height: 100px;
1631         left: 0;
1632         top: 0;
1633         opacity: 0.85;
1634         position: absolute;
1635         z-index: 10;
1636     }
1638     .singlebutton {
1639         padding-top: 5px;
1640         display: block;
1642         button {
1643             margin-left: 4px;
1644         }
1645     }
1648 #badge-details {
1649     display: inline-block;
1650     width: 79%;
1653 #badge-overview dl,
1654 #badge-details dl {
1655     margin: 0;
1657     dt,
1658     dd {
1659         vertical-align: top;
1660         padding: 3px 0;
1661     }
1663     dt {
1664         clear: both;
1665         display: inline-block;
1666         width: 20%;
1667         min-width: 100px;
1668     }
1670     dd {
1671         display: inline-block;
1672         width: 79%;
1673         margin-left: 1%;
1674     }
1677 .badge-profile {
1678     vertical-align: top;
1681 .connected {
1682     @extend .text-success;
1685 .notconnected {
1686     @extend .text-danger;
1689 .connecting {
1690     @extend .text-warning;
1693 #page-badges-award .recipienttable tr td {
1694     vertical-align: top;
1697 #page-badges-award .recipienttable tr td.actions .actionbutton {
1698     margin: 0.3em 0;
1699     padding: 0.5em 0;
1700     width: 100%;
1703 #page-badges-award .recipienttable tr td.existing,
1704 #page-badges-award .recipienttable tr td.potential {
1705     width: 42%;
1708 #issued-badge-table .activatebadge {
1709     display: inline-block;
1712 .statusbox.active {
1713     background-color: $state-success-bg;
1716 .statusbox.inactive {
1717     background-color: $state-warning-bg;
1720 .statusbox {
1721     text-align: center;
1722     margin-bottom: 5px;
1723     padding: 5px;
1726 .statusbox .activatebadge {
1727     display: inline-block;
1730 .statusbox .activatebadge input[type=submit] {
1731     margin: 3px;
1734 .activatebadge {
1735     margin: 0;
1736     text-align: left;
1737     vertical-align: middle;
1740 img#persona_signin {
1741     cursor: pointer;
1744 .addcourse {
1745     float: right;
1748 .invisiblefieldset {
1749     display: inline;
1750     padding: 0;
1751     border-width: 0;
1754 /** Page header */
1755 #page-header {
1756     .logo {
1757         margin: $spacer 0;
1758         img {
1759             max-height: 75px;
1760         }
1761     }
1764 /** Navbar logo. */
1765 nav.navbar .logo img {
1766     max-height: 35px;
1769 /** Header-bar styles **/
1770 .page-context-header {
1771     // We need to be explicit about the height of the header.
1772     $pageHeaderHeight: 140px;
1774     // Do not remove these rules.
1775     overflow: hidden;
1777     .page-header-image,
1778     .page-header-headings {
1779         float: left;
1780         display: block;
1781         position: relative;
1782     }
1784     .page-header-image {
1785         margin-right: 1em;
1786         margin-bottom: 1em;
1787     }
1789     .page-header-headings,
1790     .header-button-group {
1791         position: relative;
1792         line-height: 24px;
1793         vertical-align: middle;
1794     }
1796     .header-button-group {
1797         display: block;
1798         float: left;
1800         a {
1801             position: relative;
1803             // Don't touch it unless you know exactly what you are doing.
1804             top: -0.4em;
1805         }
1806     }
1809 ul.dragdrop-keyboard-drag li {
1810     list-style-type: none;
1813 a.disabled:hover,
1814 a.disabled {
1815     text-decoration: none;
1816     cursor: default;
1817     font-style: italic;
1818     color: #808080;
1821 body.lockscroll {
1822     height: 100%;
1823     overflow: hidden;
1826 .progressbar_container {
1827     max-width: 500px;
1828     margin: 0 auto;
1831 /* IE10 only fix for calendar titling */
1832 .ie10 .yui3-calendar-header-label {
1833     display: inline-block;
1836 dd:before,
1837 dd:after {
1838     display: block;
1839     content: " ";
1842 dd:after {
1843     clear: both;
1846 // Active tabs with links should have a different
1847 // cursor to indicate they are clickable.
1848 .nav-tabs > .active > a[href],
1849 .nav-tabs > .active > a[href]:hover,
1850 .nav-tabs > .active > a[href]:focus {
1851     cursor: pointer;
1854 .inplaceeditable {
1855     &.inplaceeditingon {
1856         position: relative;
1858         .editinstructions {
1859             margin-top: -30px;
1860             font-weight: normal;
1861             margin-right: 0;
1862             margin-left: 0;
1863             left: 0;
1864             right: auto;
1865             white-space: nowrap;
1866         }
1868         input {
1869             width: 330px;
1870             vertical-align: text-bottom;
1871             margin-bottom: 0;
1872         }
1874         select {
1875             margin-bottom: 0;
1876         }
1877     }
1879     .quickediticon img {
1880         opacity: 0.2;
1881     }
1883     .quickeditlink {
1884         color: inherit;
1885         text-decoration: inherit;
1886     }
1888     &:hover .quickeditlink .quickediticon img,
1889     .quickeditlink:focus .quickediticon img {
1890         opacity: 1;
1891     }
1893     &.inplaceeditable-toggle .quickediticon {
1894         display: none;
1895     }
1897     &.inplaceeditable-autocomplete {
1898         display: block;
1899     }
1902 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
1903     margin-top: -20px;
1906 /** Chart area. */
1907 .chart-area {
1909     .chart-table-data {
1910         display: none;
1911     }
1913     .chart-table {
1914         .chart-output-htmltable caption {
1915             white-space: nowrap;
1916         }
1917         /** When accessible, we display the table only. */
1918         &.accesshide {
1919             .chart-table-expand {
1920                 display: none;
1921             }
1922             .chart-table-data {
1923                 display: block;
1924             }
1925         }
1926     }
1929 // Reset for ul.
1930 ul {
1931     padding-left: 1rem;
1934 /* YUI 2 Tree View */
1935 /*rtl:raw:
1936 .ygtvtn,
1937 .ygtvtm,
1938 .ygtvtmh,
1939 .ygtvtmhh,
1940 .ygtvtp,
1941 .ygtvtph,
1942 .ygtvtphh,
1943 .ygtvln,
1944 .ygtvlm,
1945 .ygtvlmh,
1946 .ygtvlmhh,
1947 .ygtvlp,
1948 .ygtvlph,
1949 .ygtvlphh,
1950 .ygtvdepthcell,
1951 .ygtvok,
1952 .ygtvok:hover,
1953 .ygtvcancel,
1954 .ygtvcancel:hover {
1955     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
1957 */
1959 .hover-tooltip-container {
1960     position: relative;
1962     .hover-tooltip {
1963         opacity: 0;
1964         visibility: hidden;
1965         position: absolute;
1966         /*rtl:ignore*/
1967         left: 50%;
1968         top: calc(-50% - 5px);
1969         transform: translate(-50%, -50%);
1970         background-color: #fff;
1971         border: 1px solid rgba(0, 0, 0, .2);
1972         border-radius: .3rem;
1973         box-sizing: border-box;
1974         padding: 5px;
1975         white-space: nowrap;
1976         transition: opacity 0.15s, visibility 0.15s;
1977         z-index: 1000;
1979         &:before {
1980             content: '';
1981             display: inline-block;
1982             border-left: 8px solid transparent;
1983             border-right: 8px solid transparent;
1984             border-top: 8px solid rgba(0, 0, 0, .2);
1985             position: absolute;
1986             bottom: -8px;
1987             left: calc(50% - 8px);
1988         }
1990         &:after {
1991             content: '';
1992             display: inline-block;
1993             border-left: 7px solid transparent;
1994             border-right: 7px solid transparent;
1995             border-top: 7px solid #fff;
1996             position: absolute;
1997             bottom: -6px;
1998             left: calc(50% - 7px);
1999             z-index: 2;
2000         }
2001     }
2003     &:hover {
2004         .hover-tooltip {
2005             opacity: 1;
2006             visibility: visible;
2007             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2008         }
2009     }
2012 #region-flat-nav {
2013     padding-right: 0;
2014     padding-left: 0;
2015     .nav {
2016         margin-right: $grid-gutter-width / 2;
2017         background-color: $card-bg;
2018     }
2019     @include media-breakpoint-down(sm) {
2020         .nav {
2021             margin-top: $grid-gutter-width;
2022             margin-right: 0;
2023         }
2024     }
2027 // Footer link colour was added to allow the colour of footer links to be changed,
2028 // but really in bootstrap we want the colour of links on .bg-inverse to be changed
2029 // rather than being specific to the footer. This is kept for backwards compatibility.
2030 $footer-link-color: $bg-inverse-link-color !default;
2031 #page-footer a {
2032     color: $footer-link-color;
2033     text-decoration: underline;
2034     .icon {
2035         color: $footer-link-color;
2036     }
2039 .bg-inverse a {
2040     color: $bg-inverse-link-color;
2041     text-decoration: underline;
2042     .icon {
2043         color: $bg-inverse-link-color;
2044     }
2047 .sitelink {
2048     img {
2049         width: 112px;
2050     }
2053 // Make links in a menu clickable anywhere in the row.
2054 .dropdown-item a {
2055     display: block;
2056     width: 100%;
2057     color: $body-color;
2060 .competency-tree {
2061     ul {
2062         padding-left: 1.5rem;
2063     }
2066 .sr-only-focusable {
2067     &:active,
2068     &:focus {
2069         z-index: $zindex-navbar-fixed + 1;
2070         position: fixed;
2071         background: #fff;
2072         padding: 7px;
2073         left: 0;
2074         top: 0;
2075     }
2078 [data-drag-type="move"] {
2079     cursor: move;
2080     touch-action: none;
2083 .clickable {
2084     cursor: pointer;
2087 .overlay-icon-container {
2088     position: absolute;
2089     top: 0;
2090     left: 0;
2091     width: 100%;
2092     height: 100%;
2093     background-color: rgba(255, 255, 255, 0.6);
2095     .loading-icon {
2096         position: absolute;
2097         top: 50%;
2098         left: 50%;
2099         transform: translate(-50%, -50%);
2101         .icon {
2102             height: 30px;
2103             width: 30px;
2104             font-size: 30px;
2105         }
2106     }
2109 .open.atto_menu > .dropdown-menu {
2110     display: block;
2112 div.editor_atto_toolbar button .icon {
2113     color: $gray-700;
2115 .w-auto {
2116     width: auto;
2119 .bg-pulse-grey {
2120     animation: bg-pulse-grey 2s infinite linear;
2123 @keyframes bg-pulse-grey {
2124     0% {
2125         background-color: $gray-100;
2126     }
2127     50% {
2128         background-color: darken($gray-100, 5%);
2129     }
2130     100% {
2131         background-color: $gray-100;
2132     }
2135 @each $size, $length in $spacers {
2136     .line-height-#{$size} {
2137         line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2138     }
2141 .dir-rtl {
2142     .dir-rtl-hide {
2143         display: none;
2144     }
2147 .dir-ltr {
2148     .dir-ltr-hide {
2149         display: none;
2150     }