MDL-55607 theme_noname: Remove icon styles - We only need .icon everywhere.
[moodle.git] / theme / noname / 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 }
17 .mdl-right {
18     text-align: right;
19 }
20 #add,
21 #remove,
22 .centerpara,
23 .mdl-align {
24     text-align: center;
25 }
26 a.dimmed,
27 a.dimmed:link,
28 a.dimmed:visited,
29 a.dimmed_text,
30 a.dimmed_text:link,
31 a.dimmed_text:visited,
32 .dimmed_text,
33 .dimmed_text a,
34 .dimmed_text a:link,
35 .dimmed_text a:visited,
36 .usersuspended,
37 .usersuspended a,
38 .usersuspended a:link,
39 .usersuspended a:visited,
40 .dimmed_category,
41 .dimmed_category a {
42     @extend .text-muted
43 }
44 .activity.label .dimmed_text {
45     opacity: 0.5;
46 }
47 .unlist,
48 .unlist li,
49 .inline-list,
50 .inline-list li,
51 .block .list,
52 .block .list li,
53 .section li.activity,
54 .section li.movehere,
55 .tabtree li {
56     list-style: none;
57     margin: 0;
58     padding: 0;
59 }
60 .inline,
61 .inline-list li {
62     display: inline;
63 }
64 .notifytiny {
65     font-size: $font-size-xs;
66 }
67 .notifytiny li,
68 .notifytiny td {
69     font-size: 100%;
70 }
71 .red,
72 .notifyproblem {
73     @extend .text-warning;
74 }
75 .green,
76 .notifysuccess {
77     @extend .text-success;
78 }
79 .highlight {
80     @extend .text-info;
81 }
82 .reportlink {
83     text-align: right;
84 }
85 a.autolink.glossary:hover {
86     cursor: help;
87 }
88 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
89 .collapsibleregioncaption {
90     white-space: nowrap;
91 }
92 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
93     cursor: pointer;
94 }
95 .collapsibleregioncaption img {
96     vertical-align: middle;
97 }
99 .jsenabled .hiddenifjs {
100     display: none;
102 .visibleifjs {
103     display: none;
105 .jsenabled .visibleifjs {
106     display: inline;
108 .jsenabled .collapsibleregion {
109     overflow: hidden;
111 .jsenabled .collapsed .collapsibleregioninner {
112     visibility: hidden;
114 .collapsible-actions {
115     display: none;
116     text-align: right;
118 .jsenabled .collapsible-actions {
119     display: block;
121 .collapsible-actions .collapseexpand {
122     padding-left: 20px;
123     background: url([[pix:t/collapsed]]) 2px center no-repeat;
125 /*rtl:raw:
126 .collapsible-actions .collapseexpand {
127     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
129 */
130 .collapsible-actions .collapse-all {
131     background-image: url([[pix:t/expanded]]);
133 .yui-overlay .yui-widget-bd {
134     background-color: #FFEE69;
135     border: 1px solid #A6982B;
136     border-top-color: #D4C237;
137     color: #000000;
138     left: 0;
139     padding: 2px 5px;
140     position: relative;
141     top: 0;
142     z-index: 1;
144 .clearer {
145     background: transparent;
146     border-width: 0;
147     clear: both;
148     display: block;
149     height: 1px;
150     margin: 0;
151     padding: 0;
153 .bold,
154 .warning,
155 .errorbox .title,
156 .pagingbar .title,
157 .pagingbar .thispage {
158     font-weight: bold;
160 img.userpicture {
161     margin-right: 0.5rem;
163 img.resize {
164     height: 1em;
165     width: 1em;
167 .action-menu .dropdown-toggle {
168     margin-right: 0.5rem;
169     text-decoration: none;
171 .action-menu {
172     white-space: nowrap;
174 .action-menu .userpicture {
175     width: auto;
176     height: auto;
177     padding-left: 1rem;
179 .mform {
180     max-width: 720px;
182 .block img.resize,
183 .breadcrumb img.resize {
184     height: 0.9em;
185     width: 0.8em;
187 /* Icon styles */
188 img.activityicon {
189     height: 24px;
190     width: 24px;
191     vertical-align: middle;
193 .boxaligncenter {
194     margin-left: auto;
195     margin-right: auto;
197 .boxalignright {
198     margin-left: auto;
199     margin-right: 0;
201 .boxalignleft {
202     margin-left: 0;
203     margin-right: auto;
205 .boxwidthnarrow {
206     width: 30%;
208 .boxwidthnormal {
209     width: 50%;
211 .boxwidthwide {
212     width: 80%;
214 .headermain {
215     font-weight: bold;
217 #maincontent {
218     display: block;
219     height: 1px;
220     overflow: hidden;
222 img.uihint {
223     cursor: help;
225 #addmembersform table {
226     margin-left: auto;
227     margin-right: auto;
229 table.flexible .emptyrow {
230     display: none;
232 form.popupform,
233 form.popupform div {
234     display: inline;
236 .arrow_button input {
237     overflow: hidden;
239 /** The 1-pixel padding is there to avoid phantom scroll bars on OS X (FF, Safari and Chrome)**/
240 .no-overflow {
241     overflow: auto;
242     padding-bottom: 1px;
244 .pagelayout-report .no-overflow {
245     overflow: visible;
247 .no-overflow > .generaltable {
248     margin-bottom: 0;
250 // Accessibility features
252 // Accessibility: text 'seen' by screen readers but not visual users.
253 .accesshide {
254     position: absolute;
255     left: -10000px;
256     font-weight: normal;
257     font-size: 1em;
259 span.hide,
260 div.hide {
261     display: none;
263 // Accessibility: Skip block link, for keyboard-only users.
264 a.skip-block,
265 a.skip {
266     position: absolute;
267     top: -1000em;
268     font-size: 0.85em;
269     text-decoration: none;
271 a.skip-block:focus,
272 a.skip-block:active,
273 a.skip:focus,
274 a.skip:active {
275     position: static;
276     display: block;
278 .skip-block-to {
279     display: block;
280     height: 1px;
281     overflow: hidden;
283 // Blogs
284 .addbloglink {
285     text-align: center;
287 .blog_entry .audience {
288     text-align: right;
289     padding-right: 4px;
291 .blog_entry .tags {
292     margin-top: 15px;
294 .blog_entry .content {
295     margin-left: 43px;
297 // Group
298 #page-group-index #groupeditform {
299     text-align: center;
301 #doc-contents h1 {
302     margin: 1em 0 0 0;
304 #doc-contents ul {
305     margin: 0;
306     padding: 0;
307     width: 90%;
309 #doc-contents ul li {
310     list-style-type: none;
312 .groupmanagementtable td {
313     vertical-align: top;
315 .groupmanagementtable #existingcell,
316 .groupmanagementtable #potentialcell {
317     width: 42%;
319 .groupmanagementtable #buttonscell {
320     width: 16%;
322 .groupmanagementtable #buttonscell p.arrow_button input {
323     width: auto;
324     min-width: 80%;
325     margin: 0 auto;
327 .groupmanagementtable #removeselect_wrapper,
328 .groupmanagementtable #addselect_wrapper {
329     width: 100%;
331 .groupmanagementtable #removeselect_wrapper label,
332 .groupmanagementtable #addselect_wrapper label {
333     font-weight: normal;
335 #group-usersummary {
336     width: 14em;
338 .groupselector {
339     margin-top: 3px;
340     margin-bottom: 3px;
341     display: inline-block;
343 .groupselector label {
344     display: inline-block;
347 // Login
348 .login-page {
349     [name="username"] {
350         margin-bottom: -1px;
351         border-bottom-right-radius: 0;
352         border-bottom-left-radius: 0;
353     }
354     [type="password"] {
355         margin-bottom: 10px;
356         border-top-left-radius: 0;
357         border-top-right-radius: 0;
358     }
361 // Notes
362 .notepost {
363     margin-bottom: 1em;
365 .notepost .userpicture {
366     float: left;
367     margin-right: 5px;
369 .notepost .content,
370 .notepost .footer {
371     clear: both;
373 .notesgroup {
374     margin-left: 20px;
377 // My Moodle
378 .path-my .coursebox .overview {
379     margin: 15px 30px 10px 30px;
381 .path-my .coursebox .info {
382     float: none;
383     margin: 0;
386 // Modules
387 .mod_introbox {
388     padding: 10px;
390 table.mod_index {
391     width: 100%;
394 // Comments
395 .comment-ctrl {
396     font-size: 12px;
397     display: none;
398     margin: 0;
399     padding: 0;
401 .comment-ctrl h5 {
402     margin: 0;
403     padding: 5px;
405 .comment-area {
406     max-width: 400px;
407     padding: 5px;
409 .comment-area textarea {
410     width: 100%;
411     overflow: auto;
412     &.fullwidth {
413         -webkit-box-sizing: border-box;
414         -moz-box-sizing: border-box;
415         box-sizing: border-box;
416     }
418 .comment-area .fd {
419     text-align: right;
421 .comment-meta span {
422     color: gray;
424 .comment-link img {
425     vertical-align: text-bottom;
427 .comment-list {
428     font-size: 11px;
429     overflow: auto;
430     list-style: none;
431     padding: 0;
432     margin: 0;
434 .comment-list li {
435     margin: 2px;
436     list-style: none;
437     margin-bottom: 5px;
438     clear: both;
439     padding: .3em;
440     position: relative;
442 .comment-list li.first {
443     display: none
445 .comment-paging{
446     text-align: center;
448 .comment-paging .pageno{
449     padding: 2px;
451 .comment-paging .curpage{
452     border: 1px solid #CCC;
454 .comment-message .picture {
455     width: 20px;
456     float: left;
458 .comment-message .text {
459     margin: 0;
460     padding: 0;
462 .comment-message .text p {
463     padding: 0;
464     margin: 0 18px 0 0;
466 .comment-delete {
467     position: absolute;
468     top: 0;
469     right: 0;
470     margin: .3em;
472 .comment-report-selectall{
473     display: none
475 .comment-link {
476     display: none
478 .jsenabled .comment-link {
479     display: block
481 .jsenabled .showcommentsnonjs{
482     display: none
484 .jsenabled .comment-report-selectall{
485     display: inline
487 /**
488 * Completion progress report
489 */
490 .completion-expired {
491     @extend .text-warning;
493 .completion-expected {
494     font-size: $font-size-xs;
496 .completion-sortchoice,
497 .completion-identifyfield {
498     font-size: $font-size-xs;
499     vertical-align: bottom;
501 .completion-progresscell {
502     text-align: right;
504 .completion-expired .completion-expected {
505     font-weight: bold;
507 /**
508 * Tags
509 */
510 img.user-image {
511     height: 100px;
512     width: 100px;
514 #tag-search-box {
515     text-align: center;
516     margin: 10px auto;
519 .path-tag .tag-index-items .tagarea {
520     border: 1px solid #E3E3E3;
521     border-radius: 4px;
522     padding: 10px;
523     margin-top: 10px;
526 .path-tag .tag-index-items .tagarea h3 {
527     display: block;
528     padding: 3px 0 10px 0;
529     margin: 0px;
530     font-size: 1.1em;
531     font-weight: bold;
532     line-height: 20px;
533     color: #999;
534     text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
535     text-transform: uppercase;
536     word-wrap: break-word;
537     border-bottom: solid 1px #E3E3E3;
538     margin-bottom: 10px;
541 .path-tag .tagarea .controls,
542 .path-tag .tagarea .taggeditems {
543     @include clearfix();
545 .path-tag .tagarea .controls,
546 .path-tag .tag-backtoallitems {
547     text-align: center;
549 .path-tag .tagarea .controls .gotopage.nextpage {
550     float: right;
552 .path-tag .tagarea .controls .gotopage.prevpage {
553     float: left;
555 .path-tag .tagarea .controls .exclusivemode {
556     display: inline-block;
558 .path-tag .tagarea .controls.controls-bottom {
559     margin-top: 5px;
561 .path-tag .tagarea .controls .gotopage.nextpage::after {
562     padding-right: 5px;
563     padding-left: 5px;
564     content: "»";
566 .path-tag .tagarea .controls .gotopage.prevpage::before {
567     padding-right: 5px;
568     padding-left: 5px;
569     content: "«";
572 span.flagged-tag,
573 tr.flagged-tag,
574 span.flagged-tag a,
575 tr.flagged-tag a {
576     @extend .text-warning;
578 .tag-management-table td,
579 .tag-management-table th {
580     vertical-align: middle;
581     padding: 4px;
583 .tag-management-table .inplaceeditable.inplaceeditingon input {
584     width: 150px;
586 .path-admin-tag .addstandardtags {
587     float: right;
588     img {
589         margin: 0 5px;
590     }
592 .path-tag .tag-relatedtags {
593     padding-top: 10px;
595 .path-tag .tag-management-box {
596     text-align: right;
598 .path-tag .tag-index-toc {
599     padding: 10px;
600     text-align: center;
602 .path-tag .tag-index-toc li,
603 .path-tag .tag-management-box li {
604     margin-left: 5px;
605     margin-right: 5px;
607 .path-tag .tag-management-box li a.edittag {
608     background-image: url([[pix:moodle|i/settings]]);
610 .path-tag .tag-management-box li a.flagasinappropriate {
611     background-image: url([[pix:moodle|i/flagged]]);
613 .path-tag .tag-management-box li a.removefrommyinterests {
614     background-image: url([[pix:moodle|t/delete]]);
616 .path-tag .tag-management-box li a.addtomyinterests {
617     background-image: url([[pix:moodle|t/add]]);
619 .path-tag .tag-management-box li a {
620     background-repeat: no-repeat;
621     background-position: left;
622     padding-left: 17px;
624 .tag_feed.media-list .media .itemimage {
625     float: left;
627 .tag_feed.media-list .media .itemimage img {
628     height: 35px;
629     width: 35px;
631 .tag_feed.media-list .media .media-body {
632     padding-right: 10px;
633     padding-left: 10px;
635 .tag_feed .media .muted a {
636     @extend .text-muted;
638 .tag_cloud {
639     text-align: center;
641 .tag_cloud .inline-list li {
642     padding: 0px 0.2em;
644 .tag_cloud .tag_overflow {
645     margin-top: 1em;
646     font-style: italic;
648 .tag_cloud .s20 {
649     font-size: 2.7em;
651 .tag_cloud .s19 {
652     font-size: 2.6em;
654 .tag_cloud .s18 {
655     font-size: 2.5em;
657 .tag_cloud .s17 {
658     font-size: 2.4em;
660 .tag_cloud .s16 {
661     font-size: 2.3em;
663 .tag_cloud .s15 {
664     font-size: 2.2em;
666 .tag_cloud .s14 {
667     font-size: 2.1em;
669 .tag_cloud .s13 {
670     font-size: 2em;
672 .tag_cloud .s12 {
673     font-size: 1.9em;
675 .tag_cloud .s11 {
676     font-size: 1.8em;
678 .tag_cloud .s10 {
679     font-size: 1.7em;
681 .tag_cloud .s9 {
682     font-size: 1.6em;
684 .tag_cloud .s8 {
685     font-size: 1.5em;
687 .tag_cloud .s7 {
688     font-size: 1.4em;
690 .tag_cloud .s6 {
691     font-size: 1.3em;
693 .tag_cloud .s5 {
694     font-size: 1.2em;
696 .tag_cloud .s4 {
697     font-size: 1.1em;
699 .tag_cloud .s3 {
700     font-size: 1em;
702 .tag_cloud .s2 {
703     font-size: 0.9em;
705 .tag_cloud .s1 {
706     font-size: 0.8em;
708 .tag_cloud .s0 {
709     font-size: 0.7em;
711 .tag_list ul {
712     display: inline;
714 .tag_list.hideoverlimit .overlimit {
715     display:none;
717 .tag_list .tagmorelink {
718     display:none;
720 .tag_list.hideoverlimit .tagmorelink {
721     display:inline;
723 .tag_list.hideoverlimit .taglesslink {
724     display:none;
727 /**
728 * Web Service
729 */
730 #webservice-doc-generator td {
731     text-align: left;
732     border: 0 solid black;
734 /**
735 * Smart Select Element
736 */
737 .smartselect {
738     position: absolute;
740 .smartselect .smartselect_mask {
741     background-color: #fff;
743 .smartselect ul  {
744     padding: 0;
745     margin: 0;
747 .smartselect ul li {
748     list-style: none;
750 .smartselect .smartselect_menu {
751     margin-right: 5px;
753 .safari .smartselect .smartselect_menu {
754     margin-left: 2px;
756 .smartselect .smartselect_menu,
757 .smartselect .smartselect_submenu {
758     border: 1px solid #000;
759     background-color: #FFF;
760     display: none;
762 .smartselect .smartselect_menu.visible,
763 .smartselect .smartselect_submenu.visible {
764     display: block;
766 .smartselect .smartselect_menu_content ul li {
767     position: relative;
768     padding: 2px 5px;
770 .smartselect .smartselect_menu_content ul li a {
771     color: #333;
772     text-decoration: none;
774 .smartselect .smartselect_menu_content ul li a.selectable {
775     color: inherit;
777 .smartselect .smartselect_submenuitem {
778     background-image: url([[pix:moodle|t/collapsed]]);
779     background-repeat: no-repeat;
780     background-position: 100%;
782 /** Spanning mode */
783 .smartselect.spanningmenu .smartselect_submenu {
784     position: absolute;
785     top: -1px;
786     left: 100%;
788 .smartselect.spanningmenu .smartselect_submenu a {
789     white-space: nowrap;
790     padding-right: 16px;
792 .smartselect.spanningmenu .smartselect_menu_content ul li a.selectable:hover {
793     text-decoration: underline;
795 /** Compact mode */
796 .smartselect.compactmenu .smartselect_submenu {
797     position: relative;
798     margin: 2px -3px;
799     margin-left: 10px;
800     display: none;
801     border-width: 0;
802     z-index: 1010;
804 .smartselect.compactmenu .smartselect_submenu.visible {
805     display: block;
807 .smartselect.compactmenu .smartselect_menu {
808     z-index: 1000;
809     overflow: hidden;
811 .smartselect.compactmenu .smartselect_submenu .smartselect_submenu {
812     z-index: 1020;
814 .smartselect.compactmenu .smartselect_submenuitem:hover > .smartselect_menuitem_label {
815     font-weight: bold;
817 /**
818 * Registration
819 */
820 #page-admin-registration-register .registration_textfield {
821     width: 300px;
823 /**
824 * Enrol
825 */
826 .userenrolment {
827     width: 100%;
828     border-collapse: collapse;
830 .userenrolment tr {
831     vertical-align:top;
833 .userenrolment td {
834     padding: 0;
835     height: 41px;
837 .userenrolment .subfield {
838     margin-right: 5px;
840 .userenrolment .col_userdetails .subfield {
841     margin-left: 40px;
843 .userenrolment .col_userdetails .subfield_picture {
844     float: left;
845     margin-left: 0;
847 .userenrolment .col_lastseen {
848     width: 150px;
850 .userenrolment .col_role {
851     width: 262px;
853 .userenrolment .col_role .roles,
854 .userenrolment .col_group .groups {
855     margin-right: 30px;
857 .userenrolment .col_role .role,
858 .userenrolment .col_group .group {
859     float: left;
860     padding: 3px;
861     margin: 3px;
862     white-space: nowrap;
864 .userenrolment .col_role .role a,
865 .userenrolment .col_group .group a {
866     margin-left: 3px;
867     cursor: pointer;
869 .userenrolment .col_role .addrole,
870 .userenrolment .col_group .addgroup {
871     float: right;
872     padding: 3px;
873     margin: 3px;
874     > a:hover {
875         border-bottom:1px solid #666;
876     }
878 .userenrolment .col_role .addrole img,
879 .userenrolment .col_group .addgroup img {
880     vertical-align: baseline;
883 .userenrolment .hasAllRoles .col_role .addrole {
884     display: none;
887 .userenrolment .col_enrol .enrolment {
888     float: left;
889     padding: 3px;
890     margin: 3px;
892 .userenrolment .col_enrol .enrolment a {
893     float: right;
894     margin-left: 3px;
896 #page-enrol-users {
897     .enrol_user_buttons {
898         float: right;
899         .enrolusersbutton {
900             display: inline;
901             div,
902             form {
903                 display: inline;
904                 margin-right: 0;
905             }
906         }
907     }
908     #filterform {
909         @extend .card;
910         display: inline-block;
911         .fitem {
912             display: inline-block;
913             line-height: $line-height-base * 2;
914             margin-right: .3em;
915             white-space: nowrap;
916             label {
917                 display: inline;
918                 line-height: $line-height-base;
919                 padding-right: .3em;
920             }
921             :before,
922             :after {
923                 display: inline;
924             }
925         }
926         div,
927         fieldset {
928             display: inline;
929             float: none;
930             clear: none;
931             width: auto;
932             margin: 0;
933         }
934         select,
935         .ftext input {
936             width: 7em;
937         }
938         input,
939         select {
940             margin-bottom: 0;
941         }
942     }
943   .user-enroller-panel .uep-search-results .user .details {
944     width: 237px;
945   }
946   .user-enroller-panel .uep-search-results .cohort .details {
947     width: 237px;
948   }
950 #page-enrol-users .enrol-users-page-action input {
951     margin-left: 0
953 .corelightbox {
954     background-color: #CCC;
955     position: absolute;
956     top: 0;
957     left: 0;
958     width: 100%;
959     height: 100%;
960     text-align: center;
962 .corelightbox img {
963     position: fixed;
964     top: 50%;
965     left: 50%;
968 .mod-indent-outer {
969     display: table;
971 .mod-indent {
972     display: table-cell;
974 .label .mod-indent {
975   float:left;
976   padding-top:20px
979 $mod-indent-size: 30px;
980 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
981 @for $i from 1 through 16 {
982    $width: ($i * $mod-indent-size);
984    .mod-indent-#{$i} {
985        width: $width;
986    }
988 .mod-indent-huge {
989    width: (16 * $mod-indent-size);
992 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
993 .resourcecontent .mediaplugin_mp3 object {
994     height: 25px;
995     width: 600px
997 .resourcecontent audio.mediaplugin_html5audio {
998     width: 600px
1000 /** Large resource images should avoid hidden overflow **/
1001 .resourceimage {
1002     max-width: 100%;
1004 /* Audio player size in 'inline' mode (can only change width, as above) */
1005 .mediaplugin_mp3 object {
1006     height: 15px;
1007     width: 300px
1009 audio.mediaplugin_html5audio {
1010     width: 300px
1012 /* TinyMCE moodle media preview frame should not have padding */
1013 .core_media_preview.pagelayout-embedded #content {
1014     padding: 0;
1016 .core_media_preview.pagelayout-embedded #maincontent {
1017     height: 0;
1019 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1020     padding: 0;
1021     margin: 0;
1022     min-width: 0;
1023     background: none;
1025 .path-rating .ratingtable {
1026     width: 100%;
1027     margin-bottom: 1em;
1029 .path-rating .ratingtable th.rating {
1030     width: 100%;
1032 .path-rating .ratingtable td.rating,
1033 .path-rating .ratingtable td.time {
1034     white-space: nowrap;
1035     text-align: center;
1037 .initialbar {
1038     a, strong {
1039         padding-left: 3px;
1040         padding-right: 3px;
1041     }
1044 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1045 .moodle-dialogue-base .moodle-dialogue-lightbox {
1046     background-color: #AAA;
1048 .moodle-dialogue-base .hidden,
1049 .moodle-dialogue-base .moodle-dialogue-hidden {
1050     display: none;
1052 .no-scrolling {
1053     overflow: hidden;
1055 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1056     left: 0px;
1057     top: 0px;
1058     right: 0px;
1059     bottom: -50px;
1060     position: fixed;
1062 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1063     overflow: auto;
1065 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1066     width: 28px;
1067     height: 16px;
1068     background-size: 100%;
1070 .moodle-dialogue-base .moodle-dialogue-wrap {
1071     background-color: #fff;
1072     border: 1px solid #ccc;
1074 .moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content {
1075     @extend .modal-content;
1077 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1078     @extend .modal-header;
1080 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1081     // Undo some YUI damage.
1082     min-height: 3rem;
1083     color: initial;
1084     background-color: initial;
1085     background: initial;
1086     font-size: 1.5rem;
1087     line-height: 1.5;
1089 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1090     @extend .modal-title;
1092 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1093     padding: 5px;
1094     right: 0;
1096 .moodle-dialogue-base .closebutton {
1097     @extend .close;
1098     margin: 0;
1099     padding: 10px ! important;
1100     background: 0;
1101     border-style: none;
1102     box-shadow: none;
1104 .moodle-dialogue-base .closebutton::after {
1105     content: "×";
1107 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1108     @extend .modal-body;
1111 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1112     overflow: auto;
1113     position: absolute;
1114     top: 0px;
1115     bottom: 50px;
1116     left: 0px;
1117     right: 0px;
1118     margin: 0px;
1119     border: 0px;
1121 .moodle-dialogue-confirm .confirmation-dialogue {
1122     text-align: center;
1124 .moodle-dialogue-confirm .confirmation-dialogue input {
1125     text-align: center;
1127 .moodle-dialogue-exception .moodle-exception-message {
1128     text-align: center
1130 .moodle-dialogue-exception .moodle-exception-param label {
1131     font-weight: bold;
1133 .moodle-dialogue-exception .param-stacktrace label {
1134     background-color: #EEE;
1135     border: 1px solid #ccc;
1136     border-bottom-width: 0;
1138 .moodle-dialogue-exception .param-stacktrace pre {
1139     border: 1px solid #ccc;
1140     background-color: #fff;
1142 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1143     color: navy;
1144     font-size: $font-size-sm;
1146 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1147     @extend .text-warning;
1148     font-size: $font-size-sm;
1150 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1151     color: #333;
1152     font-size: 90%;
1153     border-bottom: 1px solid #eee;
1155 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1156     @extend .modal-footer;
1158 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1159     // Undo some YUI damage.
1160     background: initial;
1162 .moodle-dialogue-confirm .confirmation-message {
1163     margin: 0.5em 1em;
1165 .moodle-dialogue-confirm .confirmation-dialogue input {
1166     min-width: 80px
1168 .moodle-dialogue-exception .moodle-exception-message {
1169     margin: 1em;
1171 .moodle-dialogue-exception .moodle-exception-param {
1172     margin-bottom: 0.5em;
1174 .moodle-dialogue-exception .moodle-exception-param label {
1175     width: 150px;
1177 .moodle-dialogue-exception .param-stacktrace label {
1178     display: block;
1179     margin: 0;
1180     padding: 4px 1em;
1182 .moodle-dialogue-exception .param-stacktrace pre {
1183     display: block;
1184     height: 200px;
1185     overflow: auto;
1187 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1188     display: inline-block;
1189     margin: 4px 0;
1191 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1192     display: inline-block;
1193     width: 50px;
1194     margin: 4px 1em;
1196 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1197     padding-left: 25px;
1198     margin-bottom: 4px;
1199     padding-bottom: 4px;
1201 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1202     opacity: 0.75;
1203     width: 100%;
1204     height: 100%;
1205     top: 0;
1206     left: 0;
1207     background-color: white;
1208     text-align: center;
1209     padding: 10% 0;
1211 /* Apply a default max-height on tooltip text */
1212 .moodle-dialogue .tooltiptext {
1213     max-height: 300px;
1216 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1217     z-index: 3001;
1219     .moodle-dialogue-bd {
1220         overflow: auto;
1221     }
1224 /**
1225  * Chooser Dialogues (moodle-core-chooserdialogue)
1226  *
1227  * This CSS belong to the chooser dialogue which should work both with, and
1228  * without javascript enabled
1229  */
1230 /* Hide the dialog and it's title */
1231 .chooserdialoguebody,
1232 .choosertitle {
1233     display: none;
1235 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1236     margin: 0;
1238 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1239     padding: 0;
1240     background: #F2F2F2;
1241     @include border-bottom-radius(10px);
1243 /* Center the submit buttons within the area */
1244 .choosercontainer #chooseform .submitbuttons {
1245     padding: 0.7em 0;
1246     text-align: center;
1248 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1249 @media (max-height: 639px) {
1250     .ios.safari .choosercontainer #chooseform .submitbuttons {
1251         padding: 45px 0;
1252     }
1254 .choosercontainer #chooseform .submitbuttons input {
1255     min-width: 100px;
1256     margin: 0 0.5em;
1258 /* Various settings for the options area */
1259 .choosercontainer #chooseform .options {
1260     position: relative;
1261     border-bottom: 1px solid #BBBBBB;
1263 /* Only set these options if we're showing the js container */
1264 .jschooser .choosercontainer #chooseform .alloptions {
1265     overflow-x: hidden;
1266     overflow-y: auto;
1267     max-width: 20.3em;
1268     @include box-shadow(inset 0 0 30px 0px #ccc);
1269     .option {
1270         input[type=radio] {
1271             display: inline-block;
1272         }
1273         .typename {
1274             display: inline-block;
1275             width: 65%;
1276         }
1277     }
1279 /* Settings for option rows and option subtypes */
1280 .choosercontainer #chooseform .moduletypetitle,
1281 .choosercontainer #chooseform .option,
1282 .choosercontainer #chooseform .nonoption {
1283     margin-bottom: 0;
1284     padding: 0 1.6em 0 1.6em;
1286 .choosercontainer #chooseform .moduletypetitle {
1287     text-transform: uppercase;
1288     padding-top: 1.2em;
1289     padding-bottom: 0.4em;
1291 .choosercontainer #chooseform .option .typename,
1292 .choosercontainer #chooseform .nonoption .typename {
1293     padding: 0 0 0 0.5em;
1296 .choosercontainer #chooseform .option input[type=radio],
1297 .choosercontainer #chooseform .option span.typename {
1298     vertical-align: middle;
1300 .choosercontainer #chooseform .option label {
1301     display: block;
1302     padding: 0.3em 0 0.1em 0;
1303     border-bottom: 1px solid #FFFFFF;
1305 .choosercontainer #chooseform .nonoption {
1306     padding-left: 2.7em;
1307     padding-top: 0.3em;
1308     padding-bottom: 0.1em;
1310 .choosercontainer #chooseform .subtype {
1311     margin-bottom: 0;
1312     padding: 0 1.6em 0 3.2em;
1314 .choosercontainer #chooseform .subtype .typename {
1315     margin: 0 0 0 0.2em;
1317 /* The instruction/help area */
1318 .jschooser .choosercontainer #chooseform .instruction,
1319 .jschooser .choosercontainer #chooseform .typesummary {
1320    display: none;
1321     position: absolute;
1322     top: 0;
1323     right: 0;
1324     bottom: 0;
1325     left: 20.3em;
1326     margin: 0;
1327     padding: 1.6em;
1328     background-color: #fff;
1329     overflow-x: hidden;
1330     overflow-y: auto;
1331     line-height: 2em;
1333 /* Selected option settings */
1334 .jschooser .choosercontainer #chooseform .instruction,
1335 .choosercontainer #chooseform .selected .typesummary {
1336     display: block;
1338 .choosercontainer #chooseform .selected {
1339     background-color: #fff;
1340     @include box-shadow(0px 0 10px 0 #ccc);
1342 /* Form element: listing */
1343 .formlistingradio {
1344     padding-bottom: 25px;
1345     padding-right: 10px;
1347 .formlistinginputradio {
1348     float: left;
1350 .formlistingmain {
1351     min-height: 225px;
1353 .formlisting {
1354     position: relative;
1355     margin: 15px 0;
1356     padding: 1px 19px 14px;
1357     background-color: white;
1358     border: 1px solid #DDD;
1359     @include border-radius(4px);
1361 .formlistingmore {
1362     position: absolute;
1363     cursor: pointer;
1364     bottom: -1px;
1365     right: -1px;
1366     padding: 3px 7px;
1367     font-size: 12px;
1368     font-weight: bold;
1369     background-color: whiteSmoke;
1370     border: 1px solid #ddd;
1371     color: #9DA0A4;
1372     @include border-radius(4px 0 4px 0);
1374 .formlistingall {
1375     margin: 15px 0;
1376     padding: 0;
1377     @include border-radius(4px);
1379 .formlistingrow {
1380     cursor: pointer;
1381     border-bottom: 1px solid;
1382     border-color: #E1E1E8;
1383     border-left: 1px solid #E1E1E8;
1384     border-right: 1px solid #E1E1E8;
1385     background-color: #F7F7F9;
1386     @include border-radius(0 0 4px 4px);
1387     padding: 6px;
1388     top: 50%;
1389     left: 50%;
1390     min-height: 34px;
1391     float: left;
1392     width: 150px;
1394 body.jsenabled .formlistingradio {
1395     display: none;
1397 body.jsenabled .formlisting {
1398     display: block;
1401 /* Badges styles */
1402 table.collection {
1403     @extend .table;
1404     @extend .table-bordered;
1405     @extend .table-striped;
1407 table.collection .name {
1408     text-align: left;
1409     vertical-align: middle;
1411 table.collection .awards {
1412     width: 10%;
1413     text-align: center;
1414     vertical-align: middle;
1416 table.collection .criteria {
1417     width: 40%;
1418     text-align: left;
1419     vertical-align: top;
1421 table.collection .badgeimage,
1422 table.collection .status {
1423     width: 15%;
1424     text-align: center;
1425     vertical-align: middle;
1427 table.collection .description {
1428     width: 25%;
1429     text-align: left;
1431 table.collection .actions {
1432     width: 11em;
1433     text-align: center;
1434     vertical-align: middle;
1437 a.criteria-action {
1438     padding: 0px 3px;
1439     float: right;
1441 div.criteria-description {
1442     padding: 10px 15px;
1443     margin: 5px 0px;
1444     background: none repeat scroll 0 0 #f9f9f9;
1445     border: 1px solid #EEE;
1447 ul.badges {
1448     margin: 0;
1449     list-style: none;
1451 .badges li {
1452     position: relative;
1453     display: inline-block;
1454     padding-top: 1em;
1455     text-align: center;
1456     vertical-align: top;
1457     width: 150px;
1459 .badges li .badge-name {
1460     display: block;
1461     padding: 5px;
1463 .badges li > img {
1464     position: absolute;
1466 .badges li .badge-image {
1467     width: 100px;
1468     height: 100px;
1469     left: 10px;
1470     top: 0px;
1471     z-index: 1;
1473 .badges li .badge-actions {
1474     position: relative;
1476 .badges li .expireimage {
1477     width: 100px;
1478     height: 100px;
1479     left: 25px;
1480     top: 0px;
1481     position: absolute;
1482     z-index: 10;
1483     opacity: 0.85;
1486 #badge-image {
1487     background-color: transparent;
1488     padding: 0;
1489     position: relative;
1490     min-width: 100px;
1491     width: 20%;
1492     display: inline-block;
1493     vertical-align: top;
1494     margin-top: 17px;
1496     .expireimage {
1497         width: 100px;
1498         height: 100px;
1499         left: 0px;
1500         top: 0px;
1501         opacity: 0.85;
1502         position: absolute;
1503         z-index:10;
1504     }
1506     .singlebutton {
1507         padding-top: 5px;
1509         input {
1510             margin-left: 0px;
1511         }
1512     }
1514 #badge-details {
1515     display: inline-block;
1516     width: 79%;
1519 #badge-overview dl,
1520 #badge-details dl {
1521     margin: 0;
1523     dt,
1524     dd {
1525         vertical-align: top;
1526         padding: 3px 0;
1527     }
1528     dt {
1529         clear: both;
1530         display: inline-block;
1531         width: 20%;
1532         min-width: 100px;
1533     }
1534     dd {
1535         display: inline-block;
1536         width: 79%;
1537         margin-left: 1%;
1538     }
1541 .badge-profile {
1542     vertical-align: top;
1544 .connected {
1545     @extend .text-success;
1547 .notconnected {
1548     @extend .text-danger;
1550 .connecting {
1551     @extend .text-warning;
1553 #page-badges-award .recipienttable tr td {
1554     vertical-align: top;
1556 #page-badges-award .recipienttable tr td.actions .actionbutton {
1557     margin: 0.3em 0;
1558     padding: 0.5em 0;
1559     width: 100%;
1561 #page-badges-award .recipienttable tr td.existing,
1562 #page-badges-award .recipienttable tr td.potential {
1563     width: 42%;
1566 #issued-badge-table .activatebadge {
1567     display: inline-block;
1569 .statusbox.active {
1570     background-color: $state-success-bg;
1572 .statusbox.inactive {
1573     background-color: $state-warning-bg;
1575 .statusbox {
1576     text-align: center;
1577     margin-bottom: 5px;
1578     padding: 5px;
1580 .statusbox .activatebadge {
1581     display: inline-block;
1583 .statusbox .activatebadge input[type=submit]{
1584     margin: 3px;
1586 .activatebadge {
1587     margin: 0px;
1588     text-align: left;
1589     vertical-align: middle;
1591 img#persona_signin {
1592     cursor: pointer;
1594 .addcourse {
1595     float: right;
1597 .invisiblefieldset {
1598     display: inline;
1599     margin: 0;
1600     padding: 0;
1601     border-width: 0;
1603 .breadcrumb-nav {
1604     float: left;
1605     margin-bottom: 10px;
1607 .breadcrumb-button .singlebutton div {
1608     margin-right: 0;
1610 .breadcrumb-nav .breadcrumb {
1611     margin: 0;
1614 /** Header-bar styles **/
1615 .page-context-header {
1616     // We need to be explicit about the height of the header.
1617     $pageHeaderHeight: 140px;
1619     // Do not remove these rules.
1620     overflow: hidden;
1622     .page-header-image,
1623     .page-header-headings {
1624         display: block;
1625         position: relative;
1626     }
1627     .page-header-image {
1628         float: left;
1629         margin-right: 1em;
1630         margin-bottom: 1em;
1631     }
1632     .page-header-headings {
1633         margin-top: 30px;
1634         margin-bottom: 10px;
1636         h1 {
1637             display: block;
1638         }
1639     }
1641     .page-header-headings,
1642     .header-button-group {
1643         position: relative;
1644         line-height: 24px;
1645         vertical-align: middle;
1646     }
1648     .header-button-group {
1649         display: block;
1650         float: left;
1651         a {
1652             position: relative;
1654             // Don't touch it unless you know exactly what you are doing.
1655             top: -0.4em;
1656         }
1657     }
1660 ul.dragdrop-keyboard-drag li {
1661     list-style-type: none;
1664 .block-control-actions .moodle-core-dragdrop-draghandle img {
1665     width: 12px;
1666     height: 12px;
1669 a.disabled:hover,
1670 a.disabled {
1671     text-decoration: none;
1672     cursor: default;
1673     font-style: italic;
1674     color: #808080;
1676 body.lockscroll {
1677   height: 100%;
1678   overflow: hidden;
1681 .progressbar_container {
1682     max-width: 500px;
1683     margin: 0 auto;
1686 /* IE10 only fix for calendar titling */
1687 .ie10 .yui3-calendar-header-label {
1688     display: inline-block;
1691 dd:before,
1692 dd:after {
1693   display: block;
1694   content: " ";
1696 dd:after {
1697   clear: both;
1700 // Active tabs with links should have a different
1701 // cursor to indicate they are clickable.
1702 .nav-tabs > .active > a[href],
1703 .nav-tabs > .active > a[href]:hover,
1704 .nav-tabs > .active > a[href]:focus {
1705     cursor: pointer;
1708 .inplaceeditable {
1710     &.inplaceeditingon {
1711         position: relative;
1713         .editinstructions {
1714             margin-top: -30px;
1715             font-weight: normal;
1716             margin-right: 0;
1717             margin-left: 0;
1718             left: 0;
1719             right: auto;
1720             white-space: nowrap;
1721         }
1723         input {
1724             width: 330px;
1725             height: 16px;
1726             vertical-align: text-bottom;
1727             margin-bottom: 0;
1728         }
1730         select {
1731             margin-bottom: 0;
1732         }
1733     }
1735     .quickediticon img {
1736         opacity: 0.2;
1737     }
1739     .quickeditlink {
1740         color: inherit;
1741         text-decoration: inherit;
1742     }
1744     &:hover .quickeditlink .quickediticon img,
1745     .quickeditlink:focus .quickediticon img {
1746         opacity: 1;
1747     }
1749     &.inplaceeditable-toggle .quickediticon {
1750         display: none;
1751     }
1754 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
1755     margin-top: -20px;
1757 // Reset for ul.
1758 ul {
1759     padding-left: 1rem;