c0255982cc0ce0070d72804f934228bdbc0b2445
[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;
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: 5px;
1317     right: 0;
1320 .moodle-dialogue-base .closebutton {
1321     @extend .close;
1322     margin: 0;
1323     padding: 10px !important;
1324     background: 0;
1325     border-style: none;
1326     box-shadow: none;
1329 .moodle-dialogue-base .closebutton::after {
1330     content: "×";
1333 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1334     @extend .modal-body;
1337 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1338     overflow: auto;
1339     position: absolute;
1340     top: 0;
1341     bottom: 50px;
1342     left: 0;
1343     right: 0;
1344     margin: 0;
1345     border: 0;
1348 .moodle-dialogue-confirm .confirmation-dialogue {
1349     text-align: center;
1352 .moodle-dialogue-confirm .confirmation-dialogue input {
1353     text-align: center;
1356 .moodle-dialogue-exception .moodle-exception-message {
1357     text-align: center;
1360 .moodle-dialogue-exception .moodle-exception-param label {
1361     font-weight: bold;
1364 .moodle-dialogue-exception .param-stacktrace label {
1365     background-color: #eee;
1366     border: 1px solid #ccc;
1367     border-bottom-width: 0;
1370 .moodle-dialogue-exception .param-stacktrace pre {
1371     border: 1px solid #ccc;
1372     background-color: #fff;
1375 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1376     color: navy;
1377     font-size: $font-size-sm;
1380 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1381     @extend .text-warning;
1382     font-size: $font-size-sm;
1385 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1386     color: #333;
1387     font-size: 90%;
1388     border-bottom: 1px solid #eee;
1391 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1392     @extend .modal-footer;
1395 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1396     display: none;
1399 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1400     // Undo some YUI damage.
1401     background: initial;
1404 .moodle-dialogue-confirm .confirmation-message {
1405     margin: 0.5em 1em;
1408 .moodle-dialogue-confirm .confirmation-dialogue input {
1409     min-width: 80px;
1412 .moodle-dialogue-exception .moodle-exception-message {
1413     margin: 1em;
1416 .moodle-dialogue-exception .moodle-exception-param {
1417     margin-bottom: 0.5em;
1420 .moodle-dialogue-exception .moodle-exception-param label {
1421     width: 150px;
1424 .moodle-dialogue-exception .param-stacktrace label {
1425     display: block;
1426     margin: 0;
1427     padding: 4px 1em;
1430 .moodle-dialogue-exception .param-stacktrace pre {
1431     display: block;
1432     height: 200px;
1433     overflow: auto;
1436 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1437     display: inline-block;
1438     margin: 4px 0;
1441 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1442     display: inline-block;
1443     width: 50px;
1444     margin: 4px 1em;
1447 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1448     padding-left: 25px;
1449     margin-bottom: 4px;
1450     padding-bottom: 4px;
1453 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1454     opacity: 0.75;
1455     width: 100%;
1456     height: 100%;
1457     top: 0;
1458     left: 0;
1459     background-color: white;
1460     text-align: center;
1461     padding: 10% 0;
1463 /* Apply a default max-height on tooltip text */
1464 .moodle-dialogue .tooltiptext {
1465     max-height: 300px;
1468 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1469     z-index: 3001;
1471     .moodle-dialogue-bd {
1472         overflow: auto;
1473     }
1476 /**
1477  * Chooser Dialogues (moodle-core-chooserdialogue)
1478  *
1479  * This CSS belong to the chooser dialogue which should work both with, and
1480  * without javascript enabled
1481  */
1482 /* Hide the dialog and it's title */
1483 .chooserdialoguebody,
1484 .choosertitle {
1485     display: none;
1488 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1489     margin: 0;
1492 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1493     padding: 0;
1494     background: #f2f2f2;
1496     @include border-bottom-radius(10px);
1498 /* Center the submit buttons within the area */
1499 .choosercontainer #chooseform .submitbuttons {
1500     padding: 0.7em 0;
1501     text-align: center;
1503 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1505 @media (max-height: 639px) {
1506     .ios.safari .choosercontainer #chooseform .submitbuttons {
1507         padding: 45px 0;
1508     }
1511 .choosercontainer #chooseform .submitbuttons input {
1512     min-width: 100px;
1513     margin: 0 0.5em;
1515 /* Various settings for the options area */
1516 .choosercontainer #chooseform .options {
1517     position: relative;
1518     border-bottom: 1px solid #bbb;
1520 /* Only set these options if we're showing the js container */
1521 .jschooser .choosercontainer #chooseform .alloptions {
1522     overflow-x: hidden;
1523     overflow-y: auto;
1524     max-width: 240px;
1526     .option {
1527         input[type=radio] {
1528             display: inline-block;
1529         }
1531         .typename {
1532             display: inline-block;
1533             width: 55%;
1534         }
1535     }
1537 /* Settings for option rows and option subtypes */
1538 .choosercontainer #chooseform .moduletypetitle,
1539 .choosercontainer #chooseform .option,
1540 .choosercontainer #chooseform .nonoption {
1541     margin-bottom: 0;
1542     padding: 0 1.6em 0 1.6em;
1545 .choosercontainer #chooseform .moduletypetitle {
1546     text-transform: uppercase;
1547     padding-top: 1.2em;
1548     padding-bottom: 0.4em;
1551 .choosercontainer #chooseform .option .typename,
1552 .choosercontainer #chooseform .nonoption .typename {
1553     padding: 0 0 0 0.5em;
1556 .choosercontainer #chooseform .modicon + .typename {
1557     padding-left: 0;
1560 .choosercontainer #chooseform .option input[type=radio],
1561 .choosercontainer #chooseform .option span.typename {
1562     vertical-align: middle;
1565 .choosercontainer #chooseform .option label {
1566     display: block;
1567     margin: 0;
1568     padding: ($spacer / 2) 0;
1569     border-bottom: 1px solid #fff;
1572 .choosercontainer #chooseform .option .icon {
1573     margin: 0;
1574     padding: 0 $spacer;
1577 .choosercontainer #chooseform .nonoption {
1578     padding-left: 2.7em;
1579     padding-top: 0.3em;
1580     padding-bottom: 0.1em;
1583 .choosercontainer #chooseform .subtype {
1584     margin-bottom: 0;
1585     padding: 0 1.6em 0 3.2em;
1588 .choosercontainer #chooseform .subtype .typename {
1589     margin: 0 0 0 0.2em;
1591 /* The instruction/help area */
1592 .jschooser .choosercontainer #chooseform .instruction,
1593 .jschooser .choosercontainer #chooseform .typesummary {
1594     display: none;
1595     position: absolute;
1596     top: 0;
1597     right: 0;
1598     bottom: 0;
1599     left: 240px;
1600     margin: 0;
1601     padding: 1.6em;
1602     background-color: #fff;
1603     overflow-x: hidden;
1604     overflow-y: auto;
1605     line-height: 2em;
1607 /* Selected option settings */
1608 .jschooser .choosercontainer #chooseform .instruction,
1609 .choosercontainer #chooseform .selected .typesummary {
1610     display: block;
1613 .choosercontainer #chooseform .selected {
1614     background-color: #fff;
1615     margin-top: -1px;
1616     padding-top: 1px;
1619 .chooserdialogue-course-modchooser .modicon .icon {
1620     width: 24px;
1621     height: 24px;
1624 @include media-breakpoint-down(xs) {
1625     .jsenabled .choosercontainer #chooseform .alloptions {
1626         max-width: 100%;
1627     }
1629     .jsenabled .choosercontainer #chooseform .instruction,
1630     .jsenabled .choosercontainer #chooseform .typesummary {
1631         position: static;
1632     }
1635 /* Form element: listing */
1636 .formlistingradio {
1637     padding-bottom: 25px;
1638     padding-right: 10px;
1641 .formlistinginputradio {
1642     float: left;
1645 .formlistingmain {
1646     min-height: 225px;
1649 .formlisting {
1650     position: relative;
1651     margin: 15px 0;
1652     padding: 1px 19px 14px;
1653     background-color: white;
1654     border: 1px solid #ddd;
1656     @include border-radius(4px);
1659 .formlistingmore {
1660     position: absolute;
1661     cursor: pointer;
1662     bottom: -1px;
1663     right: -1px;
1664     padding: 3px 7px;
1665     font-size: 12px;
1666     font-weight: bold;
1667     background-color: whitesmoke;
1668     border: 1px solid #ddd;
1669     color: #9da0a4;
1671     @include border-radius(4px 0 4px 0);
1674 .formlistingall {
1675     margin: 15px 0;
1676     padding: 0;
1678     @include border-radius(4px);
1681 .formlistingrow {
1682     cursor: pointer;
1683     border-bottom: 1px solid;
1684     border-color: #e1e1e8;
1685     border-left: 1px solid #e1e1e8;
1686     border-right: 1px solid #e1e1e8;
1687     background-color: #f7f7f9;
1689     @include border-radius(0 0 4px 4px);
1690     padding: 6px;
1691     top: 50%;
1692     left: 50%;
1693     min-height: 34px;
1694     float: left;
1695     width: 150px;
1698 body.jsenabled .formlistingradio {
1699     display: none;
1702 body.jsenabled .formlisting {
1703     display: block;
1706 /* Badges styles */
1707 table.collection {
1708     @extend .table;
1709     @extend .table-bordered;
1710     @extend .table-striped;
1713 table.collection .name {
1714     text-align: left;
1715     vertical-align: middle;
1718 table.collection .awards {
1719     width: 10%;
1720     text-align: center;
1721     vertical-align: middle;
1724 table.collection .criteria {
1725     width: 40%;
1726     text-align: left;
1727     vertical-align: top;
1730 table.collection .badgeimage,
1731 table.collection .status {
1732     width: 15%;
1733     text-align: center;
1734     vertical-align: middle;
1737 table.collection .description {
1738     width: 25%;
1739     text-align: left;
1742 table.collection .actions {
1743     width: 11em;
1744     text-align: center;
1745     vertical-align: middle;
1748 a.criteria-action {
1749     padding: 0 3px;
1750     float: right;
1753 div.criteria-description {
1754     padding: 10px 15px;
1755     margin: 5px 0;
1756     background: none repeat scroll 0 0 #f9f9f9;
1757     border: 1px solid #eee;
1760 ul.badges {
1761     margin: 0;
1762     list-style: none;
1765 .badges li {
1766     position: relative;
1767     display: inline-block;
1768     padding-top: 1em;
1769     text-align: center;
1770     vertical-align: top;
1771     width: 150px;
1774 .badges li .badge-name {
1775     display: block;
1776     padding: 5px;
1779 .badges li > img {
1780     position: absolute;
1783 .badges li .badge-image {
1784     width: 100px;
1785     height: 100px;
1786     left: 10px;
1787     top: 0;
1788     z-index: 1;
1791 .badges li .badge-actions {
1792     position: relative;
1795 .badges li .expireimage {
1796     width: 100px;
1797     height: 100px;
1798     left: 25px;
1799     top: 0;
1800     position: absolute;
1801     z-index: 10;
1802     opacity: 0.85;
1805 #badge-image {
1806     background-color: transparent;
1807     padding: 0;
1808     position: relative;
1809     min-width: 100px;
1810     width: 20%;
1811     display: inline-block;
1812     vertical-align: top;
1813     margin-top: 17px;
1815     .expireimage {
1816         width: 100px;
1817         height: 100px;
1818         left: 0;
1819         top: 0;
1820         opacity: 0.85;
1821         position: absolute;
1822         z-index: 10;
1823     }
1825     .singlebutton {
1826         padding-top: 5px;
1828         input {
1829             margin-left: 0;
1830         }
1831     }
1834 #badge-details {
1835     display: inline-block;
1836     width: 79%;
1839 #badge-overview dl,
1840 #badge-details dl {
1841     margin: 0;
1843     dt,
1844     dd {
1845         vertical-align: top;
1846         padding: 3px 0;
1847     }
1849     dt {
1850         clear: both;
1851         display: inline-block;
1852         width: 20%;
1853         min-width: 100px;
1854     }
1856     dd {
1857         display: inline-block;
1858         width: 79%;
1859         margin-left: 1%;
1860     }
1863 .badge-profile {
1864     vertical-align: top;
1867 .connected {
1868     @extend .text-success;
1871 .notconnected {
1872     @extend .text-danger;
1875 .connecting {
1876     @extend .text-warning;
1879 #page-badges-award .recipienttable tr td {
1880     vertical-align: top;
1883 #page-badges-award .recipienttable tr td.actions .actionbutton {
1884     margin: 0.3em 0;
1885     padding: 0.5em 0;
1886     width: 100%;
1889 #page-badges-award .recipienttable tr td.existing,
1890 #page-badges-award .recipienttable tr td.potential {
1891     width: 42%;
1894 #issued-badge-table .activatebadge {
1895     display: inline-block;
1898 .statusbox.active {
1899     background-color: $state-success-bg;
1902 .statusbox.inactive {
1903     background-color: $state-warning-bg;
1906 .statusbox {
1907     text-align: center;
1908     margin-bottom: 5px;
1909     padding: 5px;
1912 .statusbox .activatebadge {
1913     display: inline-block;
1916 .statusbox .activatebadge input[type=submit] {
1917     margin: 3px;
1920 .activatebadge {
1921     margin: 0;
1922     text-align: left;
1923     vertical-align: middle;
1926 img#persona_signin {
1927     cursor: pointer;
1930 .addcourse {
1931     float: right;
1934 .invisiblefieldset {
1935     display: inline;
1936     padding: 0;
1937     border-width: 0;
1940 .breadcrumb-nav {
1941     float: left;
1944 .breadcrumb-button .singlebutton div {
1945     margin-right: 0;
1948 .breadcrumb-nav .breadcrumb {
1949     margin: 0;
1951 /** Navbar */
1952 .navbar-brand {
1953     .logo {
1954         display: inline-block;
1955         margin: -$navbar-brand-padding-y 0;
1956     }
1958     .site-name {
1959         display: inline-block;
1960     }
1962     &.has-logo {
1963         .site-name {
1964             margin-left: $spacer / 2;
1965         }
1966     }
1969 @include media-breakpoint-down(xs) {
1970     .navbar {
1971         .navbar-brand {
1972             max-width: 80%;
1973             margin-right: 0;
1975             &.has-logo {
1976                 .site-name {
1977                     display: none;
1978                 }
1979             }
1980         }
1981     }
1984 /** Page header */
1985 #page-header {
1986     .logo {
1987         margin: $spacer 0;
1988     }
1991 /** Header. */
1992 header {
1993     .collapse.in,
1994     .collapsing {
1995         display: block;
1996         clear: both;
1997     }
2000 /** Header-bar styles **/
2001 .page-context-header {
2002     // We need to be explicit about the height of the header.
2003     $pageHeaderHeight: 140px;
2005     // Do not remove these rules.
2006     overflow: hidden;
2008     .page-header-image,
2009     .page-header-headings {
2010         display: block;
2011         position: relative;
2012     }
2014     .page-header-image {
2015         float: left;
2016         margin-right: 1em;
2017         margin-bottom: 1em;
2018     }
2020     .page-header-headings,
2021     .header-button-group {
2022         position: relative;
2023         line-height: 24px;
2024         vertical-align: middle;
2025     }
2027     .header-button-group {
2028         display: block;
2029         float: left;
2031         a {
2032             position: relative;
2034             // Don't touch it unless you know exactly what you are doing.
2035             top: -0.4em;
2036         }
2037     }
2040 ul.dragdrop-keyboard-drag li {
2041     list-style-type: none;
2044 a.disabled:hover,
2045 a.disabled {
2046     text-decoration: none;
2047     cursor: default;
2048     font-style: italic;
2049     color: #808080;
2052 body.lockscroll {
2053     height: 100%;
2054     overflow: hidden;
2057 .progressbar_container {
2058     max-width: 500px;
2059     margin: 0 auto;
2062 /* IE10 only fix for calendar titling */
2063 .ie10 .yui3-calendar-header-label {
2064     display: inline-block;
2067 dd:before,
2068 dd:after {
2069     display: block;
2070     content: " ";
2073 dd:after {
2074     clear: both;
2077 // Active tabs with links should have a different
2078 // cursor to indicate they are clickable.
2079 .nav-tabs > .active > a[href],
2080 .nav-tabs > .active > a[href]:hover,
2081 .nav-tabs > .active > a[href]:focus {
2082     cursor: pointer;
2085 .inplaceeditable {
2086     &.inplaceeditingon {
2087         position: relative;
2089         .editinstructions {
2090             margin-top: -30px;
2091             font-weight: normal;
2092             margin-right: 0;
2093             margin-left: 0;
2094             left: 0;
2095             right: auto;
2096             white-space: nowrap;
2097         }
2099         input {
2100             width: 330px;
2101             height: 16px;
2102             vertical-align: text-bottom;
2103             margin-bottom: 0;
2104         }
2106         select {
2107             margin-bottom: 0;
2108         }
2109     }
2111     .quickediticon img {
2112         opacity: 0.2;
2113     }
2115     .quickeditlink {
2116         color: inherit;
2117         text-decoration: inherit;
2118     }
2120     &:hover .quickeditlink .quickediticon img,
2121     .quickeditlink:focus .quickediticon img {
2122         opacity: 1;
2123     }
2125     &.inplaceeditable-toggle .quickediticon {
2126         display: none;
2127     }
2130 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2131     margin-top: -20px;
2133 // Reset for ul.
2134 ul {
2135     padding-left: 1rem;
2138 /* YUI 2 Tree View */
2139 /*rtl:raw:
2140 .ygtvtn,
2141 .ygtvtm,
2142 .ygtvtmh,
2143 .ygtvtmhh,
2144 .ygtvtp,
2145 .ygtvtph,
2146 .ygtvtphh,
2147 .ygtvln,
2148 .ygtvlm,
2149 .ygtvlmh,
2150 .ygtvlmhh,
2151 .ygtvlp,
2152 .ygtvlph,
2153 .ygtvlphh,
2154 .ygtvdepthcell,
2155 .ygtvok,
2156 .ygtvok:hover,
2157 .ygtvcancel,
2158 .ygtvcancel:hover {
2159     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
2161 */