a48811d197cc51085921b75fa0445b0e02b025ec
[moodle.git] / theme / boost / scss / moodle / core.scss
1 /* core.less */
3 #region-main > .card {
4     overflow-x: auto;
5     overflow-y: visible;
6     min-height: 45rem;
7 }
9 .context-header-settings-menu,
10 .region-main-settings-menu {
11     float: right;
12     width: auto;
13     max-width: 4em;
14     height: 2em;
15     display: block;
16     margin-top: 4px;
17 }
19 .context-header-settings-menu .dropdown-toggle > .icon,
20 #region-main-settings-menu .dropdown-toggle > .icon {
21     height: 24px;
22     font-size: 24px;
23     width: auto;
24 }
25 /** Prevent user notifications overlapping with region main settings menu */
26 #user-notifications {
27     display: block;
28     overflow: hidden;
29 }
31 /** Page layout CSS starts **/
32 .layout-option-noheader #page-header,
33 .layout-option-nonavbar #page-navbar,
34 .layout-option-nofooter #page-footer,
35 .layout-option-nocourseheader .course-content-header,
36 .layout-option-nocoursefooter .course-content-footer {
37     display: none;
38 }
40 /** Page layout CSS ends **/
42 .mdl-left {
43     text-align: left;
44 }
46 .mdl-right {
47     text-align: right;
48 }
50 /*rtl:ignore*/
51 .text-ltr {
52     direction: ltr !important; /* stylelint-disable-line declaration-no-important */
53 }
55 #add,
56 #remove,
57 .centerpara,
58 .mdl-align {
59     text-align: center;
60 }
62 a.dimmed,
63 a.dimmed:link,
64 a.dimmed:visited,
65 a.dimmed_text,
66 a.dimmed_text:link,
67 a.dimmed_text:visited,
68 .dimmed_text,
69 .dimmed_text a,
70 .dimmed_text a:link,
71 .dimmed_text a:visited,
72 .usersuspended,
73 .usersuspended a,
74 .usersuspended a:link,
75 .usersuspended a:visited,
76 .dimmed_category,
77 .dimmed_category a {
78     @extend .text-muted;
79 }
81 .unlist,
82 .unlist li,
83 .inline-list,
84 .inline-list li,
85 .block .list,
86 .block .list li,
87 .section li.activity,
88 .section li.movehere,
89 .tabtree li {
90     list-style: none;
91     margin: 0;
92     padding: 0;
93 }
95 .inline,
96 .inline-list li {
97     display: inline;
98 }
100 .notifytiny {
101     font-size: $font-size-xs;
104 .notifytiny li,
105 .notifytiny td {
106     font-size: 100%;
109 .red,
110 .notifyproblem {
111     @extend .text-warning;
114 .green,
115 .notifysuccess {
116     @extend .text-success;
119 .highlight {
120     @extend .text-info;
123 .fitem.advanced .text-info {
124     font-weight: bold;
127 .reportlink {
128     text-align: right;
131 a.autolink.glossary:hover {
132     cursor: help;
134 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
135 .collapsibleregioncaption {
136     white-space: nowrap;
137     min-height: $line-height-base * $font-size-base;
140 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
141     cursor: pointer;
144 .collapsibleregioncaption img {
145     vertical-align: middle;
148 .jsenabled .hiddenifjs {
149     display: none;
152 .visibleifjs {
153     display: none;
156 .jsenabled .visibleifjs {
157     display: inline;
160 .jsenabled .collapsibleregion {
161     overflow: hidden;
162     box-sizing: content-box;
165 .jsenabled .collapsed .collapsibleregioninner {
166     visibility: hidden;
169 .collapsible-actions {
170     display: none;
171     text-align: right;
174 .jsenabled .collapsible-actions {
175     display: block;
178 .collapsible-actions .collapseexpand {
179     padding-left: 20px;
180     background: url([[pix:t/collapsed]]) 2px center no-repeat;
182 /*rtl:raw:
183 .collapsible-actions .collapseexpand {
184     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
186 */
187 .collapsible-actions .collapse-all {
188     background-image: url([[pix:t/expanded]]);
191 .yui-overlay .yui-widget-bd {
192     background-color: #ffee69;
193     border: 1px solid #a6982b;
194     border-top-color: #d4c237;
195     color: #000;
196     left: 0;
197     padding: 2px 5px;
198     position: relative;
199     top: 0;
200     z-index: 1;
203 .clearer {
204     background: transparent;
205     border-width: 0;
206     clear: both;
207     display: block;
208     height: 1px;
209     margin: 0;
210     padding: 0;
213 .bold,
214 .warning,
215 .errorbox .title,
216 .pagingbar .title,
217 .pagingbar .thispage {
218     font-weight: bold;
221 img.userpicture {
222     margin-right: 0.5rem;
225 img.resize {
226     height: 1em;
227     width: 1em;
230 .action-menu .dropdown-toggle {
231     text-decoration: none;
234 .action-menu {
235     white-space: nowrap;
238 .action-menu .userpicture {
239     margin-left: 1rem;
242 .block img.resize,
243 .breadcrumb 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     left: -10000px;
298     font-weight: normal;
299     font-size: 1em;
302 span.hide,
303 div.hide,
304 .hidden {
305     display: none;
307 // Accessibility: Skip block link, for keyboard-only users.
308 a.skip-block,
309 a.skip {
310     position: absolute;
311     top: -1000em;
312     font-size: 0.85em;
313     text-decoration: none;
316 a.skip-block:focus,
317 a.skip-block:active,
318 a.skip:focus,
319 a.skip:active {
320     position: static;
321     display: block;
324 .skip-block-to {
325     display: block;
326     height: 1px;
327     overflow: hidden;
329 // Blogs
330 .addbloglink {
331     text-align: center;
334 .blog_entry .audience {
335     text-align: right;
336     padding-right: 4px;
339 .blog_entry .tags {
340     margin-top: 15px;
343 .blog_entry .content {
344     margin-left: 43px;
346 // Group
348 #doc-contents h1 {
349     margin: 1em 0 0 0;
352 #doc-contents ul {
353     margin: 0;
354     padding: 0;
355     width: 90%;
358 #doc-contents ul li {
359     list-style-type: none;
362 .groupmanagementtable td {
363     vertical-align: top;
366 .groupmanagementtable #existingcell,
367 .groupmanagementtable #potentialcell {
368     width: 42%;
371 .groupmanagementtable #buttonscell {
372     width: 16%;
375 .groupmanagementtable #buttonscell p.arrow_button input {
376     width: auto;
377     min-width: 80%;
378     margin: 0 auto;
381 .groupmanagementtable #removeselect_wrapper,
382 .groupmanagementtable #addselect_wrapper {
383     width: 100%;
386 .groupmanagementtable #removeselect_wrapper label,
387 .groupmanagementtable #addselect_wrapper label {
388     font-weight: normal;
391 #group-usersummary {
392     width: 14em;
395 .groupselector {
396     margin-top: 3px;
397     margin-bottom: 3px;
398     display: inline-block;
401 .groupselector label {
402     display: inline-block;
405 // Login
406 .login-page {
407     [name="username"] {
408         margin-bottom: -1px;
409         border-bottom-right-radius: 0;
410         border-bottom-left-radius: 0;
411     }
413     [type="password"] {
414         margin-bottom: 10px;
415         border-top-left-radius: 0;
416         border-top-right-radius: 0;
417     }
420 // Notes
421 .notepost {
422     margin-bottom: 1em;
425 .notepost .userpicture {
426     float: left;
427     margin-right: 5px;
430 .notepost .content,
431 .notepost .footer {
432     clear: both;
435 .notesgroup {
436     margin-left: 20px;
439 // My Moodle
440 .path-my .coursebox {
441     margin: $spacer-y 0;
442     padding: 0;
444     .overview {
445         margin: 15px 30px 10px 30px;
446     }
449 .path-my .coursebox .info {
450     float: none;
451     margin: 0;
454 // Modules
455 .mod_introbox {
456     padding: 10px;
459 table.mod_index {
460     width: 100%;
463 // Comments
464 .comment-ctrl {
465     font-size: 12px;
466     display: none;
467     margin: 0;
468     padding: 0;
471 .comment-ctrl h5 {
472     margin: 0;
473     padding: 5px;
476 .comment-area {
477     max-width: 400px;
478     padding: 5px;
481 .comment-area textarea {
482     width: 100%;
483     overflow: auto;
485     &.fullwidth {
486         -webkit-box-sizing: border-box;
487         -moz-box-sizing: border-box;
488         box-sizing: border-box;
489     }
492 .comment-area .fd {
493     text-align: right;
496 .comment-meta span {
497     color: gray;
500 .comment-link img {
501     vertical-align: text-bottom;
504 .comment-list {
505     font-size: 11px;
506     overflow: auto;
507     list-style: none;
508     padding: 0;
509     margin: 0;
512 .comment-list li {
513     margin: 2px;
514     list-style: none;
515     margin-bottom: 5px;
516     clear: both;
517     padding: .3em;
518     position: relative;
521 .comment-list li.first {
522     display: none;
525 .comment-paging {
526     text-align: center;
529 .comment-paging .pageno {
530     padding: 2px;
533 .comment-paging .curpage {
534     border: 1px solid #ccc;
537 .comment-message .picture {
538     width: 20px;
539     float: left;
542 .comment-message .text {
543     margin: 0;
544     padding: 0;
547 .comment-message .text p {
548     padding: 0;
549     margin: 0 18px 0 0;
552 .comment-delete {
553     position: absolute;
554     top: 0;
555     right: 0;
556     margin: .3em;
559 .comment-report-selectall {
560     display: none;
563 .comment-link {
564     display: none;
567 .jsenabled .comment-link {
568     display: block;
571 .jsenabled .showcommentsnonjs {
572     display: none;
575 .jsenabled .comment-report-selectall {
576     display: inline;
578 /**
579 * Completion progress report
580 */
581 .completion-expired {
582     @extend .text-warning;
585 .completion-expected {
586     font-size: $font-size-xs;
589 .completion-sortchoice,
590 .completion-identifyfield {
591     font-size: $font-size-xs;
592     vertical-align: bottom;
595 .completion-progresscell {
596     text-align: right;
599 .completion-expired .completion-expected {
600     font-weight: bold;
602 /**
603 * Tags
604 */
605 img.user-image {
606     height: 100px;
607     width: 100px;
610 #tag-search-box {
611     text-align: center;
612     margin: 10px auto;
615 .path-tag .tag-index-items .tagarea {
616     border: 1px solid #e3e3e3;
617     border-radius: 4px;
618     padding: 10px;
619     margin-top: 10px;
622 .path-tag .tag-index-items .tagarea h3 {
623     display: block;
624     padding: 3px 0 10px 0;
625     margin: 0;
626     font-size: 1.1em;
627     font-weight: bold;
628     line-height: 20px;
629     color: #999;
630     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
631     text-transform: uppercase;
632     word-wrap: break-word;
633     border-bottom: solid 1px #e3e3e3;
634     margin-bottom: 10px;
637 .path-tag .tagarea .controls,
638 .path-tag .tagarea .taggeditems {
639     @include clearfix();
642 .path-tag .tagarea .controls,
643 .path-tag .tag-backtoallitems {
644     text-align: center;
647 .path-tag .tagarea .controls .gotopage.nextpage {
648     float: right;
651 .path-tag .tagarea .controls .gotopage.prevpage {
652     float: left;
655 .path-tag .tagarea .controls .exclusivemode {
656     display: inline-block;
659 .path-tag .tagarea .controls.controls-bottom {
660     margin-top: 5px;
663 .path-tag .tagarea .controls .gotopage.nextpage::after {
664     padding-right: 5px;
665     padding-left: 5px;
666     content: "»";
669 .path-tag .tagarea .controls .gotopage.prevpage::before {
670     padding-right: 5px;
671     padding-left: 5px;
672     content: "«";
675 span.flagged-tag,
676 tr.flagged-tag,
677 span.flagged-tag a,
678 tr.flagged-tag a {
679     @extend .text-warning;
682 .tag-management-table td,
683 .tag-management-table th {
684     vertical-align: middle;
685     padding: 4px;
688 .tag-management-table .inplaceeditable.inplaceeditingon input {
689     width: 150px;
692 .path-admin-tag .addstandardtags {
693     float: right;
695     img {
696         margin: 0 5px;
697     }
700 .path-tag .tag-relatedtags {
701     padding-top: 10px;
704 .path-tag .tag-management-box {
705     text-align: right;
708 .path-tag .tag-index-toc {
709     padding: 10px;
710     text-align: center;
713 .path-tag .tag-index-toc li,
714 .path-tag .tag-management-box li {
715     margin-left: 5px;
716     margin-right: 5px;
719 .path-tag .tag-management-box li a.edittag {
720     background-image: url([[pix:moodle|i/settings]]);
723 .path-tag .tag-management-box li a.flagasinappropriate {
724     background-image: url([[pix:moodle|i/flagged]]);
727 .path-tag .tag-management-box li a.removefrommyinterests {
728     background-image: url([[pix:moodle|t/delete]]);
731 .path-tag .tag-management-box li a.addtomyinterests {
732     background-image: url([[pix:moodle|t/add]]);
735 .path-tag .tag-management-box li a {
736     background-repeat: no-repeat;
737     background-position: left;
738     padding-left: 17px;
741 .tag_feed.media-list .media .itemimage {
742     float: left;
745 .tag_feed.media-list .media .itemimage img {
746     height: 35px;
747     width: 35px;
750 .tag_feed.media-list .media .media-body {
751     padding-right: 10px;
752     padding-left: 10px;
755 .tag_feed .media .muted a {
756     @extend .text-muted;
759 .tag_cloud {
760     text-align: center;
763 .tag_cloud .inline-list li {
764     padding: 0 0.2em;
767 .tag_cloud .tag_overflow {
768     margin-top: 1em;
769     font-style: italic;
772 .tag_cloud .s20 {
773     font-size: 2.7em;
776 .tag_cloud .s19 {
777     font-size: 2.6em;
780 .tag_cloud .s18 {
781     font-size: 2.5em;
784 .tag_cloud .s17 {
785     font-size: 2.4em;
788 .tag_cloud .s16 {
789     font-size: 2.3em;
792 .tag_cloud .s15 {
793     font-size: 2.2em;
796 .tag_cloud .s14 {
797     font-size: 2.1em;
800 .tag_cloud .s13 {
801     font-size: 2em;
804 .tag_cloud .s12 {
805     font-size: 1.9em;
808 .tag_cloud .s11 {
809     font-size: 1.8em;
812 .tag_cloud .s10 {
813     font-size: 1.7em;
816 .tag_cloud .s9 {
817     font-size: 1.6em;
820 .tag_cloud .s8 {
821     font-size: 1.5em;
824 .tag_cloud .s7 {
825     font-size: 1.4em;
828 .tag_cloud .s6 {
829     font-size: 1.3em;
832 .tag_cloud .s5 {
833     font-size: 1.2em;
836 .tag_cloud .s4 {
837     font-size: 1.1em;
840 .tag_cloud .s3 {
841     font-size: 1em;
844 .tag_cloud .s2 {
845     font-size: 0.9em;
848 .tag_cloud .s1 {
849     font-size: 0.8em;
852 .tag_cloud .s0 {
853     font-size: 0.7em;
856 .tag_list ul {
857     display: inline;
860 .tag_list.hideoverlimit .overlimit {
861     display: none;
864 .tag_list .tagmorelink {
865     display: none;
868 .tag_list.hideoverlimit .tagmorelink {
869     display: inline;
872 .tag_list.hideoverlimit .taglesslink {
873     display: none;
876 /**
877 * Web Service
878 */
879 #webservice-doc-generator td {
880     text-align: left;
881     border: 0 solid black;
884 /**
885 * Enrol
886 */
887 .userenrolment {
888     width: 100%;
889     border-collapse: collapse;
892 .userenrolment tr {
893     vertical-align: top;
896 .userenrolment td {
897     padding: 0;
898     height: 41px;
901 .userenrolment .subfield {
902     margin-right: 5px;
905 .userenrolment .col_userdetails .subfield {
906     margin-left: 40px;
909 .userenrolment .col_userdetails .subfield_picture {
910     float: left;
911     margin-left: 0;
914 .userenrolment .col_lastseen {
915     width: 150px;
918 .userenrolment .col_role {
919     width: 262px;
922 .userenrolment .col_role .roles,
923 .userenrolment .col_group .groups {
924     margin-right: 30px;
927 .userenrolment .col_role .role {
928     float: left;
929     padding: 0 3px 3px;
930     margin: 0 3px 3px;
931     white-space: nowrap;
934 .userenrolment .col_group .group {
935     float: left;
936     padding: 3px;
937     margin: 3px;
938     white-space: nowrap;
941 .userenrolment .col_role .role a,
942 .userenrolment .col_group .group a {
943     margin-left: 3px;
944     cursor: pointer;
947 .userenrolment .col_role .addrole,
948 .userenrolment .col_group .addgroup {
949     float: right;
950     padding: 3px;
951     margin: 3px;
953     > a:hover {
954         border-bottom: 1px solid #666;
955     }
958 .userenrolment .col_role .addrole img,
959 .userenrolment .col_group .addgroup img {
960     vertical-align: baseline;
963 .userenrolment .hasAllRoles .col_role .addrole {
964     display: none;
967 .userenrolment .col_enrol .enrolment {
968     float: left;
969     padding: 0 3px 3px;
970     margin: 0 3px 3px;
973 .userenrolment .col_enrol .enrolment a {
974     float: right;
975     margin-left: 3px;
978 #page-enrol-users {
979     .enrol_user_buttons {
980         text-align: right;
982     }
984     #filterform {
985         @extend .card;
986         @extend .card-block;
987     }
990 #page-enrol-users .enrol-users-page-action input {
991     margin-left: 0;
994 .corelightbox {
995     background-color: #ccc;
996     position: absolute;
997     top: 0;
998     left: 0;
999     width: 100%;
1000     height: 100%;
1001     text-align: center;
1004 .corelightbox img {
1005     position: fixed;
1006     top: 50%;
1007     left: 50%;
1010 .mod-indent-outer {
1011     display: table;
1014 .mod-indent {
1015     display: table-cell;
1018 .label .mod-indent {
1019     float: left;
1020     padding-top: 20px;
1022 $mod-indent-size: 30px;
1023 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1025 @for $i from 1 through 16 {
1026     $width: ($i * $mod-indent-size);
1028     .mod-indent-#{$i} {
1029         width: $width;
1030     }
1033 .mod-indent-huge {
1034     width: (16 * $mod-indent-size);
1037 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1038 .resourcecontent .mediaplugin_mp3 object {
1039     height: 25px;
1040     width: 600px;
1043 .resourcecontent audio.mediaplugin_html5audio {
1044     width: 600px;
1046 /** Large resource images should avoid hidden overflow **/
1047 .resourceimage {
1048     max-width: 100%;
1050 /* Audio player size in 'inline' mode (can only change width, as above) */
1051 .mediaplugin_mp3 object {
1052     height: 15px;
1053     width: 300px;
1056 audio.mediaplugin_html5audio {
1057     width: 300px;
1059 /* TinyMCE moodle media preview frame should not have padding */
1060 .core_media_preview.pagelayout-embedded #content {
1061     padding: 0;
1064 .core_media_preview.pagelayout-embedded #maincontent {
1065     height: 0;
1068 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1069     padding: 0;
1070     margin: 0;
1071     min-width: 0;
1072     background: none;
1075 .path-rating .ratingtable {
1076     width: 100%;
1077     margin-bottom: 1em;
1080 .path-rating .ratingtable th.rating {
1081     width: 100%;
1084 .path-rating .ratingtable td.rating,
1085 .path-rating .ratingtable td.time {
1086     white-space: nowrap;
1087     text-align: center;
1090 .initialbar {
1092     overflow: auto;
1094     .initialbarlabel {
1095         display: inline-block;
1096         width: 6em;
1097         float: left;
1098         overflow: hidden;
1099         text-overflow: ellipsis;
1100         white-space: nowrap;
1101     }
1103     .initialbarall {
1104         float: left;
1105         width: 4em;
1106         margin-bottom: 2px;
1107         overflow: hidden;
1108         text-overflow: ellipsis;
1109         white-space: nowrap;
1110     }
1112     .initialbargroups {
1113         float: left;
1114     }
1116     .initialbargroup {
1117         float: left;
1118         display: inline-block;
1119         white-space: nowrap;
1120         margin: 0;
1121         padding: 0;
1123         li {
1124             float: left;
1125             list-style: none;
1126         }
1127     }
1129     .letter {
1130         display: inline-block;
1131         height: 1.5em;
1132         min-width: 1.5em;
1133         text-align: center;
1135         color: $pagination-color;
1136         border-width: $pagination-border-width;
1137         border-color: $pagination-border-color;
1138         border-style: solid;
1139         background-color: $pagination-bg;
1140     }
1141     .letter:hover {
1142         color: $pagination-hover-color;
1143         border-color: $pagination-hover-border;
1144         background-color: $pagination-hover-bg;
1145     }
1147     .letter.active {
1148         color: $pagination-active-color;
1149         border-color: $pagination-active-border;
1150         background-color: $pagination-active-bg;
1151     }
1155 @media (max-width: 400px) {
1156     .initialbar {
1157         .letter {
1158             /* This is chosen so that 23 letter at 320px just fits */
1159             font-size: 11.5px;
1160         }
1161     }
1165 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1166 .moodle-dialogue-base .moodle-dialogue-lightbox {
1167     background-color: $gray;
1170 .moodle-dialogue-base .hidden,
1171 .moodle-dialogue-base .moodle-dialogue-hidden {
1172     display: none;
1175 .no-scrolling {
1176     overflow: hidden;
1179 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1180     left: 0;
1181     top: 0;
1182     right: 0;
1183     bottom: -50px;
1184     position: fixed;
1187 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1188     overflow: auto;
1191 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1192     width: 28px;
1193     height: 16px;
1194     background-size: 100%;
1197 .moodle-dialogue-base .moodle-dialogue-wrap {
1198     background-color: #fff;
1199     border: 1px solid #ccc;
1202 // Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1203 // it for a reason (conflicts with jquery .show()).
1204 .modal.show {
1205     display: block;
1208 .moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content {
1209     @extend .modal-content;
1212 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1213     @extend .modal-header;
1216 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1217     // Undo some YUI damage.
1218     min-height: 3rem;
1219     color: initial;
1220     background: initial;
1221     font-size: 1.5rem;
1222     line-height: 1.5;
1225 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1226     @extend .modal-title;
1229 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1230     /*rtl:raw:
1231         left: 0;
1232         right: auto;
1233     */
1234     padding: $spacer;
1237 .moodle-dialogue-base .closebutton {
1238     @extend .close;
1239     box-shadow: none;
1240     &::after {
1241         content: "×";
1242     }
1245 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1246     @extend .modal-body;
1249 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1250     overflow: auto;
1251     position: absolute;
1252     top: 0;
1253     bottom: 50px;
1254     left: 0;
1255     right: 0;
1256     margin: 0;
1257     border: 0;
1260 .moodle-dialogue-exception .moodle-exception-param label {
1261     font-weight: bold;
1264 .moodle-dialogue-exception .param-stacktrace label {
1265     background-color: #eee;
1266     border: 1px solid #ccc;
1267     border-bottom-width: 0;
1270 .moodle-dialogue-exception .param-stacktrace pre {
1271     border: 1px solid #ccc;
1272     background-color: #fff;
1275 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1276     color: navy;
1277     font-size: $font-size-sm;
1280 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1281     @extend .text-warning;
1282     font-size: $font-size-sm;
1285 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1286     color: #333;
1287     font-size: 90%;
1288     border-bottom: 1px solid #eee;
1291 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1292     @extend .modal-footer;
1295 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1296     display: none;
1299 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1300     // Undo some YUI damage.
1301     background: initial;
1304 .moodle-dialogue-confirm .confirmation-message {
1305     margin: 0.5em 1em;
1307 .moodle-dialogue-confirm .confirmation-buttons {
1308     text-align: right;
1311 .moodle-dialogue-confirm .confirmation-dialogue input {
1312     min-width: 80px;
1315 .moodle-dialogue-exception .moodle-exception-message {
1316     margin: 1em;
1319 .moodle-dialogue-exception .moodle-exception-param {
1320     margin-bottom: 0.5em;
1323 .moodle-dialogue-exception .moodle-exception-param label {
1324     width: 150px;
1327 .moodle-dialogue-exception .param-stacktrace label {
1328     display: block;
1329     margin: 0;
1330     padding: 4px 1em;
1333 .moodle-dialogue-exception .param-stacktrace pre {
1334     display: block;
1335     height: 200px;
1336     overflow: auto;
1339 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1340     display: inline-block;
1341     margin: 4px 0;
1344 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1345     display: inline-block;
1346     width: 50px;
1347     margin: 4px 1em;
1350 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1351     padding-left: 25px;
1352     margin-bottom: 4px;
1353     padding-bottom: 4px;
1356 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1357     opacity: 0.75;
1358     width: 100%;
1359     height: 100%;
1360     top: 0;
1361     left: 0;
1362     background-color: white;
1363     text-align: center;
1364     padding: 10% 0;
1366 /* Apply a default max-height on tooltip text */
1367 .moodle-dialogue .tooltiptext {
1368     max-height: 300px;
1371 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1372     z-index: 3001;
1374     .moodle-dialogue-bd {
1375         overflow: auto;
1376     }
1379 /**
1380  * Chooser Dialogues (moodle-core-chooserdialogue)
1381  *
1382  * This CSS belong to the chooser dialogue which should work both with, and
1383  * without javascript enabled
1384  */
1385 /* Hide the dialog and it's title */
1386 .chooserdialoguebody,
1387 .choosertitle {
1388     display: none;
1391 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1392     margin: 0;
1395 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1396     padding: 0;
1397     background: #f2f2f2;
1399     @include border-bottom-radius(10px);
1401 /* Center the submit buttons within the area */
1402 .choosercontainer #chooseform .submitbuttons {
1403     padding: 0.7em 0;
1404     text-align: right;
1406 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1408 @media (max-height: 639px) {
1409     .ios.safari .choosercontainer #chooseform .submitbuttons {
1410         padding: 45px 0;
1411     }
1414 .choosercontainer #chooseform .submitbuttons input {
1415     min-width: 100px;
1416     margin: 0 0.5em;
1418 /* Various settings for the options area */
1419 .choosercontainer #chooseform .options {
1420     position: relative;
1421     border-bottom: 1px solid #bbb;
1423 /* Only set these options if we're showing the js container */
1424 .jschooser .choosercontainer #chooseform .alloptions {
1425     overflow-x: hidden;
1426     overflow-y: auto;
1427     max-width: 240px;
1429     .option {
1430         input[type=radio] {
1431             display: inline-block;
1432         }
1434         .typename {
1435             display: inline-block;
1436             width: 55%;
1437         }
1438     }
1440 /* Settings for option rows and option subtypes */
1441 .choosercontainer #chooseform .moduletypetitle,
1442 .choosercontainer #chooseform .option,
1443 .choosercontainer #chooseform .nonoption {
1444     margin-bottom: 0;
1445     padding: 0 1.6em 0 1.6em;
1448 .choosercontainer #chooseform .moduletypetitle {
1449     text-transform: uppercase;
1450     padding-top: 1.2em;
1451     padding-bottom: 0.4em;
1454 .choosercontainer #chooseform .option .typename,
1455 .choosercontainer #chooseform .nonoption .typename {
1456     padding: 0 0 0 0.5em;
1459 .choosercontainer #chooseform .modicon + .typename {
1460     padding-left: 0;
1463 .choosercontainer #chooseform .option input[type=radio],
1464 .choosercontainer #chooseform .option span.typename {
1465     vertical-align: middle;
1468 .choosercontainer #chooseform .option label {
1469     display: block;
1470     margin: 0;
1471     padding: ($spacer / 2) 0;
1472     border-bottom: 1px solid #fff;
1475 .choosercontainer #chooseform .option .icon {
1476     margin: 0;
1477     padding: 0 $spacer;
1480 .choosercontainer #chooseform .nonoption {
1481     padding-left: 2.7em;
1482     padding-top: 0.3em;
1483     padding-bottom: 0.1em;
1486 .choosercontainer #chooseform .subtype {
1487     margin-bottom: 0;
1488     padding: 0 1.6em 0 3.2em;
1491 .choosercontainer #chooseform .subtype .typename {
1492     margin: 0 0 0 0.2em;
1494 /* The instruction/help area */
1495 .jschooser .choosercontainer #chooseform .instruction,
1496 .jschooser .choosercontainer #chooseform .typesummary {
1497     display: none;
1498     position: absolute;
1499     top: 0;
1500     right: 0;
1501     bottom: 0;
1502     left: 240px;
1503     margin: 0;
1504     padding: 1.6em;
1505     background-color: #fff;
1506     overflow-x: hidden;
1507     overflow-y: auto;
1508     line-height: 2em;
1510 /* Selected option settings */
1511 .jschooser .choosercontainer #chooseform .instruction,
1512 .choosercontainer #chooseform .selected .typesummary {
1513     display: block;
1516 .choosercontainer #chooseform .selected {
1517     background-color: #fff;
1518     margin-top: -1px;
1519     padding-top: 1px;
1522 .chooserdialogue-course-modchooser .modicon .icon {
1523     width: 24px;
1524     height: 24px;
1525     font-size: 24px;
1528 @include media-breakpoint-down(xs) {
1529     .jsenabled .choosercontainer #chooseform .alloptions {
1530         max-width: 100%;
1531     }
1533     .jsenabled .choosercontainer #chooseform .instruction,
1534     .jsenabled .choosercontainer #chooseform .typesummary {
1535         position: static;
1536     }
1539 /* Form element: listing */
1540 .formlistingradio {
1541     padding-bottom: 25px;
1542     padding-right: 10px;
1545 .formlistinginputradio {
1546     float: left;
1549 .formlistingmain {
1550     min-height: 225px;
1553 .formlisting {
1554     position: relative;
1555     margin: 15px 0;
1556     padding: 1px 19px 14px;
1557     background-color: white;
1558     border: 1px solid #ddd;
1560     @include border-radius(4px);
1563 .formlistingmore {
1564     position: absolute;
1565     cursor: pointer;
1566     bottom: -1px;
1567     right: -1px;
1568     padding: 3px 7px;
1569     font-size: 12px;
1570     font-weight: bold;
1571     background-color: whitesmoke;
1572     border: 1px solid #ddd;
1573     color: #9da0a4;
1575     @include border-radius(4px 0 4px 0);
1578 .formlistingall {
1579     margin: 15px 0;
1580     padding: 0;
1582     @include border-radius(4px);
1585 .formlistingrow {
1586     cursor: pointer;
1587     border-bottom: 1px solid;
1588     border-color: #e1e1e8;
1589     border-left: 1px solid #e1e1e8;
1590     border-right: 1px solid #e1e1e8;
1591     background-color: #f7f7f9;
1593     @include border-radius(0 0 4px 4px);
1594     padding: 6px;
1595     top: 50%;
1596     left: 50%;
1597     min-height: 34px;
1598     float: left;
1599     width: 150px;
1602 body.jsenabled .formlistingradio {
1603     display: none;
1606 body.jsenabled .formlisting {
1607     display: block;
1610 /* Badges styles */
1611 table.collection {
1612     @extend .table;
1613     @extend .table-bordered;
1614     @extend .table-striped;
1617 a.criteria-action {
1618     padding: 0 3px;
1619     float: right;
1622 div.criteria-description {
1623     padding: 10px 15px;
1624     margin: 5px 0;
1625     background: none repeat scroll 0 0 #f9f9f9;
1626     border: 1px solid #eee;
1629 ul.badges {
1630     margin: 0;
1631     list-style: none;
1634 .badges li {
1635     position: relative;
1636     display: inline-block;
1637     padding-top: 1em;
1638     text-align: center;
1639     vertical-align: top;
1640     width: 150px;
1643 .badges li .badge-name {
1644     display: block;
1645     padding: 5px;
1648 .badges li > img {
1649     position: absolute;
1652 .badges li .badge-image {
1653     width: 100px;
1654     height: 100px;
1655     left: 10px;
1656     top: 0;
1657     z-index: 1;
1660 .badges li .badge-actions {
1661     position: relative;
1664 .badges li .expireimage {
1665     width: 100px;
1666     height: 100px;
1667     left: 25px;
1668     top: 0;
1669     position: absolute;
1670     z-index: 10;
1671     opacity: 0.85;
1674 #badge-image {
1675     background-color: transparent;
1676     padding: 0;
1677     position: relative;
1678     min-width: 100px;
1679     width: 20%;
1680     display: inline-block;
1681     vertical-align: top;
1682     margin-top: 17px;
1683     margin-bottom: 20px;
1685     .expireimage {
1686         width: 100px;
1687         height: 100px;
1688         left: 0;
1689         top: 0;
1690         opacity: 0.85;
1691         position: absolute;
1692         z-index: 10;
1693     }
1695     .singlebutton {
1696         padding-top: 5px;
1697         display: block;
1699         button {
1700             margin-left: 4px;
1701         }
1702     }
1705 #badge-details {
1706     display: inline-block;
1707     width: 79%;
1710 #badge-overview dl,
1711 #badge-details dl {
1712     margin: 0;
1714     dt,
1715     dd {
1716         vertical-align: top;
1717         padding: 3px 0;
1718     }
1720     dt {
1721         clear: both;
1722         display: inline-block;
1723         width: 20%;
1724         min-width: 100px;
1725     }
1727     dd {
1728         display: inline-block;
1729         width: 79%;
1730         margin-left: 1%;
1731     }
1734 .badge-profile {
1735     vertical-align: top;
1738 .connected {
1739     @extend .text-success;
1742 .notconnected {
1743     @extend .text-danger;
1746 .connecting {
1747     @extend .text-warning;
1750 #page-badges-award .recipienttable tr td {
1751     vertical-align: top;
1754 #page-badges-award .recipienttable tr td.actions .actionbutton {
1755     margin: 0.3em 0;
1756     padding: 0.5em 0;
1757     width: 100%;
1760 #page-badges-award .recipienttable tr td.existing,
1761 #page-badges-award .recipienttable tr td.potential {
1762     width: 42%;
1765 #issued-badge-table .activatebadge {
1766     display: inline-block;
1769 .statusbox.active {
1770     background-color: $state-success-bg;
1773 .statusbox.inactive {
1774     background-color: $state-warning-bg;
1777 .statusbox {
1778     text-align: center;
1779     margin-bottom: 5px;
1780     padding: 5px;
1783 .statusbox .activatebadge {
1784     display: inline-block;
1787 .statusbox .activatebadge input[type=submit] {
1788     margin: 3px;
1791 .activatebadge {
1792     margin: 0;
1793     text-align: left;
1794     vertical-align: middle;
1797 img#persona_signin {
1798     cursor: pointer;
1801 .addcourse {
1802     float: right;
1805 .invisiblefieldset {
1806     display: inline;
1807     padding: 0;
1808     border-width: 0;
1811 .breadcrumb-nav {
1812     float: left;
1815 .breadcrumb-button .singlebutton div {
1816     margin-right: 0;
1819 .breadcrumb-nav .breadcrumb {
1820     margin: 0;
1823 /** Page header */
1824 #page-header {
1825     .logo {
1826         margin: $spacer 0;
1827         img {
1828             max-height: 75px;
1829         }
1830     }
1833 /** Header. */
1834 header {
1835     .logo img {
1836         max-height: 35px;
1837     }
1838     .collapse.in,
1839     .collapsing {
1840         display: block;
1841         clear: both;
1842     }
1845 /** Header-bar styles **/
1846 .page-context-header {
1847     // We need to be explicit about the height of the header.
1848     $pageHeaderHeight: 140px;
1850     // Do not remove these rules.
1851     overflow: hidden;
1853     .page-header-image,
1854     .page-header-headings {
1855         float: left;
1856         display: block;
1857         position: relative;
1858     }
1860     .page-header-image {
1861         margin-right: 1em;
1862         margin-bottom: 1em;
1863     }
1865     .page-header-headings,
1866     .header-button-group {
1867         position: relative;
1868         line-height: 24px;
1869         vertical-align: middle;
1870     }
1872     .header-button-group {
1873         display: block;
1874         float: left;
1876         a {
1877             position: relative;
1879             // Don't touch it unless you know exactly what you are doing.
1880             top: -0.4em;
1881         }
1882     }
1885 ul.dragdrop-keyboard-drag li {
1886     list-style-type: none;
1889 a.disabled:hover,
1890 a.disabled {
1891     text-decoration: none;
1892     cursor: default;
1893     font-style: italic;
1894     color: #808080;
1897 body.lockscroll {
1898     height: 100%;
1899     overflow: hidden;
1902 .progressbar_container {
1903     max-width: 500px;
1904     margin: 0 auto;
1907 /* IE10 only fix for calendar titling */
1908 .ie10 .yui3-calendar-header-label {
1909     display: inline-block;
1912 dd:before,
1913 dd:after {
1914     display: block;
1915     content: " ";
1918 dd:after {
1919     clear: both;
1922 // Active tabs with links should have a different
1923 // cursor to indicate they are clickable.
1924 .nav-tabs > .active > a[href],
1925 .nav-tabs > .active > a[href]:hover,
1926 .nav-tabs > .active > a[href]:focus {
1927     cursor: pointer;
1930 .inplaceeditable {
1931     &.inplaceeditingon {
1932         position: relative;
1934         .editinstructions {
1935             margin-top: -30px;
1936             font-weight: normal;
1937             margin-right: 0;
1938             margin-left: 0;
1939             left: 0;
1940             right: auto;
1941             white-space: nowrap;
1942         }
1944         input {
1945             width: 330px;
1946             vertical-align: text-bottom;
1947             margin-bottom: 0;
1948         }
1950         select {
1951             margin-bottom: 0;
1952         }
1953     }
1955     .quickediticon img {
1956         opacity: 0.2;
1957     }
1959     .quickeditlink {
1960         color: inherit;
1961         text-decoration: inherit;
1962     }
1964     &:hover .quickeditlink .quickediticon img,
1965     .quickeditlink:focus .quickediticon img {
1966         opacity: 1;
1967     }
1969     &.inplaceeditable-toggle .quickediticon {
1970         display: none;
1971     }
1974 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
1975     margin-top: -20px;
1978 /** Chart area. */
1979 .chart-area {
1981     .chart-table-data {
1982         display: none;
1983     }
1985     .chart-table {
1986         .chart-output-htmltable caption {
1987             white-space: nowrap;
1988         }
1989         /** When accessible, we display the table only. */
1990         &.accesshide {
1991             .chart-table-expand {
1992                 display: none;
1993             }
1994             .chart-table-data {
1995                 display: block;
1996             }
1997         }
1998     }
2001 // Reset for ul.
2002 ul {
2003     padding-left: 1rem;
2006 /* YUI 2 Tree View */
2007 /*rtl:raw:
2008 .ygtvtn,
2009 .ygtvtm,
2010 .ygtvtmh,
2011 .ygtvtmhh,
2012 .ygtvtp,
2013 .ygtvtph,
2014 .ygtvtphh,
2015 .ygtvln,
2016 .ygtvlm,
2017 .ygtvlmh,
2018 .ygtvlmhh,
2019 .ygtvlp,
2020 .ygtvlph,
2021 .ygtvlphh,
2022 .ygtvdepthcell,
2023 .ygtvok,
2024 .ygtvok:hover,
2025 .ygtvcancel,
2026 .ygtvcancel:hover {
2027     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
2029 */
2031 .hover-tooltip-container {
2032     position: relative;
2034     .hover-tooltip {
2035         opacity: 0;
2036         visibility: hidden;
2037         position: absolute;
2038         /*rtl:ignore*/
2039         left: 50%;
2040         top: calc(-50% - 5px);
2041         transform: translate(-50%, -50%);
2042         background-color: #fff;
2043         border: 1px solid rgba(0, 0, 0, .2);
2044         border-radius: .3rem;
2045         box-sizing: border-box;
2046         padding: 5px;
2047         white-space: nowrap;
2048         transition: opacity 0.15s, visibility 0.15s;
2049         z-index: 1000;
2051         &:before {
2052             content: '';
2053             display: inline-block;
2054             border-left: 8px solid transparent;
2055             border-right: 8px solid transparent;
2056             border-top: 8px solid rgba(0, 0, 0, .2);
2057             position: absolute;
2058             bottom: -8px;
2059             left: calc(50% - 8px);
2060         }
2062         &:after {
2063             content: '';
2064             display: inline-block;
2065             border-left: 7px solid transparent;
2066             border-right: 7px solid transparent;
2067             border-top: 7px solid #fff;
2068             position: absolute;
2069             bottom: -6px;
2070             left: calc(50% - 7px);
2071             z-index: 2;
2072         }
2073     }
2075     &:hover {
2076         .hover-tooltip {
2077             opacity: 1;
2078             visibility: visible;
2079             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2080         }
2081     }
2084 #region-flat-nav {
2085     padding-right: 0;
2086     padding-left: 0;
2087     .nav {
2088         margin-right: $grid-gutter-width / 2;
2089         background-color: $card-bg;
2090     }
2091     @include media-breakpoint-down(sm) {
2092         .nav {
2093             margin-top: $grid-gutter-width;
2094             margin-right: 0;
2095         }
2096     }
2099 $footer-link-color: $brand-primary !default;
2100 #page-footer a {
2101     color: $footer-link-color;
2104 .sitelink {
2105     img {
2106         width: 112px;
2107     }
2110 // Make links in a menu clickable anywhere in the row.
2111 .dropdown-item a {
2112     display: block;
2113     width: 100%;
2114     color: $body-color;
2117 .competency-tree {
2118     ul {
2119         padding-left: 1.5rem;
2120     }
2123 .sr-only-focusable {
2124     &:active,
2125     &:focus {
2126         z-index: $zindex-navbar-fixed + 1;
2127         position: fixed;
2128         background: #fff;
2129         padding: 7px;
2130         left: 0;
2131         top: 0;
2132     }