MDL-55799 inplace_editable: add form-control class to fields
[moodle.git] / theme / boost / scss / moodle / core.scss
1 /* core.less */
3 #region-main > .card {
4     overflow-x: auto;
5     overflow-y: visible;
6     min-height: 45rem;
7 }
9 .context-header-settings-menu,
10 .region-main-settings-menu {
11     float: right;
12     width: 4em;
13     height: 2em;
14     display: block;
15 }
17 .context-header-settings-menu .dropdown-toggle > .icon,
18 .region-main-settings-menu .dropdown-toggle > .icon {
19     height: 24px;
20     width: auto;
21 }
23 /** Page layout CSS starts **/
24 .layout-option-noheader #page-header,
25 .layout-option-nonavbar #page-navbar,
26 .layout-option-nofooter #page-footer,
27 .layout-option-nocourseheader .course-content-header,
28 .layout-option-nocoursefooter .course-content-footer {
29     display: none;
30 }
32 /** Page layout CSS ends **/
34 .mdl-left {
35     text-align: left;
36 }
38 .mdl-right {
39     text-align: right;
40 }
42 /*rtl:ignore*/
43 .text-ltr {
44     direction: ltr !important; /* stylelint-disable-line declaration-no-important */
45 }
47 #add,
48 #remove,
49 .centerpara,
50 .mdl-align {
51     text-align: center;
52 }
54 a.dimmed,
55 a.dimmed:link,
56 a.dimmed:visited,
57 a.dimmed_text,
58 a.dimmed_text:link,
59 a.dimmed_text:visited,
60 .dimmed_text,
61 .dimmed_text a,
62 .dimmed_text a:link,
63 .dimmed_text a:visited,
64 .usersuspended,
65 .usersuspended a,
66 .usersuspended a:link,
67 .usersuspended a:visited,
68 .dimmed_category,
69 .dimmed_category a {
70     @extend .text-muted;
71 }
73 .activity.label .dimmed_text {
74     opacity: 0.5;
75 }
77 .unlist,
78 .unlist li,
79 .inline-list,
80 .inline-list li,
81 .block .list,
82 .block .list li,
83 .section li.activity,
84 .section li.movehere,
85 .tabtree li {
86     list-style: none;
87     margin: 0;
88     padding: 0;
89 }
91 .inline,
92 .inline-list li {
93     display: inline;
94 }
96 .notifytiny {
97     font-size: $font-size-xs;
98 }
100 .notifytiny li,
101 .notifytiny td {
102     font-size: 100%;
105 .red,
106 .notifyproblem {
107     @extend .text-warning;
110 .green,
111 .notifysuccess {
112     @extend .text-success;
115 .highlight {
116     @extend .text-info;
119 .reportlink {
120     text-align: right;
123 a.autolink.glossary:hover {
124     cursor: help;
126 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
127 .collapsibleregioncaption {
128     white-space: nowrap;
131 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
132     cursor: pointer;
135 .collapsibleregioncaption img {
136     vertical-align: middle;
139 .jsenabled .hiddenifjs {
140     display: none;
143 .visibleifjs {
144     display: none;
147 .jsenabled .visibleifjs {
148     display: inline;
151 .jsenabled .collapsibleregion {
152     overflow: hidden;
155 .jsenabled .collapsed .collapsibleregioninner {
156     visibility: hidden;
159 .collapsible-actions {
160     display: none;
161     text-align: right;
164 .jsenabled .collapsible-actions {
165     display: block;
168 .collapsible-actions .collapseexpand {
169     padding-left: 20px;
170     background: url([[pix:t/collapsed]]) 2px center no-repeat;
172 /*rtl:raw:
173 .collapsible-actions .collapseexpand {
174     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
176 */
177 .collapsible-actions .collapse-all {
178     background-image: url([[pix:t/expanded]]);
181 .yui-overlay .yui-widget-bd {
182     background-color: #ffee69;
183     border: 1px solid #a6982b;
184     border-top-color: #d4c237;
185     color: #000;
186     left: 0;
187     padding: 2px 5px;
188     position: relative;
189     top: 0;
190     z-index: 1;
193 .clearer {
194     background: transparent;
195     border-width: 0;
196     clear: both;
197     display: block;
198     height: 1px;
199     margin: 0;
200     padding: 0;
203 .bold,
204 .warning,
205 .errorbox .title,
206 .pagingbar .title,
207 .pagingbar .thispage {
208     font-weight: bold;
211 img.userpicture {
212     margin-right: 0.5rem;
215 img.resize {
216     height: 1em;
217     width: 1em;
220 .action-menu .dropdown-toggle {
221     text-decoration: none;
224 .action-menu {
225     white-space: nowrap;
228 .action-menu .userpicture {
229     width: auto;
230     height: auto;
231     margin-left: 1rem;
234 .block img.resize,
235 .breadcrumb img.resize {
236     height: 0.9em;
237     width: 0.8em;
239 /* Icon styles */
240 img.activityicon {
241     height: 24px;
242     width: 24px;
243     vertical-align: middle;
246 .headermain {
247     font-weight: bold;
250 #maincontent {
251     display: block;
252     height: 1px;
253     overflow: hidden;
256 img.uihint {
257     cursor: help;
260 #addmembersform table {
261     margin-left: auto;
262     margin-right: auto;
265 table.flexible .emptyrow {
266     display: none;
269 form.popupform,
270 form.popupform div {
271     display: inline;
274 .arrow_button input {
275     overflow: hidden;
277 .no-overflow {
278     overflow: auto;
281 .no-overflow > .generaltable {
282     margin-bottom: 0;
284 // Accessibility features
286 // Accessibility: text 'seen' by screen readers but not visual users.
287 .accesshide {
288     position: absolute;
289     left: -10000px;
290     font-weight: normal;
291     font-size: 1em;
294 span.hide,
295 div.hide {
296     display: none;
298 // Accessibility: Skip block link, for keyboard-only users.
299 a.skip-block,
300 a.skip {
301     position: absolute;
302     top: -1000em;
303     font-size: 0.85em;
304     text-decoration: none;
307 a.skip-block:focus,
308 a.skip-block:active,
309 a.skip:focus,
310 a.skip:active {
311     position: static;
312     display: block;
315 .skip-block-to {
316     display: block;
317     height: 1px;
318     overflow: hidden;
320 // Blogs
321 .addbloglink {
322     text-align: center;
325 .blog_entry .audience {
326     text-align: right;
327     padding-right: 4px;
330 .blog_entry .tags {
331     margin-top: 15px;
334 .blog_entry .content {
335     margin-left: 43px;
337 // Group
338 #page-group-index #groupeditform {
339     text-align: center;
342 #doc-contents h1 {
343     margin: 1em 0 0 0;
346 #doc-contents ul {
347     margin: 0;
348     padding: 0;
349     width: 90%;
352 #doc-contents ul li {
353     list-style-type: none;
356 .groupmanagementtable td {
357     vertical-align: top;
360 .groupmanagementtable #existingcell,
361 .groupmanagementtable #potentialcell {
362     width: 42%;
365 .groupmanagementtable #buttonscell {
366     width: 16%;
369 .groupmanagementtable #buttonscell p.arrow_button input {
370     width: auto;
371     min-width: 80%;
372     margin: 0 auto;
375 .groupmanagementtable #removeselect_wrapper,
376 .groupmanagementtable #addselect_wrapper {
377     width: 100%;
380 .groupmanagementtable #removeselect_wrapper label,
381 .groupmanagementtable #addselect_wrapper label {
382     font-weight: normal;
385 #group-usersummary {
386     width: 14em;
389 .groupselector {
390     margin-top: 3px;
391     margin-bottom: 3px;
392     display: inline-block;
395 .groupselector label {
396     display: inline-block;
399 // Login
400 .login-page {
401     [name="username"] {
402         margin-bottom: -1px;
403         border-bottom-right-radius: 0;
404         border-bottom-left-radius: 0;
405     }
407     [type="password"] {
408         margin-bottom: 10px;
409         border-top-left-radius: 0;
410         border-top-right-radius: 0;
411     }
414 // Notes
415 .notepost {
416     margin-bottom: 1em;
419 .notepost .userpicture {
420     float: left;
421     margin-right: 5px;
424 .notepost .content,
425 .notepost .footer {
426     clear: both;
429 .notesgroup {
430     margin-left: 20px;
433 // My Moodle
434 .path-my .coursebox {
435     margin: $spacer-y 0;
436     padding: 0;
438     .overview {
439         margin: 15px 30px 10px 30px;
440     }
443 .path-my .coursebox .info {
444     float: none;
445     margin: 0;
448 // Modules
449 .mod_introbox {
450     padding: 10px;
453 table.mod_index {
454     width: 100%;
457 // Comments
458 .comment-ctrl {
459     font-size: 12px;
460     display: none;
461     margin: 0;
462     padding: 0;
465 .comment-ctrl h5 {
466     margin: 0;
467     padding: 5px;
470 .comment-area {
471     max-width: 400px;
472     padding: 5px;
475 .comment-area textarea {
476     width: 100%;
477     overflow: auto;
479     &.fullwidth {
480         -webkit-box-sizing: border-box;
481         -moz-box-sizing: border-box;
482         box-sizing: border-box;
483     }
486 .comment-area .fd {
487     text-align: right;
490 .comment-meta span {
491     color: gray;
494 .comment-link img {
495     vertical-align: text-bottom;
498 .comment-list {
499     font-size: 11px;
500     overflow: auto;
501     list-style: none;
502     padding: 0;
503     margin: 0;
506 .comment-list li {
507     margin: 2px;
508     list-style: none;
509     margin-bottom: 5px;
510     clear: both;
511     padding: .3em;
512     position: relative;
515 .comment-list li.first {
516     display: none;
519 .comment-paging {
520     text-align: center;
523 .comment-paging .pageno {
524     padding: 2px;
527 .comment-paging .curpage {
528     border: 1px solid #ccc;
531 .comment-message .picture {
532     width: 20px;
533     float: left;
536 .comment-message .text {
537     margin: 0;
538     padding: 0;
541 .comment-message .text p {
542     padding: 0;
543     margin: 0 18px 0 0;
546 .comment-delete {
547     position: absolute;
548     top: 0;
549     right: 0;
550     margin: .3em;
553 .comment-report-selectall {
554     display: none;
557 .comment-link {
558     display: none;
561 .jsenabled .comment-link {
562     display: block;
565 .jsenabled .showcommentsnonjs {
566     display: none;
569 .jsenabled .comment-report-selectall {
570     display: inline;
572 /**
573 * Completion progress report
574 */
575 .completion-expired {
576     @extend .text-warning;
579 .completion-expected {
580     font-size: $font-size-xs;
583 .completion-sortchoice,
584 .completion-identifyfield {
585     font-size: $font-size-xs;
586     vertical-align: bottom;
589 .completion-progresscell {
590     text-align: right;
593 .completion-expired .completion-expected {
594     font-weight: bold;
596 /**
597 * Tags
598 */
599 img.user-image {
600     height: 100px;
601     width: 100px;
604 #tag-search-box {
605     text-align: center;
606     margin: 10px auto;
609 .path-tag .tag-index-items .tagarea {
610     border: 1px solid #e3e3e3;
611     border-radius: 4px;
612     padding: 10px;
613     margin-top: 10px;
616 .path-tag .tag-index-items .tagarea h3 {
617     display: block;
618     padding: 3px 0 10px 0;
619     margin: 0;
620     font-size: 1.1em;
621     font-weight: bold;
622     line-height: 20px;
623     color: #999;
624     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
625     text-transform: uppercase;
626     word-wrap: break-word;
627     border-bottom: solid 1px #e3e3e3;
628     margin-bottom: 10px;
631 .path-tag .tagarea .controls,
632 .path-tag .tagarea .taggeditems {
633     @include clearfix();
636 .path-tag .tagarea .controls,
637 .path-tag .tag-backtoallitems {
638     text-align: center;
641 .path-tag .tagarea .controls .gotopage.nextpage {
642     float: right;
645 .path-tag .tagarea .controls .gotopage.prevpage {
646     float: left;
649 .path-tag .tagarea .controls .exclusivemode {
650     display: inline-block;
653 .path-tag .tagarea .controls.controls-bottom {
654     margin-top: 5px;
657 .path-tag .tagarea .controls .gotopage.nextpage::after {
658     padding-right: 5px;
659     padding-left: 5px;
660     content: "»";
663 .path-tag .tagarea .controls .gotopage.prevpage::before {
664     padding-right: 5px;
665     padding-left: 5px;
666     content: "«";
669 span.flagged-tag,
670 tr.flagged-tag,
671 span.flagged-tag a,
672 tr.flagged-tag a {
673     @extend .text-warning;
676 .tag-management-table td,
677 .tag-management-table th {
678     vertical-align: middle;
679     padding: 4px;
682 .tag-management-table .inplaceeditable.inplaceeditingon input {
683     width: 150px;
686 .path-admin-tag .addstandardtags {
687     float: right;
689     img {
690         margin: 0 5px;
691     }
694 .path-tag .tag-relatedtags {
695     padding-top: 10px;
698 .path-tag .tag-management-box {
699     text-align: right;
702 .path-tag .tag-index-toc {
703     padding: 10px;
704     text-align: center;
707 .path-tag .tag-index-toc li,
708 .path-tag .tag-management-box li {
709     margin-left: 5px;
710     margin-right: 5px;
713 .path-tag .tag-management-box li a.edittag {
714     background-image: url([[pix:moodle|i/settings]]);
717 .path-tag .tag-management-box li a.flagasinappropriate {
718     background-image: url([[pix:moodle|i/flagged]]);
721 .path-tag .tag-management-box li a.removefrommyinterests {
722     background-image: url([[pix:moodle|t/delete]]);
725 .path-tag .tag-management-box li a.addtomyinterests {
726     background-image: url([[pix:moodle|t/add]]);
729 .path-tag .tag-management-box li a {
730     background-repeat: no-repeat;
731     background-position: left;
732     padding-left: 17px;
735 .tag_feed.media-list .media .itemimage {
736     float: left;
739 .tag_feed.media-list .media .itemimage img {
740     height: 35px;
741     width: 35px;
744 .tag_feed.media-list .media .media-body {
745     padding-right: 10px;
746     padding-left: 10px;
749 .tag_feed .media .muted a {
750     @extend .text-muted;
753 .tag_cloud {
754     text-align: center;
757 .tag_cloud .inline-list li {
758     padding: 0 0.2em;
761 .tag_cloud .tag_overflow {
762     margin-top: 1em;
763     font-style: italic;
766 .tag_cloud .s20 {
767     font-size: 2.7em;
770 .tag_cloud .s19 {
771     font-size: 2.6em;
774 .tag_cloud .s18 {
775     font-size: 2.5em;
778 .tag_cloud .s17 {
779     font-size: 2.4em;
782 .tag_cloud .s16 {
783     font-size: 2.3em;
786 .tag_cloud .s15 {
787     font-size: 2.2em;
790 .tag_cloud .s14 {
791     font-size: 2.1em;
794 .tag_cloud .s13 {
795     font-size: 2em;
798 .tag_cloud .s12 {
799     font-size: 1.9em;
802 .tag_cloud .s11 {
803     font-size: 1.8em;
806 .tag_cloud .s10 {
807     font-size: 1.7em;
810 .tag_cloud .s9 {
811     font-size: 1.6em;
814 .tag_cloud .s8 {
815     font-size: 1.5em;
818 .tag_cloud .s7 {
819     font-size: 1.4em;
822 .tag_cloud .s6 {
823     font-size: 1.3em;
826 .tag_cloud .s5 {
827     font-size: 1.2em;
830 .tag_cloud .s4 {
831     font-size: 1.1em;
834 .tag_cloud .s3 {
835     font-size: 1em;
838 .tag_cloud .s2 {
839     font-size: 0.9em;
842 .tag_cloud .s1 {
843     font-size: 0.8em;
846 .tag_cloud .s0 {
847     font-size: 0.7em;
850 .tag_list ul {
851     display: inline;
854 .tag_list.hideoverlimit .overlimit {
855     display: none;
858 .tag_list .tagmorelink {
859     display: none;
862 .tag_list.hideoverlimit .tagmorelink {
863     display: inline;
866 .tag_list.hideoverlimit .taglesslink {
867     display: none;
870 /**
871 * Web Service
872 */
873 #webservice-doc-generator td {
874     text-align: left;
875     border: 0 solid black;
877 /**
878 * Smart Select Element
879 */
880 .smartselect {
881     position: absolute;
884 .smartselect .smartselect_mask {
885     background-color: #fff;
888 .smartselect ul {
889     padding: 0;
890     margin: 0;
893 .smartselect ul li {
894     list-style: none;
897 .smartselect .smartselect_menu {
898     margin-right: 5px;
901 .safari .smartselect .smartselect_menu {
902     margin-left: 2px;
905 .smartselect .smartselect_menu,
906 .smartselect .smartselect_submenu {
907     border: 1px solid #000;
908     background-color: #fff;
909     display: none;
912 .smartselect .smartselect_menu.visible,
913 .smartselect .smartselect_submenu.visible {
914     display: block;
917 .smartselect .smartselect_menu_content ul li {
918     position: relative;
919     padding: 2px 5px;
922 .smartselect .smartselect_menu_content ul li a {
923     color: #333;
924     text-decoration: none;
927 .smartselect .smartselect_menu_content ul li a.selectable {
928     color: inherit;
931 .smartselect .smartselect_submenuitem {
932     background-image: url([[pix:moodle|t/collapsed]]);
933     background-repeat: no-repeat;
934     background-position: 100%;
936 /** Spanning mode */
937 .smartselect.spanningmenu .smartselect_submenu {
938     position: absolute;
939     top: -1px;
940     left: 100%;
943 .smartselect.spanningmenu .smartselect_submenu a {
944     white-space: nowrap;
945     padding-right: 16px;
948 .smartselect.spanningmenu .smartselect_menu_content ul li a.selectable:hover {
949     text-decoration: underline;
951 /** Compact mode */
952 .smartselect.compactmenu .smartselect_submenu {
953     position: relative;
954     margin: 2px -3px;
955     margin-left: 10px;
956     display: none;
957     border-width: 0;
958     z-index: 1010;
961 .smartselect.compactmenu .smartselect_submenu.visible {
962     display: block;
965 .smartselect.compactmenu .smartselect_menu {
966     z-index: 1000;
967     overflow: hidden;
970 .smartselect.compactmenu .smartselect_submenu .smartselect_submenu {
971     z-index: 1020;
974 .smartselect.compactmenu .smartselect_submenuitem:hover > .smartselect_menuitem_label {
975     font-weight: bold;
977 /**
978 * Registration
979 */
980 #page-admin-registration-register .registration_textfield {
981     width: 300px;
983 /**
984 * Enrol
985 */
986 .userenrolment {
987     width: 100%;
988     border-collapse: collapse;
991 .userenrolment tr {
992     vertical-align: top;
995 .userenrolment td {
996     padding: 0;
997     height: 41px;
1000 .userenrolment .subfield {
1001     margin-right: 5px;
1004 .userenrolment .col_userdetails .subfield {
1005     margin-left: 40px;
1008 .userenrolment .col_userdetails .subfield_picture {
1009     float: left;
1010     margin-left: 0;
1013 .userenrolment .col_lastseen {
1014     width: 150px;
1017 .userenrolment .col_role {
1018     width: 262px;
1021 .userenrolment .col_role .roles,
1022 .userenrolment .col_group .groups {
1023     margin-right: 30px;
1026 .userenrolment .col_role .role,
1027 .userenrolment .col_group .group {
1028     float: left;
1029     padding: 3px;
1030     margin: 3px;
1031     white-space: nowrap;
1034 .userenrolment .col_role .role a,
1035 .userenrolment .col_group .group a {
1036     margin-left: 3px;
1037     cursor: pointer;
1040 .userenrolment .col_role .addrole,
1041 .userenrolment .col_group .addgroup {
1042     float: right;
1043     padding: 3px;
1044     margin: 3px;
1046     > a:hover {
1047         border-bottom: 1px solid #666;
1048     }
1051 .userenrolment .col_role .addrole img,
1052 .userenrolment .col_group .addgroup img {
1053     vertical-align: baseline;
1056 .userenrolment .hasAllRoles .col_role .addrole {
1057     display: none;
1060 .userenrolment .col_enrol .enrolment {
1061     float: left;
1062     padding: 3px;
1063     margin: 3px;
1066 .userenrolment .col_enrol .enrolment a {
1067     float: right;
1068     margin-left: 3px;
1071 #page-enrol-users {
1072     .enrol_user_buttons {
1073         text-align: right;
1075     }
1077     #filterform {
1078         @extend .card;
1079         @extend .card-block;
1080     }
1082     .user-enroller-panel .uep-search-results .user .details {
1083         width: 237px;
1084     }
1086     .user-enroller-panel .uep-search-results .cohort .details {
1087         width: 237px;
1088     }
1091 #page-enrol-users .enrol-users-page-action input {
1092     margin-left: 0;
1095 .corelightbox {
1096     background-color: #ccc;
1097     position: absolute;
1098     top: 0;
1099     left: 0;
1100     width: 100%;
1101     height: 100%;
1102     text-align: center;
1105 .corelightbox img {
1106     position: fixed;
1107     top: 50%;
1108     left: 50%;
1111 .mod-indent-outer {
1112     display: table;
1115 .mod-indent {
1116     display: table-cell;
1119 .label .mod-indent {
1120     float: left;
1121     padding-top: 20px;
1123 $mod-indent-size: 30px;
1124 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1126 @for $i from 1 through 16 {
1127     $width: ($i * $mod-indent-size);
1129     .mod-indent-#{$i} {
1130         width: $width;
1131     }
1134 .mod-indent-huge {
1135     width: (16 * $mod-indent-size);
1138 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1139 .resourcecontent .mediaplugin_mp3 object {
1140     height: 25px;
1141     width: 600px;
1144 .resourcecontent audio.mediaplugin_html5audio {
1145     width: 600px;
1147 /** Large resource images should avoid hidden overflow **/
1148 .resourceimage {
1149     max-width: 100%;
1151 /* Audio player size in 'inline' mode (can only change width, as above) */
1152 .mediaplugin_mp3 object {
1153     height: 15px;
1154     width: 300px;
1157 audio.mediaplugin_html5audio {
1158     width: 300px;
1160 /* TinyMCE moodle media preview frame should not have padding */
1161 .core_media_preview.pagelayout-embedded #content {
1162     padding: 0;
1165 .core_media_preview.pagelayout-embedded #maincontent {
1166     height: 0;
1169 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1170     padding: 0;
1171     margin: 0;
1172     min-width: 0;
1173     background: none;
1176 .path-rating .ratingtable {
1177     width: 100%;
1178     margin-bottom: 1em;
1181 .path-rating .ratingtable th.rating {
1182     width: 100%;
1185 .path-rating .ratingtable td.rating,
1186 .path-rating .ratingtable td.time {
1187     white-space: nowrap;
1188     text-align: center;
1191 .initialbar {
1192     a,
1193     strong {
1194         padding-left: 3px;
1195         padding-right: 3px;
1196     }
1199 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1200 .moodle-dialogue-base .moodle-dialogue-lightbox {
1201     background-color: $gray;
1204 .moodle-dialogue-base .hidden,
1205 .moodle-dialogue-base .moodle-dialogue-hidden {
1206     display: none;
1209 .no-scrolling {
1210     overflow: hidden;
1213 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1214     left: 0;
1215     top: 0;
1216     right: 0;
1217     bottom: -50px;
1218     position: fixed;
1221 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1222     overflow: auto;
1225 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1226     width: 28px;
1227     height: 16px;
1228     background-size: 100%;
1231 .moodle-dialogue-base .moodle-dialogue-wrap {
1232     background-color: #fff;
1233     border: 1px solid #ccc;
1236 // Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1237 // it for a reason (conflicts with jquery .show()).
1238 .modal.show {
1239     display: block;
1242 .moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content {
1243     @extend .modal-content;
1246 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1247     @extend .modal-header;
1250 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1251     // Undo some YUI damage.
1252     min-height: 3rem;
1253     color: initial;
1254     background: initial;
1255     font-size: 1.5rem;
1256     line-height: 1.5;
1259 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1260     @extend .modal-title;
1263 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1264     padding: $spacer;
1267 .moodle-dialogue-base .closebutton {
1268     @extend .close;
1269     box-shadow: none;
1270     &::after {
1271         content: "×";
1272     }
1275 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1276     @extend .modal-body;
1279 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1280     overflow: auto;
1281     position: absolute;
1282     top: 0;
1283     bottom: 50px;
1284     left: 0;
1285     right: 0;
1286     margin: 0;
1287     border: 0;
1290 .moodle-dialogue-confirm .confirmation-dialogue {
1291     text-align: center;
1294 .moodle-dialogue-confirm .confirmation-dialogue input {
1295     text-align: center;
1298 .moodle-dialogue-exception .moodle-exception-message {
1299     text-align: center;
1302 .moodle-dialogue-exception .moodle-exception-param label {
1303     font-weight: bold;
1306 .moodle-dialogue-exception .param-stacktrace label {
1307     background-color: #eee;
1308     border: 1px solid #ccc;
1309     border-bottom-width: 0;
1312 .moodle-dialogue-exception .param-stacktrace pre {
1313     border: 1px solid #ccc;
1314     background-color: #fff;
1317 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1318     color: navy;
1319     font-size: $font-size-sm;
1322 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1323     @extend .text-warning;
1324     font-size: $font-size-sm;
1327 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1328     color: #333;
1329     font-size: 90%;
1330     border-bottom: 1px solid #eee;
1333 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1334     @extend .modal-footer;
1337 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1338     display: none;
1341 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1342     // Undo some YUI damage.
1343     background: initial;
1346 .moodle-dialogue-confirm .confirmation-message {
1347     margin: 0.5em 1em;
1350 .moodle-dialogue-confirm .confirmation-dialogue input {
1351     min-width: 80px;
1354 .moodle-dialogue-exception .moodle-exception-message {
1355     margin: 1em;
1358 .moodle-dialogue-exception .moodle-exception-param {
1359     margin-bottom: 0.5em;
1362 .moodle-dialogue-exception .moodle-exception-param label {
1363     width: 150px;
1366 .moodle-dialogue-exception .param-stacktrace label {
1367     display: block;
1368     margin: 0;
1369     padding: 4px 1em;
1372 .moodle-dialogue-exception .param-stacktrace pre {
1373     display: block;
1374     height: 200px;
1375     overflow: auto;
1378 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1379     display: inline-block;
1380     margin: 4px 0;
1383 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1384     display: inline-block;
1385     width: 50px;
1386     margin: 4px 1em;
1389 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1390     padding-left: 25px;
1391     margin-bottom: 4px;
1392     padding-bottom: 4px;
1395 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1396     opacity: 0.75;
1397     width: 100%;
1398     height: 100%;
1399     top: 0;
1400     left: 0;
1401     background-color: white;
1402     text-align: center;
1403     padding: 10% 0;
1405 /* Apply a default max-height on tooltip text */
1406 .moodle-dialogue .tooltiptext {
1407     max-height: 300px;
1410 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1411     z-index: 3001;
1413     .moodle-dialogue-bd {
1414         overflow: auto;
1415     }
1418 /**
1419  * Chooser Dialogues (moodle-core-chooserdialogue)
1420  *
1421  * This CSS belong to the chooser dialogue which should work both with, and
1422  * without javascript enabled
1423  */
1424 /* Hide the dialog and it's title */
1425 .chooserdialoguebody,
1426 .choosertitle {
1427     display: none;
1430 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1431     margin: 0;
1434 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1435     padding: 0;
1436     background: #f2f2f2;
1438     @include border-bottom-radius(10px);
1440 /* Center the submit buttons within the area */
1441 .choosercontainer #chooseform .submitbuttons {
1442     padding: 0.7em 0;
1443     text-align: center;
1445 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1447 @media (max-height: 639px) {
1448     .ios.safari .choosercontainer #chooseform .submitbuttons {
1449         padding: 45px 0;
1450     }
1453 .choosercontainer #chooseform .submitbuttons input {
1454     min-width: 100px;
1455     margin: 0 0.5em;
1457 /* Various settings for the options area */
1458 .choosercontainer #chooseform .options {
1459     position: relative;
1460     border-bottom: 1px solid #bbb;
1462 /* Only set these options if we're showing the js container */
1463 .jschooser .choosercontainer #chooseform .alloptions {
1464     overflow-x: hidden;
1465     overflow-y: auto;
1466     max-width: 240px;
1468     .option {
1469         input[type=radio] {
1470             display: inline-block;
1471         }
1473         .typename {
1474             display: inline-block;
1475             width: 55%;
1476         }
1477     }
1479 /* Settings for option rows and option subtypes */
1480 .choosercontainer #chooseform .moduletypetitle,
1481 .choosercontainer #chooseform .option,
1482 .choosercontainer #chooseform .nonoption {
1483     margin-bottom: 0;
1484     padding: 0 1.6em 0 1.6em;
1487 .choosercontainer #chooseform .moduletypetitle {
1488     text-transform: uppercase;
1489     padding-top: 1.2em;
1490     padding-bottom: 0.4em;
1493 .choosercontainer #chooseform .option .typename,
1494 .choosercontainer #chooseform .nonoption .typename {
1495     padding: 0 0 0 0.5em;
1498 .choosercontainer #chooseform .modicon + .typename {
1499     padding-left: 0;
1502 .choosercontainer #chooseform .option input[type=radio],
1503 .choosercontainer #chooseform .option span.typename {
1504     vertical-align: middle;
1507 .choosercontainer #chooseform .option label {
1508     display: block;
1509     margin: 0;
1510     padding: ($spacer / 2) 0;
1511     border-bottom: 1px solid #fff;
1514 .choosercontainer #chooseform .option .icon {
1515     margin: 0;
1516     padding: 0 $spacer;
1519 .choosercontainer #chooseform .nonoption {
1520     padding-left: 2.7em;
1521     padding-top: 0.3em;
1522     padding-bottom: 0.1em;
1525 .choosercontainer #chooseform .subtype {
1526     margin-bottom: 0;
1527     padding: 0 1.6em 0 3.2em;
1530 .choosercontainer #chooseform .subtype .typename {
1531     margin: 0 0 0 0.2em;
1533 /* The instruction/help area */
1534 .jschooser .choosercontainer #chooseform .instruction,
1535 .jschooser .choosercontainer #chooseform .typesummary {
1536     display: none;
1537     position: absolute;
1538     top: 0;
1539     right: 0;
1540     bottom: 0;
1541     left: 240px;
1542     margin: 0;
1543     padding: 1.6em;
1544     background-color: #fff;
1545     overflow-x: hidden;
1546     overflow-y: auto;
1547     line-height: 2em;
1549 /* Selected option settings */
1550 .jschooser .choosercontainer #chooseform .instruction,
1551 .choosercontainer #chooseform .selected .typesummary {
1552     display: block;
1555 .choosercontainer #chooseform .selected {
1556     background-color: #fff;
1557     margin-top: -1px;
1558     padding-top: 1px;
1561 .chooserdialogue-course-modchooser .modicon .icon {
1562     width: 24px;
1563     height: 24px;
1566 @include media-breakpoint-down(xs) {
1567     .jsenabled .choosercontainer #chooseform .alloptions {
1568         max-width: 100%;
1569     }
1571     .jsenabled .choosercontainer #chooseform .instruction,
1572     .jsenabled .choosercontainer #chooseform .typesummary {
1573         position: static;
1574     }
1577 /* Form element: listing */
1578 .formlistingradio {
1579     padding-bottom: 25px;
1580     padding-right: 10px;
1583 .formlistinginputradio {
1584     float: left;
1587 .formlistingmain {
1588     min-height: 225px;
1591 .formlisting {
1592     position: relative;
1593     margin: 15px 0;
1594     padding: 1px 19px 14px;
1595     background-color: white;
1596     border: 1px solid #ddd;
1598     @include border-radius(4px);
1601 .formlistingmore {
1602     position: absolute;
1603     cursor: pointer;
1604     bottom: -1px;
1605     right: -1px;
1606     padding: 3px 7px;
1607     font-size: 12px;
1608     font-weight: bold;
1609     background-color: whitesmoke;
1610     border: 1px solid #ddd;
1611     color: #9da0a4;
1613     @include border-radius(4px 0 4px 0);
1616 .formlistingall {
1617     margin: 15px 0;
1618     padding: 0;
1620     @include border-radius(4px);
1623 .formlistingrow {
1624     cursor: pointer;
1625     border-bottom: 1px solid;
1626     border-color: #e1e1e8;
1627     border-left: 1px solid #e1e1e8;
1628     border-right: 1px solid #e1e1e8;
1629     background-color: #f7f7f9;
1631     @include border-radius(0 0 4px 4px);
1632     padding: 6px;
1633     top: 50%;
1634     left: 50%;
1635     min-height: 34px;
1636     float: left;
1637     width: 150px;
1640 body.jsenabled .formlistingradio {
1641     display: none;
1644 body.jsenabled .formlisting {
1645     display: block;
1648 /* Badges styles */
1649 table.collection {
1650     @extend .table;
1651     @extend .table-bordered;
1652     @extend .table-striped;
1655 table.collection .name {
1656     text-align: left;
1657     vertical-align: middle;
1660 table.collection .awards {
1661     width: 10%;
1662     text-align: center;
1663     vertical-align: middle;
1666 table.collection .criteria {
1667     width: 40%;
1668     text-align: left;
1669     vertical-align: top;
1672 table.collection .badgeimage,
1673 table.collection .status {
1674     width: 15%;
1675     text-align: center;
1676     vertical-align: middle;
1679 table.collection .description {
1680     width: 25%;
1681     text-align: left;
1684 table.collection .actions {
1685     width: 11em;
1686     text-align: center;
1687     vertical-align: middle;
1690 a.criteria-action {
1691     padding: 0 3px;
1692     float: right;
1695 div.criteria-description {
1696     padding: 10px 15px;
1697     margin: 5px 0;
1698     background: none repeat scroll 0 0 #f9f9f9;
1699     border: 1px solid #eee;
1702 ul.badges {
1703     margin: 0;
1704     list-style: none;
1707 .badges li {
1708     position: relative;
1709     display: inline-block;
1710     padding-top: 1em;
1711     text-align: center;
1712     vertical-align: top;
1713     width: 150px;
1716 .badges li .badge-name {
1717     display: block;
1718     padding: 5px;
1721 .badges li > img {
1722     position: absolute;
1725 .badges li .badge-image {
1726     width: 100px;
1727     height: 100px;
1728     left: 10px;
1729     top: 0;
1730     z-index: 1;
1733 .badges li .badge-actions {
1734     position: relative;
1737 .badges li .expireimage {
1738     width: 100px;
1739     height: 100px;
1740     left: 25px;
1741     top: 0;
1742     position: absolute;
1743     z-index: 10;
1744     opacity: 0.85;
1747 #badge-image {
1748     background-color: transparent;
1749     padding: 0;
1750     position: relative;
1751     min-width: 100px;
1752     width: 20%;
1753     display: inline-block;
1754     vertical-align: top;
1755     margin-top: 17px;
1757     .expireimage {
1758         width: 100px;
1759         height: 100px;
1760         left: 0;
1761         top: 0;
1762         opacity: 0.85;
1763         position: absolute;
1764         z-index: 10;
1765     }
1767     .singlebutton {
1768         padding-top: 5px;
1770         input {
1771             margin-left: 0;
1772         }
1773     }
1776 #badge-details {
1777     display: inline-block;
1778     width: 79%;
1781 #badge-overview dl,
1782 #badge-details dl {
1783     margin: 0;
1785     dt,
1786     dd {
1787         vertical-align: top;
1788         padding: 3px 0;
1789     }
1791     dt {
1792         clear: both;
1793         display: inline-block;
1794         width: 20%;
1795         min-width: 100px;
1796     }
1798     dd {
1799         display: inline-block;
1800         width: 79%;
1801         margin-left: 1%;
1802     }
1805 .badge-profile {
1806     vertical-align: top;
1809 .connected {
1810     @extend .text-success;
1813 .notconnected {
1814     @extend .text-danger;
1817 .connecting {
1818     @extend .text-warning;
1821 #page-badges-award .recipienttable tr td {
1822     vertical-align: top;
1825 #page-badges-award .recipienttable tr td.actions .actionbutton {
1826     margin: 0.3em 0;
1827     padding: 0.5em 0;
1828     width: 100%;
1831 #page-badges-award .recipienttable tr td.existing,
1832 #page-badges-award .recipienttable tr td.potential {
1833     width: 42%;
1836 #issued-badge-table .activatebadge {
1837     display: inline-block;
1840 .statusbox.active {
1841     background-color: $state-success-bg;
1844 .statusbox.inactive {
1845     background-color: $state-warning-bg;
1848 .statusbox {
1849     text-align: center;
1850     margin-bottom: 5px;
1851     padding: 5px;
1854 .statusbox .activatebadge {
1855     display: inline-block;
1858 .statusbox .activatebadge input[type=submit] {
1859     margin: 3px;
1862 .activatebadge {
1863     margin: 0;
1864     text-align: left;
1865     vertical-align: middle;
1868 img#persona_signin {
1869     cursor: pointer;
1872 .addcourse {
1873     float: right;
1876 .invisiblefieldset {
1877     display: inline;
1878     padding: 0;
1879     border-width: 0;
1882 .breadcrumb-nav {
1883     float: left;
1886 .breadcrumb-button .singlebutton div {
1887     margin-right: 0;
1890 .breadcrumb-nav .breadcrumb {
1891     margin: 0;
1894 /** Page header */
1895 #page-header {
1896     .logo {
1897         margin: $spacer 0;
1898     }
1901 /** Header. */
1902 header {
1903     .collapse.in,
1904     .collapsing {
1905         display: block;
1906         clear: both;
1907     }
1910 /** Header-bar styles **/
1911 .page-context-header {
1912     // We need to be explicit about the height of the header.
1913     $pageHeaderHeight: 140px;
1915     // Do not remove these rules.
1916     overflow: hidden;
1918     .page-header-image,
1919     .page-header-headings {
1920         display: block;
1921         position: relative;
1922     }
1924     .page-header-image {
1925         float: left;
1926         margin-right: 1em;
1927         margin-bottom: 1em;
1928     }
1930     .page-header-headings,
1931     .header-button-group {
1932         position: relative;
1933         line-height: 24px;
1934         vertical-align: middle;
1935     }
1937     .header-button-group {
1938         display: block;
1939         float: left;
1941         a {
1942             position: relative;
1944             // Don't touch it unless you know exactly what you are doing.
1945             top: -0.4em;
1946         }
1947     }
1950 ul.dragdrop-keyboard-drag li {
1951     list-style-type: none;
1954 a.disabled:hover,
1955 a.disabled {
1956     text-decoration: none;
1957     cursor: default;
1958     font-style: italic;
1959     color: #808080;
1962 body.lockscroll {
1963     height: 100%;
1964     overflow: hidden;
1967 .progressbar_container {
1968     max-width: 500px;
1969     margin: 0 auto;
1972 /* IE10 only fix for calendar titling */
1973 .ie10 .yui3-calendar-header-label {
1974     display: inline-block;
1977 dd:before,
1978 dd:after {
1979     display: block;
1980     content: " ";
1983 dd:after {
1984     clear: both;
1987 // Active tabs with links should have a different
1988 // cursor to indicate they are clickable.
1989 .nav-tabs > .active > a[href],
1990 .nav-tabs > .active > a[href]:hover,
1991 .nav-tabs > .active > a[href]:focus {
1992     cursor: pointer;
1995 .inplaceeditable {
1996     &.inplaceeditingon {
1997         position: relative;
1999         .editinstructions {
2000             margin-top: -30px;
2001             font-weight: normal;
2002             margin-right: 0;
2003             margin-left: 0;
2004             left: 0;
2005             right: auto;
2006             white-space: nowrap;
2007         }
2009         input {
2010             width: 330px;
2011             vertical-align: text-bottom;
2012             margin-bottom: 0;
2013         }
2015         select {
2016             margin-bottom: 0;
2017         }
2018     }
2020     .quickediticon img {
2021         opacity: 0.2;
2022     }
2024     .quickeditlink {
2025         color: inherit;
2026         text-decoration: inherit;
2027     }
2029     &:hover .quickeditlink .quickediticon img,
2030     .quickeditlink:focus .quickediticon img {
2031         opacity: 1;
2032     }
2034     &.inplaceeditable-toggle .quickediticon {
2035         display: none;
2036     }
2039 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2040     margin-top: -20px;
2043 /** Chart area. */
2044 .chart-area {
2046     .chart-table-data {
2047         display: none;
2048     }
2050     .chart-table {
2051         .chart-output-htmltable caption {
2052             white-space: nowrap;
2053         }
2054         /** When accessible, we display the table only. */
2055         &.accesshide {
2056             .chart-table-expand {
2057                 display: none;
2058             }
2059             .chart-table-data {
2060                 display: block;
2061             }
2062         }
2063     }
2066 // Reset for ul.
2067 ul {
2068     padding-left: 1rem;
2071 /* YUI 2 Tree View */
2072 /*rtl:raw:
2073 .ygtvtn,
2074 .ygtvtm,
2075 .ygtvtmh,
2076 .ygtvtmhh,
2077 .ygtvtp,
2078 .ygtvtph,
2079 .ygtvtphh,
2080 .ygtvln,
2081 .ygtvlm,
2082 .ygtvlmh,
2083 .ygtvlmhh,
2084 .ygtvlp,
2085 .ygtvlph,
2086 .ygtvlphh,
2087 .ygtvdepthcell,
2088 .ygtvok,
2089 .ygtvok:hover,
2090 .ygtvcancel,
2091 .ygtvcancel:hover {
2092     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
2094 */
2096 .hover-tooltip-container {
2097     position: relative;
2099     .hover-tooltip {
2100         opacity: 0;
2101         visibility: hidden;
2102         position: absolute;
2103         left: 50%;
2104         top: calc(-50% - 5px);
2105         transform: translate(-50%, -50%);
2106         background-color: #fff;
2107         border: 1px solid rgba(0, 0, 0, .2);
2108         border-radius: .3rem;
2109         box-sizing: border-box;
2110         padding: 5px;
2111         white-space: nowrap;
2112         transition: opacity 0.15s, visibility 0.15s;
2113         z-index: 1000;
2115         &:before {
2116             content: '';
2117             display: inline-block;
2118             border-left: 8px solid transparent;
2119             border-right: 8px solid transparent;
2120             border-top: 8px solid rgba(0, 0, 0, .2);
2121             position: absolute;
2122             bottom: -8px;
2123             left: calc(50% - 8px);
2124         }
2126         &:after {
2127             content: '';
2128             display: inline-block;
2129             border-left: 7px solid transparent;
2130             border-right: 7px solid transparent;
2131             border-top: 7px solid #fff;
2132             position: absolute;
2133             bottom: -6px;
2134             left: calc(50% - 7px);
2135             z-index: 2;
2136         }
2137     }
2139     &:hover {
2140         .hover-tooltip {
2141             opacity: 1;
2142             visibility: visible;
2143             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2144         }
2145     }
2148 #region-flat-nav {
2149     padding-right: 0;
2150     padding-left: 0;
2151     .nav {
2152         margin-right: $grid-gutter-width / 2;
2153         background-color: $card-bg;
2154     }
2155     @include media-breakpoint-down(sm) {
2156         .nav {
2157             margin-top: $grid-gutter-width;
2158             margin-right: 0;
2159         }
2160     }
2163 $footer-link-color: $brand-primary !default;
2164 #page-footer a {
2165     color: $footer-link-color;
2168 // Make links in a menu clickable anywhere in the row.
2169 .dropdown-item a {
2170     display: block;
2171     width: 100%;
2172     color: $body-color;