MDL-55074 theme_boost: Navigation and blocks
[moodle.git] / theme / boost / scss / moodle / core.scss
1 /* core.less */
4 .context-header-settings-menu,
5 .region-main-settings-menu {
6     float: right;
7     width: 4em;
8     height: 2em;
9     display: block;
10 }
12 .context-header-settings-menu .dropdown-toggle > .icon,
13 .region-main-settings-menu .dropdown-toggle > .icon {
14     height: 24px;
15     width: auto;
16 }
18 /** Page layout CSS starts **/
19 .layout-option-noheader #page-header,
20 .layout-option-nonavbar #page-navbar,
21 .layout-option-nofooter #page-footer,
22 .layout-option-nocourseheader .course-content-header,
23 .layout-option-nocoursefooter .course-content-footer {
24     display: none;
25 }
27 /** Page layout CSS ends **/
29 .mdl-left {
30     text-align: left;
31 }
33 .mdl-right {
34     text-align: right;
35 }
37 /*rtl:ignore*/
38 .text-ltr {
39     direction: ltr !important; /* stylelint-disable-line declaration-no-important */
40 }
42 #add,
43 #remove,
44 .centerpara,
45 .mdl-align {
46     text-align: center;
47 }
49 a.dimmed,
50 a.dimmed:link,
51 a.dimmed:visited,
52 a.dimmed_text,
53 a.dimmed_text:link,
54 a.dimmed_text:visited,
55 .dimmed_text,
56 .dimmed_text a,
57 .dimmed_text a:link,
58 .dimmed_text a:visited,
59 .usersuspended,
60 .usersuspended a,
61 .usersuspended a:link,
62 .usersuspended a:visited,
63 .dimmed_category,
64 .dimmed_category a {
65     @extend .text-muted;
66 }
68 .activity.label .dimmed_text {
69     opacity: 0.5;
70 }
72 .unlist,
73 .unlist li,
74 .inline-list,
75 .inline-list li,
76 .block .list,
77 .block .list li,
78 .section li.activity,
79 .section li.movehere,
80 .tabtree li {
81     list-style: none;
82     margin: 0;
83     padding: 0;
84 }
86 .inline,
87 .inline-list li {
88     display: inline;
89 }
91 .notifytiny {
92     font-size: $font-size-xs;
93 }
95 .notifytiny li,
96 .notifytiny td {
97     font-size: 100%;
98 }
100 .red,
101 .notifyproblem {
102     @extend .text-warning;
105 .green,
106 .notifysuccess {
107     @extend .text-success;
110 .highlight {
111     @extend .text-info;
114 .reportlink {
115     text-align: right;
118 a.autolink.glossary:hover {
119     cursor: help;
121 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
122 .collapsibleregioncaption {
123     white-space: nowrap;
126 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
127     cursor: pointer;
130 .collapsibleregioncaption img {
131     vertical-align: middle;
134 .jsenabled .hiddenifjs {
135     display: none;
138 .visibleifjs {
139     display: none;
142 .jsenabled .visibleifjs {
143     display: inline;
146 .jsenabled .collapsibleregion {
147     overflow: hidden;
150 .jsenabled .collapsed .collapsibleregioninner {
151     visibility: hidden;
154 .collapsible-actions {
155     display: none;
156     text-align: right;
159 .jsenabled .collapsible-actions {
160     display: block;
163 .collapsible-actions .collapseexpand {
164     padding-left: 20px;
165     background: url([[pix:t/collapsed]]) 2px center no-repeat;
167 /*rtl:raw:
168 .collapsible-actions .collapseexpand {
169     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
171 */
172 .collapsible-actions .collapse-all {
173     background-image: url([[pix:t/expanded]]);
176 .yui-overlay .yui-widget-bd {
177     background-color: #ffee69;
178     border: 1px solid #a6982b;
179     border-top-color: #d4c237;
180     color: #000;
181     left: 0;
182     padding: 2px 5px;
183     position: relative;
184     top: 0;
185     z-index: 1;
188 .clearer {
189     background: transparent;
190     border-width: 0;
191     clear: both;
192     display: block;
193     height: 1px;
194     margin: 0;
195     padding: 0;
198 .bold,
199 .warning,
200 .errorbox .title,
201 .pagingbar .title,
202 .pagingbar .thispage {
203     font-weight: bold;
206 img.userpicture {
207     margin-right: 0.5rem;
210 img.resize {
211     height: 1em;
212     width: 1em;
215 .action-menu .dropdown-toggle {
216     text-decoration: none;
219 .action-menu {
220     white-space: nowrap;
223 .action-menu .userpicture {
224     width: auto;
225     height: auto;
226     margin-left: 1rem;
229 .block img.resize,
230 .breadcrumb img.resize {
231     height: 0.9em;
232     width: 0.8em;
234 /* Icon styles */
235 img.activityicon {
236     height: 24px;
237     width: 24px;
238     vertical-align: middle;
241 .headermain {
242     font-weight: bold;
245 #maincontent {
246     display: block;
247     height: 1px;
248     overflow: hidden;
251 img.uihint {
252     cursor: help;
255 #addmembersform table {
256     margin-left: auto;
257     margin-right: auto;
260 table.flexible .emptyrow {
261     display: none;
264 form.popupform,
265 form.popupform div {
266     display: inline;
269 .arrow_button input {
270     overflow: hidden;
272 /** The 1-pixel padding is there to avoid phantom scroll bars on OS X (FF, Safari and Chrome)**/
273 .no-overflow {
274     overflow: auto;
275     padding-bottom: 1px;
278 .pagelayout-report .no-overflow {
279     overflow: visible;
282 .no-overflow > .generaltable {
283     margin-bottom: 0;
285 // Accessibility features
287 // Accessibility: text 'seen' by screen readers but not visual users.
288 .accesshide {
289     position: absolute;
290     left: -10000px;
291     font-weight: normal;
292     font-size: 1em;
295 span.hide,
296 div.hide {
297     display: none;
299 // Accessibility: Skip block link, for keyboard-only users.
300 a.skip-block,
301 a.skip {
302     position: absolute;
303     top: -1000em;
304     font-size: 0.85em;
305     text-decoration: none;
308 a.skip-block:focus,
309 a.skip-block:active,
310 a.skip:focus,
311 a.skip:active {
312     position: static;
313     display: block;
316 .skip-block-to {
317     display: block;
318     height: 1px;
319     overflow: hidden;
321 // Blogs
322 .addbloglink {
323     text-align: center;
326 .blog_entry .audience {
327     text-align: right;
328     padding-right: 4px;
331 .blog_entry .tags {
332     margin-top: 15px;
335 .blog_entry .content {
336     margin-left: 43px;
338 // Group
339 #page-group-index #groupeditform {
340     text-align: center;
343 #doc-contents h1 {
344     margin: 1em 0 0 0;
347 #doc-contents ul {
348     margin: 0;
349     padding: 0;
350     width: 90%;
353 #doc-contents ul li {
354     list-style-type: none;
357 .groupmanagementtable td {
358     vertical-align: top;
361 .groupmanagementtable #existingcell,
362 .groupmanagementtable #potentialcell {
363     width: 42%;
366 .groupmanagementtable #buttonscell {
367     width: 16%;
370 .groupmanagementtable #buttonscell p.arrow_button input {
371     width: auto;
372     min-width: 80%;
373     margin: 0 auto;
376 .groupmanagementtable #removeselect_wrapper,
377 .groupmanagementtable #addselect_wrapper {
378     width: 100%;
381 .groupmanagementtable #removeselect_wrapper label,
382 .groupmanagementtable #addselect_wrapper label {
383     font-weight: normal;
386 #group-usersummary {
387     width: 14em;
390 .groupselector {
391     margin-top: 3px;
392     margin-bottom: 3px;
393     display: inline-block;
396 .groupselector label {
397     display: inline-block;
400 // Login
401 .login-page {
402     [name="username"] {
403         margin-bottom: -1px;
404         border-bottom-right-radius: 0;
405         border-bottom-left-radius: 0;
406     }
408     [type="password"] {
409         margin-bottom: 10px;
410         border-top-left-radius: 0;
411         border-top-right-radius: 0;
412     }
415 // Notes
416 .notepost {
417     margin-bottom: 1em;
420 .notepost .userpicture {
421     float: left;
422     margin-right: 5px;
425 .notepost .content,
426 .notepost .footer {
427     clear: both;
430 .notesgroup {
431     margin-left: 20px;
434 // My Moodle
435 .path-my .coursebox {
436     margin: $spacer-y 0;
437     padding: 0;
439     .overview {
440         margin: 15px 30px 10px 30px;
441     }
444 .path-my .coursebox .info {
445     float: none;
446     margin: 0;
449 // Modules
450 .mod_introbox {
451     padding: 10px;
454 table.mod_index {
455     width: 100%;
458 // Comments
459 .comment-ctrl {
460     font-size: 12px;
461     display: none;
462     margin: 0;
463     padding: 0;
466 .comment-ctrl h5 {
467     margin: 0;
468     padding: 5px;
471 .comment-area {
472     max-width: 400px;
473     padding: 5px;
476 .comment-area textarea {
477     width: 100%;
478     overflow: auto;
480     &.fullwidth {
481         -webkit-box-sizing: border-box;
482         -moz-box-sizing: border-box;
483         box-sizing: border-box;
484     }
487 .comment-area .fd {
488     text-align: right;
491 .comment-meta span {
492     color: gray;
495 .comment-link img {
496     vertical-align: text-bottom;
499 .comment-list {
500     font-size: 11px;
501     overflow: auto;
502     list-style: none;
503     padding: 0;
504     margin: 0;
507 .comment-list li {
508     margin: 2px;
509     list-style: none;
510     margin-bottom: 5px;
511     clear: both;
512     padding: .3em;
513     position: relative;
516 .comment-list li.first {
517     display: none;
520 .comment-paging {
521     text-align: center;
524 .comment-paging .pageno {
525     padding: 2px;
528 .comment-paging .curpage {
529     border: 1px solid #ccc;
532 .comment-message .picture {
533     width: 20px;
534     float: left;
537 .comment-message .text {
538     margin: 0;
539     padding: 0;
542 .comment-message .text p {
543     padding: 0;
544     margin: 0 18px 0 0;
547 .comment-delete {
548     position: absolute;
549     top: 0;
550     right: 0;
551     margin: .3em;
554 .comment-report-selectall {
555     display: none;
558 .comment-link {
559     display: none;
562 .jsenabled .comment-link {
563     display: block;
566 .jsenabled .showcommentsnonjs {
567     display: none;
570 .jsenabled .comment-report-selectall {
571     display: inline;
573 /**
574 * Completion progress report
575 */
576 .completion-expired {
577     @extend .text-warning;
580 .completion-expected {
581     font-size: $font-size-xs;
584 .completion-sortchoice,
585 .completion-identifyfield {
586     font-size: $font-size-xs;
587     vertical-align: bottom;
590 .completion-progresscell {
591     text-align: right;
594 .completion-expired .completion-expected {
595     font-weight: bold;
597 /**
598 * Tags
599 */
600 img.user-image {
601     height: 100px;
602     width: 100px;
605 #tag-search-box {
606     text-align: center;
607     margin: 10px auto;
610 .path-tag .tag-index-items .tagarea {
611     border: 1px solid #e3e3e3;
612     border-radius: 4px;
613     padding: 10px;
614     margin-top: 10px;
617 .path-tag .tag-index-items .tagarea h3 {
618     display: block;
619     padding: 3px 0 10px 0;
620     margin: 0;
621     font-size: 1.1em;
622     font-weight: bold;
623     line-height: 20px;
624     color: #999;
625     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
626     text-transform: uppercase;
627     word-wrap: break-word;
628     border-bottom: solid 1px #e3e3e3;
629     margin-bottom: 10px;
632 .path-tag .tagarea .controls,
633 .path-tag .tagarea .taggeditems {
634     @include clearfix();
637 .path-tag .tagarea .controls,
638 .path-tag .tag-backtoallitems {
639     text-align: center;
642 .path-tag .tagarea .controls .gotopage.nextpage {
643     float: right;
646 .path-tag .tagarea .controls .gotopage.prevpage {
647     float: left;
650 .path-tag .tagarea .controls .exclusivemode {
651     display: inline-block;
654 .path-tag .tagarea .controls.controls-bottom {
655     margin-top: 5px;
658 .path-tag .tagarea .controls .gotopage.nextpage::after {
659     padding-right: 5px;
660     padding-left: 5px;
661     content: "»";
664 .path-tag .tagarea .controls .gotopage.prevpage::before {
665     padding-right: 5px;
666     padding-left: 5px;
667     content: "«";
670 span.flagged-tag,
671 tr.flagged-tag,
672 span.flagged-tag a,
673 tr.flagged-tag a {
674     @extend .text-warning;
677 .tag-management-table td,
678 .tag-management-table th {
679     vertical-align: middle;
680     padding: 4px;
683 .tag-management-table .inplaceeditable.inplaceeditingon input {
684     width: 150px;
687 .path-admin-tag .addstandardtags {
688     float: right;
690     img {
691         margin: 0 5px;
692     }
695 .path-tag .tag-relatedtags {
696     padding-top: 10px;
699 .path-tag .tag-management-box {
700     text-align: right;
703 .path-tag .tag-index-toc {
704     padding: 10px;
705     text-align: center;
708 .path-tag .tag-index-toc li,
709 .path-tag .tag-management-box li {
710     margin-left: 5px;
711     margin-right: 5px;
714 .path-tag .tag-management-box li a.edittag {
715     background-image: url([[pix:moodle|i/settings]]);
718 .path-tag .tag-management-box li a.flagasinappropriate {
719     background-image: url([[pix:moodle|i/flagged]]);
722 .path-tag .tag-management-box li a.removefrommyinterests {
723     background-image: url([[pix:moodle|t/delete]]);
726 .path-tag .tag-management-box li a.addtomyinterests {
727     background-image: url([[pix:moodle|t/add]]);
730 .path-tag .tag-management-box li a {
731     background-repeat: no-repeat;
732     background-position: left;
733     padding-left: 17px;
736 .tag_feed.media-list .media .itemimage {
737     float: left;
740 .tag_feed.media-list .media .itemimage img {
741     height: 35px;
742     width: 35px;
745 .tag_feed.media-list .media .media-body {
746     padding-right: 10px;
747     padding-left: 10px;
750 .tag_feed .media .muted a {
751     @extend .text-muted;
754 .tag_cloud {
755     text-align: center;
758 .tag_cloud .inline-list li {
759     padding: 0 0.2em;
762 .tag_cloud .tag_overflow {
763     margin-top: 1em;
764     font-style: italic;
767 .tag_cloud .s20 {
768     font-size: 2.7em;
771 .tag_cloud .s19 {
772     font-size: 2.6em;
775 .tag_cloud .s18 {
776     font-size: 2.5em;
779 .tag_cloud .s17 {
780     font-size: 2.4em;
783 .tag_cloud .s16 {
784     font-size: 2.3em;
787 .tag_cloud .s15 {
788     font-size: 2.2em;
791 .tag_cloud .s14 {
792     font-size: 2.1em;
795 .tag_cloud .s13 {
796     font-size: 2em;
799 .tag_cloud .s12 {
800     font-size: 1.9em;
803 .tag_cloud .s11 {
804     font-size: 1.8em;
807 .tag_cloud .s10 {
808     font-size: 1.7em;
811 .tag_cloud .s9 {
812     font-size: 1.6em;
815 .tag_cloud .s8 {
816     font-size: 1.5em;
819 .tag_cloud .s7 {
820     font-size: 1.4em;
823 .tag_cloud .s6 {
824     font-size: 1.3em;
827 .tag_cloud .s5 {
828     font-size: 1.2em;
831 .tag_cloud .s4 {
832     font-size: 1.1em;
835 .tag_cloud .s3 {
836     font-size: 1em;
839 .tag_cloud .s2 {
840     font-size: 0.9em;
843 .tag_cloud .s1 {
844     font-size: 0.8em;
847 .tag_cloud .s0 {
848     font-size: 0.7em;
851 .tag_list ul {
852     display: inline;
855 .tag_list.hideoverlimit .overlimit {
856     display: none;
859 .tag_list .tagmorelink {
860     display: none;
863 .tag_list.hideoverlimit .tagmorelink {
864     display: inline;
867 .tag_list.hideoverlimit .taglesslink {
868     display: none;
871 /**
872 * Web Service
873 */
874 #webservice-doc-generator td {
875     text-align: left;
876     border: 0 solid black;
878 /**
879 * Smart Select Element
880 */
881 .smartselect {
882     position: absolute;
885 .smartselect .smartselect_mask {
886     background-color: #fff;
889 .smartselect ul {
890     padding: 0;
891     margin: 0;
894 .smartselect ul li {
895     list-style: none;
898 .smartselect .smartselect_menu {
899     margin-right: 5px;
902 .safari .smartselect .smartselect_menu {
903     margin-left: 2px;
906 .smartselect .smartselect_menu,
907 .smartselect .smartselect_submenu {
908     border: 1px solid #000;
909     background-color: #fff;
910     display: none;
913 .smartselect .smartselect_menu.visible,
914 .smartselect .smartselect_submenu.visible {
915     display: block;
918 .smartselect .smartselect_menu_content ul li {
919     position: relative;
920     padding: 2px 5px;
923 .smartselect .smartselect_menu_content ul li a {
924     color: #333;
925     text-decoration: none;
928 .smartselect .smartselect_menu_content ul li a.selectable {
929     color: inherit;
932 .smartselect .smartselect_submenuitem {
933     background-image: url([[pix:moodle|t/collapsed]]);
934     background-repeat: no-repeat;
935     background-position: 100%;
937 /** Spanning mode */
938 .smartselect.spanningmenu .smartselect_submenu {
939     position: absolute;
940     top: -1px;
941     left: 100%;
944 .smartselect.spanningmenu .smartselect_submenu a {
945     white-space: nowrap;
946     padding-right: 16px;
949 .smartselect.spanningmenu .smartselect_menu_content ul li a.selectable:hover {
950     text-decoration: underline;
952 /** Compact mode */
953 .smartselect.compactmenu .smartselect_submenu {
954     position: relative;
955     margin: 2px -3px;
956     margin-left: 10px;
957     display: none;
958     border-width: 0;
959     z-index: 1010;
962 .smartselect.compactmenu .smartselect_submenu.visible {
963     display: block;
966 .smartselect.compactmenu .smartselect_menu {
967     z-index: 1000;
968     overflow: hidden;
971 .smartselect.compactmenu .smartselect_submenu .smartselect_submenu {
972     z-index: 1020;
975 .smartselect.compactmenu .smartselect_submenuitem:hover > .smartselect_menuitem_label {
976     font-weight: bold;
978 /**
979 * Registration
980 */
981 #page-admin-registration-register .registration_textfield {
982     width: 300px;
984 /**
985 * Enrol
986 */
987 .userenrolment {
988     width: 100%;
989     border-collapse: collapse;
992 .userenrolment tr {
993     vertical-align: top;
996 .userenrolment td {
997     padding: 0;
998     height: 41px;
1001 .userenrolment .subfield {
1002     margin-right: 5px;
1005 .userenrolment .col_userdetails .subfield {
1006     margin-left: 40px;
1009 .userenrolment .col_userdetails .subfield_picture {
1010     float: left;
1011     margin-left: 0;
1014 .userenrolment .col_lastseen {
1015     width: 150px;
1018 .userenrolment .col_role {
1019     width: 262px;
1022 .userenrolment .col_role .roles,
1023 .userenrolment .col_group .groups {
1024     margin-right: 30px;
1027 .userenrolment .col_role .role,
1028 .userenrolment .col_group .group {
1029     float: left;
1030     padding: 3px;
1031     margin: 3px;
1032     white-space: nowrap;
1035 .userenrolment .col_role .role a,
1036 .userenrolment .col_group .group a {
1037     margin-left: 3px;
1038     cursor: pointer;
1041 .userenrolment .col_role .addrole,
1042 .userenrolment .col_group .addgroup {
1043     float: right;
1044     padding: 3px;
1045     margin: 3px;
1047     > a:hover {
1048         border-bottom: 1px solid #666;
1049     }
1052 .userenrolment .col_role .addrole img,
1053 .userenrolment .col_group .addgroup img {
1054     vertical-align: baseline;
1057 .userenrolment .hasAllRoles .col_role .addrole {
1058     display: none;
1061 .userenrolment .col_enrol .enrolment {
1062     float: left;
1063     padding: 3px;
1064     margin: 3px;
1067 .userenrolment .col_enrol .enrolment a {
1068     float: right;
1069     margin-left: 3px;
1072 #page-enrol-users {
1073     .enrol_user_buttons {
1074         float: right;
1076         .enrolusersbutton {
1077             display: inline;
1079             div,
1080             form {
1081                 display: inline;
1082                 margin-right: 0;
1083             }
1084         }
1085     }
1087     #filterform {
1088         @extend .card;
1089         display: inline-block;
1091         .fitem {
1092             display: inline-block;
1093             line-height: $line-height-base * 2;
1094             margin-right: .3em;
1095             white-space: nowrap;
1097             label {
1098                 display: inline;
1099                 line-height: $line-height-base;
1100                 padding-right: .3em;
1101             }
1103             :before,
1104             :after {
1105                 display: inline;
1106             }
1107         }
1109         div,
1110         fieldset {
1111             display: inline-block;
1112             clear: none;
1113             width: auto;
1114             margin: 0;
1115         }
1117         select,
1118         .ftext input {
1119             width: 7em;
1120         }
1122         input,
1123         select {
1124             margin-bottom: 0;
1125         }
1126     }
1128     .user-enroller-panel .uep-search-results .user .details {
1129         width: 237px;
1130     }
1132     .user-enroller-panel .uep-search-results .cohort .details {
1133         width: 237px;
1134     }
1137 #page-enrol-users .enrol-users-page-action input {
1138     margin-left: 0;
1141 .corelightbox {
1142     background-color: #ccc;
1143     position: absolute;
1144     top: 0;
1145     left: 0;
1146     width: 100%;
1147     height: 100%;
1148     text-align: center;
1151 .corelightbox img {
1152     position: fixed;
1153     top: 50%;
1154     left: 50%;
1157 .mod-indent-outer {
1158     display: table;
1161 .mod-indent {
1162     display: table-cell;
1165 .label .mod-indent {
1166     float: left;
1167     padding-top: 20px;
1169 $mod-indent-size: 30px;
1170 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1172 @for $i from 1 through 16 {
1173     $width: ($i * $mod-indent-size);
1175     .mod-indent-#{$i} {
1176         width: $width;
1177     }
1180 .mod-indent-huge {
1181     width: (16 * $mod-indent-size);
1184 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1185 .resourcecontent .mediaplugin_mp3 object {
1186     height: 25px;
1187     width: 600px;
1190 .resourcecontent audio.mediaplugin_html5audio {
1191     width: 600px;
1193 /** Large resource images should avoid hidden overflow **/
1194 .resourceimage {
1195     max-width: 100%;
1197 /* Audio player size in 'inline' mode (can only change width, as above) */
1198 .mediaplugin_mp3 object {
1199     height: 15px;
1200     width: 300px;
1203 audio.mediaplugin_html5audio {
1204     width: 300px;
1206 /* TinyMCE moodle media preview frame should not have padding */
1207 .core_media_preview.pagelayout-embedded #content {
1208     padding: 0;
1211 .core_media_preview.pagelayout-embedded #maincontent {
1212     height: 0;
1215 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1216     padding: 0;
1217     margin: 0;
1218     min-width: 0;
1219     background: none;
1222 .path-rating .ratingtable {
1223     width: 100%;
1224     margin-bottom: 1em;
1227 .path-rating .ratingtable th.rating {
1228     width: 100%;
1231 .path-rating .ratingtable td.rating,
1232 .path-rating .ratingtable td.time {
1233     white-space: nowrap;
1234     text-align: center;
1237 .initialbar {
1238     a,
1239     strong {
1240         padding-left: 3px;
1241         padding-right: 3px;
1242     }
1245 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1246 .moodle-dialogue-base .moodle-dialogue-lightbox {
1247     background-color: $gray;
1250 .moodle-dialogue-base .hidden,
1251 .moodle-dialogue-base .moodle-dialogue-hidden {
1252     display: none;
1255 .no-scrolling {
1256     overflow: hidden;
1259 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1260     left: 0;
1261     top: 0;
1262     right: 0;
1263     bottom: -50px;
1264     position: fixed;
1267 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1268     overflow: auto;
1271 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1272     width: 28px;
1273     height: 16px;
1274     background-size: 100%;
1277 .moodle-dialogue-base .moodle-dialogue-wrap {
1278     background-color: #fff;
1279     border: 1px solid #ccc;
1282 .moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content {
1283     @extend .modal-content;
1286 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1287     @extend .modal-header;
1290 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1291     // Undo some YUI damage.
1292     min-height: 3rem;
1293     color: initial;
1294     background: initial;
1295     font-size: 1.5rem;
1296     line-height: 1.5;
1299 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1300     @extend .modal-title;
1303 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1304     padding: $spacer;
1307 .moodle-dialogue-base .closebutton {
1308     @extend .close;
1309     box-shadow: none;
1310     &::after {
1311         content: "×";
1312     }
1315 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1316     @extend .modal-body;
1319 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1320     overflow: auto;
1321     position: absolute;
1322     top: 0;
1323     bottom: 50px;
1324     left: 0;
1325     right: 0;
1326     margin: 0;
1327     border: 0;
1330 .moodle-dialogue-confirm .confirmation-dialogue {
1331     text-align: center;
1334 .moodle-dialogue-confirm .confirmation-dialogue input {
1335     text-align: center;
1338 .moodle-dialogue-exception .moodle-exception-message {
1339     text-align: center;
1342 .moodle-dialogue-exception .moodle-exception-param label {
1343     font-weight: bold;
1346 .moodle-dialogue-exception .param-stacktrace label {
1347     background-color: #eee;
1348     border: 1px solid #ccc;
1349     border-bottom-width: 0;
1352 .moodle-dialogue-exception .param-stacktrace pre {
1353     border: 1px solid #ccc;
1354     background-color: #fff;
1357 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1358     color: navy;
1359     font-size: $font-size-sm;
1362 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1363     @extend .text-warning;
1364     font-size: $font-size-sm;
1367 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1368     color: #333;
1369     font-size: 90%;
1370     border-bottom: 1px solid #eee;
1373 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1374     @extend .modal-footer;
1377 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1378     display: none;
1381 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1382     // Undo some YUI damage.
1383     background: initial;
1386 .moodle-dialogue-confirm .confirmation-message {
1387     margin: 0.5em 1em;
1390 .moodle-dialogue-confirm .confirmation-dialogue input {
1391     min-width: 80px;
1394 .moodle-dialogue-exception .moodle-exception-message {
1395     margin: 1em;
1398 .moodle-dialogue-exception .moodle-exception-param {
1399     margin-bottom: 0.5em;
1402 .moodle-dialogue-exception .moodle-exception-param label {
1403     width: 150px;
1406 .moodle-dialogue-exception .param-stacktrace label {
1407     display: block;
1408     margin: 0;
1409     padding: 4px 1em;
1412 .moodle-dialogue-exception .param-stacktrace pre {
1413     display: block;
1414     height: 200px;
1415     overflow: auto;
1418 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1419     display: inline-block;
1420     margin: 4px 0;
1423 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1424     display: inline-block;
1425     width: 50px;
1426     margin: 4px 1em;
1429 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1430     padding-left: 25px;
1431     margin-bottom: 4px;
1432     padding-bottom: 4px;
1435 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1436     opacity: 0.75;
1437     width: 100%;
1438     height: 100%;
1439     top: 0;
1440     left: 0;
1441     background-color: white;
1442     text-align: center;
1443     padding: 10% 0;
1445 /* Apply a default max-height on tooltip text */
1446 .moodle-dialogue .tooltiptext {
1447     max-height: 300px;
1450 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1451     z-index: 3001;
1453     .moodle-dialogue-bd {
1454         overflow: auto;
1455     }
1458 /**
1459  * Chooser Dialogues (moodle-core-chooserdialogue)
1460  *
1461  * This CSS belong to the chooser dialogue which should work both with, and
1462  * without javascript enabled
1463  */
1464 /* Hide the dialog and it's title */
1465 .chooserdialoguebody,
1466 .choosertitle {
1467     display: none;
1470 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1471     margin: 0;
1474 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1475     padding: 0;
1476     background: #f2f2f2;
1478     @include border-bottom-radius(10px);
1480 /* Center the submit buttons within the area */
1481 .choosercontainer #chooseform .submitbuttons {
1482     padding: 0.7em 0;
1483     text-align: center;
1485 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1487 @media (max-height: 639px) {
1488     .ios.safari .choosercontainer #chooseform .submitbuttons {
1489         padding: 45px 0;
1490     }
1493 .choosercontainer #chooseform .submitbuttons input {
1494     min-width: 100px;
1495     margin: 0 0.5em;
1497 /* Various settings for the options area */
1498 .choosercontainer #chooseform .options {
1499     position: relative;
1500     border-bottom: 1px solid #bbb;
1502 /* Only set these options if we're showing the js container */
1503 .jschooser .choosercontainer #chooseform .alloptions {
1504     overflow-x: hidden;
1505     overflow-y: auto;
1506     max-width: 240px;
1508     .option {
1509         input[type=radio] {
1510             display: inline-block;
1511         }
1513         .typename {
1514             display: inline-block;
1515             width: 55%;
1516         }
1517     }
1519 /* Settings for option rows and option subtypes */
1520 .choosercontainer #chooseform .moduletypetitle,
1521 .choosercontainer #chooseform .option,
1522 .choosercontainer #chooseform .nonoption {
1523     margin-bottom: 0;
1524     padding: 0 1.6em 0 1.6em;
1527 .choosercontainer #chooseform .moduletypetitle {
1528     text-transform: uppercase;
1529     padding-top: 1.2em;
1530     padding-bottom: 0.4em;
1533 .choosercontainer #chooseform .option .typename,
1534 .choosercontainer #chooseform .nonoption .typename {
1535     padding: 0 0 0 0.5em;
1538 .choosercontainer #chooseform .modicon + .typename {
1539     padding-left: 0;
1542 .choosercontainer #chooseform .option input[type=radio],
1543 .choosercontainer #chooseform .option span.typename {
1544     vertical-align: middle;
1547 .choosercontainer #chooseform .option label {
1548     display: block;
1549     margin: 0;
1550     padding: ($spacer / 2) 0;
1551     border-bottom: 1px solid #fff;
1554 .choosercontainer #chooseform .option .icon {
1555     margin: 0;
1556     padding: 0 $spacer;
1559 .choosercontainer #chooseform .nonoption {
1560     padding-left: 2.7em;
1561     padding-top: 0.3em;
1562     padding-bottom: 0.1em;
1565 .choosercontainer #chooseform .subtype {
1566     margin-bottom: 0;
1567     padding: 0 1.6em 0 3.2em;
1570 .choosercontainer #chooseform .subtype .typename {
1571     margin: 0 0 0 0.2em;
1573 /* The instruction/help area */
1574 .jschooser .choosercontainer #chooseform .instruction,
1575 .jschooser .choosercontainer #chooseform .typesummary {
1576     display: none;
1577     position: absolute;
1578     top: 0;
1579     right: 0;
1580     bottom: 0;
1581     left: 240px;
1582     margin: 0;
1583     padding: 1.6em;
1584     background-color: #fff;
1585     overflow-x: hidden;
1586     overflow-y: auto;
1587     line-height: 2em;
1589 /* Selected option settings */
1590 .jschooser .choosercontainer #chooseform .instruction,
1591 .choosercontainer #chooseform .selected .typesummary {
1592     display: block;
1595 .choosercontainer #chooseform .selected {
1596     background-color: #fff;
1597     margin-top: -1px;
1598     padding-top: 1px;
1601 .chooserdialogue-course-modchooser .modicon .icon {
1602     width: 24px;
1603     height: 24px;
1606 @include media-breakpoint-down(xs) {
1607     .jsenabled .choosercontainer #chooseform .alloptions {
1608         max-width: 100%;
1609     }
1611     .jsenabled .choosercontainer #chooseform .instruction,
1612     .jsenabled .choosercontainer #chooseform .typesummary {
1613         position: static;
1614     }
1617 /* Form element: listing */
1618 .formlistingradio {
1619     padding-bottom: 25px;
1620     padding-right: 10px;
1623 .formlistinginputradio {
1624     float: left;
1627 .formlistingmain {
1628     min-height: 225px;
1631 .formlisting {
1632     position: relative;
1633     margin: 15px 0;
1634     padding: 1px 19px 14px;
1635     background-color: white;
1636     border: 1px solid #ddd;
1638     @include border-radius(4px);
1641 .formlistingmore {
1642     position: absolute;
1643     cursor: pointer;
1644     bottom: -1px;
1645     right: -1px;
1646     padding: 3px 7px;
1647     font-size: 12px;
1648     font-weight: bold;
1649     background-color: whitesmoke;
1650     border: 1px solid #ddd;
1651     color: #9da0a4;
1653     @include border-radius(4px 0 4px 0);
1656 .formlistingall {
1657     margin: 15px 0;
1658     padding: 0;
1660     @include border-radius(4px);
1663 .formlistingrow {
1664     cursor: pointer;
1665     border-bottom: 1px solid;
1666     border-color: #e1e1e8;
1667     border-left: 1px solid #e1e1e8;
1668     border-right: 1px solid #e1e1e8;
1669     background-color: #f7f7f9;
1671     @include border-radius(0 0 4px 4px);
1672     padding: 6px;
1673     top: 50%;
1674     left: 50%;
1675     min-height: 34px;
1676     float: left;
1677     width: 150px;
1680 body.jsenabled .formlistingradio {
1681     display: none;
1684 body.jsenabled .formlisting {
1685     display: block;
1688 /* Badges styles */
1689 table.collection {
1690     @extend .table;
1691     @extend .table-bordered;
1692     @extend .table-striped;
1695 table.collection .name {
1696     text-align: left;
1697     vertical-align: middle;
1700 table.collection .awards {
1701     width: 10%;
1702     text-align: center;
1703     vertical-align: middle;
1706 table.collection .criteria {
1707     width: 40%;
1708     text-align: left;
1709     vertical-align: top;
1712 table.collection .badgeimage,
1713 table.collection .status {
1714     width: 15%;
1715     text-align: center;
1716     vertical-align: middle;
1719 table.collection .description {
1720     width: 25%;
1721     text-align: left;
1724 table.collection .actions {
1725     width: 11em;
1726     text-align: center;
1727     vertical-align: middle;
1730 a.criteria-action {
1731     padding: 0 3px;
1732     float: right;
1735 div.criteria-description {
1736     padding: 10px 15px;
1737     margin: 5px 0;
1738     background: none repeat scroll 0 0 #f9f9f9;
1739     border: 1px solid #eee;
1742 ul.badges {
1743     margin: 0;
1744     list-style: none;
1747 .badges li {
1748     position: relative;
1749     display: inline-block;
1750     padding-top: 1em;
1751     text-align: center;
1752     vertical-align: top;
1753     width: 150px;
1756 .badges li .badge-name {
1757     display: block;
1758     padding: 5px;
1761 .badges li > img {
1762     position: absolute;
1765 .badges li .badge-image {
1766     width: 100px;
1767     height: 100px;
1768     left: 10px;
1769     top: 0;
1770     z-index: 1;
1773 .badges li .badge-actions {
1774     position: relative;
1777 .badges li .expireimage {
1778     width: 100px;
1779     height: 100px;
1780     left: 25px;
1781     top: 0;
1782     position: absolute;
1783     z-index: 10;
1784     opacity: 0.85;
1787 #badge-image {
1788     background-color: transparent;
1789     padding: 0;
1790     position: relative;
1791     min-width: 100px;
1792     width: 20%;
1793     display: inline-block;
1794     vertical-align: top;
1795     margin-top: 17px;
1797     .expireimage {
1798         width: 100px;
1799         height: 100px;
1800         left: 0;
1801         top: 0;
1802         opacity: 0.85;
1803         position: absolute;
1804         z-index: 10;
1805     }
1807     .singlebutton {
1808         padding-top: 5px;
1810         input {
1811             margin-left: 0;
1812         }
1813     }
1816 #badge-details {
1817     display: inline-block;
1818     width: 79%;
1821 #badge-overview dl,
1822 #badge-details dl {
1823     margin: 0;
1825     dt,
1826     dd {
1827         vertical-align: top;
1828         padding: 3px 0;
1829     }
1831     dt {
1832         clear: both;
1833         display: inline-block;
1834         width: 20%;
1835         min-width: 100px;
1836     }
1838     dd {
1839         display: inline-block;
1840         width: 79%;
1841         margin-left: 1%;
1842     }
1845 .badge-profile {
1846     vertical-align: top;
1849 .connected {
1850     @extend .text-success;
1853 .notconnected {
1854     @extend .text-danger;
1857 .connecting {
1858     @extend .text-warning;
1861 #page-badges-award .recipienttable tr td {
1862     vertical-align: top;
1865 #page-badges-award .recipienttable tr td.actions .actionbutton {
1866     margin: 0.3em 0;
1867     padding: 0.5em 0;
1868     width: 100%;
1871 #page-badges-award .recipienttable tr td.existing,
1872 #page-badges-award .recipienttable tr td.potential {
1873     width: 42%;
1876 #issued-badge-table .activatebadge {
1877     display: inline-block;
1880 .statusbox.active {
1881     background-color: $state-success-bg;
1884 .statusbox.inactive {
1885     background-color: $state-warning-bg;
1888 .statusbox {
1889     text-align: center;
1890     margin-bottom: 5px;
1891     padding: 5px;
1894 .statusbox .activatebadge {
1895     display: inline-block;
1898 .statusbox .activatebadge input[type=submit] {
1899     margin: 3px;
1902 .activatebadge {
1903     margin: 0;
1904     text-align: left;
1905     vertical-align: middle;
1908 img#persona_signin {
1909     cursor: pointer;
1912 .addcourse {
1913     float: right;
1916 .invisiblefieldset {
1917     display: inline;
1918     padding: 0;
1919     border-width: 0;
1922 .breadcrumb-nav {
1923     float: left;
1926 .breadcrumb-button .singlebutton div {
1927     margin-right: 0;
1930 .breadcrumb-nav .breadcrumb {
1931     margin: 0;
1934 /** Page header */
1935 #page-header {
1936     .logo {
1937         margin: $spacer 0;
1938     }
1941 /** Header. */
1942 header {
1943     .collapse.in,
1944     .collapsing {
1945         display: block;
1946         clear: both;
1947     }
1950 /** Header-bar styles **/
1951 .page-context-header {
1952     // We need to be explicit about the height of the header.
1953     $pageHeaderHeight: 140px;
1955     // Do not remove these rules.
1956     overflow: hidden;
1958     .page-header-image,
1959     .page-header-headings {
1960         display: block;
1961         position: relative;
1962     }
1964     .page-header-image {
1965         float: left;
1966         margin-right: 1em;
1967         margin-bottom: 1em;
1968     }
1970     .page-header-headings,
1971     .header-button-group {
1972         position: relative;
1973         line-height: 24px;
1974         vertical-align: middle;
1975     }
1977     .header-button-group {
1978         display: block;
1979         float: left;
1981         a {
1982             position: relative;
1984             // Don't touch it unless you know exactly what you are doing.
1985             top: -0.4em;
1986         }
1987     }
1990 ul.dragdrop-keyboard-drag li {
1991     list-style-type: none;
1994 a.disabled:hover,
1995 a.disabled {
1996     text-decoration: none;
1997     cursor: default;
1998     font-style: italic;
1999     color: #808080;
2002 body.lockscroll {
2003     height: 100%;
2004     overflow: hidden;
2007 .progressbar_container {
2008     max-width: 500px;
2009     margin: 0 auto;
2012 /* IE10 only fix for calendar titling */
2013 .ie10 .yui3-calendar-header-label {
2014     display: inline-block;
2017 dd:before,
2018 dd:after {
2019     display: block;
2020     content: " ";
2023 dd:after {
2024     clear: both;
2027 // Active tabs with links should have a different
2028 // cursor to indicate they are clickable.
2029 .nav-tabs > .active > a[href],
2030 .nav-tabs > .active > a[href]:hover,
2031 .nav-tabs > .active > a[href]:focus {
2032     cursor: pointer;
2035 .inplaceeditable {
2036     &.inplaceeditingon {
2037         position: relative;
2039         .editinstructions {
2040             margin-top: -30px;
2041             font-weight: normal;
2042             margin-right: 0;
2043             margin-left: 0;
2044             left: 0;
2045             right: auto;
2046             white-space: nowrap;
2047         }
2049         input {
2050             width: 330px;
2051             height: 16px;
2052             vertical-align: text-bottom;
2053             margin-bottom: 0;
2054         }
2056         select {
2057             margin-bottom: 0;
2058         }
2059     }
2061     .quickediticon img {
2062         opacity: 0.2;
2063     }
2065     .quickeditlink {
2066         color: inherit;
2067         text-decoration: inherit;
2068     }
2070     &:hover .quickeditlink .quickediticon img,
2071     .quickeditlink:focus .quickediticon img {
2072         opacity: 1;
2073     }
2075     &.inplaceeditable-toggle .quickediticon {
2076         display: none;
2077     }
2080 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2081     margin-top: -20px;
2084 /** Chart area. */
2085 .chart-area {
2087     .chart-table-data {
2088         display: none;
2089     }
2091     .chart-table {
2092         .chart-output-htmltable caption {
2093             white-space: nowrap;
2094         }
2095         /** When accessible, we display the table only. */
2096         &.accesshide {
2097             .chart-table-expand {
2098                 display: none;
2099             }
2100             .chart-table-data {
2101                 display: block;
2102             }
2103         }
2104     }
2107 // Reset for ul.
2108 ul {
2109     padding-left: 1rem;
2112 /* YUI 2 Tree View */
2113 /*rtl:raw:
2114 .ygtvtn,
2115 .ygtvtm,
2116 .ygtvtmh,
2117 .ygtvtmhh,
2118 .ygtvtp,
2119 .ygtvtph,
2120 .ygtvtphh,
2121 .ygtvln,
2122 .ygtvlm,
2123 .ygtvlmh,
2124 .ygtvlmhh,
2125 .ygtvlp,
2126 .ygtvlph,
2127 .ygtvlphh,
2128 .ygtvdepthcell,
2129 .ygtvok,
2130 .ygtvok:hover,
2131 .ygtvcancel,
2132 .ygtvcancel:hover {
2133     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
2135 */
2137 .hover-tooltip-container {
2138     position: relative;
2140     .hover-tooltip {
2141         opacity: 0;
2142         visibility: hidden;
2143         position: absolute;
2144         left: 50%;
2145         top: calc(-50% - 5px);
2146         transform: translate(-50%, -50%);
2147         background-color: #fff;
2148         border: 1px solid rgba(0, 0, 0, .2);
2149         border-radius: .3rem;
2150         box-sizing: border-box;
2151         padding: 5px;
2152         white-space: nowrap;
2153         transition: opacity 0.15s, visibility 0.15s;
2154         z-index: 1000;
2156         &:before {
2157             content: '';
2158             display: inline-block;
2159             border-left: 8px solid transparent;
2160             border-right: 8px solid transparent;
2161             border-top: 8px solid rgba(0, 0, 0, .2);
2162             position: absolute;
2163             bottom: -8px;
2164             left: calc(50% - 8px);
2165         }
2167         &:after {
2168             content: '';
2169             display: inline-block;
2170             border-left: 7px solid transparent;
2171             border-right: 7px solid transparent;
2172             border-top: 7px solid #fff;
2173             position: absolute;
2174             bottom: -6px;
2175             left: calc(50% - 7px);
2176             z-index: 2;
2177         }
2178     }
2180     &:hover {
2181         .hover-tooltip {
2182             opacity: 1;
2183             visibility: visible;
2184             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2185         }
2186     }
2189 #region-flat-nav {
2190     padding-right: 0;
2191     padding-left: 0;
2192     .nav {
2193         margin-right: $grid-gutter-width / 2;
2194         background-color: $card-bg;
2195     }
2196     @include media-breakpoint-down(sm) {
2197         .nav {
2198             margin-top: $grid-gutter-width;
2199             margin-right: 0;
2200         }
2201     }