Merge branch 'MDL-62277-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 > .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 // Prevent adding backdrops to popups in popups.
1108 .pagelayout-popup {
1109     .moodle-dialogue-base {
1110         .moodle-dialogue-lightbox {
1111             background-color: transparent;
1112         }
1113         .moodle-dialogue {
1114             box-shadow: $popover-box-shadow;
1115         }
1116     }
1119 .moodle-dialogue-base .hidden,
1120 .moodle-dialogue-base .moodle-dialogue-hidden {
1121     display: none;
1124 .no-scrolling {
1125     overflow: hidden;
1128 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1129     left: 0;
1130     top: 0;
1131     right: 0;
1132     bottom: -50px;
1133     position: fixed;
1136 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1137     overflow: auto;
1140 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1141     width: 28px;
1142     height: 16px;
1143     background-size: 100%;
1146 .moodle-dialogue-base .moodle-dialogue-wrap {
1147     background-color: #fff;
1148     border: 1px solid #ccc;
1151 // Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1152 // it for a reason (conflicts with jquery .show()).
1153 .modal.show {
1154     display: block;
1157 .moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content {
1158     @extend .modal-content;
1161 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1162     @extend .modal-header;
1165 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1166     // Undo some YUI damage.
1167     min-height: 3rem;
1168     color: initial;
1169     background: initial;
1170     font-size: 1.5rem;
1171     line-height: 1.5;
1174 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1175     @extend .modal-title;
1176     font-size: 1.5rem;
1179 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1180     /*rtl:raw:
1181         left: 0;
1182         right: auto;
1183     */
1184     padding: $spacer;
1187 .moodle-dialogue-base .closebutton {
1188     @extend .close;
1189     box-shadow: none;
1190     &::after {
1191         content: "×";
1192     }
1195 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1196     padding: 0.5rem;
1199 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1200     overflow: auto;
1201     position: absolute;
1202     top: 0;
1203     bottom: 50px;
1204     left: 0;
1205     right: 0;
1206     margin: 0;
1207     border: 0;
1210 .moodle-dialogue-exception .moodle-exception-param label {
1211     font-weight: bold;
1214 .moodle-dialogue-exception .param-stacktrace label {
1215     background-color: #eee;
1216     border: 1px solid #ccc;
1217     border-bottom-width: 0;
1220 .moodle-dialogue-exception .param-stacktrace pre {
1221     border: 1px solid #ccc;
1222     background-color: #fff;
1225 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1226     color: navy;
1227     font-size: $font-size-sm;
1230 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1231     @extend .text-warning;
1232     font-size: $font-size-sm;
1235 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1236     color: #333;
1237     font-size: 90%;
1238     border-bottom: 1px solid #eee;
1241 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1242     @extend .modal-footer;
1245 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1246     display: none;
1249 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1250     // Undo some YUI damage.
1251     background: initial;
1254 .moodle-dialogue-confirm .confirmation-message {
1255     margin: 0.5rem 0;
1258 .moodle-dialogue-confirm .confirmation-dialogue input {
1259     min-width: 80px;
1262 .moodle-dialogue-exception .moodle-exception-message {
1263     margin: 1em;
1266 .moodle-dialogue-exception .moodle-exception-param {
1267     margin-bottom: 0.5em;
1270 .moodle-dialogue-exception .moodle-exception-param label {
1271     width: 150px;
1274 .moodle-dialogue-exception .param-stacktrace label {
1275     display: block;
1276     margin: 0;
1277     padding: 4px 1em;
1280 .moodle-dialogue-exception .param-stacktrace pre {
1281     display: block;
1282     height: 200px;
1283     overflow: auto;
1286 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1287     display: inline-block;
1288     margin: 4px 0;
1291 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1292     display: inline-block;
1293     width: 50px;
1294     margin: 4px 1em;
1297 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1298     padding-left: 25px;
1299     margin-bottom: 4px;
1300     padding-bottom: 4px;
1303 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1304     opacity: 0.75;
1305     width: 100%;
1306     height: 100%;
1307     top: 0;
1308     left: 0;
1309     background-color: white;
1310     text-align: center;
1311     padding: 10% 0;
1313 /* Apply a default max-height on tooltip text */
1314 .moodle-dialogue .tooltiptext {
1315     max-height: 300px;
1318 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1319     z-index: 3001;
1321     .moodle-dialogue-bd {
1322         overflow: auto;
1323     }
1326 /**
1327  * Chooser Dialogues (moodle-core-chooserdialogue)
1328  *
1329  * This CSS belong to the chooser dialogue which should work both with, and
1330  * without javascript enabled
1331  */
1332 /* Hide the dialog and it's title */
1333 .chooserdialoguebody,
1334 .choosertitle {
1335     display: none;
1338 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1339     margin: 0;
1342 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1343     padding: 0;
1344     background: #f2f2f2;
1346     @include border-bottom-radius(10px);
1348 /* Center the submit buttons within the area */
1349 .choosercontainer #chooseform .submitbuttons {
1350     padding: 0.7em 0;
1351     text-align: right;
1353 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1355 @media (max-height: 639px) {
1356     .ios.safari .choosercontainer #chooseform .submitbuttons {
1357         padding: 45px 0;
1358     }
1361 .choosercontainer #chooseform .submitbuttons input {
1362     min-width: 100px;
1363     margin: 0 0.5em;
1365 /* Various settings for the options area */
1366 .choosercontainer #chooseform .options {
1367     position: relative;
1368     border-bottom: 1px solid #bbb;
1370 /* Only set these options if we're showing the js container */
1371 .jschooser .choosercontainer #chooseform .alloptions {
1372     overflow-x: hidden;
1373     overflow-y: auto;
1374     max-width: 240px;
1376     .option {
1377         input[type=radio] {
1378             display: inline-block;
1379         }
1381         .typename {
1382             display: inline-block;
1383             width: 55%;
1384         }
1385     }
1387 /* Settings for option rows and option subtypes */
1388 .choosercontainer #chooseform .moduletypetitle,
1389 .choosercontainer #chooseform .option,
1390 .choosercontainer #chooseform .nonoption {
1391     margin-bottom: 0;
1392     padding: 0 1.6em 0 1.6em;
1395 .choosercontainer #chooseform .moduletypetitle {
1396     text-transform: uppercase;
1397     padding-top: 1.2em;
1398     padding-bottom: 0.4em;
1401 .choosercontainer #chooseform .option .typename,
1402 .choosercontainer #chooseform .nonoption .typename {
1403     padding: 0 0 0 0.5em;
1406 .choosercontainer #chooseform .modicon + .typename {
1407     padding-left: 0;
1410 .choosercontainer #chooseform .option input[type=radio],
1411 .choosercontainer #chooseform .option span.typename {
1412     vertical-align: middle;
1415 .choosercontainer #chooseform .option label {
1416     display: block;
1417     margin: 0;
1418     padding: ($spacer / 2) 0;
1419     border-bottom: 1px solid #fff;
1422 .choosercontainer #chooseform .option .icon {
1423     margin: 0;
1424     padding: 0 $spacer;
1427 .choosercontainer #chooseform .nonoption {
1428     padding-left: 2.7em;
1429     padding-top: 0.3em;
1430     padding-bottom: 0.1em;
1433 .choosercontainer #chooseform .subtype {
1434     margin-bottom: 0;
1435     padding: 0 1.6em 0 3.2em;
1438 .choosercontainer #chooseform .subtype .typename {
1439     margin: 0 0 0 0.2em;
1441 /* The instruction/help area */
1442 .jschooser .choosercontainer #chooseform .instruction,
1443 .jschooser .choosercontainer #chooseform .typesummary {
1444     display: none;
1445     position: absolute;
1446     top: 0;
1447     right: 0;
1448     bottom: 0;
1449     left: 240px;
1450     margin: 0;
1451     padding: 1.6em;
1452     background-color: #fff;
1453     overflow-x: hidden;
1454     overflow-y: auto;
1455     line-height: 2em;
1457 /* Selected option settings */
1458 .jschooser .choosercontainer #chooseform .instruction,
1459 .choosercontainer #chooseform .selected .typesummary {
1460     display: block;
1463 .choosercontainer #chooseform .selected {
1464     background-color: #fff;
1465     margin-top: -1px;
1466     padding-top: 1px;
1469 .chooserdialogue-course-modchooser .modicon .icon {
1470     width: 24px;
1471     height: 24px;
1472     font-size: 24px;
1475 @include media-breakpoint-down(xs) {
1476     .jsenabled .choosercontainer #chooseform .alloptions {
1477         max-width: 100%;
1478     }
1480     .jsenabled .choosercontainer #chooseform .instruction,
1481     .jsenabled .choosercontainer #chooseform .typesummary {
1482         position: static;
1483     }
1486 /* Form element: listing */
1487 .formlistingradio {
1488     padding-bottom: 25px;
1489     padding-right: 10px;
1492 .formlistinginputradio {
1493     float: left;
1496 .formlistingmain {
1497     min-height: 225px;
1500 .formlisting {
1501     position: relative;
1502     margin: 15px 0;
1503     padding: 1px 19px 14px;
1504     background-color: white;
1505     border: 1px solid #ddd;
1507     @include border-radius(4px);
1510 .formlistingmore {
1511     position: absolute;
1512     cursor: pointer;
1513     bottom: -1px;
1514     right: -1px;
1515     padding: 3px 7px;
1516     font-size: 12px;
1517     font-weight: bold;
1518     background-color: whitesmoke;
1519     border: 1px solid #ddd;
1520     color: #9da0a4;
1522     @include border-radius(4px 0 4px 0);
1525 .formlistingall {
1526     margin: 15px 0;
1527     padding: 0;
1529     @include border-radius(4px);
1532 .formlistingrow {
1533     cursor: pointer;
1534     border-bottom: 1px solid;
1535     border-color: #e1e1e8;
1536     border-left: 1px solid #e1e1e8;
1537     border-right: 1px solid #e1e1e8;
1538     background-color: #f7f7f9;
1540     @include border-radius(0 0 4px 4px);
1541     padding: 6px;
1542     top: 50%;
1543     left: 50%;
1544     min-height: 34px;
1545     float: left;
1546     width: 150px;
1549 body.jsenabled .formlistingradio {
1550     display: none;
1553 body.jsenabled .formlisting {
1554     display: block;
1557 /* Badges styles */
1558 table.collection {
1559     @extend .table;
1560     @extend .table-bordered;
1561     @extend .table-striped;
1564 a.criteria-action {
1565     padding: 0 3px;
1566     float: right;
1569 div.criteria-description {
1570     padding: 10px 15px;
1571     margin: 5px 0;
1572     background: none repeat scroll 0 0 #f9f9f9;
1573     border: 1px solid #eee;
1576 ul.badges {
1577     margin: 0;
1578     list-style: none;
1581 .badges li {
1582     position: relative;
1583     display: inline-block;
1584     padding-top: 1em;
1585     text-align: center;
1586     vertical-align: top;
1587     width: 150px;
1590 .badges li .badge-name {
1591     display: block;
1592     padding: 5px;
1595 .badges li > img {
1596     position: absolute;
1599 .badges li .badge-image {
1600     width: 100px;
1601     height: 100px;
1602     left: 10px;
1603     top: 0;
1604     z-index: 1;
1607 .badges li .badge-actions {
1608     position: relative;
1611 .badges li .expireimage {
1612     width: 100px;
1613     height: 100px;
1614     left: 25px;
1615     top: 0;
1616     position: absolute;
1617     z-index: 10;
1618     opacity: 0.85;
1621 #badge-image {
1622     background-color: transparent;
1623     padding: 0;
1624     position: relative;
1625     min-width: 100px;
1626     width: 20%;
1627     display: inline-block;
1628     vertical-align: top;
1629     margin-top: 17px;
1630     margin-bottom: 20px;
1632     .expireimage {
1633         width: 100px;
1634         height: 100px;
1635         left: 0;
1636         top: 0;
1637         opacity: 0.85;
1638         position: absolute;
1639         z-index: 10;
1640     }
1642     .singlebutton {
1643         padding-top: 5px;
1644         display: block;
1646         button {
1647             margin-left: 4px;
1648         }
1649     }
1652 #badge-details {
1653     display: inline-block;
1654     width: 79%;
1657 #badge-overview dl,
1658 #badge-details dl {
1659     margin: 0;
1661     dt,
1662     dd {
1663         vertical-align: top;
1664         padding: 3px 0;
1665     }
1667     dt {
1668         clear: both;
1669         display: inline-block;
1670         width: 20%;
1671         min-width: 100px;
1672     }
1674     dd {
1675         display: inline-block;
1676         width: 79%;
1677         margin-left: 1%;
1678     }
1681 .badge-profile {
1682     vertical-align: top;
1685 .connected {
1686     @extend .text-success;
1689 .notconnected {
1690     @extend .text-danger;
1693 .connecting {
1694     @extend .text-warning;
1697 #page-badges-award .recipienttable tr td {
1698     vertical-align: top;
1701 #page-badges-award .recipienttable tr td.actions .actionbutton {
1702     margin: 0.3em 0;
1703     padding: 0.5em 0;
1704     width: 100%;
1707 #page-badges-award .recipienttable tr td.existing,
1708 #page-badges-award .recipienttable tr td.potential {
1709     width: 42%;
1712 #issued-badge-table .activatebadge {
1713     display: inline-block;
1716 .statusbox.active {
1717     background-color: $state-success-bg;
1720 .statusbox.inactive {
1721     background-color: $state-warning-bg;
1724 .statusbox {
1725     text-align: center;
1726     margin-bottom: 5px;
1727     padding: 5px;
1730 .statusbox .activatebadge {
1731     display: inline-block;
1734 .statusbox .activatebadge input[type=submit] {
1735     margin: 3px;
1738 .activatebadge {
1739     margin: 0;
1740     text-align: left;
1741     vertical-align: middle;
1744 img#persona_signin {
1745     cursor: pointer;
1748 .addcourse {
1749     float: right;
1752 .invisiblefieldset {
1753     display: inline;
1754     padding: 0;
1755     border-width: 0;
1758 /** Page header */
1759 #page-header {
1760     .logo {
1761         margin: $spacer 0;
1762         img {
1763             max-height: 75px;
1764         }
1765     }
1768 /** Navbar logo. */
1769 nav.navbar .logo img {
1770     max-height: 35px;
1773 /** Header-bar styles **/
1774 .page-context-header {
1775     // We need to be explicit about the height of the header.
1776     $pageHeaderHeight: 140px;
1778     // Do not remove these rules.
1779     overflow: hidden;
1781     .page-header-image,
1782     .page-header-headings {
1783         float: left;
1784         display: block;
1785         position: relative;
1786     }
1788     .page-header-image {
1789         margin-right: 1em;
1790         margin-bottom: 1em;
1791     }
1793     .page-header-headings,
1794     .header-button-group {
1795         position: relative;
1796         line-height: 24px;
1797         vertical-align: middle;
1798     }
1800     .header-button-group {
1801         display: block;
1802         float: left;
1804         a {
1805             position: relative;
1807             // Don't touch it unless you know exactly what you are doing.
1808             top: -0.4em;
1809         }
1810     }
1813 ul.dragdrop-keyboard-drag li {
1814     list-style-type: none;
1817 a.disabled:hover,
1818 a.disabled {
1819     text-decoration: none;
1820     cursor: default;
1821     font-style: italic;
1822     color: #808080;
1825 body.lockscroll {
1826     height: 100%;
1827     overflow: hidden;
1830 .progressbar_container {
1831     max-width: 500px;
1832     margin: 0 auto;
1835 /* IE10 only fix for calendar titling */
1836 .ie10 .yui3-calendar-header-label {
1837     display: inline-block;
1840 dd:before,
1841 dd:after {
1842     display: block;
1843     content: " ";
1846 dd:after {
1847     clear: both;
1850 // Active tabs with links should have a different
1851 // cursor to indicate they are clickable.
1852 .nav-tabs > .active > a[href],
1853 .nav-tabs > .active > a[href]:hover,
1854 .nav-tabs > .active > a[href]:focus {
1855     cursor: pointer;
1858 .inplaceeditable {
1859     &.inplaceeditingon {
1860         position: relative;
1862         .editinstructions {
1863             margin-top: -30px;
1864             font-weight: normal;
1865             margin-right: 0;
1866             margin-left: 0;
1867             left: 0;
1868             right: auto;
1869             white-space: nowrap;
1870         }
1872         input {
1873             width: 330px;
1874             vertical-align: text-bottom;
1875             margin-bottom: 0;
1876         }
1878         select {
1879             margin-bottom: 0;
1880         }
1881     }
1883     .quickediticon img {
1884         opacity: 0.2;
1885     }
1887     .quickeditlink {
1888         color: inherit;
1889         text-decoration: inherit;
1890     }
1892     &:hover .quickeditlink .quickediticon img,
1893     .quickeditlink:focus .quickediticon img {
1894         opacity: 1;
1895     }
1897     &.inplaceeditable-toggle .quickediticon {
1898         display: none;
1899     }
1901     &.inplaceeditable-autocomplete {
1902         display: block;
1903     }
1906 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
1907     margin-top: -20px;
1910 /** Chart area. */
1911 .chart-area {
1913     .chart-table-data {
1914         display: none;
1915     }
1917     .chart-table {
1918         .chart-output-htmltable caption {
1919             white-space: nowrap;
1920         }
1921         /** When accessible, we display the table only. */
1922         &.accesshide {
1923             .chart-table-expand {
1924                 display: none;
1925             }
1926             .chart-table-data {
1927                 display: block;
1928             }
1929         }
1930     }
1933 // Reset for ul.
1934 ul {
1935     padding-left: 1rem;
1938 /* YUI 2 Tree View */
1939 /*rtl:raw:
1940 .ygtvtn,
1941 .ygtvtm,
1942 .ygtvtmh,
1943 .ygtvtmhh,
1944 .ygtvtp,
1945 .ygtvtph,
1946 .ygtvtphh,
1947 .ygtvln,
1948 .ygtvlm,
1949 .ygtvlmh,
1950 .ygtvlmhh,
1951 .ygtvlp,
1952 .ygtvlph,
1953 .ygtvlphh,
1954 .ygtvdepthcell,
1955 .ygtvok,
1956 .ygtvok:hover,
1957 .ygtvcancel,
1958 .ygtvcancel:hover {
1959     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
1961 */
1963 .hover-tooltip-container {
1964     position: relative;
1966     .hover-tooltip {
1967         opacity: 0;
1968         visibility: hidden;
1969         position: absolute;
1970         /*rtl:ignore*/
1971         left: 50%;
1972         top: calc(-50% - 5px);
1973         transform: translate(-50%, -50%);
1974         background-color: #fff;
1975         border: 1px solid rgba(0, 0, 0, .2);
1976         border-radius: .3rem;
1977         box-sizing: border-box;
1978         padding: 5px;
1979         white-space: nowrap;
1980         transition: opacity 0.15s, visibility 0.15s;
1981         z-index: 1000;
1983         &:before {
1984             content: '';
1985             display: inline-block;
1986             border-left: 8px solid transparent;
1987             border-right: 8px solid transparent;
1988             border-top: 8px solid rgba(0, 0, 0, .2);
1989             position: absolute;
1990             bottom: -8px;
1991             left: calc(50% - 8px);
1992         }
1994         &:after {
1995             content: '';
1996             display: inline-block;
1997             border-left: 7px solid transparent;
1998             border-right: 7px solid transparent;
1999             border-top: 7px solid #fff;
2000             position: absolute;
2001             bottom: -6px;
2002             left: calc(50% - 7px);
2003             z-index: 2;
2004         }
2005     }
2007     &:hover {
2008         .hover-tooltip {
2009             opacity: 1;
2010             visibility: visible;
2011             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2012         }
2013     }
2016 #region-flat-nav {
2017     padding-right: 0;
2018     padding-left: 0;
2019     .nav {
2020         margin-right: $grid-gutter-width / 2;
2021         background-color: $card-bg;
2022     }
2023     @include media-breakpoint-down(sm) {
2024         .nav {
2025             margin-top: $grid-gutter-width;
2026             margin-right: 0;
2027         }
2028     }
2031 // Footer link colour was added to allow the colour of footer links to be changed,
2032 // but really in bootstrap we want the colour of links on .bg-inverse to be changed
2033 // rather than being specific to the footer. This is kept for backwards compatibility.
2034 $footer-link-color: $bg-inverse-link-color !default;
2035 #page-footer a {
2036     color: $footer-link-color;
2037     text-decoration: underline;
2038     .icon {
2039         color: $footer-link-color;
2040     }
2043 .bg-inverse a {
2044     color: $bg-inverse-link-color;
2045     text-decoration: underline;
2046     .icon {
2047         color: $bg-inverse-link-color;
2048     }
2051 .sitelink {
2052     img {
2053         width: 112px;
2054     }
2057 // Make links in a menu clickable anywhere in the row.
2058 .dropdown-item a {
2059     display: block;
2060     width: 100%;
2061     color: $body-color;
2064 .competency-tree {
2065     ul {
2066         padding-left: 1.5rem;
2067     }
2070 .sr-only-focusable {
2071     &:active,
2072     &:focus {
2073         z-index: $zindex-navbar-fixed + 1;
2074         position: fixed;
2075         background: #fff;
2076         padding: 7px;
2077         left: 0;
2078         top: 0;
2079     }
2082 [data-drag-type="move"] {
2083     cursor: move;
2086 .clickable {
2087     cursor: pointer;
2090 .overlay-icon-container {
2091     position: absolute;
2092     top: 0;
2093     left: 0;
2094     width: 100%;
2095     height: 100%;
2096     background-color: rgba(255, 255, 255, 0.6);
2098     .loading-icon {
2099         position: absolute;
2100         top: 50%;
2101         left: 50%;
2102         transform: translate(-50%, -50%);
2104         .icon {
2105             height: 30px;
2106             width: 30px;
2107             font-size: 30px;
2108         }
2109     }
2112 .open.atto_menu > .dropdown-menu {
2113     display: block;