MDL-56063 theme_boost: Check and remove extraneous !important rules
[moodle.git] / theme / boost / scss / moodle / core.scss
1 /* core.less */
3 /** Page layout CSS starts **/
4 .layout-option-noheader #page-header,
5 .layout-option-nonavbar #page-navbar,
6 .layout-option-nofooter #page-footer,
7 .layout-option-nocourseheader .course-content-header,
8 .layout-option-nocoursefooter .course-content-footer {
9     display: none;
10 }
12 /** Page layout CSS ends **/
14 .mdl-left {
15     text-align: left;
16 }
18 .mdl-right {
19     text-align: right;
20 }
22 /*rtl:ignore*/
23 .text-ltr {
24     direction: ltr !important; /* stylelint-disable-line declaration-no-important */
25 }
27 #add,
28 #remove,
29 .centerpara,
30 .mdl-align {
31     text-align: center;
32 }
34 a.dimmed,
35 a.dimmed:link,
36 a.dimmed:visited,
37 a.dimmed_text,
38 a.dimmed_text:link,
39 a.dimmed_text:visited,
40 .dimmed_text,
41 .dimmed_text a,
42 .dimmed_text a:link,
43 .dimmed_text a:visited,
44 .usersuspended,
45 .usersuspended a,
46 .usersuspended a:link,
47 .usersuspended a:visited,
48 .dimmed_category,
49 .dimmed_category a {
50     @extend .text-muted;
51 }
53 .activity.label .dimmed_text {
54     opacity: 0.5;
55 }
57 .unlist,
58 .unlist li,
59 .inline-list,
60 .inline-list li,
61 .block .list,
62 .block .list li,
63 .section li.activity,
64 .section li.movehere,
65 .tabtree li {
66     list-style: none;
67     margin: 0;
68     padding: 0;
69 }
71 .inline,
72 .inline-list li {
73     display: inline;
74 }
76 .notifytiny {
77     font-size: $font-size-xs;
78 }
80 .notifytiny li,
81 .notifytiny td {
82     font-size: 100%;
83 }
85 .red,
86 .notifyproblem {
87     @extend .text-warning;
88 }
90 .green,
91 .notifysuccess {
92     @extend .text-success;
93 }
95 .highlight {
96     @extend .text-info;
97 }
99 .reportlink {
100     text-align: right;
103 a.autolink.glossary:hover {
104     cursor: help;
106 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
107 .collapsibleregioncaption {
108     white-space: nowrap;
111 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
112     cursor: pointer;
115 .collapsibleregioncaption img {
116     vertical-align: middle;
119 .jsenabled .hiddenifjs {
120     display: none;
123 .visibleifjs {
124     display: none;
127 .jsenabled .visibleifjs {
128     display: inline;
131 .jsenabled .collapsibleregion {
132     overflow: hidden;
135 .jsenabled .collapsed .collapsibleregioninner {
136     visibility: hidden;
139 .collapsible-actions {
140     display: none;
141     text-align: right;
144 .jsenabled .collapsible-actions {
145     display: block;
148 .collapsible-actions .collapseexpand {
149     padding-left: 20px;
150     background: url([[pix:t/collapsed]]) 2px center no-repeat;
152 /*rtl:raw:
153 .collapsible-actions .collapseexpand {
154     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
156 */
157 .collapsible-actions .collapse-all {
158     background-image: url([[pix:t/expanded]]);
161 .yui-overlay .yui-widget-bd {
162     background-color: #ffee69;
163     border: 1px solid #a6982b;
164     border-top-color: #d4c237;
165     color: #000;
166     left: 0;
167     padding: 2px 5px;
168     position: relative;
169     top: 0;
170     z-index: 1;
173 .clearer {
174     background: transparent;
175     border-width: 0;
176     clear: both;
177     display: block;
178     height: 1px;
179     margin: 0;
180     padding: 0;
183 .bold,
184 .warning,
185 .errorbox .title,
186 .pagingbar .title,
187 .pagingbar .thispage {
188     font-weight: bold;
191 img.userpicture {
192     margin-right: 0.5rem;
195 img.resize {
196     height: 1em;
197     width: 1em;
200 .action-menu .dropdown-toggle {
201     text-decoration: none;
204 .action-menu {
205     white-space: nowrap;
208 .action-menu .userpicture {
209     width: auto;
210     height: auto;
211     margin-left: 1rem;
214 .block img.resize,
215 .breadcrumb img.resize {
216     height: 0.9em;
217     width: 0.8em;
219 /* Icon styles */
220 img.activityicon {
221     height: 24px;
222     width: 24px;
223     vertical-align: middle;
226 .boxaligncenter {
227     margin-left: auto;
228     margin-right: auto;
231 .boxalignright {
232     margin-left: auto;
233     margin-right: 0;
236 .boxalignleft {
237     margin-left: 0;
238     margin-right: auto;
241 .boxwidthnarrow {
242     width: 30%;
245 .boxwidthnormal {
246     width: 50%;
249 .boxwidthwide {
250     width: 80%;
253 .headermain {
254     font-weight: bold;
257 #maincontent {
258     display: block;
259     height: 1px;
260     overflow: hidden;
263 img.uihint {
264     cursor: help;
267 #addmembersform table {
268     margin-left: auto;
269     margin-right: auto;
272 table.flexible .emptyrow {
273     display: none;
276 form.popupform,
277 form.popupform div {
278     display: inline;
281 .arrow_button input {
282     overflow: hidden;
284 /** The 1-pixel padding is there to avoid phantom scroll bars on OS X (FF, Safari and Chrome)**/
285 .no-overflow {
286     overflow: auto;
287     padding-bottom: 1px;
290 .pagelayout-report .no-overflow {
291     overflow: visible;
294 .no-overflow > .generaltable {
295     margin-bottom: 0;
297 // Accessibility features
299 // Accessibility: text 'seen' by screen readers but not visual users.
300 .accesshide {
301     position: absolute;
302     left: -10000px;
303     font-weight: normal;
304     font-size: 1em;
307 span.hide,
308 div.hide {
309     display: none;
311 // Accessibility: Skip block link, for keyboard-only users.
312 a.skip-block,
313 a.skip {
314     position: absolute;
315     top: -1000em;
316     font-size: 0.85em;
317     text-decoration: none;
320 a.skip-block:focus,
321 a.skip-block:active,
322 a.skip:focus,
323 a.skip:active {
324     position: static;
325     display: block;
328 .skip-block-to {
329     display: block;
330     height: 1px;
331     overflow: hidden;
333 // Blogs
334 .addbloglink {
335     text-align: center;
338 .blog_entry .audience {
339     text-align: right;
340     padding-right: 4px;
343 .blog_entry .tags {
344     margin-top: 15px;
347 .blog_entry .content {
348     margin-left: 43px;
350 // Group
351 #page-group-index #groupeditform {
352     text-align: center;
355 #doc-contents h1 {
356     margin: 1em 0 0 0;
359 #doc-contents ul {
360     margin: 0;
361     padding: 0;
362     width: 90%;
365 #doc-contents ul li {
366     list-style-type: none;
369 .groupmanagementtable td {
370     vertical-align: top;
373 .groupmanagementtable #existingcell,
374 .groupmanagementtable #potentialcell {
375     width: 42%;
378 .groupmanagementtable #buttonscell {
379     width: 16%;
382 .groupmanagementtable #buttonscell p.arrow_button input {
383     width: auto;
384     min-width: 80%;
385     margin: 0 auto;
388 .groupmanagementtable #removeselect_wrapper,
389 .groupmanagementtable #addselect_wrapper {
390     width: 100%;
393 .groupmanagementtable #removeselect_wrapper label,
394 .groupmanagementtable #addselect_wrapper label {
395     font-weight: normal;
398 #group-usersummary {
399     width: 14em;
402 .groupselector {
403     margin-top: 3px;
404     margin-bottom: 3px;
405     display: inline-block;
408 .groupselector label {
409     display: inline-block;
412 // Login
413 .login-page {
414     [name="username"] {
415         margin-bottom: -1px;
416         border-bottom-right-radius: 0;
417         border-bottom-left-radius: 0;
418     }
420     [type="password"] {
421         margin-bottom: 10px;
422         border-top-left-radius: 0;
423         border-top-right-radius: 0;
424     }
427 // Notes
428 .notepost {
429     margin-bottom: 1em;
432 .notepost .userpicture {
433     float: left;
434     margin-right: 5px;
437 .notepost .content,
438 .notepost .footer {
439     clear: both;
442 .notesgroup {
443     margin-left: 20px;
446 // My Moodle
447 .path-my .coursebox {
448     margin: $spacer-y 0;
449     padding: 0;
451     .overview {
452         margin: 15px 30px 10px 30px;
453     }
456 .path-my .coursebox .info {
457     float: none;
458     margin: 0;
461 // Modules
462 .mod_introbox {
463     padding: 10px;
466 table.mod_index {
467     width: 100%;
470 // Comments
471 .comment-ctrl {
472     font-size: 12px;
473     display: none;
474     margin: 0;
475     padding: 0;
478 .comment-ctrl h5 {
479     margin: 0;
480     padding: 5px;
483 .comment-area {
484     max-width: 400px;
485     padding: 5px;
488 .comment-area textarea {
489     width: 100%;
490     overflow: auto;
492     &.fullwidth {
493         -webkit-box-sizing: border-box;
494         -moz-box-sizing: border-box;
495         box-sizing: border-box;
496     }
499 .comment-area .fd {
500     text-align: right;
503 .comment-meta span {
504     color: gray;
507 .comment-link img {
508     vertical-align: text-bottom;
511 .comment-list {
512     font-size: 11px;
513     overflow: auto;
514     list-style: none;
515     padding: 0;
516     margin: 0;
519 .comment-list li {
520     margin: 2px;
521     list-style: none;
522     margin-bottom: 5px;
523     clear: both;
524     padding: .3em;
525     position: relative;
528 .comment-list li.first {
529     display: none;
532 .comment-paging {
533     text-align: center;
536 .comment-paging .pageno {
537     padding: 2px;
540 .comment-paging .curpage {
541     border: 1px solid #ccc;
544 .comment-message .picture {
545     width: 20px;
546     float: left;
549 .comment-message .text {
550     margin: 0;
551     padding: 0;
554 .comment-message .text p {
555     padding: 0;
556     margin: 0 18px 0 0;
559 .comment-delete {
560     position: absolute;
561     top: 0;
562     right: 0;
563     margin: .3em;
566 .comment-report-selectall {
567     display: none;
570 .comment-link {
571     display: none;
574 .jsenabled .comment-link {
575     display: block;
578 .jsenabled .showcommentsnonjs {
579     display: none;
582 .jsenabled .comment-report-selectall {
583     display: inline;
585 /**
586 * Completion progress report
587 */
588 .completion-expired {
589     @extend .text-warning;
592 .completion-expected {
593     font-size: $font-size-xs;
596 .completion-sortchoice,
597 .completion-identifyfield {
598     font-size: $font-size-xs;
599     vertical-align: bottom;
602 .completion-progresscell {
603     text-align: right;
606 .completion-expired .completion-expected {
607     font-weight: bold;
609 /**
610 * Tags
611 */
612 img.user-image {
613     height: 100px;
614     width: 100px;
617 #tag-search-box {
618     text-align: center;
619     margin: 10px auto;
622 .path-tag .tag-index-items .tagarea {
623     border: 1px solid #e3e3e3;
624     border-radius: 4px;
625     padding: 10px;
626     margin-top: 10px;
629 .path-tag .tag-index-items .tagarea h3 {
630     display: block;
631     padding: 3px 0 10px 0;
632     margin: 0;
633     font-size: 1.1em;
634     font-weight: bold;
635     line-height: 20px;
636     color: #999;
637     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
638     text-transform: uppercase;
639     word-wrap: break-word;
640     border-bottom: solid 1px #e3e3e3;
641     margin-bottom: 10px;
644 .path-tag .tagarea .controls,
645 .path-tag .tagarea .taggeditems {
646     @include clearfix();
649 .path-tag .tagarea .controls,
650 .path-tag .tag-backtoallitems {
651     text-align: center;
654 .path-tag .tagarea .controls .gotopage.nextpage {
655     float: right;
658 .path-tag .tagarea .controls .gotopage.prevpage {
659     float: left;
662 .path-tag .tagarea .controls .exclusivemode {
663     display: inline-block;
666 .path-tag .tagarea .controls.controls-bottom {
667     margin-top: 5px;
670 .path-tag .tagarea .controls .gotopage.nextpage::after {
671     padding-right: 5px;
672     padding-left: 5px;
673     content: "»";
676 .path-tag .tagarea .controls .gotopage.prevpage::before {
677     padding-right: 5px;
678     padding-left: 5px;
679     content: "«";
682 span.flagged-tag,
683 tr.flagged-tag,
684 span.flagged-tag a,
685 tr.flagged-tag a {
686     @extend .text-warning;
689 .tag-management-table td,
690 .tag-management-table th {
691     vertical-align: middle;
692     padding: 4px;
695 .tag-management-table .inplaceeditable.inplaceeditingon input {
696     width: 150px;
699 .path-admin-tag .addstandardtags {
700     float: right;
702     img {
703         margin: 0 5px;
704     }
707 .path-tag .tag-relatedtags {
708     padding-top: 10px;
711 .path-tag .tag-management-box {
712     text-align: right;
715 .path-tag .tag-index-toc {
716     padding: 10px;
717     text-align: center;
720 .path-tag .tag-index-toc li,
721 .path-tag .tag-management-box li {
722     margin-left: 5px;
723     margin-right: 5px;
726 .path-tag .tag-management-box li a.edittag {
727     background-image: url([[pix:moodle|i/settings]]);
730 .path-tag .tag-management-box li a.flagasinappropriate {
731     background-image: url([[pix:moodle|i/flagged]]);
734 .path-tag .tag-management-box li a.removefrommyinterests {
735     background-image: url([[pix:moodle|t/delete]]);
738 .path-tag .tag-management-box li a.addtomyinterests {
739     background-image: url([[pix:moodle|t/add]]);
742 .path-tag .tag-management-box li a {
743     background-repeat: no-repeat;
744     background-position: left;
745     padding-left: 17px;
748 .tag_feed.media-list .media .itemimage {
749     float: left;
752 .tag_feed.media-list .media .itemimage img {
753     height: 35px;
754     width: 35px;
757 .tag_feed.media-list .media .media-body {
758     padding-right: 10px;
759     padding-left: 10px;
762 .tag_feed .media .muted a {
763     @extend .text-muted;
766 .tag_cloud {
767     text-align: center;
770 .tag_cloud .inline-list li {
771     padding: 0 0.2em;
774 .tag_cloud .tag_overflow {
775     margin-top: 1em;
776     font-style: italic;
779 .tag_cloud .s20 {
780     font-size: 2.7em;
783 .tag_cloud .s19 {
784     font-size: 2.6em;
787 .tag_cloud .s18 {
788     font-size: 2.5em;
791 .tag_cloud .s17 {
792     font-size: 2.4em;
795 .tag_cloud .s16 {
796     font-size: 2.3em;
799 .tag_cloud .s15 {
800     font-size: 2.2em;
803 .tag_cloud .s14 {
804     font-size: 2.1em;
807 .tag_cloud .s13 {
808     font-size: 2em;
811 .tag_cloud .s12 {
812     font-size: 1.9em;
815 .tag_cloud .s11 {
816     font-size: 1.8em;
819 .tag_cloud .s10 {
820     font-size: 1.7em;
823 .tag_cloud .s9 {
824     font-size: 1.6em;
827 .tag_cloud .s8 {
828     font-size: 1.5em;
831 .tag_cloud .s7 {
832     font-size: 1.4em;
835 .tag_cloud .s6 {
836     font-size: 1.3em;
839 .tag_cloud .s5 {
840     font-size: 1.2em;
843 .tag_cloud .s4 {
844     font-size: 1.1em;
847 .tag_cloud .s3 {
848     font-size: 1em;
851 .tag_cloud .s2 {
852     font-size: 0.9em;
855 .tag_cloud .s1 {
856     font-size: 0.8em;
859 .tag_cloud .s0 {
860     font-size: 0.7em;
863 .tag_list ul {
864     display: inline;
867 .tag_list.hideoverlimit .overlimit {
868     display: none;
871 .tag_list .tagmorelink {
872     display: none;
875 .tag_list.hideoverlimit .tagmorelink {
876     display: inline;
879 .tag_list.hideoverlimit .taglesslink {
880     display: none;
883 /**
884 * Web Service
885 */
886 #webservice-doc-generator td {
887     text-align: left;
888     border: 0 solid black;
890 /**
891 * Smart Select Element
892 */
893 .smartselect {
894     position: absolute;
897 .smartselect .smartselect_mask {
898     background-color: #fff;
901 .smartselect ul {
902     padding: 0;
903     margin: 0;
906 .smartselect ul li {
907     list-style: none;
910 .smartselect .smartselect_menu {
911     margin-right: 5px;
914 .safari .smartselect .smartselect_menu {
915     margin-left: 2px;
918 .smartselect .smartselect_menu,
919 .smartselect .smartselect_submenu {
920     border: 1px solid #000;
921     background-color: #fff;
922     display: none;
925 .smartselect .smartselect_menu.visible,
926 .smartselect .smartselect_submenu.visible {
927     display: block;
930 .smartselect .smartselect_menu_content ul li {
931     position: relative;
932     padding: 2px 5px;
935 .smartselect .smartselect_menu_content ul li a {
936     color: #333;
937     text-decoration: none;
940 .smartselect .smartselect_menu_content ul li a.selectable {
941     color: inherit;
944 .smartselect .smartselect_submenuitem {
945     background-image: url([[pix:moodle|t/collapsed]]);
946     background-repeat: no-repeat;
947     background-position: 100%;
949 /** Spanning mode */
950 .smartselect.spanningmenu .smartselect_submenu {
951     position: absolute;
952     top: -1px;
953     left: 100%;
956 .smartselect.spanningmenu .smartselect_submenu a {
957     white-space: nowrap;
958     padding-right: 16px;
961 .smartselect.spanningmenu .smartselect_menu_content ul li a.selectable:hover {
962     text-decoration: underline;
964 /** Compact mode */
965 .smartselect.compactmenu .smartselect_submenu {
966     position: relative;
967     margin: 2px -3px;
968     margin-left: 10px;
969     display: none;
970     border-width: 0;
971     z-index: 1010;
974 .smartselect.compactmenu .smartselect_submenu.visible {
975     display: block;
978 .smartselect.compactmenu .smartselect_menu {
979     z-index: 1000;
980     overflow: hidden;
983 .smartselect.compactmenu .smartselect_submenu .smartselect_submenu {
984     z-index: 1020;
987 .smartselect.compactmenu .smartselect_submenuitem:hover > .smartselect_menuitem_label {
988     font-weight: bold;
990 /**
991 * Registration
992 */
993 #page-admin-registration-register .registration_textfield {
994     width: 300px;
996 /**
997 * Enrol
998 */
999 .userenrolment {
1000     width: 100%;
1001     border-collapse: collapse;
1004 .userenrolment tr {
1005     vertical-align: top;
1008 .userenrolment td {
1009     padding: 0;
1010     height: 41px;
1013 .userenrolment .subfield {
1014     margin-right: 5px;
1017 .userenrolment .col_userdetails .subfield {
1018     margin-left: 40px;
1021 .userenrolment .col_userdetails .subfield_picture {
1022     float: left;
1023     margin-left: 0;
1026 .userenrolment .col_lastseen {
1027     width: 150px;
1030 .userenrolment .col_role {
1031     width: 262px;
1034 .userenrolment .col_role .roles,
1035 .userenrolment .col_group .groups {
1036     margin-right: 30px;
1039 .userenrolment .col_role .role,
1040 .userenrolment .col_group .group {
1041     float: left;
1042     padding: 3px;
1043     margin: 3px;
1044     white-space: nowrap;
1047 .userenrolment .col_role .role a,
1048 .userenrolment .col_group .group a {
1049     margin-left: 3px;
1050     cursor: pointer;
1053 .userenrolment .col_role .addrole,
1054 .userenrolment .col_group .addgroup {
1055     float: right;
1056     padding: 3px;
1057     margin: 3px;
1059     > a:hover {
1060         border-bottom: 1px solid #666;
1061     }
1064 .userenrolment .col_role .addrole img,
1065 .userenrolment .col_group .addgroup img {
1066     vertical-align: baseline;
1069 .userenrolment .hasAllRoles .col_role .addrole {
1070     display: none;
1073 .userenrolment .col_enrol .enrolment {
1074     float: left;
1075     padding: 3px;
1076     margin: 3px;
1079 .userenrolment .col_enrol .enrolment a {
1080     float: right;
1081     margin-left: 3px;
1084 #page-enrol-users {
1085     .enrol_user_buttons {
1086         float: right;
1088         .enrolusersbutton {
1089             display: inline;
1091             div,
1092             form {
1093                 display: inline;
1094                 margin-right: 0;
1095             }
1096         }
1097     }
1099     #filterform {
1100         @extend .card;
1101         display: inline-block;
1103         .fitem {
1104             display: inline-block;
1105             line-height: $line-height-base * 2;
1106             margin-right: .3em;
1107             white-space: nowrap;
1109             label {
1110                 display: inline;
1111                 line-height: $line-height-base;
1112                 padding-right: .3em;
1113             }
1115             :before,
1116             :after {
1117                 display: inline;
1118             }
1119         }
1121         div,
1122         fieldset {
1123             display: inline-block;
1124             clear: none;
1125             width: auto;
1126             margin: 0;
1127         }
1129         select,
1130         .ftext input {
1131             width: 7em;
1132         }
1134         input,
1135         select {
1136             margin-bottom: 0;
1137         }
1138     }
1140     .user-enroller-panel .uep-search-results .user .details {
1141         width: 237px;
1142     }
1144     .user-enroller-panel .uep-search-results .cohort .details {
1145         width: 237px;
1146     }
1149 #page-enrol-users .enrol-users-page-action input {
1150     margin-left: 0;
1153 .corelightbox {
1154     background-color: #ccc;
1155     position: absolute;
1156     top: 0;
1157     left: 0;
1158     width: 100%;
1159     height: 100%;
1160     text-align: center;
1163 .corelightbox img {
1164     position: fixed;
1165     top: 50%;
1166     left: 50%;
1169 .mod-indent-outer {
1170     display: table;
1173 .mod-indent {
1174     display: table-cell;
1177 .label .mod-indent {
1178     float: left;
1179     padding-top: 20px;
1181 $mod-indent-size: 30px;
1182 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1184 @for $i from 1 through 16 {
1185     $width: ($i * $mod-indent-size);
1187     .mod-indent-#{$i} {
1188         width: $width;
1189     }
1192 .mod-indent-huge {
1193     width: (16 * $mod-indent-size);
1196 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1197 .resourcecontent .mediaplugin_mp3 object {
1198     height: 25px;
1199     width: 600px;
1202 .resourcecontent audio.mediaplugin_html5audio {
1203     width: 600px;
1205 /** Large resource images should avoid hidden overflow **/
1206 .resourceimage {
1207     max-width: 100%;
1209 /* Audio player size in 'inline' mode (can only change width, as above) */
1210 .mediaplugin_mp3 object {
1211     height: 15px;
1212     width: 300px;
1215 audio.mediaplugin_html5audio {
1216     width: 300px;
1218 /* TinyMCE moodle media preview frame should not have padding */
1219 .core_media_preview.pagelayout-embedded #content {
1220     padding: 0;
1223 .core_media_preview.pagelayout-embedded #maincontent {
1224     height: 0;
1227 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1228     padding: 0;
1229     margin: 0;
1230     min-width: 0;
1231     background: none;
1234 .path-rating .ratingtable {
1235     width: 100%;
1236     margin-bottom: 1em;
1239 .path-rating .ratingtable th.rating {
1240     width: 100%;
1243 .path-rating .ratingtable td.rating,
1244 .path-rating .ratingtable td.time {
1245     white-space: nowrap;
1246     text-align: center;
1249 .initialbar {
1250     a,
1251     strong {
1252         padding-left: 3px;
1253         padding-right: 3px;
1254     }
1257 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1258 .moodle-dialogue-base .moodle-dialogue-lightbox {
1259     background-color: $gray;
1262 .moodle-dialogue-base .hidden,
1263 .moodle-dialogue-base .moodle-dialogue-hidden {
1264     display: none;
1267 .no-scrolling {
1268     overflow: hidden;
1271 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1272     left: 0;
1273     top: 0;
1274     right: 0;
1275     bottom: -50px;
1276     position: fixed;
1279 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1280     overflow: auto;
1283 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1284     width: 28px;
1285     height: 16px;
1286     background-size: 100%;
1289 .moodle-dialogue-base .moodle-dialogue-wrap {
1290     background-color: #fff;
1291     border: 1px solid #ccc;
1294 .moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content {
1295     @extend .modal-content;
1298 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1299     @extend .modal-header;
1302 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1303     // Undo some YUI damage.
1304     min-height: 3rem;
1305     color: initial;
1306     background: initial;
1307     font-size: 1.5rem;
1308     line-height: 1.5;
1311 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1312     @extend .modal-title;
1315 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1316     padding: $spacer;
1319 .moodle-dialogue-base .closebutton {
1320     @extend .close;
1321     box-shadow: none;
1322     &::after {
1323         content: "×";
1324     }
1327 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1328     @extend .modal-body;
1331 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1332     overflow: auto;
1333     position: absolute;
1334     top: 0;
1335     bottom: 50px;
1336     left: 0;
1337     right: 0;
1338     margin: 0;
1339     border: 0;
1342 .moodle-dialogue-confirm .confirmation-dialogue {
1343     text-align: center;
1346 .moodle-dialogue-confirm .confirmation-dialogue input {
1347     text-align: center;
1350 .moodle-dialogue-exception .moodle-exception-message {
1351     text-align: center;
1354 .moodle-dialogue-exception .moodle-exception-param label {
1355     font-weight: bold;
1358 .moodle-dialogue-exception .param-stacktrace label {
1359     background-color: #eee;
1360     border: 1px solid #ccc;
1361     border-bottom-width: 0;
1364 .moodle-dialogue-exception .param-stacktrace pre {
1365     border: 1px solid #ccc;
1366     background-color: #fff;
1369 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1370     color: navy;
1371     font-size: $font-size-sm;
1374 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1375     @extend .text-warning;
1376     font-size: $font-size-sm;
1379 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1380     color: #333;
1381     font-size: 90%;
1382     border-bottom: 1px solid #eee;
1385 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1386     @extend .modal-footer;
1389 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1390     display: none;
1393 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1394     // Undo some YUI damage.
1395     background: initial;
1398 .moodle-dialogue-confirm .confirmation-message {
1399     margin: 0.5em 1em;
1402 .moodle-dialogue-confirm .confirmation-dialogue input {
1403     min-width: 80px;
1406 .moodle-dialogue-exception .moodle-exception-message {
1407     margin: 1em;
1410 .moodle-dialogue-exception .moodle-exception-param {
1411     margin-bottom: 0.5em;
1414 .moodle-dialogue-exception .moodle-exception-param label {
1415     width: 150px;
1418 .moodle-dialogue-exception .param-stacktrace label {
1419     display: block;
1420     margin: 0;
1421     padding: 4px 1em;
1424 .moodle-dialogue-exception .param-stacktrace pre {
1425     display: block;
1426     height: 200px;
1427     overflow: auto;
1430 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1431     display: inline-block;
1432     margin: 4px 0;
1435 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1436     display: inline-block;
1437     width: 50px;
1438     margin: 4px 1em;
1441 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1442     padding-left: 25px;
1443     margin-bottom: 4px;
1444     padding-bottom: 4px;
1447 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1448     opacity: 0.75;
1449     width: 100%;
1450     height: 100%;
1451     top: 0;
1452     left: 0;
1453     background-color: white;
1454     text-align: center;
1455     padding: 10% 0;
1457 /* Apply a default max-height on tooltip text */
1458 .moodle-dialogue .tooltiptext {
1459     max-height: 300px;
1462 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1463     z-index: 3001;
1465     .moodle-dialogue-bd {
1466         overflow: auto;
1467     }
1470 /**
1471  * Chooser Dialogues (moodle-core-chooserdialogue)
1472  *
1473  * This CSS belong to the chooser dialogue which should work both with, and
1474  * without javascript enabled
1475  */
1476 /* Hide the dialog and it's title */
1477 .chooserdialoguebody,
1478 .choosertitle {
1479     display: none;
1482 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1483     margin: 0;
1486 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1487     padding: 0;
1488     background: #f2f2f2;
1490     @include border-bottom-radius(10px);
1492 /* Center the submit buttons within the area */
1493 .choosercontainer #chooseform .submitbuttons {
1494     padding: 0.7em 0;
1495     text-align: center;
1497 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1499 @media (max-height: 639px) {
1500     .ios.safari .choosercontainer #chooseform .submitbuttons {
1501         padding: 45px 0;
1502     }
1505 .choosercontainer #chooseform .submitbuttons input {
1506     min-width: 100px;
1507     margin: 0 0.5em;
1509 /* Various settings for the options area */
1510 .choosercontainer #chooseform .options {
1511     position: relative;
1512     border-bottom: 1px solid #bbb;
1514 /* Only set these options if we're showing the js container */
1515 .jschooser .choosercontainer #chooseform .alloptions {
1516     overflow-x: hidden;
1517     overflow-y: auto;
1518     max-width: 240px;
1520     .option {
1521         input[type=radio] {
1522             display: inline-block;
1523         }
1525         .typename {
1526             display: inline-block;
1527             width: 55%;
1528         }
1529     }
1531 /* Settings for option rows and option subtypes */
1532 .choosercontainer #chooseform .moduletypetitle,
1533 .choosercontainer #chooseform .option,
1534 .choosercontainer #chooseform .nonoption {
1535     margin-bottom: 0;
1536     padding: 0 1.6em 0 1.6em;
1539 .choosercontainer #chooseform .moduletypetitle {
1540     text-transform: uppercase;
1541     padding-top: 1.2em;
1542     padding-bottom: 0.4em;
1545 .choosercontainer #chooseform .option .typename,
1546 .choosercontainer #chooseform .nonoption .typename {
1547     padding: 0 0 0 0.5em;
1550 .choosercontainer #chooseform .modicon + .typename {
1551     padding-left: 0;
1554 .choosercontainer #chooseform .option input[type=radio],
1555 .choosercontainer #chooseform .option span.typename {
1556     vertical-align: middle;
1559 .choosercontainer #chooseform .option label {
1560     display: block;
1561     margin: 0;
1562     padding: ($spacer / 2) 0;
1563     border-bottom: 1px solid #fff;
1566 .choosercontainer #chooseform .option .icon {
1567     margin: 0;
1568     padding: 0 $spacer;
1571 .choosercontainer #chooseform .nonoption {
1572     padding-left: 2.7em;
1573     padding-top: 0.3em;
1574     padding-bottom: 0.1em;
1577 .choosercontainer #chooseform .subtype {
1578     margin-bottom: 0;
1579     padding: 0 1.6em 0 3.2em;
1582 .choosercontainer #chooseform .subtype .typename {
1583     margin: 0 0 0 0.2em;
1585 /* The instruction/help area */
1586 .jschooser .choosercontainer #chooseform .instruction,
1587 .jschooser .choosercontainer #chooseform .typesummary {
1588     display: none;
1589     position: absolute;
1590     top: 0;
1591     right: 0;
1592     bottom: 0;
1593     left: 240px;
1594     margin: 0;
1595     padding: 1.6em;
1596     background-color: #fff;
1597     overflow-x: hidden;
1598     overflow-y: auto;
1599     line-height: 2em;
1601 /* Selected option settings */
1602 .jschooser .choosercontainer #chooseform .instruction,
1603 .choosercontainer #chooseform .selected .typesummary {
1604     display: block;
1607 .choosercontainer #chooseform .selected {
1608     background-color: #fff;
1609     margin-top: -1px;
1610     padding-top: 1px;
1613 .chooserdialogue-course-modchooser .modicon .icon {
1614     width: 24px;
1615     height: 24px;
1618 @include media-breakpoint-down(xs) {
1619     .jsenabled .choosercontainer #chooseform .alloptions {
1620         max-width: 100%;
1621     }
1623     .jsenabled .choosercontainer #chooseform .instruction,
1624     .jsenabled .choosercontainer #chooseform .typesummary {
1625         position: static;
1626     }
1629 /* Form element: listing */
1630 .formlistingradio {
1631     padding-bottom: 25px;
1632     padding-right: 10px;
1635 .formlistinginputradio {
1636     float: left;
1639 .formlistingmain {
1640     min-height: 225px;
1643 .formlisting {
1644     position: relative;
1645     margin: 15px 0;
1646     padding: 1px 19px 14px;
1647     background-color: white;
1648     border: 1px solid #ddd;
1650     @include border-radius(4px);
1653 .formlistingmore {
1654     position: absolute;
1655     cursor: pointer;
1656     bottom: -1px;
1657     right: -1px;
1658     padding: 3px 7px;
1659     font-size: 12px;
1660     font-weight: bold;
1661     background-color: whitesmoke;
1662     border: 1px solid #ddd;
1663     color: #9da0a4;
1665     @include border-radius(4px 0 4px 0);
1668 .formlistingall {
1669     margin: 15px 0;
1670     padding: 0;
1672     @include border-radius(4px);
1675 .formlistingrow {
1676     cursor: pointer;
1677     border-bottom: 1px solid;
1678     border-color: #e1e1e8;
1679     border-left: 1px solid #e1e1e8;
1680     border-right: 1px solid #e1e1e8;
1681     background-color: #f7f7f9;
1683     @include border-radius(0 0 4px 4px);
1684     padding: 6px;
1685     top: 50%;
1686     left: 50%;
1687     min-height: 34px;
1688     float: left;
1689     width: 150px;
1692 body.jsenabled .formlistingradio {
1693     display: none;
1696 body.jsenabled .formlisting {
1697     display: block;
1700 /* Badges styles */
1701 table.collection {
1702     @extend .table;
1703     @extend .table-bordered;
1704     @extend .table-striped;
1707 table.collection .name {
1708     text-align: left;
1709     vertical-align: middle;
1712 table.collection .awards {
1713     width: 10%;
1714     text-align: center;
1715     vertical-align: middle;
1718 table.collection .criteria {
1719     width: 40%;
1720     text-align: left;
1721     vertical-align: top;
1724 table.collection .badgeimage,
1725 table.collection .status {
1726     width: 15%;
1727     text-align: center;
1728     vertical-align: middle;
1731 table.collection .description {
1732     width: 25%;
1733     text-align: left;
1736 table.collection .actions {
1737     width: 11em;
1738     text-align: center;
1739     vertical-align: middle;
1742 a.criteria-action {
1743     padding: 0 3px;
1744     float: right;
1747 div.criteria-description {
1748     padding: 10px 15px;
1749     margin: 5px 0;
1750     background: none repeat scroll 0 0 #f9f9f9;
1751     border: 1px solid #eee;
1754 ul.badges {
1755     margin: 0;
1756     list-style: none;
1759 .badges li {
1760     position: relative;
1761     display: inline-block;
1762     padding-top: 1em;
1763     text-align: center;
1764     vertical-align: top;
1765     width: 150px;
1768 .badges li .badge-name {
1769     display: block;
1770     padding: 5px;
1773 .badges li > img {
1774     position: absolute;
1777 .badges li .badge-image {
1778     width: 100px;
1779     height: 100px;
1780     left: 10px;
1781     top: 0;
1782     z-index: 1;
1785 .badges li .badge-actions {
1786     position: relative;
1789 .badges li .expireimage {
1790     width: 100px;
1791     height: 100px;
1792     left: 25px;
1793     top: 0;
1794     position: absolute;
1795     z-index: 10;
1796     opacity: 0.85;
1799 #badge-image {
1800     background-color: transparent;
1801     padding: 0;
1802     position: relative;
1803     min-width: 100px;
1804     width: 20%;
1805     display: inline-block;
1806     vertical-align: top;
1807     margin-top: 17px;
1809     .expireimage {
1810         width: 100px;
1811         height: 100px;
1812         left: 0;
1813         top: 0;
1814         opacity: 0.85;
1815         position: absolute;
1816         z-index: 10;
1817     }
1819     .singlebutton {
1820         padding-top: 5px;
1822         input {
1823             margin-left: 0;
1824         }
1825     }
1828 #badge-details {
1829     display: inline-block;
1830     width: 79%;
1833 #badge-overview dl,
1834 #badge-details dl {
1835     margin: 0;
1837     dt,
1838     dd {
1839         vertical-align: top;
1840         padding: 3px 0;
1841     }
1843     dt {
1844         clear: both;
1845         display: inline-block;
1846         width: 20%;
1847         min-width: 100px;
1848     }
1850     dd {
1851         display: inline-block;
1852         width: 79%;
1853         margin-left: 1%;
1854     }
1857 .badge-profile {
1858     vertical-align: top;
1861 .connected {
1862     @extend .text-success;
1865 .notconnected {
1866     @extend .text-danger;
1869 .connecting {
1870     @extend .text-warning;
1873 #page-badges-award .recipienttable tr td {
1874     vertical-align: top;
1877 #page-badges-award .recipienttable tr td.actions .actionbutton {
1878     margin: 0.3em 0;
1879     padding: 0.5em 0;
1880     width: 100%;
1883 #page-badges-award .recipienttable tr td.existing,
1884 #page-badges-award .recipienttable tr td.potential {
1885     width: 42%;
1888 #issued-badge-table .activatebadge {
1889     display: inline-block;
1892 .statusbox.active {
1893     background-color: $state-success-bg;
1896 .statusbox.inactive {
1897     background-color: $state-warning-bg;
1900 .statusbox {
1901     text-align: center;
1902     margin-bottom: 5px;
1903     padding: 5px;
1906 .statusbox .activatebadge {
1907     display: inline-block;
1910 .statusbox .activatebadge input[type=submit] {
1911     margin: 3px;
1914 .activatebadge {
1915     margin: 0;
1916     text-align: left;
1917     vertical-align: middle;
1920 img#persona_signin {
1921     cursor: pointer;
1924 .addcourse {
1925     float: right;
1928 .invisiblefieldset {
1929     display: inline;
1930     padding: 0;
1931     border-width: 0;
1934 .breadcrumb-nav {
1935     float: left;
1938 .breadcrumb-button .singlebutton div {
1939     margin-right: 0;
1942 .breadcrumb-nav .breadcrumb {
1943     margin: 0;
1945 /** Navbar */
1946 .navbar-brand {
1947     .logo {
1948         display: inline-block;
1949         margin: -$navbar-brand-padding-y 0;
1950     }
1952     .site-name {
1953         display: inline-block;
1954     }
1956     &.has-logo {
1957         .site-name {
1958             margin-left: $spacer / 2;
1959         }
1960     }
1963 @include media-breakpoint-down(xs) {
1964     .navbar {
1965         .navbar-brand {
1966             max-width: 80%;
1967             margin-right: 0;
1969             &.has-logo {
1970                 .site-name {
1971                     display: none;
1972                 }
1973             }
1974         }
1975     }
1978 /** Page header */
1979 #page-header {
1980     .logo {
1981         margin: $spacer 0;
1982     }
1985 /** Header. */
1986 header {
1987     .collapse.in,
1988     .collapsing {
1989         display: block;
1990         clear: both;
1991     }
1994 /** Header-bar styles **/
1995 .page-context-header {
1996     // We need to be explicit about the height of the header.
1997     $pageHeaderHeight: 140px;
1999     // Do not remove these rules.
2000     overflow: hidden;
2002     .page-header-image,
2003     .page-header-headings {
2004         display: block;
2005         position: relative;
2006     }
2008     .page-header-image {
2009         float: left;
2010         margin-right: 1em;
2011         margin-bottom: 1em;
2012     }
2014     .page-header-headings,
2015     .header-button-group {
2016         position: relative;
2017         line-height: 24px;
2018         vertical-align: middle;
2019     }
2021     .header-button-group {
2022         display: block;
2023         float: left;
2025         a {
2026             position: relative;
2028             // Don't touch it unless you know exactly what you are doing.
2029             top: -0.4em;
2030         }
2031     }
2034 ul.dragdrop-keyboard-drag li {
2035     list-style-type: none;
2038 a.disabled:hover,
2039 a.disabled {
2040     text-decoration: none;
2041     cursor: default;
2042     font-style: italic;
2043     color: #808080;
2046 body.lockscroll {
2047     height: 100%;
2048     overflow: hidden;
2051 .progressbar_container {
2052     max-width: 500px;
2053     margin: 0 auto;
2056 /* IE10 only fix for calendar titling */
2057 .ie10 .yui3-calendar-header-label {
2058     display: inline-block;
2061 dd:before,
2062 dd:after {
2063     display: block;
2064     content: " ";
2067 dd:after {
2068     clear: both;
2071 // Active tabs with links should have a different
2072 // cursor to indicate they are clickable.
2073 .nav-tabs > .active > a[href],
2074 .nav-tabs > .active > a[href]:hover,
2075 .nav-tabs > .active > a[href]:focus {
2076     cursor: pointer;
2079 .inplaceeditable {
2080     &.inplaceeditingon {
2081         position: relative;
2083         .editinstructions {
2084             margin-top: -30px;
2085             font-weight: normal;
2086             margin-right: 0;
2087             margin-left: 0;
2088             left: 0;
2089             right: auto;
2090             white-space: nowrap;
2091         }
2093         input {
2094             width: 330px;
2095             height: 16px;
2096             vertical-align: text-bottom;
2097             margin-bottom: 0;
2098         }
2100         select {
2101             margin-bottom: 0;
2102         }
2103     }
2105     .quickediticon img {
2106         opacity: 0.2;
2107     }
2109     .quickeditlink {
2110         color: inherit;
2111         text-decoration: inherit;
2112     }
2114     &:hover .quickeditlink .quickediticon img,
2115     .quickeditlink:focus .quickediticon img {
2116         opacity: 1;
2117     }
2119     &.inplaceeditable-toggle .quickediticon {
2120         display: none;
2121     }
2124 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2125     margin-top: -20px;
2127 // Reset for ul.
2128 ul {
2129     padding-left: 1rem;
2132 /* YUI 2 Tree View */
2133 /*rtl:raw:
2134 .ygtvtn,
2135 .ygtvtm,
2136 .ygtvtmh,
2137 .ygtvtmhh,
2138 .ygtvtp,
2139 .ygtvtph,
2140 .ygtvtphh,
2141 .ygtvln,
2142 .ygtvlm,
2143 .ygtvlmh,
2144 .ygtvlmhh,
2145 .ygtvlp,
2146 .ygtvlph,
2147 .ygtvlphh,
2148 .ygtvdepthcell,
2149 .ygtvok,
2150 .ygtvok:hover,
2151 .ygtvcancel,
2152 .ygtvcancel:hover {
2153     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
2155 */