MDL-62277 Theme boost: add badge criteria layout
[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 > .card {
9     overflow-x: auto;
10     overflow-y: visible;
11     min-height: 45rem;
12 }
14 .context-header-settings-menu,
15 .region-main-settings-menu {
16     float: right;
17     width: auto;
18     max-width: 4em;
19     height: 2em;
20     display: block;
21     margin-top: 4px;
22 }
24 .context-header-settings-menu .dropdown-toggle > .icon,
25 #region-main-settings-menu .dropdown-toggle > .icon {
26     height: 24px;
27     font-size: 24px;
28     width: auto;
29 }
30 /** Prevent user notifications overlapping with region main settings menu */
31 #user-notifications {
32     display: block;
33     overflow: hidden;
34 }
36 /** Page layout CSS starts **/
37 .layout-option-noheader #page-header,
38 .layout-option-nonavbar #page-navbar,
39 .layout-option-nofooter #page-footer,
40 .layout-option-nocourseheader .course-content-header,
41 .layout-option-nocoursefooter .course-content-footer {
42     display: none;
43 }
45 /** Page layout CSS ends **/
47 .mdl-left {
48     text-align: left;
49 }
51 .mdl-right {
52     text-align: right;
53 }
55 /*rtl:ignore*/
56 .text-ltr {
57     direction: ltr !important; /* stylelint-disable-line declaration-no-important */
58 }
60 #add,
61 #remove,
62 .centerpara,
63 .mdl-align {
64     text-align: center;
65 }
67 a.dimmed,
68 a.dimmed:link,
69 a.dimmed:visited,
70 a.dimmed_text,
71 a.dimmed_text:link,
72 a.dimmed_text:visited,
73 .dimmed_text,
74 .dimmed_text a,
75 .dimmed_text a:link,
76 .dimmed_text a:visited,
77 .usersuspended,
78 .usersuspended a,
79 .usersuspended a:link,
80 .usersuspended a:visited,
81 .dimmed_category,
82 .dimmed_category a {
83     @extend .text-muted;
84 }
86 .unlist,
87 .unlist li,
88 .inline-list,
89 .inline-list li,
90 .block .list,
91 .block .list li,
92 .section li.activity,
93 .section li.movehere,
94 .tabtree li {
95     list-style: none;
96     margin: 0;
97     padding: 0;
98 }
100 .inline,
101 .inline-list li {
102     display: inline;
105 .notifytiny {
106     font-size: $font-size-xs;
109 .notifytiny li,
110 .notifytiny td {
111     font-size: 100%;
114 .red,
115 .notifyproblem {
116     @extend .text-warning;
119 .green,
120 .notifysuccess {
121     @extend .text-success;
124 .highlight {
125     @extend .text-info;
128 .fitem.advanced .text-info {
129     font-weight: bold;
132 .reportlink {
133     text-align: right;
136 a.autolink.glossary:hover {
137     cursor: help;
139 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
140 .collapsibleregioncaption {
141     white-space: nowrap;
142     min-height: $line-height-base * $font-size-base;
145 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
146     cursor: pointer;
149 .collapsibleregioncaption img {
150     vertical-align: middle;
153 .jsenabled .hiddenifjs {
154     display: none;
157 .visibleifjs {
158     display: none;
161 .jsenabled .visibleifjs {
162     display: inline;
165 .jsenabled .collapsibleregion {
166     overflow: hidden;
167     box-sizing: content-box;
170 .jsenabled .collapsed .collapsibleregioninner {
171     visibility: hidden;
174 .collapsible-actions {
175     display: none;
176     text-align: right;
179 .jsenabled .collapsible-actions {
180     display: block;
183 .collapsible-actions .collapseexpand {
184     padding-left: 20px;
185     background: url([[pix:t/collapsed]]) 2px center no-repeat;
187 /*rtl:raw:
188 .collapsible-actions .collapseexpand {
189     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
191 */
192 .collapsible-actions .collapse-all {
193     background-image: url([[pix:t/expanded]]);
196 .yui-overlay .yui-widget-bd {
197     background-color: #ffee69;
198     border: 1px solid #a6982b;
199     border-top-color: #d4c237;
200     color: #000;
201     left: 0;
202     padding: 2px 5px;
203     position: relative;
204     top: 0;
205     z-index: 1;
208 .clearer {
209     background: transparent;
210     border-width: 0;
211     clear: both;
212     display: block;
213     height: 1px;
214     margin: 0;
215     padding: 0;
218 .bold,
219 .warning,
220 .errorbox .title,
221 .pagingbar .title,
222 .pagingbar .thispage {
223     font-weight: bold;
226 img.userpicture {
227     margin-right: 0.5rem;
230 img.resize {
231     height: 1em;
232     width: 1em;
235 .action-menu .dropdown-toggle {
236     text-decoration: none;
239 .action-menu {
240     white-space: nowrap;
243 .block img.resize {
244     height: 0.9em;
245     width: 0.8em;
247 /* Icon styles */
248 img.activityicon {
249     height: 24px;
250     width: 24px;
251     vertical-align: middle;
254 .headermain {
255     font-weight: bold;
258 #maincontent {
259     display: block;
260     height: 1px;
261     overflow: hidden;
264 img.uihint {
265     cursor: help;
268 #addmembersform table {
269     margin-left: auto;
270     margin-right: auto;
273 table.flexible .emptyrow {
274     display: none;
277 form.popupform,
278 form.popupform div {
279     display: inline;
282 .arrow_button input {
283     overflow: hidden;
285 .no-overflow {
286     overflow: auto;
289 .no-overflow > .generaltable {
290     margin-bottom: 0;
292 // Accessibility features
294 // Accessibility: text 'seen' by screen readers but not visual users.
295 .accesshide {
296     position: absolute;
297     /*rtl:ignore*/
298     left: -10000px;
299     font-weight: normal;
300     font-size: 1em;
303 span.hide,
304 div.hide,
305 .hidden {
306     display: none;
308 // Accessibility: Skip block link, for keyboard-only users.
309 a.skip-block,
310 a.skip {
311     position: absolute;
312     top: -1000em;
313     font-size: 0.85em;
314     text-decoration: none;
317 a.skip-block:focus,
318 a.skip-block:active,
319 a.skip:focus,
320 a.skip:active {
321     position: static;
322     display: block;
325 .skip-block-to {
326     display: block;
327     height: 1px;
328     overflow: hidden;
330 // Blogs
331 .addbloglink {
332     text-align: center;
335 .blog_entry .audience {
336     text-align: right;
337     padding-right: 4px;
340 .blog_entry .tags {
341     margin-top: 15px;
344 .blog_entry .content {
345     margin-left: 43px;
347 // Group
349 #doc-contents h1 {
350     margin: 1em 0 0 0;
353 #doc-contents ul {
354     margin: 0;
355     padding: 0;
356     width: 90%;
359 #doc-contents ul li {
360     list-style-type: none;
363 .groupmanagementtable td {
364     vertical-align: top;
367 .groupmanagementtable #existingcell,
368 .groupmanagementtable #potentialcell {
369     width: 42%;
372 .groupmanagementtable #buttonscell {
373     width: 16%;
376 .groupmanagementtable #buttonscell p.arrow_button input {
377     width: auto;
378     min-width: 80%;
379     margin: 0 auto;
382 .groupmanagementtable #removeselect_wrapper,
383 .groupmanagementtable #addselect_wrapper {
384     width: 100%;
387 .groupmanagementtable #removeselect_wrapper label,
388 .groupmanagementtable #addselect_wrapper label {
389     font-weight: normal;
392 #group-usersummary {
393     width: 14em;
396 .groupselector {
397     margin-top: 3px;
398     margin-bottom: 3px;
399     display: inline-block;
402 .groupselector label {
403     display: inline-block;
406 // Login
407 .login-page {
408     [name="username"] {
409         margin-bottom: -1px;
410         border-bottom-right-radius: 0;
411         border-bottom-left-radius: 0;
412     }
414     [type="password"] {
415         margin-bottom: 10px;
416         border-top-left-radius: 0;
417         border-top-right-radius: 0;
418     }
421 // Notes
422 .notepost {
423     margin-bottom: 1em;
426 .notepost .userpicture {
427     float: left;
428     margin-right: 5px;
431 .notepost .content,
432 .notepost .footer {
433     clear: both;
436 .notesgroup {
437     margin-left: 20px;
440 // My Moodle
441 .path-my .coursebox {
442     margin: $spacer-y 0;
443     padding: 0;
445     .overview {
446         margin: 15px 30px 10px 30px;
447     }
450 .path-my .coursebox .info {
451     float: none;
452     margin: 0;
455 // Modules
456 .mod_introbox {
457     padding: 10px;
460 table.mod_index {
461     width: 100%;
464 // Comments
465 .comment-ctrl {
466     font-size: 12px;
467     display: none;
468     margin: 0;
469     padding: 0;
472 .comment-ctrl h5 {
473     margin: 0;
474     padding: 5px;
477 .comment-area {
478     max-width: 400px;
479     padding: 5px;
482 .comment-area textarea {
483     width: 100%;
484     overflow: auto;
486     &.fullwidth {
487         -webkit-box-sizing: border-box;
488         -moz-box-sizing: border-box;
489         box-sizing: border-box;
490     }
493 .comment-area .fd {
494     text-align: right;
497 .comment-meta span {
498     color: gray;
501 .comment-link img {
502     vertical-align: text-bottom;
505 .comment-list {
506     font-size: 11px;
507     overflow: auto;
508     list-style: none;
509     padding: 0;
510     margin: 0;
513 .comment-list li {
514     margin: 2px;
515     list-style: none;
516     margin-bottom: 5px;
517     clear: both;
518     padding: .3em;
519     position: relative;
522 .comment-list li.first {
523     display: none;
526 .comment-paging {
527     text-align: center;
530 .comment-paging .pageno {
531     padding: 2px;
534 .comment-paging .curpage {
535     border: 1px solid #ccc;
538 .comment-message .picture {
539     width: 20px;
540     float: left;
543 .comment-message .text {
544     margin: 0;
545     padding: 0;
548 .comment-message .text p {
549     padding: 0;
550     margin: 0 18px 0 0;
553 .comment-delete {
554     position: absolute;
555     top: 0;
556     right: 0;
557     margin: .3em;
560 .comment-report-selectall {
561     display: none;
564 .comment-link {
565     display: none;
568 .jsenabled .comment-link {
569     display: block;
572 .jsenabled .showcommentsnonjs {
573     display: none;
576 .jsenabled .comment-report-selectall {
577     display: inline;
579 /**
580 * Completion progress report
581 */
582 .completion-expired {
583     @extend .text-warning;
586 .completion-expected {
587     font-size: $font-size-xs;
590 .completion-sortchoice,
591 .completion-identifyfield {
592     font-size: $font-size-xs;
593     vertical-align: bottom;
596 .completion-progresscell {
597     text-align: right;
600 .completion-expired .completion-expected {
601     font-weight: bold;
603 /**
604 * Tags
605 */
606 img.user-image {
607     height: 100px;
608     width: 100px;
611 #tag-search-box {
612     text-align: center;
613     margin: 10px auto;
616 .path-tag .tag-index-items .tagarea {
617     border: 1px solid #e3e3e3;
618     border-radius: 4px;
619     padding: 10px;
620     margin-top: 10px;
623 .path-tag .tag-index-items .tagarea h3 {
624     display: block;
625     padding: 3px 0 10px 0;
626     margin: 0;
627     font-size: 1.1em;
628     font-weight: bold;
629     line-height: 20px;
630     color: #999;
631     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
632     text-transform: uppercase;
633     word-wrap: break-word;
634     border-bottom: solid 1px #e3e3e3;
635     margin-bottom: 10px;
638 .path-tag .tagarea .controls,
639 .path-tag .tagarea .taggeditems {
640     @include clearfix();
643 .path-tag .tagarea .controls,
644 .path-tag .tag-backtoallitems {
645     text-align: center;
648 .path-tag .tagarea .controls .gotopage.nextpage {
649     float: right;
652 .path-tag .tagarea .controls .gotopage.prevpage {
653     float: left;
656 .path-tag .tagarea .controls .exclusivemode {
657     display: inline-block;
660 .path-tag .tagarea .controls.controls-bottom {
661     margin-top: 5px;
664 .path-tag .tagarea .controls .gotopage.nextpage::after {
665     padding-right: 5px;
666     padding-left: 5px;
667     content: "»";
670 .path-tag .tagarea .controls .gotopage.prevpage::before {
671     padding-right: 5px;
672     padding-left: 5px;
673     content: "«";
676 span.flagged-tag,
677 tr.flagged-tag,
678 span.flagged-tag a,
679 tr.flagged-tag a {
680     @extend .text-warning;
683 .tag-management-table td,
684 .tag-management-table th {
685     vertical-align: middle;
686     padding: 4px;
689 .tag-management-table .inplaceeditable.inplaceeditingon input {
690     width: 150px;
693 .path-admin-tag .addstandardtags {
694     float: right;
696     img {
697         margin: 0 5px;
698     }
701 .path-tag .tag-relatedtags {
702     padding-top: 10px;
705 .path-tag .tag-management-box {
706     text-align: right;
709 .path-tag .tag-index-toc {
710     padding: 10px;
711     text-align: center;
714 .path-tag .tag-index-toc li,
715 .path-tag .tag-management-box li {
716     margin-left: 5px;
717     margin-right: 5px;
720 .path-tag .tag-management-box li a.edittag {
721     background-image: url([[pix:moodle|i/settings]]);
724 .path-tag .tag-management-box li a.flagasinappropriate {
725     background-image: url([[pix:moodle|i/flagged]]);
728 .path-tag .tag-management-box li a.removefrommyinterests {
729     background-image: url([[pix:moodle|t/delete]]);
732 .path-tag .tag-management-box li a.addtomyinterests {
733     background-image: url([[pix:moodle|t/add]]);
736 .path-tag .tag-management-box li a {
737     background-repeat: no-repeat;
738     background-position: left;
739     padding-left: 17px;
742 .tag_feed.media-list .media .itemimage {
743     float: left;
746 .tag_feed.media-list .media .itemimage img {
747     height: 35px;
748     width: 35px;
751 .tag_feed.media-list .media .media-body {
752     padding-right: 10px;
753     padding-left: 10px;
756 .tag_feed .media .muted a {
757     @extend .text-muted;
760 .tag_cloud {
761     text-align: center;
764 .tag_cloud .inline-list li {
765     padding: 0 0.2em;
768 .tag_cloud .tag_overflow {
769     margin-top: 1em;
770     font-style: italic;
773 .tag_cloud .s20 {
774     font-size: 2.7em;
777 .tag_cloud .s19 {
778     font-size: 2.6em;
781 .tag_cloud .s18 {
782     font-size: 2.5em;
785 .tag_cloud .s17 {
786     font-size: 2.4em;
789 .tag_cloud .s16 {
790     font-size: 2.3em;
793 .tag_cloud .s15 {
794     font-size: 2.2em;
797 .tag_cloud .s14 {
798     font-size: 2.1em;
801 .tag_cloud .s13 {
802     font-size: 2em;
805 .tag_cloud .s12 {
806     font-size: 1.9em;
809 .tag_cloud .s11 {
810     font-size: 1.8em;
813 .tag_cloud .s10 {
814     font-size: 1.7em;
817 .tag_cloud .s9 {
818     font-size: 1.6em;
821 .tag_cloud .s8 {
822     font-size: 1.5em;
825 .tag_cloud .s7 {
826     font-size: 1.4em;
829 .tag_cloud .s6 {
830     font-size: 1.3em;
833 .tag_cloud .s5 {
834     font-size: 1.2em;
837 .tag_cloud .s4 {
838     font-size: 1.1em;
841 .tag_cloud .s3 {
842     font-size: 1em;
845 .tag_cloud .s2 {
846     font-size: 0.9em;
849 .tag_cloud .s1 {
850     font-size: 0.8em;
853 .tag_cloud .s0 {
854     font-size: 0.7em;
857 .tag_list ul {
858     display: inline;
861 .tag_list.hideoverlimit .overlimit {
862     display: none;
865 .tag_list .tagmorelink {
866     display: none;
869 .tag_list.hideoverlimit .tagmorelink {
870     display: inline;
873 .tag_list.hideoverlimit .taglesslink {
874     display: none;
877 /**
878 * Web Service
879 */
880 #webservice-doc-generator td {
881     text-align: left;
882     border: 0 solid black;
885 /**
886 * Enrol
887 */
888 .userenrolment {
889     width: 100%;
890     border-collapse: collapse;
893 .userenrolment tr {
894     vertical-align: top;
897 .userenrolment td {
898     padding: 0;
899     height: 41px;
902 .userenrolment .subfield {
903     margin-right: 5px;
906 .userenrolment .col_userdetails .subfield {
907     margin-left: 40px;
910 .userenrolment .col_userdetails .subfield_picture {
911     float: left;
912     margin-left: 0;
915 .userenrolment .col_lastseen {
916     width: 150px;
919 .userenrolment .col_role {
920     width: 262px;
923 .userenrolment .col_role .roles,
924 .userenrolment .col_group .groups {
925     margin-right: 30px;
928 .userenrolment .col_role .role {
929     float: left;
930     padding: 0 3px 3px;
931     margin: 0 3px 3px;
932     white-space: nowrap;
935 .userenrolment .col_group .group {
936     float: left;
937     padding: 3px;
938     margin: 3px;
939     white-space: nowrap;
942 .userenrolment .col_role .role a,
943 .userenrolment .col_group .group a {
944     margin-left: 3px;
945     cursor: pointer;
948 .userenrolment .col_role .addrole,
949 .userenrolment .col_group .addgroup {
950     float: right;
951     padding: 3px;
952     margin: 3px;
954     > a:hover {
955         border-bottom: 1px solid #666;
956     }
959 .userenrolment .col_role .addrole img,
960 .userenrolment .col_group .addgroup img {
961     vertical-align: baseline;
964 .userenrolment .hasAllRoles .col_role .addrole {
965     display: none;
968 .userenrolment .col_enrol .enrolment {
969     float: left;
970     padding: 0 3px 3px;
971     margin: 0 3px 3px;
974 .userenrolment .col_enrol .enrolment a {
975     float: right;
976     margin-left: 3px;
979 #page-enrol-users {
980     .enrol_user_buttons {
981         text-align: right;
983     }
985     #filterform {
986         @extend .card;
987         @extend .card-block;
988     }
991 #page-enrol-users .enrol-users-page-action input {
992     margin-left: 0;
995 .corelightbox {
996     background-color: #ccc;
997     position: absolute;
998     top: 0;
999     left: 0;
1000     width: 100%;
1001     height: 100%;
1002     text-align: center;
1005 .corelightbox img {
1006     position: fixed;
1007     top: 50%;
1008     left: 50%;
1011 .mod-indent-outer {
1012     display: table;
1015 .mod-indent {
1016     display: table-cell;
1019 .label .mod-indent {
1020     float: left;
1021     padding-top: 20px;
1023 $mod-indent-size: 30px;
1024 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1026 @for $i from 1 through 16 {
1027     $width: ($i * $mod-indent-size);
1029     .mod-indent-#{$i} {
1030         width: $width;
1031     }
1034 .mod-indent-huge {
1035     width: (16 * $mod-indent-size);
1038 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1039 .resourcecontent .mediaplugin_mp3 object {
1040     height: 25px;
1041     width: 600px;
1044 .resourcecontent audio.mediaplugin_html5audio {
1045     width: 600px;
1047 /** Large resource images should avoid hidden overflow **/
1048 .resourceimage {
1049     max-width: 100%;
1051 /* Audio player size in 'inline' mode (can only change width, as above) */
1052 .mediaplugin_mp3 object {
1053     height: 15px;
1054     width: 300px;
1057 audio.mediaplugin_html5audio {
1058     width: 300px;
1060 /* TinyMCE moodle media preview frame should not have padding */
1061 .core_media_preview.pagelayout-embedded #content {
1062     padding: 0;
1065 .core_media_preview.pagelayout-embedded #maincontent {
1066     height: 0;
1069 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1070     padding: 0;
1071     margin: 0;
1072     min-width: 0;
1073     background: none;
1076 .path-rating .ratingtable {
1077     width: 100%;
1078     margin-bottom: 1em;
1081 .path-rating .ratingtable th.rating {
1082     width: 100%;
1085 .path-rating .ratingtable td.rating,
1086 .path-rating .ratingtable td.time {
1087     white-space: nowrap;
1088     text-align: center;
1092 .initialbarlabel {
1093     display: inline-block;
1094     width: 6em;
1095     float: left;
1096     overflow: hidden;
1097     text-overflow: ellipsis;
1098     white-space: nowrap;
1102 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1103 .moodle-dialogue-base .moodle-dialogue-lightbox {
1104     background-color: $gray;
1107 .moodle-dialogue-base .hidden,
1108 .moodle-dialogue-base .moodle-dialogue-hidden {
1109     display: none;
1112 .no-scrolling {
1113     overflow: hidden;
1116 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1117     left: 0;
1118     top: 0;
1119     right: 0;
1120     bottom: -50px;
1121     position: fixed;
1124 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1125     overflow: auto;
1128 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1129     width: 28px;
1130     height: 16px;
1131     background-size: 100%;
1134 .moodle-dialogue-base .moodle-dialogue-wrap {
1135     background-color: #fff;
1136     border: 1px solid #ccc;
1139 // Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1140 // it for a reason (conflicts with jquery .show()).
1141 .modal.show {
1142     display: block;
1145 .moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content {
1146     @extend .modal-content;
1149 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1150     @extend .modal-header;
1153 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1154     // Undo some YUI damage.
1155     min-height: 3rem;
1156     color: initial;
1157     background: initial;
1158     font-size: 1.5rem;
1159     line-height: 1.5;
1162 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1163     @extend .modal-title;
1164     font-size: 1.5rem;
1167 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1168     /*rtl:raw:
1169         left: 0;
1170         right: auto;
1171     */
1172     padding: $spacer;
1175 .moodle-dialogue-base .closebutton {
1176     @extend .close;
1177     box-shadow: none;
1178     &::after {
1179         content: "×";
1180     }
1183 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1184     padding: 0.5rem;
1187 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1188     overflow: auto;
1189     position: absolute;
1190     top: 0;
1191     bottom: 50px;
1192     left: 0;
1193     right: 0;
1194     margin: 0;
1195     border: 0;
1198 .moodle-dialogue-exception .moodle-exception-param label {
1199     font-weight: bold;
1202 .moodle-dialogue-exception .param-stacktrace label {
1203     background-color: #eee;
1204     border: 1px solid #ccc;
1205     border-bottom-width: 0;
1208 .moodle-dialogue-exception .param-stacktrace pre {
1209     border: 1px solid #ccc;
1210     background-color: #fff;
1213 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1214     color: navy;
1215     font-size: $font-size-sm;
1218 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1219     @extend .text-warning;
1220     font-size: $font-size-sm;
1223 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1224     color: #333;
1225     font-size: 90%;
1226     border-bottom: 1px solid #eee;
1229 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1230     @extend .modal-footer;
1233 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1234     display: none;
1237 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1238     // Undo some YUI damage.
1239     background: initial;
1242 .moodle-dialogue-confirm .confirmation-message {
1243     margin: 0.5rem 0;
1246 .moodle-dialogue-confirm .confirmation-dialogue input {
1247     min-width: 80px;
1250 .moodle-dialogue-exception .moodle-exception-message {
1251     margin: 1em;
1254 .moodle-dialogue-exception .moodle-exception-param {
1255     margin-bottom: 0.5em;
1258 .moodle-dialogue-exception .moodle-exception-param label {
1259     width: 150px;
1262 .moodle-dialogue-exception .param-stacktrace label {
1263     display: block;
1264     margin: 0;
1265     padding: 4px 1em;
1268 .moodle-dialogue-exception .param-stacktrace pre {
1269     display: block;
1270     height: 200px;
1271     overflow: auto;
1274 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1275     display: inline-block;
1276     margin: 4px 0;
1279 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1280     display: inline-block;
1281     width: 50px;
1282     margin: 4px 1em;
1285 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1286     padding-left: 25px;
1287     margin-bottom: 4px;
1288     padding-bottom: 4px;
1291 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1292     opacity: 0.75;
1293     width: 100%;
1294     height: 100%;
1295     top: 0;
1296     left: 0;
1297     background-color: white;
1298     text-align: center;
1299     padding: 10% 0;
1301 /* Apply a default max-height on tooltip text */
1302 .moodle-dialogue .tooltiptext {
1303     max-height: 300px;
1306 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1307     z-index: 3001;
1309     .moodle-dialogue-bd {
1310         overflow: auto;
1311     }
1314 /**
1315  * Chooser Dialogues (moodle-core-chooserdialogue)
1316  *
1317  * This CSS belong to the chooser dialogue which should work both with, and
1318  * without javascript enabled
1319  */
1320 /* Hide the dialog and it's title */
1321 .chooserdialoguebody,
1322 .choosertitle {
1323     display: none;
1326 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1327     margin: 0;
1330 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1331     padding: 0;
1332     background: #f2f2f2;
1334     @include border-bottom-radius(10px);
1336 /* Center the submit buttons within the area */
1337 .choosercontainer #chooseform .submitbuttons {
1338     padding: 0.7em 0;
1339     text-align: right;
1341 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1343 @media (max-height: 639px) {
1344     .ios.safari .choosercontainer #chooseform .submitbuttons {
1345         padding: 45px 0;
1346     }
1349 .choosercontainer #chooseform .submitbuttons input {
1350     min-width: 100px;
1351     margin: 0 0.5em;
1353 /* Various settings for the options area */
1354 .choosercontainer #chooseform .options {
1355     position: relative;
1356     border-bottom: 1px solid #bbb;
1358 /* Only set these options if we're showing the js container */
1359 .jschooser .choosercontainer #chooseform .alloptions {
1360     overflow-x: hidden;
1361     overflow-y: auto;
1362     max-width: 240px;
1364     .option {
1365         input[type=radio] {
1366             display: inline-block;
1367         }
1369         .typename {
1370             display: inline-block;
1371             width: 55%;
1372         }
1373     }
1375 /* Settings for option rows and option subtypes */
1376 .choosercontainer #chooseform .moduletypetitle,
1377 .choosercontainer #chooseform .option,
1378 .choosercontainer #chooseform .nonoption {
1379     margin-bottom: 0;
1380     padding: 0 1.6em 0 1.6em;
1383 .choosercontainer #chooseform .moduletypetitle {
1384     text-transform: uppercase;
1385     padding-top: 1.2em;
1386     padding-bottom: 0.4em;
1389 .choosercontainer #chooseform .option .typename,
1390 .choosercontainer #chooseform .nonoption .typename {
1391     padding: 0 0 0 0.5em;
1394 .choosercontainer #chooseform .modicon + .typename {
1395     padding-left: 0;
1398 .choosercontainer #chooseform .option input[type=radio],
1399 .choosercontainer #chooseform .option span.typename {
1400     vertical-align: middle;
1403 .choosercontainer #chooseform .option label {
1404     display: block;
1405     margin: 0;
1406     padding: ($spacer / 2) 0;
1407     border-bottom: 1px solid #fff;
1410 .choosercontainer #chooseform .option .icon {
1411     margin: 0;
1412     padding: 0 $spacer;
1415 .choosercontainer #chooseform .nonoption {
1416     padding-left: 2.7em;
1417     padding-top: 0.3em;
1418     padding-bottom: 0.1em;
1421 .choosercontainer #chooseform .subtype {
1422     margin-bottom: 0;
1423     padding: 0 1.6em 0 3.2em;
1426 .choosercontainer #chooseform .subtype .typename {
1427     margin: 0 0 0 0.2em;
1429 /* The instruction/help area */
1430 .jschooser .choosercontainer #chooseform .instruction,
1431 .jschooser .choosercontainer #chooseform .typesummary {
1432     display: none;
1433     position: absolute;
1434     top: 0;
1435     right: 0;
1436     bottom: 0;
1437     left: 240px;
1438     margin: 0;
1439     padding: 1.6em;
1440     background-color: #fff;
1441     overflow-x: hidden;
1442     overflow-y: auto;
1443     line-height: 2em;
1445 /* Selected option settings */
1446 .jschooser .choosercontainer #chooseform .instruction,
1447 .choosercontainer #chooseform .selected .typesummary {
1448     display: block;
1451 .choosercontainer #chooseform .selected {
1452     background-color: #fff;
1453     margin-top: -1px;
1454     padding-top: 1px;
1457 .chooserdialogue-course-modchooser .modicon .icon {
1458     width: 24px;
1459     height: 24px;
1460     font-size: 24px;
1463 @include media-breakpoint-down(xs) {
1464     .jsenabled .choosercontainer #chooseform .alloptions {
1465         max-width: 100%;
1466     }
1468     .jsenabled .choosercontainer #chooseform .instruction,
1469     .jsenabled .choosercontainer #chooseform .typesummary {
1470         position: static;
1471     }
1474 /* Form element: listing */
1475 .formlistingradio {
1476     padding-bottom: 25px;
1477     padding-right: 10px;
1480 .formlistinginputradio {
1481     float: left;
1484 .formlistingmain {
1485     min-height: 225px;
1488 .formlisting {
1489     position: relative;
1490     margin: 15px 0;
1491     padding: 1px 19px 14px;
1492     background-color: white;
1493     border: 1px solid #ddd;
1495     @include border-radius(4px);
1498 .formlistingmore {
1499     position: absolute;
1500     cursor: pointer;
1501     bottom: -1px;
1502     right: -1px;
1503     padding: 3px 7px;
1504     font-size: 12px;
1505     font-weight: bold;
1506     background-color: whitesmoke;
1507     border: 1px solid #ddd;
1508     color: #9da0a4;
1510     @include border-radius(4px 0 4px 0);
1513 .formlistingall {
1514     margin: 15px 0;
1515     padding: 0;
1517     @include border-radius(4px);
1520 .formlistingrow {
1521     cursor: pointer;
1522     border-bottom: 1px solid;
1523     border-color: #e1e1e8;
1524     border-left: 1px solid #e1e1e8;
1525     border-right: 1px solid #e1e1e8;
1526     background-color: #f7f7f9;
1528     @include border-radius(0 0 4px 4px);
1529     padding: 6px;
1530     top: 50%;
1531     left: 50%;
1532     min-height: 34px;
1533     float: left;
1534     width: 150px;
1537 body.jsenabled .formlistingradio {
1538     display: none;
1541 body.jsenabled .formlisting {
1542     display: block;
1545 /* Badges styles */
1546 table.collection {
1547     @extend .table;
1548     @extend .table-bordered;
1549     @extend .table-striped;
1552 a.criteria-action {
1553     padding: 0 3px;
1554     float: right;
1557 div.criteria-description {
1558     padding: 10px 15px;
1559     margin: 5px 0;
1560     background: none repeat scroll 0 0 #f9f9f9;
1561     border: 1px solid #eee;
1564 ul.badges {
1565     margin: 0;
1566     list-style: none;
1569 .badges li {
1570     position: relative;
1571     display: inline-block;
1572     padding-top: 1em;
1573     text-align: center;
1574     vertical-align: top;
1575     width: 150px;
1578 .badges li .badge-name {
1579     display: block;
1580     padding: 5px;
1583 .badges li > img {
1584     position: absolute;
1587 .badges li .badge-image {
1588     width: 100px;
1589     height: 100px;
1590     left: 10px;
1591     top: 0;
1592     z-index: 1;
1595 .badges li .badge-actions {
1596     position: relative;
1599 .badges li .expireimage {
1600     width: 100px;
1601     height: 100px;
1602     left: 25px;
1603     top: 0;
1604     position: absolute;
1605     z-index: 10;
1606     opacity: 0.85;
1609 #badge-image {
1610     background-color: transparent;
1611     padding: 0;
1612     position: relative;
1613     min-width: 100px;
1614     width: 20%;
1615     display: inline-block;
1616     vertical-align: top;
1617     margin-top: 17px;
1618     margin-bottom: 20px;
1620     .expireimage {
1621         width: 100px;
1622         height: 100px;
1623         left: 0;
1624         top: 0;
1625         opacity: 0.85;
1626         position: absolute;
1627         z-index: 10;
1628     }
1630     .singlebutton {
1631         padding-top: 5px;
1632         display: block;
1634         button {
1635             margin-left: 4px;
1636         }
1637     }
1640 #badge-details {
1641     display: inline-block;
1642     width: 79%;
1645 #badge-overview dl,
1646 #badge-details dl {
1647     margin: 0;
1649     dt,
1650     dd {
1651         vertical-align: top;
1652         padding: 3px 0;
1653     }
1655     dt {
1656         clear: both;
1657         display: inline-block;
1658         width: 20%;
1659         min-width: 100px;
1660     }
1662     dd {
1663         display: inline-block;
1664         width: 79%;
1665         margin-left: 1%;
1666     }
1669 .badge-profile {
1670     vertical-align: top;
1673 .connected {
1674     @extend .text-success;
1677 .notconnected {
1678     @extend .text-danger;
1681 .connecting {
1682     @extend .text-warning;
1685 #page-badges-award .recipienttable tr td {
1686     vertical-align: top;
1689 #page-badges-award .recipienttable tr td.actions .actionbutton {
1690     margin: 0.3em 0;
1691     padding: 0.5em 0;
1692     width: 100%;
1695 #page-badges-award .recipienttable tr td.existing,
1696 #page-badges-award .recipienttable tr td.potential {
1697     width: 42%;
1700 #issued-badge-table .activatebadge {
1701     display: inline-block;
1704 .statusbox.active {
1705     background-color: $state-success-bg;
1708 .statusbox.inactive {
1709     background-color: $state-warning-bg;
1712 .statusbox {
1713     text-align: center;
1714     margin-bottom: 5px;
1715     padding: 5px;
1718 .statusbox .activatebadge {
1719     display: inline-block;
1722 .statusbox .activatebadge input[type=submit] {
1723     margin: 3px;
1726 .activatebadge {
1727     margin: 0;
1728     text-align: left;
1729     vertical-align: middle;
1732 img#persona_signin {
1733     cursor: pointer;
1736 .addcourse {
1737     float: right;
1740 .invisiblefieldset {
1741     display: inline;
1742     padding: 0;
1743     border-width: 0;
1746 /** Page header */
1747 #page-header {
1748     .logo {
1749         margin: $spacer 0;
1750         img {
1751             max-height: 75px;
1752         }
1753     }
1756 /** Navbar logo. */
1757 nav.navbar .logo img {
1758     max-height: 35px;
1761 /** Header-bar styles **/
1762 .page-context-header {
1763     // We need to be explicit about the height of the header.
1764     $pageHeaderHeight: 140px;
1766     // Do not remove these rules.
1767     overflow: hidden;
1769     .page-header-image,
1770     .page-header-headings {
1771         float: left;
1772         display: block;
1773         position: relative;
1774     }
1776     .page-header-image {
1777         margin-right: 1em;
1778         margin-bottom: 1em;
1779     }
1781     .page-header-headings,
1782     .header-button-group {
1783         position: relative;
1784         line-height: 24px;
1785         vertical-align: middle;
1786     }
1788     .header-button-group {
1789         display: block;
1790         float: left;
1792         a {
1793             position: relative;
1795             // Don't touch it unless you know exactly what you are doing.
1796             top: -0.4em;
1797         }
1798     }
1801 ul.dragdrop-keyboard-drag li {
1802     list-style-type: none;
1805 a.disabled:hover,
1806 a.disabled {
1807     text-decoration: none;
1808     cursor: default;
1809     font-style: italic;
1810     color: #808080;
1813 body.lockscroll {
1814     height: 100%;
1815     overflow: hidden;
1818 .progressbar_container {
1819     max-width: 500px;
1820     margin: 0 auto;
1823 /* IE10 only fix for calendar titling */
1824 .ie10 .yui3-calendar-header-label {
1825     display: inline-block;
1828 dd:before,
1829 dd:after {
1830     display: block;
1831     content: " ";
1834 dd:after {
1835     clear: both;
1838 // Active tabs with links should have a different
1839 // cursor to indicate they are clickable.
1840 .nav-tabs > .active > a[href],
1841 .nav-tabs > .active > a[href]:hover,
1842 .nav-tabs > .active > a[href]:focus {
1843     cursor: pointer;
1846 .inplaceeditable {
1847     &.inplaceeditingon {
1848         position: relative;
1850         .editinstructions {
1851             margin-top: -30px;
1852             font-weight: normal;
1853             margin-right: 0;
1854             margin-left: 0;
1855             left: 0;
1856             right: auto;
1857             white-space: nowrap;
1858         }
1860         input {
1861             width: 330px;
1862             vertical-align: text-bottom;
1863             margin-bottom: 0;
1864         }
1866         select {
1867             margin-bottom: 0;
1868         }
1869     }
1871     .quickediticon img {
1872         opacity: 0.2;
1873     }
1875     .quickeditlink {
1876         color: inherit;
1877         text-decoration: inherit;
1878     }
1880     &:hover .quickeditlink .quickediticon img,
1881     .quickeditlink:focus .quickediticon img {
1882         opacity: 1;
1883     }
1885     &.inplaceeditable-toggle .quickediticon {
1886         display: none;
1887     }
1889     &.inplaceeditable-autocomplete {
1890         display: block;
1891     }
1894 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
1895     margin-top: -20px;
1898 /** Chart area. */
1899 .chart-area {
1901     .chart-table-data {
1902         display: none;
1903     }
1905     .chart-table {
1906         .chart-output-htmltable caption {
1907             white-space: nowrap;
1908         }
1909         /** When accessible, we display the table only. */
1910         &.accesshide {
1911             .chart-table-expand {
1912                 display: none;
1913             }
1914             .chart-table-data {
1915                 display: block;
1916             }
1917         }
1918     }
1921 // Reset for ul.
1922 ul {
1923     padding-left: 1rem;
1926 /* YUI 2 Tree View */
1927 /*rtl:raw:
1928 .ygtvtn,
1929 .ygtvtm,
1930 .ygtvtmh,
1931 .ygtvtmhh,
1932 .ygtvtp,
1933 .ygtvtph,
1934 .ygtvtphh,
1935 .ygtvln,
1936 .ygtvlm,
1937 .ygtvlmh,
1938 .ygtvlmhh,
1939 .ygtvlp,
1940 .ygtvlph,
1941 .ygtvlphh,
1942 .ygtvdepthcell,
1943 .ygtvok,
1944 .ygtvok:hover,
1945 .ygtvcancel,
1946 .ygtvcancel:hover {
1947     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
1949 */
1951 .hover-tooltip-container {
1952     position: relative;
1954     .hover-tooltip {
1955         opacity: 0;
1956         visibility: hidden;
1957         position: absolute;
1958         /*rtl:ignore*/
1959         left: 50%;
1960         top: calc(-50% - 5px);
1961         transform: translate(-50%, -50%);
1962         background-color: #fff;
1963         border: 1px solid rgba(0, 0, 0, .2);
1964         border-radius: .3rem;
1965         box-sizing: border-box;
1966         padding: 5px;
1967         white-space: nowrap;
1968         transition: opacity 0.15s, visibility 0.15s;
1969         z-index: 1000;
1971         &:before {
1972             content: '';
1973             display: inline-block;
1974             border-left: 8px solid transparent;
1975             border-right: 8px solid transparent;
1976             border-top: 8px solid rgba(0, 0, 0, .2);
1977             position: absolute;
1978             bottom: -8px;
1979             left: calc(50% - 8px);
1980         }
1982         &:after {
1983             content: '';
1984             display: inline-block;
1985             border-left: 7px solid transparent;
1986             border-right: 7px solid transparent;
1987             border-top: 7px solid #fff;
1988             position: absolute;
1989             bottom: -6px;
1990             left: calc(50% - 7px);
1991             z-index: 2;
1992         }
1993     }
1995     &:hover {
1996         .hover-tooltip {
1997             opacity: 1;
1998             visibility: visible;
1999             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2000         }
2001     }
2004 #region-flat-nav {
2005     padding-right: 0;
2006     padding-left: 0;
2007     .nav {
2008         margin-right: $grid-gutter-width / 2;
2009         background-color: $card-bg;
2010     }
2011     @include media-breakpoint-down(sm) {
2012         .nav {
2013             margin-top: $grid-gutter-width;
2014             margin-right: 0;
2015         }
2016     }
2019 // Footer link colour was added to allow the colour of footer links to be changed,
2020 // but really in bootstrap we want the colour of links on .bg-inverse to be changed
2021 // rather than being specific to the footer. This is kept for backwards compatibility.
2022 $footer-link-color: $bg-inverse-link-color !default;
2023 #page-footer a {
2024     color: $footer-link-color;
2025     text-decoration: underline;
2026     .icon {
2027         color: $footer-link-color;
2028     }
2031 .bg-inverse a {
2032     color: $bg-inverse-link-color;
2033     text-decoration: underline;
2034     .icon {
2035         color: $bg-inverse-link-color;
2036     }
2039 .sitelink {
2040     img {
2041         width: 112px;
2042     }
2045 // Make links in a menu clickable anywhere in the row.
2046 .dropdown-item a {
2047     display: block;
2048     width: 100%;
2049     color: $body-color;
2052 .competency-tree {
2053     ul {
2054         padding-left: 1.5rem;
2055     }
2058 .sr-only-focusable {
2059     &:active,
2060     &:focus {
2061         z-index: $zindex-navbar-fixed + 1;
2062         position: fixed;
2063         background: #fff;
2064         padding: 7px;
2065         left: 0;
2066         top: 0;
2067     }
2070 [data-drag-type="move"] {
2071     cursor: move;
2074 .clickable {
2075     cursor: pointer;
2078 .overlay-icon-container {
2079     position: absolute;
2080     top: 0;
2081     left: 0;
2082     width: 100%;
2083     height: 100%;
2084     background-color: rgba(255, 255, 255, 0.6);
2086     .loading-icon {
2087         position: absolute;
2088         top: 50%;
2089         left: 50%;
2090         transform: translate(-50%, -50%);
2092         .icon {
2093             height: 30px;
2094             width: 30px;
2095             font-size: 30px;
2096         }
2097     }
2100 .open.atto_menu > .dropdown-menu {
2101     display: block;