Merge branch 'MDL-56657-master' of git://github.com/damyon/moodle
[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 }
22 /** Prevent user notifications overlapping with region main settings menu */
23 #user-notifications {
24     display: block;
25     overflow: hidden;
26 }
28 /** Page layout CSS starts **/
29 .layout-option-noheader #page-header,
30 .layout-option-nonavbar #page-navbar,
31 .layout-option-nofooter #page-footer,
32 .layout-option-nocourseheader .course-content-header,
33 .layout-option-nocoursefooter .course-content-footer {
34     display: none;
35 }
37 /** Page layout CSS ends **/
39 .mdl-left {
40     text-align: left;
41 }
43 .mdl-right {
44     text-align: right;
45 }
47 /*rtl:ignore*/
48 .text-ltr {
49     direction: ltr !important; /* stylelint-disable-line declaration-no-important */
50 }
52 #add,
53 #remove,
54 .centerpara,
55 .mdl-align {
56     text-align: center;
57 }
59 a.dimmed,
60 a.dimmed:link,
61 a.dimmed:visited,
62 a.dimmed_text,
63 a.dimmed_text:link,
64 a.dimmed_text:visited,
65 .dimmed_text,
66 .dimmed_text a,
67 .dimmed_text a:link,
68 .dimmed_text a:visited,
69 .usersuspended,
70 .usersuspended a,
71 .usersuspended a:link,
72 .usersuspended a:visited,
73 .dimmed_category,
74 .dimmed_category a {
75     @extend .text-muted;
76 }
78 .activity.label .dimmed_text {
79     opacity: 0.5;
80 }
82 .unlist,
83 .unlist li,
84 .inline-list,
85 .inline-list li,
86 .block .list,
87 .block .list li,
88 .section li.activity,
89 .section li.movehere,
90 .tabtree li {
91     list-style: none;
92     margin: 0;
93     padding: 0;
94 }
96 .inline,
97 .inline-list li {
98     display: inline;
99 }
101 .notifytiny {
102     font-size: $font-size-xs;
105 .notifytiny li,
106 .notifytiny td {
107     font-size: 100%;
110 .red,
111 .notifyproblem {
112     @extend .text-warning;
115 .green,
116 .notifysuccess {
117     @extend .text-success;
120 .highlight {
121     @extend .text-info;
124 .reportlink {
125     text-align: right;
128 a.autolink.glossary:hover {
129     cursor: help;
131 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
132 .collapsibleregioncaption {
133     white-space: nowrap;
134     min-height: $line-height-base * $font-size-base;
137 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
138     cursor: pointer;
141 .collapsibleregioncaption img {
142     vertical-align: middle;
145 .jsenabled .hiddenifjs {
146     display: none;
149 .visibleifjs {
150     display: none;
153 .jsenabled .visibleifjs {
154     display: inline;
157 .jsenabled .collapsibleregion {
158     overflow: hidden;
159     box-sizing: content-box;
162 .jsenabled .collapsed .collapsibleregioninner {
163     visibility: hidden;
166 .collapsible-actions {
167     display: none;
168     text-align: right;
171 .jsenabled .collapsible-actions {
172     display: block;
175 .collapsible-actions .collapseexpand {
176     padding-left: 20px;
177     background: url([[pix:t/collapsed]]) 2px center no-repeat;
179 /*rtl:raw:
180 .collapsible-actions .collapseexpand {
181     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
183 */
184 .collapsible-actions .collapse-all {
185     background-image: url([[pix:t/expanded]]);
188 .yui-overlay .yui-widget-bd {
189     background-color: #ffee69;
190     border: 1px solid #a6982b;
191     border-top-color: #d4c237;
192     color: #000;
193     left: 0;
194     padding: 2px 5px;
195     position: relative;
196     top: 0;
197     z-index: 1;
200 .clearer {
201     background: transparent;
202     border-width: 0;
203     clear: both;
204     display: block;
205     height: 1px;
206     margin: 0;
207     padding: 0;
210 .bold,
211 .warning,
212 .errorbox .title,
213 .pagingbar .title,
214 .pagingbar .thispage {
215     font-weight: bold;
218 img.userpicture {
219     margin-right: 0.5rem;
222 img.resize {
223     height: 1em;
224     width: 1em;
227 .action-menu .dropdown-toggle {
228     text-decoration: none;
231 .action-menu {
232     white-space: nowrap;
235 .action-menu .userpicture {
236     width: auto;
237     height: auto;
238     margin-left: 1rem;
241 .block img.resize,
242 .breadcrumb img.resize {
243     height: 0.9em;
244     width: 0.8em;
246 /* Icon styles */
247 img.activityicon {
248     height: 24px;
249     width: 24px;
250     vertical-align: middle;
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 .no-overflow {
285     overflow: auto;
288 .no-overflow > .generaltable {
289     margin-bottom: 0;
291 // Accessibility features
293 // Accessibility: text 'seen' by screen readers but not visual users.
294 .accesshide {
295     position: absolute;
296     left: -10000px;
297     font-weight: normal;
298     font-size: 1em;
301 span.hide,
302 div.hide,
303 .hidden {
304     display: none;
306 // Accessibility: Skip block link, for keyboard-only users.
307 a.skip-block,
308 a.skip {
309     position: absolute;
310     top: -1000em;
311     font-size: 0.85em;
312     text-decoration: none;
315 a.skip-block:focus,
316 a.skip-block:active,
317 a.skip:focus,
318 a.skip:active {
319     position: static;
320     display: block;
323 .skip-block-to {
324     display: block;
325     height: 1px;
326     overflow: hidden;
328 // Blogs
329 .addbloglink {
330     text-align: center;
333 .blog_entry .audience {
334     text-align: right;
335     padding-right: 4px;
338 .blog_entry .tags {
339     margin-top: 15px;
342 .blog_entry .content {
343     margin-left: 43px;
345 // Group
346 #page-group-index #groupeditform {
347     text-align: center;
350 #doc-contents h1 {
351     margin: 1em 0 0 0;
354 #doc-contents ul {
355     margin: 0;
356     padding: 0;
357     width: 90%;
360 #doc-contents ul li {
361     list-style-type: none;
364 .groupmanagementtable td {
365     vertical-align: top;
368 .groupmanagementtable #existingcell,
369 .groupmanagementtable #potentialcell {
370     width: 42%;
373 .groupmanagementtable #buttonscell {
374     width: 16%;
377 .groupmanagementtable #buttonscell p.arrow_button input {
378     width: auto;
379     min-width: 80%;
380     margin: 0 auto;
383 .groupmanagementtable #removeselect_wrapper,
384 .groupmanagementtable #addselect_wrapper {
385     width: 100%;
388 .groupmanagementtable #removeselect_wrapper label,
389 .groupmanagementtable #addselect_wrapper label {
390     font-weight: normal;
393 #group-usersummary {
394     width: 14em;
397 .groupselector {
398     margin-top: 3px;
399     margin-bottom: 3px;
400     display: inline-block;
403 .groupselector label {
404     display: inline-block;
407 // Login
408 .login-page {
409     [name="username"] {
410         margin-bottom: -1px;
411         border-bottom-right-radius: 0;
412         border-bottom-left-radius: 0;
413     }
415     [type="password"] {
416         margin-bottom: 10px;
417         border-top-left-radius: 0;
418         border-top-right-radius: 0;
419     }
422 // Notes
423 .notepost {
424     margin-bottom: 1em;
427 .notepost .userpicture {
428     float: left;
429     margin-right: 5px;
432 .notepost .content,
433 .notepost .footer {
434     clear: both;
437 .notesgroup {
438     margin-left: 20px;
441 // My Moodle
442 .path-my .coursebox {
443     margin: $spacer-y 0;
444     padding: 0;
446     .overview {
447         margin: 15px 30px 10px 30px;
448     }
451 .path-my .coursebox .info {
452     float: none;
453     margin: 0;
456 // Modules
457 .mod_introbox {
458     padding: 10px;
461 table.mod_index {
462     width: 100%;
465 // Comments
466 .comment-ctrl {
467     font-size: 12px;
468     display: none;
469     margin: 0;
470     padding: 0;
473 .comment-ctrl h5 {
474     margin: 0;
475     padding: 5px;
478 .comment-area {
479     max-width: 400px;
480     padding: 5px;
483 .comment-area textarea {
484     width: 100%;
485     overflow: auto;
487     &.fullwidth {
488         -webkit-box-sizing: border-box;
489         -moz-box-sizing: border-box;
490         box-sizing: border-box;
491     }
494 .comment-area .fd {
495     text-align: right;
498 .comment-meta span {
499     color: gray;
502 .comment-link img {
503     vertical-align: text-bottom;
506 .comment-list {
507     font-size: 11px;
508     overflow: auto;
509     list-style: none;
510     padding: 0;
511     margin: 0;
514 .comment-list li {
515     margin: 2px;
516     list-style: none;
517     margin-bottom: 5px;
518     clear: both;
519     padding: .3em;
520     position: relative;
523 .comment-list li.first {
524     display: none;
527 .comment-paging {
528     text-align: center;
531 .comment-paging .pageno {
532     padding: 2px;
535 .comment-paging .curpage {
536     border: 1px solid #ccc;
539 .comment-message .picture {
540     width: 20px;
541     float: left;
544 .comment-message .text {
545     margin: 0;
546     padding: 0;
549 .comment-message .text p {
550     padding: 0;
551     margin: 0 18px 0 0;
554 .comment-delete {
555     position: absolute;
556     top: 0;
557     right: 0;
558     margin: .3em;
561 .comment-report-selectall {
562     display: none;
565 .comment-link {
566     display: none;
569 .jsenabled .comment-link {
570     display: block;
573 .jsenabled .showcommentsnonjs {
574     display: none;
577 .jsenabled .comment-report-selectall {
578     display: inline;
580 /**
581 * Completion progress report
582 */
583 .completion-expired {
584     @extend .text-warning;
587 .completion-expected {
588     font-size: $font-size-xs;
591 .completion-sortchoice,
592 .completion-identifyfield {
593     font-size: $font-size-xs;
594     vertical-align: bottom;
597 .completion-progresscell {
598     text-align: right;
601 .completion-expired .completion-expected {
602     font-weight: bold;
604 /**
605 * Tags
606 */
607 img.user-image {
608     height: 100px;
609     width: 100px;
612 #tag-search-box {
613     text-align: center;
614     margin: 10px auto;
617 .path-tag .tag-index-items .tagarea {
618     border: 1px solid #e3e3e3;
619     border-radius: 4px;
620     padding: 10px;
621     margin-top: 10px;
624 .path-tag .tag-index-items .tagarea h3 {
625     display: block;
626     padding: 3px 0 10px 0;
627     margin: 0;
628     font-size: 1.1em;
629     font-weight: bold;
630     line-height: 20px;
631     color: #999;
632     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
633     text-transform: uppercase;
634     word-wrap: break-word;
635     border-bottom: solid 1px #e3e3e3;
636     margin-bottom: 10px;
639 .path-tag .tagarea .controls,
640 .path-tag .tagarea .taggeditems {
641     @include clearfix();
644 .path-tag .tagarea .controls,
645 .path-tag .tag-backtoallitems {
646     text-align: center;
649 .path-tag .tagarea .controls .gotopage.nextpage {
650     float: right;
653 .path-tag .tagarea .controls .gotopage.prevpage {
654     float: left;
657 .path-tag .tagarea .controls .exclusivemode {
658     display: inline-block;
661 .path-tag .tagarea .controls.controls-bottom {
662     margin-top: 5px;
665 .path-tag .tagarea .controls .gotopage.nextpage::after {
666     padding-right: 5px;
667     padding-left: 5px;
668     content: "»";
671 .path-tag .tagarea .controls .gotopage.prevpage::before {
672     padding-right: 5px;
673     padding-left: 5px;
674     content: "«";
677 span.flagged-tag,
678 tr.flagged-tag,
679 span.flagged-tag a,
680 tr.flagged-tag a {
681     @extend .text-warning;
684 .tag-management-table td,
685 .tag-management-table th {
686     vertical-align: middle;
687     padding: 4px;
690 .tag-management-table .inplaceeditable.inplaceeditingon input {
691     width: 150px;
694 .path-admin-tag .addstandardtags {
695     float: right;
697     img {
698         margin: 0 5px;
699     }
702 .path-tag .tag-relatedtags {
703     padding-top: 10px;
706 .path-tag .tag-management-box {
707     text-align: right;
710 .path-tag .tag-index-toc {
711     padding: 10px;
712     text-align: center;
715 .path-tag .tag-index-toc li,
716 .path-tag .tag-management-box li {
717     margin-left: 5px;
718     margin-right: 5px;
721 .path-tag .tag-management-box li a.edittag {
722     background-image: url([[pix:moodle|i/settings]]);
725 .path-tag .tag-management-box li a.flagasinappropriate {
726     background-image: url([[pix:moodle|i/flagged]]);
729 .path-tag .tag-management-box li a.removefrommyinterests {
730     background-image: url([[pix:moodle|t/delete]]);
733 .path-tag .tag-management-box li a.addtomyinterests {
734     background-image: url([[pix:moodle|t/add]]);
737 .path-tag .tag-management-box li a {
738     background-repeat: no-repeat;
739     background-position: left;
740     padding-left: 17px;
743 .tag_feed.media-list .media .itemimage {
744     float: left;
747 .tag_feed.media-list .media .itemimage img {
748     height: 35px;
749     width: 35px;
752 .tag_feed.media-list .media .media-body {
753     padding-right: 10px;
754     padding-left: 10px;
757 .tag_feed .media .muted a {
758     @extend .text-muted;
761 .tag_cloud {
762     text-align: center;
765 .tag_cloud .inline-list li {
766     padding: 0 0.2em;
769 .tag_cloud .tag_overflow {
770     margin-top: 1em;
771     font-style: italic;
774 .tag_cloud .s20 {
775     font-size: 2.7em;
778 .tag_cloud .s19 {
779     font-size: 2.6em;
782 .tag_cloud .s18 {
783     font-size: 2.5em;
786 .tag_cloud .s17 {
787     font-size: 2.4em;
790 .tag_cloud .s16 {
791     font-size: 2.3em;
794 .tag_cloud .s15 {
795     font-size: 2.2em;
798 .tag_cloud .s14 {
799     font-size: 2.1em;
802 .tag_cloud .s13 {
803     font-size: 2em;
806 .tag_cloud .s12 {
807     font-size: 1.9em;
810 .tag_cloud .s11 {
811     font-size: 1.8em;
814 .tag_cloud .s10 {
815     font-size: 1.7em;
818 .tag_cloud .s9 {
819     font-size: 1.6em;
822 .tag_cloud .s8 {
823     font-size: 1.5em;
826 .tag_cloud .s7 {
827     font-size: 1.4em;
830 .tag_cloud .s6 {
831     font-size: 1.3em;
834 .tag_cloud .s5 {
835     font-size: 1.2em;
838 .tag_cloud .s4 {
839     font-size: 1.1em;
842 .tag_cloud .s3 {
843     font-size: 1em;
846 .tag_cloud .s2 {
847     font-size: 0.9em;
850 .tag_cloud .s1 {
851     font-size: 0.8em;
854 .tag_cloud .s0 {
855     font-size: 0.7em;
858 .tag_list ul {
859     display: inline;
862 .tag_list.hideoverlimit .overlimit {
863     display: none;
866 .tag_list .tagmorelink {
867     display: none;
870 .tag_list.hideoverlimit .tagmorelink {
871     display: inline;
874 .tag_list.hideoverlimit .taglesslink {
875     display: none;
878 /**
879 * Web Service
880 */
881 #webservice-doc-generator td {
882     text-align: left;
883     border: 0 solid black;
885 /**
886 * Smart Select Element
887 */
888 .smartselect {
889     position: absolute;
892 .smartselect .smartselect_mask {
893     background-color: #fff;
896 .smartselect ul {
897     padding: 0;
898     margin: 0;
901 .smartselect ul li {
902     list-style: none;
905 .smartselect .smartselect_menu {
906     margin-right: 5px;
909 .safari .smartselect .smartselect_menu {
910     margin-left: 2px;
913 .smartselect .smartselect_menu,
914 .smartselect .smartselect_submenu {
915     border: 1px solid #000;
916     background-color: #fff;
917     display: none;
920 .smartselect .smartselect_menu.visible,
921 .smartselect .smartselect_submenu.visible {
922     display: block;
925 .smartselect .smartselect_menu_content ul li {
926     position: relative;
927     padding: 2px 5px;
930 .smartselect .smartselect_menu_content ul li a {
931     color: #333;
932     text-decoration: none;
935 .smartselect .smartselect_menu_content ul li a.selectable {
936     color: inherit;
939 .smartselect .smartselect_submenuitem {
940     background-image: url([[pix:moodle|t/collapsed]]);
941     background-repeat: no-repeat;
942     background-position: 100%;
944 /** Spanning mode */
945 .smartselect.spanningmenu .smartselect_submenu {
946     position: absolute;
947     top: -1px;
948     left: 100%;
951 .smartselect.spanningmenu .smartselect_submenu a {
952     white-space: nowrap;
953     padding-right: 16px;
956 .smartselect.spanningmenu .smartselect_menu_content ul li a.selectable:hover {
957     text-decoration: underline;
959 /** Compact mode */
960 .smartselect.compactmenu .smartselect_submenu {
961     position: relative;
962     margin: 2px -3px;
963     margin-left: 10px;
964     display: none;
965     border-width: 0;
966     z-index: 1010;
969 .smartselect.compactmenu .smartselect_submenu.visible {
970     display: block;
973 .smartselect.compactmenu .smartselect_menu {
974     z-index: 1000;
975     overflow: hidden;
978 .smartselect.compactmenu .smartselect_submenu .smartselect_submenu {
979     z-index: 1020;
982 .smartselect.compactmenu .smartselect_submenuitem:hover > .smartselect_menuitem_label {
983     font-weight: bold;
985 /**
986 * Registration
987 */
988 #page-admin-registration-register .registration_textfield {
989     width: 300px;
991 /**
992 * Enrol
993 */
994 .userenrolment {
995     width: 100%;
996     border-collapse: collapse;
999 .userenrolment tr {
1000     vertical-align: top;
1003 .userenrolment td {
1004     padding: 0;
1005     height: 41px;
1008 .userenrolment .subfield {
1009     margin-right: 5px;
1012 .userenrolment .col_userdetails .subfield {
1013     margin-left: 40px;
1016 .userenrolment .col_userdetails .subfield_picture {
1017     float: left;
1018     margin-left: 0;
1021 .userenrolment .col_lastseen {
1022     width: 150px;
1025 .userenrolment .col_role {
1026     width: 262px;
1029 .userenrolment .col_role .roles,
1030 .userenrolment .col_group .groups {
1031     margin-right: 30px;
1034 .userenrolment .col_role .role,
1035 .userenrolment .col_group .group {
1036     float: left;
1037     padding: 3px;
1038     margin: 3px;
1039     white-space: nowrap;
1042 .userenrolment .col_role .role a,
1043 .userenrolment .col_group .group a {
1044     margin-left: 3px;
1045     cursor: pointer;
1048 .userenrolment .col_role .addrole,
1049 .userenrolment .col_group .addgroup {
1050     float: right;
1051     padding: 3px;
1052     margin: 3px;
1054     > a:hover {
1055         border-bottom: 1px solid #666;
1056     }
1059 .userenrolment .col_role .addrole img,
1060 .userenrolment .col_group .addgroup img {
1061     vertical-align: baseline;
1064 .userenrolment .hasAllRoles .col_role .addrole {
1065     display: none;
1068 .userenrolment .col_enrol .enrolment {
1069     float: left;
1070     padding: 3px;
1071     margin: 3px;
1074 .userenrolment .col_enrol .enrolment a {
1075     float: right;
1076     margin-left: 3px;
1079 #page-enrol-users {
1080     .enrol_user_buttons {
1081         text-align: right;
1083     }
1085     #filterform {
1086         @extend .card;
1087         @extend .card-block;
1088     }
1090     .user-enroller-panel .uep-search-results .user .details {
1091         width: 237px;
1092     }
1094     .user-enroller-panel .uep-search-results .cohort .details {
1095         width: 237px;
1096     }
1099 #page-enrol-users .enrol-users-page-action input {
1100     margin-left: 0;
1103 .corelightbox {
1104     background-color: #ccc;
1105     position: absolute;
1106     top: 0;
1107     left: 0;
1108     width: 100%;
1109     height: 100%;
1110     text-align: center;
1113 .corelightbox img {
1114     position: fixed;
1115     top: 50%;
1116     left: 50%;
1119 .mod-indent-outer {
1120     display: table;
1123 .mod-indent {
1124     display: table-cell;
1127 .label .mod-indent {
1128     float: left;
1129     padding-top: 20px;
1131 $mod-indent-size: 30px;
1132 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1134 @for $i from 1 through 16 {
1135     $width: ($i * $mod-indent-size);
1137     .mod-indent-#{$i} {
1138         width: $width;
1139     }
1142 .mod-indent-huge {
1143     width: (16 * $mod-indent-size);
1146 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1147 .resourcecontent .mediaplugin_mp3 object {
1148     height: 25px;
1149     width: 600px;
1152 .resourcecontent audio.mediaplugin_html5audio {
1153     width: 600px;
1155 /** Large resource images should avoid hidden overflow **/
1156 .resourceimage {
1157     max-width: 100%;
1159 /* Audio player size in 'inline' mode (can only change width, as above) */
1160 .mediaplugin_mp3 object {
1161     height: 15px;
1162     width: 300px;
1165 audio.mediaplugin_html5audio {
1166     width: 300px;
1168 /* TinyMCE moodle media preview frame should not have padding */
1169 .core_media_preview.pagelayout-embedded #content {
1170     padding: 0;
1173 .core_media_preview.pagelayout-embedded #maincontent {
1174     height: 0;
1177 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1178     padding: 0;
1179     margin: 0;
1180     min-width: 0;
1181     background: none;
1184 .path-rating .ratingtable {
1185     width: 100%;
1186     margin-bottom: 1em;
1189 .path-rating .ratingtable th.rating {
1190     width: 100%;
1193 .path-rating .ratingtable td.rating,
1194 .path-rating .ratingtable td.time {
1195     white-space: nowrap;
1196     text-align: center;
1199 .initialbar {
1200     a,
1201     strong {
1202         padding-left: 3px;
1203         padding-right: 3px;
1204     }
1207 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1208 .moodle-dialogue-base .moodle-dialogue-lightbox {
1209     background-color: $gray;
1212 .moodle-dialogue-base .hidden,
1213 .moodle-dialogue-base .moodle-dialogue-hidden {
1214     display: none;
1217 .no-scrolling {
1218     overflow: hidden;
1221 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1222     left: 0;
1223     top: 0;
1224     right: 0;
1225     bottom: -50px;
1226     position: fixed;
1229 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1230     overflow: auto;
1233 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1234     width: 28px;
1235     height: 16px;
1236     background-size: 100%;
1239 .moodle-dialogue-base .moodle-dialogue-wrap {
1240     background-color: #fff;
1241     border: 1px solid #ccc;
1244 // Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1245 // it for a reason (conflicts with jquery .show()).
1246 .modal.show {
1247     display: block;
1250 .moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content {
1251     @extend .modal-content;
1254 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1255     @extend .modal-header;
1258 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1259     // Undo some YUI damage.
1260     min-height: 3rem;
1261     color: initial;
1262     background: initial;
1263     font-size: 1.5rem;
1264     line-height: 1.5;
1267 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1268     @extend .modal-title;
1271 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1272     padding: $spacer;
1275 .moodle-dialogue-base .closebutton {
1276     @extend .close;
1277     box-shadow: none;
1278     &::after {
1279         content: "×";
1280     }
1283 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1284     @extend .modal-body;
1287 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1288     overflow: auto;
1289     position: absolute;
1290     top: 0;
1291     bottom: 50px;
1292     left: 0;
1293     right: 0;
1294     margin: 0;
1295     border: 0;
1298 .moodle-dialogue-exception .moodle-exception-param label {
1299     font-weight: bold;
1302 .moodle-dialogue-exception .param-stacktrace label {
1303     background-color: #eee;
1304     border: 1px solid #ccc;
1305     border-bottom-width: 0;
1308 .moodle-dialogue-exception .param-stacktrace pre {
1309     border: 1px solid #ccc;
1310     background-color: #fff;
1313 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1314     color: navy;
1315     font-size: $font-size-sm;
1318 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1319     @extend .text-warning;
1320     font-size: $font-size-sm;
1323 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1324     color: #333;
1325     font-size: 90%;
1326     border-bottom: 1px solid #eee;
1329 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1330     @extend .modal-footer;
1333 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1334     display: none;
1337 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1338     // Undo some YUI damage.
1339     background: initial;
1342 .moodle-dialogue-confirm .confirmation-message {
1343     margin: 0.5em 1em;
1345 .moodle-dialogue-confirm .confirmation-buttons {
1346     text-align: right;
1349 .moodle-dialogue-confirm .confirmation-dialogue input {
1350     min-width: 80px;
1353 .moodle-dialogue-exception .moodle-exception-message {
1354     margin: 1em;
1357 .moodle-dialogue-exception .moodle-exception-param {
1358     margin-bottom: 0.5em;
1361 .moodle-dialogue-exception .moodle-exception-param label {
1362     width: 150px;
1365 .moodle-dialogue-exception .param-stacktrace label {
1366     display: block;
1367     margin: 0;
1368     padding: 4px 1em;
1371 .moodle-dialogue-exception .param-stacktrace pre {
1372     display: block;
1373     height: 200px;
1374     overflow: auto;
1377 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1378     display: inline-block;
1379     margin: 4px 0;
1382 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1383     display: inline-block;
1384     width: 50px;
1385     margin: 4px 1em;
1388 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1389     padding-left: 25px;
1390     margin-bottom: 4px;
1391     padding-bottom: 4px;
1394 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1395     opacity: 0.75;
1396     width: 100%;
1397     height: 100%;
1398     top: 0;
1399     left: 0;
1400     background-color: white;
1401     text-align: center;
1402     padding: 10% 0;
1404 /* Apply a default max-height on tooltip text */
1405 .moodle-dialogue .tooltiptext {
1406     max-height: 300px;
1409 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1410     z-index: 3001;
1412     .moodle-dialogue-bd {
1413         overflow: auto;
1414     }
1417 /**
1418  * Chooser Dialogues (moodle-core-chooserdialogue)
1419  *
1420  * This CSS belong to the chooser dialogue which should work both with, and
1421  * without javascript enabled
1422  */
1423 /* Hide the dialog and it's title */
1424 .chooserdialoguebody,
1425 .choosertitle {
1426     display: none;
1429 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1430     margin: 0;
1433 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1434     padding: 0;
1435     background: #f2f2f2;
1437     @include border-bottom-radius(10px);
1439 /* Center the submit buttons within the area */
1440 .choosercontainer #chooseform .submitbuttons {
1441     padding: 0.7em 0;
1442     text-align: right;
1444 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1446 @media (max-height: 639px) {
1447     .ios.safari .choosercontainer #chooseform .submitbuttons {
1448         padding: 45px 0;
1449     }
1452 .choosercontainer #chooseform .submitbuttons input {
1453     min-width: 100px;
1454     margin: 0 0.5em;
1456 /* Various settings for the options area */
1457 .choosercontainer #chooseform .options {
1458     position: relative;
1459     border-bottom: 1px solid #bbb;
1461 /* Only set these options if we're showing the js container */
1462 .jschooser .choosercontainer #chooseform .alloptions {
1463     overflow-x: hidden;
1464     overflow-y: auto;
1465     max-width: 240px;
1467     .option {
1468         input[type=radio] {
1469             display: inline-block;
1470         }
1472         .typename {
1473             display: inline-block;
1474             width: 55%;
1475         }
1476     }
1478 /* Settings for option rows and option subtypes */
1479 .choosercontainer #chooseform .moduletypetitle,
1480 .choosercontainer #chooseform .option,
1481 .choosercontainer #chooseform .nonoption {
1482     margin-bottom: 0;
1483     padding: 0 1.6em 0 1.6em;
1486 .choosercontainer #chooseform .moduletypetitle {
1487     text-transform: uppercase;
1488     padding-top: 1.2em;
1489     padding-bottom: 0.4em;
1492 .choosercontainer #chooseform .option .typename,
1493 .choosercontainer #chooseform .nonoption .typename {
1494     padding: 0 0 0 0.5em;
1497 .choosercontainer #chooseform .modicon + .typename {
1498     padding-left: 0;
1501 .choosercontainer #chooseform .option input[type=radio],
1502 .choosercontainer #chooseform .option span.typename {
1503     vertical-align: middle;
1506 .choosercontainer #chooseform .option label {
1507     display: block;
1508     margin: 0;
1509     padding: ($spacer / 2) 0;
1510     border-bottom: 1px solid #fff;
1513 .choosercontainer #chooseform .option .icon {
1514     margin: 0;
1515     padding: 0 $spacer;
1518 .choosercontainer #chooseform .nonoption {
1519     padding-left: 2.7em;
1520     padding-top: 0.3em;
1521     padding-bottom: 0.1em;
1524 .choosercontainer #chooseform .subtype {
1525     margin-bottom: 0;
1526     padding: 0 1.6em 0 3.2em;
1529 .choosercontainer #chooseform .subtype .typename {
1530     margin: 0 0 0 0.2em;
1532 /* The instruction/help area */
1533 .jschooser .choosercontainer #chooseform .instruction,
1534 .jschooser .choosercontainer #chooseform .typesummary {
1535     display: none;
1536     position: absolute;
1537     top: 0;
1538     right: 0;
1539     bottom: 0;
1540     left: 240px;
1541     margin: 0;
1542     padding: 1.6em;
1543     background-color: #fff;
1544     overflow-x: hidden;
1545     overflow-y: auto;
1546     line-height: 2em;
1548 /* Selected option settings */
1549 .jschooser .choosercontainer #chooseform .instruction,
1550 .choosercontainer #chooseform .selected .typesummary {
1551     display: block;
1554 .choosercontainer #chooseform .selected {
1555     background-color: #fff;
1556     margin-top: -1px;
1557     padding-top: 1px;
1560 .chooserdialogue-course-modchooser .modicon .icon {
1561     width: 24px;
1562     height: 24px;
1565 @include media-breakpoint-down(xs) {
1566     .jsenabled .choosercontainer #chooseform .alloptions {
1567         max-width: 100%;
1568     }
1570     .jsenabled .choosercontainer #chooseform .instruction,
1571     .jsenabled .choosercontainer #chooseform .typesummary {
1572         position: static;
1573     }
1576 /* Form element: listing */
1577 .formlistingradio {
1578     padding-bottom: 25px;
1579     padding-right: 10px;
1582 .formlistinginputradio {
1583     float: left;
1586 .formlistingmain {
1587     min-height: 225px;
1590 .formlisting {
1591     position: relative;
1592     margin: 15px 0;
1593     padding: 1px 19px 14px;
1594     background-color: white;
1595     border: 1px solid #ddd;
1597     @include border-radius(4px);
1600 .formlistingmore {
1601     position: absolute;
1602     cursor: pointer;
1603     bottom: -1px;
1604     right: -1px;
1605     padding: 3px 7px;
1606     font-size: 12px;
1607     font-weight: bold;
1608     background-color: whitesmoke;
1609     border: 1px solid #ddd;
1610     color: #9da0a4;
1612     @include border-radius(4px 0 4px 0);
1615 .formlistingall {
1616     margin: 15px 0;
1617     padding: 0;
1619     @include border-radius(4px);
1622 .formlistingrow {
1623     cursor: pointer;
1624     border-bottom: 1px solid;
1625     border-color: #e1e1e8;
1626     border-left: 1px solid #e1e1e8;
1627     border-right: 1px solid #e1e1e8;
1628     background-color: #f7f7f9;
1630     @include border-radius(0 0 4px 4px);
1631     padding: 6px;
1632     top: 50%;
1633     left: 50%;
1634     min-height: 34px;
1635     float: left;
1636     width: 150px;
1639 body.jsenabled .formlistingradio {
1640     display: none;
1643 body.jsenabled .formlisting {
1644     display: block;
1647 /* Badges styles */
1648 table.collection {
1649     @extend .table;
1650     @extend .table-bordered;
1651     @extend .table-striped;
1654 table.collection .name {
1655     text-align: left;
1656     vertical-align: middle;
1659 table.collection .awards {
1660     width: 10%;
1661     text-align: center;
1662     vertical-align: middle;
1665 table.collection .criteria {
1666     width: 40%;
1667     text-align: left;
1668     vertical-align: top;
1671 table.collection .badgeimage,
1672 table.collection .status {
1673     width: 15%;
1674     text-align: center;
1675     vertical-align: middle;
1678 table.collection .description {
1679     width: 25%;
1680     text-align: left;
1683 table.collection .actions {
1684     width: 11em;
1685     text-align: center;
1686     vertical-align: middle;
1689 a.criteria-action {
1690     padding: 0 3px;
1691     float: right;
1694 div.criteria-description {
1695     padding: 10px 15px;
1696     margin: 5px 0;
1697     background: none repeat scroll 0 0 #f9f9f9;
1698     border: 1px solid #eee;
1701 ul.badges {
1702     margin: 0;
1703     list-style: none;
1706 .badges li {
1707     position: relative;
1708     display: inline-block;
1709     padding-top: 1em;
1710     text-align: center;
1711     vertical-align: top;
1712     width: 150px;
1715 .badges li .badge-name {
1716     display: block;
1717     padding: 5px;
1720 .badges li > img {
1721     position: absolute;
1724 .badges li .badge-image {
1725     width: 100px;
1726     height: 100px;
1727     left: 10px;
1728     top: 0;
1729     z-index: 1;
1732 .badges li .badge-actions {
1733     position: relative;
1736 .badges li .expireimage {
1737     width: 100px;
1738     height: 100px;
1739     left: 25px;
1740     top: 0;
1741     position: absolute;
1742     z-index: 10;
1743     opacity: 0.85;
1746 #badge-image {
1747     background-color: transparent;
1748     padding: 0;
1749     position: relative;
1750     min-width: 100px;
1751     width: 20%;
1752     display: inline-block;
1753     vertical-align: top;
1754     margin-top: 17px;
1756     .expireimage {
1757         width: 100px;
1758         height: 100px;
1759         left: 0;
1760         top: 0;
1761         opacity: 0.85;
1762         position: absolute;
1763         z-index: 10;
1764     }
1766     .singlebutton {
1767         padding-top: 5px;
1769         input {
1770             margin-left: 0;
1771         }
1772     }
1775 #badge-details {
1776     display: inline-block;
1777     width: 79%;
1780 #badge-overview dl,
1781 #badge-details dl {
1782     margin: 0;
1784     dt,
1785     dd {
1786         vertical-align: top;
1787         padding: 3px 0;
1788     }
1790     dt {
1791         clear: both;
1792         display: inline-block;
1793         width: 20%;
1794         min-width: 100px;
1795     }
1797     dd {
1798         display: inline-block;
1799         width: 79%;
1800         margin-left: 1%;
1801     }
1804 .badge-profile {
1805     vertical-align: top;
1808 .connected {
1809     @extend .text-success;
1812 .notconnected {
1813     @extend .text-danger;
1816 .connecting {
1817     @extend .text-warning;
1820 #page-badges-award .recipienttable tr td {
1821     vertical-align: top;
1824 #page-badges-award .recipienttable tr td.actions .actionbutton {
1825     margin: 0.3em 0;
1826     padding: 0.5em 0;
1827     width: 100%;
1830 #page-badges-award .recipienttable tr td.existing,
1831 #page-badges-award .recipienttable tr td.potential {
1832     width: 42%;
1835 #issued-badge-table .activatebadge {
1836     display: inline-block;
1839 .statusbox.active {
1840     background-color: $state-success-bg;
1843 .statusbox.inactive {
1844     background-color: $state-warning-bg;
1847 .statusbox {
1848     text-align: center;
1849     margin-bottom: 5px;
1850     padding: 5px;
1853 .statusbox .activatebadge {
1854     display: inline-block;
1857 .statusbox .activatebadge input[type=submit] {
1858     margin: 3px;
1861 .activatebadge {
1862     margin: 0;
1863     text-align: left;
1864     vertical-align: middle;
1867 img#persona_signin {
1868     cursor: pointer;
1871 .addcourse {
1872     float: right;
1875 .invisiblefieldset {
1876     display: inline;
1877     padding: 0;
1878     border-width: 0;
1881 .breadcrumb-nav {
1882     float: left;
1885 .breadcrumb-button .singlebutton div {
1886     margin-right: 0;
1889 .breadcrumb-nav .breadcrumb {
1890     margin: 0;
1893 /** Page header */
1894 #page-header {
1895     .logo {
1896         margin: $spacer 0;
1897     }
1900 /** Header. */
1901 header {
1902     .collapse.in,
1903     .collapsing {
1904         display: block;
1905         clear: both;
1906     }
1909 /** Header-bar styles **/
1910 .page-context-header {
1911     // We need to be explicit about the height of the header.
1912     $pageHeaderHeight: 140px;
1914     // Do not remove these rules.
1915     overflow: hidden;
1917     .page-header-image,
1918     .page-header-headings {
1919         display: block;
1920         position: relative;
1921     }
1923     .page-header-image {
1924         float: left;
1925         margin-right: 1em;
1926         margin-bottom: 1em;
1927     }
1929     .page-header-headings,
1930     .header-button-group {
1931         position: relative;
1932         line-height: 24px;
1933         vertical-align: middle;
1934     }
1936     .header-button-group {
1937         display: block;
1938         float: left;
1940         a {
1941             position: relative;
1943             // Don't touch it unless you know exactly what you are doing.
1944             top: -0.4em;
1945         }
1946     }
1949 ul.dragdrop-keyboard-drag li {
1950     list-style-type: none;
1953 a.disabled:hover,
1954 a.disabled {
1955     text-decoration: none;
1956     cursor: default;
1957     font-style: italic;
1958     color: #808080;
1961 body.lockscroll {
1962     height: 100%;
1963     overflow: hidden;
1966 .progressbar_container {
1967     max-width: 500px;
1968     margin: 0 auto;
1971 /* IE10 only fix for calendar titling */
1972 .ie10 .yui3-calendar-header-label {
1973     display: inline-block;
1976 dd:before,
1977 dd:after {
1978     display: block;
1979     content: " ";
1982 dd:after {
1983     clear: both;
1986 // Active tabs with links should have a different
1987 // cursor to indicate they are clickable.
1988 .nav-tabs > .active > a[href],
1989 .nav-tabs > .active > a[href]:hover,
1990 .nav-tabs > .active > a[href]:focus {
1991     cursor: pointer;
1994 .inplaceeditable {
1995     &.inplaceeditingon {
1996         position: relative;
1998         .editinstructions {
1999             margin-top: -30px;
2000             font-weight: normal;
2001             margin-right: 0;
2002             margin-left: 0;
2003             left: 0;
2004             right: auto;
2005             white-space: nowrap;
2006         }
2008         input {
2009             width: 330px;
2010             vertical-align: text-bottom;
2011             margin-bottom: 0;
2012         }
2014         select {
2015             margin-bottom: 0;
2016         }
2017     }
2019     .quickediticon img {
2020         opacity: 0.2;
2021     }
2023     .quickeditlink {
2024         color: inherit;
2025         text-decoration: inherit;
2026     }
2028     &:hover .quickeditlink .quickediticon img,
2029     .quickeditlink:focus .quickediticon img {
2030         opacity: 1;
2031     }
2033     &.inplaceeditable-toggle .quickediticon {
2034         display: none;
2035     }
2038 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2039     margin-top: -20px;
2042 /** Chart area. */
2043 .chart-area {
2045     .chart-table-data {
2046         display: none;
2047     }
2049     .chart-table {
2050         .chart-output-htmltable caption {
2051             white-space: nowrap;
2052         }
2053         /** When accessible, we display the table only. */
2054         &.accesshide {
2055             .chart-table-expand {
2056                 display: none;
2057             }
2058             .chart-table-data {
2059                 display: block;
2060             }
2061         }
2062     }
2065 // Reset for ul.
2066 ul {
2067     padding-left: 1rem;
2070 /* YUI 2 Tree View */
2071 /*rtl:raw:
2072 .ygtvtn,
2073 .ygtvtm,
2074 .ygtvtmh,
2075 .ygtvtmhh,
2076 .ygtvtp,
2077 .ygtvtph,
2078 .ygtvtphh,
2079 .ygtvln,
2080 .ygtvlm,
2081 .ygtvlmh,
2082 .ygtvlmhh,
2083 .ygtvlp,
2084 .ygtvlph,
2085 .ygtvlphh,
2086 .ygtvdepthcell,
2087 .ygtvok,
2088 .ygtvok:hover,
2089 .ygtvcancel,
2090 .ygtvcancel:hover {
2091     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
2093 */
2095 .hover-tooltip-container {
2096     position: relative;
2098     .hover-tooltip {
2099         opacity: 0;
2100         visibility: hidden;
2101         position: absolute;
2102         left: 50%;
2103         top: calc(-50% - 5px);
2104         transform: translate(-50%, -50%);
2105         background-color: #fff;
2106         border: 1px solid rgba(0, 0, 0, .2);
2107         border-radius: .3rem;
2108         box-sizing: border-box;
2109         padding: 5px;
2110         white-space: nowrap;
2111         transition: opacity 0.15s, visibility 0.15s;
2112         z-index: 1000;
2114         &:before {
2115             content: '';
2116             display: inline-block;
2117             border-left: 8px solid transparent;
2118             border-right: 8px solid transparent;
2119             border-top: 8px solid rgba(0, 0, 0, .2);
2120             position: absolute;
2121             bottom: -8px;
2122             left: calc(50% - 8px);
2123         }
2125         &:after {
2126             content: '';
2127             display: inline-block;
2128             border-left: 7px solid transparent;
2129             border-right: 7px solid transparent;
2130             border-top: 7px solid #fff;
2131             position: absolute;
2132             bottom: -6px;
2133             left: calc(50% - 7px);
2134             z-index: 2;
2135         }
2136     }
2138     &:hover {
2139         .hover-tooltip {
2140             opacity: 1;
2141             visibility: visible;
2142             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2143         }
2144     }
2147 #region-flat-nav {
2148     padding-right: 0;
2149     padding-left: 0;
2150     .nav {
2151         margin-right: $grid-gutter-width / 2;
2152         background-color: $card-bg;
2153     }
2154     @include media-breakpoint-down(sm) {
2155         .nav {
2156             margin-top: $grid-gutter-width;
2157             margin-right: 0;
2158         }
2159     }
2162 $footer-link-color: $brand-primary !default;
2163 #page-footer a {
2164     color: $footer-link-color;
2167 // Make links in a menu clickable anywhere in the row.
2168 .dropdown-item a {
2169     display: block;
2170     width: 100%;
2171     color: $body-color;
2174 .competency-tree {
2175     ul {
2176         padding-left: 1.5rem;
2177     }