MDL-55413 theme_noname: action-menu conversion
[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 .dir-ltr,
15 .mdl-left {
16     text-align: left;
17 }
18 .dir-rtl,
19 .mdl-right {
20     text-align: right;
21 }
22 #add,
23 #remove,
24 .centerpara,
25 .mdl-align {
26     text-align: center;
27 }
28 a.dimmed,
29 a.dimmed:link,
30 a.dimmed:visited,
31 a.dimmed_text,
32 a.dimmed_text:link,
33 a.dimmed_text:visited,
34 .dimmed_text,
35 .dimmed_text a,
36 .dimmed_text a:link,
37 .dimmed_text a:visited,
38 .usersuspended,
39 .usersuspended a,
40 .usersuspended a:link,
41 .usersuspended a:visited,
42 .dimmed_category,
43 .dimmed_category a {
44     @extend .text-muted
45 }
46 .activity.label .dimmed_text {
47     opacity: 0.5;
48 }
49 .unlist,
50 .unlist li,
51 .inline-list,
52 .inline-list li,
53 .block .list,
54 .block .list li,
55 .section li.activity,
56 .section li.movehere,
57 .tabtree li {
58     list-style: none;
59     margin: 0;
60     padding: 0;
61 }
62 .inline,
63 .inline-list li {
64     display: inline;
65 }
66 .notifytiny {
67     font-size: $font-size-xs;
68 }
69 .notifytiny li,
70 .notifytiny td {
71     font-size: 100%;
72 }
73 .red,
74 .notifyproblem {
75     @extend .text-warning;
76 }
77 .green,
78 .notifysuccess {
79     @extend .text-success;
80 }
81 .highlight {
82     @extend .text-info;
83 }
84 .reportlink {
85     text-align: right;
86 }
87 a.autolink.glossary:hover {
88     cursor: help;
89 }
90 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
91 .collapsibleregioncaption {
92     white-space: nowrap;
93 }
94 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
95     cursor: pointer;
96 }
97 .collapsibleregioncaption img {
98     vertical-align: middle;
99 }
101 .jsenabled .hiddenifjs {
102     display: none;
104 .visibleifjs {
105     display: none;
107 .jsenabled .visibleifjs {
108     display: inline;
110 .jsenabled .collapsibleregion {
111     overflow: hidden;
113 .jsenabled .collapsed .collapsibleregioninner {
114     visibility: hidden;
116 .collapsible-actions {
117     display: none;
118     text-align: right;
120 .jsenabled .collapsible-actions {
121     display: block;
123 .collapsible-actions .collapseexpand {
124     padding-left: 20px;
125     background: url([[pix:t/collapsed]]) 2px center no-repeat;
127 /* rtl:ignore */
128 .dir-rtl .collapsible-actions .collapseexpand {
129     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
131 .collapsible-actions .collapse-all {
132     background-image: url([[pix:t/expanded]]);
134 .yui-overlay .yui-widget-bd {
135     background-color: #FFEE69;
136     border: 1px solid #A6982B;
137     border-top-color: #D4C237;
138     color: #000000;
139     left: 0;
140     padding: 2px 5px;
141     position: relative;
142     top: 0;
143     z-index: 1;
145 .clearer {
146     background: transparent;
147     border-width: 0;
148     clear: both;
149     display: block;
150     height: 1px;
151     margin: 0;
152     padding: 0;
154 .bold,
155 .warning,
156 .errorbox .title,
157 .pagingbar .title,
158 .pagingbar .thispage {
159     font-weight: bold;
161 img.resize {
162     height: 1em;
163     width: 1em;
165 .action-menu {
166     white-space: nowrap;
168 .action-menu img {
169     width: 16px;
170     height: 16px;
171     box-sizing: content-box;
172     padding-right: 0.5rem;
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.icon,
189 img.iconhelp, .helplink img {
190     height: 16px;
191     vertical-align: text-bottom;
192     width: 16px;
193     padding-right: 0.5rem;
194     box-sizing: content-box;
196 img.iconlarge {
197     height: 24px;
198     width: 24px;
199     vertical-align: middle;
201 img.iconsort {
202     vertical-align: text-bottom;
203     padding-left: .3em;
204     margin-bottom: .15em;
206 img.icontoggle {
207     height: 17px;
208     vertical-align: middle;
209     width: 50px;
211 img.iconkbhelp {
212     height: 17px;
213     width: 49px;
215 .boxaligncenter {
216     margin-left: auto;
217     margin-right: auto;
219 .boxalignright {
220     margin-left: auto;
221     margin-right: 0;
223 .boxalignleft {
224     margin-left: 0;
225     margin-right: auto;
227 .boxwidthnarrow {
228     width: 30%;
230 .boxwidthnormal {
231     width: 50%;
233 .boxwidthwide {
234     width: 80%;
236 .headermain {
237     font-weight: bold;
239 #maincontent {
240     display: block;
241     height: 1px;
242     overflow: hidden;
244 img.uihint {
245     cursor: help;
247 #addmembersform table {
248     margin-left: auto;
249     margin-right: auto;
251 table.flexible .emptyrow {
252     display: none;
254 img.emoticon {
255     vertical-align: middle;
256     width: 15px;
257     height: 15px;
259 form.popupform,
260 form.popupform div {
261     display: inline;
263 .arrow_button input {
264     overflow: hidden;
266 /** The 1-pixel padding is there to avoid phantom scroll bars on OS X (FF, Safari and Chrome)**/
267 .no-overflow {
268     overflow: auto;
269     padding-bottom: 1px;
271 .pagelayout-report .no-overflow {
272     overflow: visible;
274 .no-overflow > .generaltable {
275     margin-bottom: 0;
277 // Accessibility features
279 // Accessibility: text 'seen' by screen readers but not visual users.
280 .accesshide {
281     position: absolute;
282     left: -10000px;
283     font-weight: normal;
284     font-size: 1em;
286 span.hide,
287 div.hide {
288     display: none;
290 // Accessibility: Skip block link, for keyboard-only users.
291 a.skip-block,
292 a.skip {
293     position: absolute;
294     top: -1000em;
295     font-size: 0.85em;
296     text-decoration: none;
298 a.skip-block:focus,
299 a.skip-block:active,
300 a.skip:focus,
301 a.skip:active {
302     position: static;
303     display: block;
305 .skip-block-to {
306     display: block;
307     height: 1px;
308     overflow: hidden;
310 // Blogs
311 .addbloglink {
312     text-align: center;
314 .blog_entry .audience {
315     text-align: right;
316     padding-right: 4px;
318 .blog_entry .tags {
319     margin-top: 15px;
321 .blog_entry .content {
322     margin-left: 43px;
324 // Group
325 #page-group-index #groupeditform {
326     text-align: center;
328 #doc-contents h1 {
329     margin: 1em 0 0 0;
331 #doc-contents ul {
332     margin: 0;
333     padding: 0;
334     width: 90%;
336 #doc-contents ul li {
337     list-style-type: none;
339 .groupmanagementtable td {
340     vertical-align: top;
342 .groupmanagementtable #existingcell,
343 .groupmanagementtable #potentialcell {
344     width: 42%;
346 .groupmanagementtable #buttonscell {
347     width: 16%;
349 .groupmanagementtable #buttonscell p.arrow_button input {
350     width: auto;
351     min-width: 80%;
352     margin: 0 auto;
354 .groupmanagementtable #removeselect_wrapper,
355 .groupmanagementtable #addselect_wrapper {
356     width: 100%;
358 .groupmanagementtable #removeselect_wrapper label,
359 .groupmanagementtable #addselect_wrapper label {
360     font-weight: normal;
362 #group-usersummary {
363     width: 14em;
365 .groupselector {
366     margin-top: 3px;
367     margin-bottom: 3px;
368     display: inline-block;
370 .groupselector label {
371     display: inline-block;
373 // Data format selector
374 .dataformatselector {
375     margin: 1em 0;
377 .dataformatselector label {
378     display: inline-block;
379     margin: 0 5px 10px 0;
380     line-height: 30px;
381     vertical-align: top;
384 // Login
385 .loginbox {
386     margin: 15px;
387     overflow: visible;
389 .loginbox.twocolumns {
390     margin: 15px;
392 .loginbox h2,
393 .loginbox .subcontent {
394     margin: 5px;
395     padding: 10px;
396     text-align: center;
398 .loginbox .loginpanel .desc {
399     margin: 0;
400     padding: 0;
401     margin-bottom: 5px;
402     margin-top:15px;
404 .loginbox .signuppanel .subcontent {
405     text-align: left;
407 .loginbox .loginsub {
408     margin-left: 0;
409     margin-right: 0;
411 .loginbox .guestsub,
412 .loginbox .forgotsub,
413 .loginbox .potentialidps {
414     margin: 5px 12%;
416 .loginbox .potentialidps .potentialidplist {
417     margin-left: 40%;
419 .loginbox .potentialidps .potentialidplist div {
420     text-align: left;
422 .loginbox .loginform {
423     margin-top: 1em;
424     text-align: left;
426 .loginbox .loginform .form-label {
427     float: left;
428     text-align: right;
429     width: 49%;
430     white-space: nowrap;
432 .loginbox .loginform .form-input {
433     float: right;
434     width: 50%;
436 .loginbox .loginform .form-input input {
437     width: 6em;
439 .loginbox .signupform {
440     margin-top: 1em;
441     text-align: center;
443 .loginbox.twocolumns .loginpanel,
444 .loginbox.twocolumns .signuppanel {
445     width: 48%;
446     border: 0;
447     margin: 0;
448     padding: 0;
449     display: block;
450     float: left;
451     margin-left: 2.76243%;
452     min-height: 30px;
453     margin-bottom: -2000px;
454     padding-bottom: 2000px;
455 //  @include box-sizing(border-box);
458 // Notes
459 .notepost {
460     margin-bottom: 1em;
462 .notepost .userpicture {
463     float: left;
464     margin-right: 5px;
466 .notepost .content,
467 .notepost .footer {
468     clear: both;
470 .notesgroup {
471     margin-left: 20px;
474 // My Moodle
475 .path-my .coursebox .overview {
476     margin: 15px 30px 10px 30px;
478 .path-my .coursebox .info {
479     float: none;
480     margin: 0;
483 // Modules
484 .mod_introbox {
485     padding: 10px;
487 table.mod_index {
488     width: 100%;
491 // Comments
492 .comment-ctrl {
493     font-size: 12px;
494     display: none;
495     margin: 0;
496     padding: 0;
498 .comment-ctrl h5 {
499     margin: 0;
500     padding: 5px;
502 .comment-area {
503     max-width: 400px;
504     padding: 5px;
506 .comment-area textarea {
507     width: 100%;
508     overflow: auto;
509     &.fullwidth {
510         -webkit-box-sizing: border-box;
511         -moz-box-sizing: border-box;
512         box-sizing: border-box;
513     }
515 .comment-area .fd {
516     text-align: right;
518 .comment-meta span {
519     color: gray;
521 .comment-link img {
522     vertical-align: text-bottom;
524 .comment-list {
525     font-size: 11px;
526     overflow: auto;
527     list-style: none;
528     padding: 0;
529     margin: 0;
531 .comment-list li {
532     margin: 2px;
533     list-style: none;
534     margin-bottom: 5px;
535     clear: both;
536     padding: .3em;
537     position: relative;
539 .comment-list li.first {
540     display: none
542 .comment-paging{
543     text-align: center;
545 .comment-paging .pageno{
546     padding: 2px;
548 .comment-paging .curpage{
549     border: 1px solid #CCC;
551 .comment-message .picture {
552     width: 20px;
553     float: left;
555 .comment-message .text {
556     margin: 0;
557     padding: 0;
559 .comment-message .text p {
560     padding: 0;
561     margin: 0 18px 0 0;
563 .comment-delete {
564     position: absolute;
565     top: 0;
566     right: 0;
567     margin: .3em;
569 .comment-report-selectall{
570     display: none
572 .comment-link {
573     display: none
575 .jsenabled .comment-link {
576     display: block
578 .jsenabled .showcommentsnonjs{
579     display: none
581 .jsenabled .comment-report-selectall{
582     display: inline
584 /**
585 * Completion progress report
586 */
587 .completion-expired {
588     @extend .text-warning;
590 .completion-expected {
591     font-size: $font-size-xs;
593 .completion-sortchoice,
594 .completion-identifyfield {
595     font-size: $font-size-xs;
596     vertical-align: bottom;
598 .completion-progresscell {
599     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;
611 #tag-search-box {
612     text-align: center;
613     margin: 10px auto;
616 .path-tag .tag-index-items .tagarea {
617     border: 1px solid #E3E3E3;
618     border-radius: 4px;
619     padding: 10px;
620     margin-top: 10px;
623 .path-tag .tag-index-items .tagarea h3 {
624     display: block;
625     padding: 3px 0 10px 0;
626     margin: 0px;
627     font-size: 1.1em;
628     font-weight: bold;
629     line-height: 20px;
630     color: #999;
631     text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
632     text-transform: uppercase;
633     word-wrap: break-word;
634     border-bottom: solid 1px #E3E3E3;
635     margin-bottom: 10px;
638 .path-tag .tagarea .controls,
639 .path-tag .tagarea .taggeditems {
640     @include clearfix();
642 .path-tag .tagarea .controls,
643 .path-tag .tag-backtoallitems {
644     text-align: center;
646 .path-tag .tagarea .controls .gotopage.nextpage {
647     float: right;
649 .path-tag .tagarea .controls .gotopage.prevpage {
650     float: left;
652 .path-tag .tagarea .controls .exclusivemode {
653     display: inline-block;
655 .path-tag .tagarea .controls.controls-bottom {
656     margin-top: 5px;
658 .path-tag .tagarea .controls .gotopage.nextpage::after {
659     padding-right: 5px;
660     padding-left: 5px;
661     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;
675 .tag-management-table td,
676 .tag-management-table th {
677     vertical-align: middle;
678     padding: 4px;
680 .tag-management-table .inplaceeditable.inplaceeditingon input {
681     width: 150px;
683 .path-admin-tag .addstandardtags {
684     float: right;
685     img {
686         margin: 0 5px;
687     }
689 .path-tag .tag-relatedtags {
690     padding-top: 10px;
692 .path-tag .tag-management-box {
693     text-align: right;
695 .path-tag .tag-index-toc {
696     padding: 10px;
697     text-align: center;
699 .path-tag .tag-index-toc li,
700 .path-tag .tag-management-box li {
701     margin-left: 5px;
702     margin-right: 5px;
704 .path-tag .tag-management-box li a.edittag {
705     background-image: url([[pix:moodle|i/settings]]);
707 .path-tag .tag-management-box li a.flagasinappropriate {
708     background-image: url([[pix:moodle|i/flagged]]);
710 .path-tag .tag-management-box li a.removefrommyinterests {
711     background-image: url([[pix:moodle|t/delete]]);
713 .path-tag .tag-management-box li a.addtomyinterests {
714     background-image: url([[pix:moodle|t/add]]);
716 .path-tag .tag-management-box li a {
717     background-repeat: no-repeat;
718     background-position: left;
719     padding-left: 17px;
721 .tag_feed.media-list .media .itemimage {
722     float: left;
724 .tag_feed.media-list .media .itemimage img {
725     height: 35px;
726     width: 35px;
728 .tag_feed.media-list .media .media-body {
729     padding-right: 10px;
730     padding-left: 10px;
732 .tag_feed .media .muted a {
733     @extend .text-muted;
735 .tag_cloud {
736     text-align: center;
738 .tag_cloud .inline-list li {
739     padding: 0px 0.2em;
741 .tag_cloud .tag_overflow {
742     margin-top: 1em;
743     font-style: italic;
745 .tag_cloud .s20 {
746     font-size: 2.7em;
748 .tag_cloud .s19 {
749     font-size: 2.6em;
751 .tag_cloud .s18 {
752     font-size: 2.5em;
754 .tag_cloud .s17 {
755     font-size: 2.4em;
757 .tag_cloud .s16 {
758     font-size: 2.3em;
760 .tag_cloud .s15 {
761     font-size: 2.2em;
763 .tag_cloud .s14 {
764     font-size: 2.1em;
766 .tag_cloud .s13 {
767     font-size: 2em;
769 .tag_cloud .s12 {
770     font-size: 1.9em;
772 .tag_cloud .s11 {
773     font-size: 1.8em;
775 .tag_cloud .s10 {
776     font-size: 1.7em;
778 .tag_cloud .s9 {
779     font-size: 1.6em;
781 .tag_cloud .s8 {
782     font-size: 1.5em;
784 .tag_cloud .s7 {
785     font-size: 1.4em;
787 .tag_cloud .s6 {
788     font-size: 1.3em;
790 .tag_cloud .s5 {
791     font-size: 1.2em;
793 .tag_cloud .s4 {
794     font-size: 1.1em;
796 .tag_cloud .s3 {
797     font-size: 1em;
799 .tag_cloud .s2 {
800     font-size: 0.9em;
802 .tag_cloud .s1 {
803     font-size: 0.8em;
805 .tag_cloud .s0 {
806     font-size: 0.7em;
808 .tag_list ul {
809     display: inline;
811 .tag_list.hideoverlimit .overlimit {
812     display:none;
814 .tag_list .tagmorelink {
815     display:none;
817 .tag_list.hideoverlimit .tagmorelink {
818     display:inline;
820 .tag_list.hideoverlimit .taglesslink {
821     display:none;
824 /**
825 * Web Service
826 */
827 #webservice-doc-generator td {
828     text-align: left;
829     border: 0 solid black;
831 /**
832 * Smart Select Element
833 */
834 .smartselect {
835     position: absolute;
837 .smartselect .smartselect_mask {
838     background-color: #fff;
840 .smartselect ul  {
841     padding: 0;
842     margin: 0;
844 .smartselect ul li {
845     list-style: none;
847 .smartselect .smartselect_menu {
848     margin-right: 5px;
850 .safari .smartselect .smartselect_menu {
851     margin-left: 2px;
853 .smartselect .smartselect_menu,
854 .smartselect .smartselect_submenu {
855     border: 1px solid #000;
856     background-color: #FFF;
857     display: none;
859 .smartselect .smartselect_menu.visible,
860 .smartselect .smartselect_submenu.visible {
861     display: block;
863 .smartselect .smartselect_menu_content ul li {
864     position: relative;
865     padding: 2px 5px;
867 .smartselect .smartselect_menu_content ul li a {
868     color: #333;
869     text-decoration: none;
871 .smartselect .smartselect_menu_content ul li a.selectable {
872     color: inherit;
874 .smartselect .smartselect_submenuitem {
875     background-image: url([[pix:moodle|t/collapsed]]);
876     background-repeat: no-repeat;
877     background-position: 100%;
879 /** Spanning mode */
880 .smartselect.spanningmenu .smartselect_submenu {
881     position: absolute;
882     top: -1px;
883     left: 100%;
885 .smartselect.spanningmenu .smartselect_submenu a {
886     white-space: nowrap;
887     padding-right: 16px;
889 .smartselect.spanningmenu .smartselect_menu_content ul li a.selectable:hover {
890     text-decoration: underline;
892 /** Compact mode */
893 .smartselect.compactmenu .smartselect_submenu {
894     position: relative;
895     margin: 2px -3px;
896     margin-left: 10px;
897     display: none;
898     border-width: 0;
899     z-index: 1010;
901 .smartselect.compactmenu .smartselect_submenu.visible {
902     display: block;
904 .smartselect.compactmenu .smartselect_menu {
905     z-index: 1000;
906     overflow: hidden;
908 .smartselect.compactmenu .smartselect_submenu .smartselect_submenu {
909     z-index: 1020;
911 .smartselect.compactmenu .smartselect_submenuitem:hover > .smartselect_menuitem_label {
912     font-weight: bold;
914 /**
915 * Registration
916 */
917 #page-admin-registration-register .registration_textfield {
918     width: 300px;
920 /**
921 * Enrol
922 */
923 .userenrolment {
924     width: 100%;
925     border-collapse: collapse;
927 .userenrolment tr {
928     vertical-align:top;
930 .userenrolment td {
931     padding: 0;
932     height: 41px;
934 .userenrolment .subfield {
935     margin-right: 5px;
937 .userenrolment .col_userdetails .subfield {
938     margin-left: 40px;
940 .userenrolment .col_userdetails .subfield_picture {
941     float: left;
942     margin-left: 0;
944 .userenrolment .col_lastseen {
945     width: 150px;
947 .userenrolment .col_role {
948     width: 262px;
950 .userenrolment .col_role .roles,
951 .userenrolment .col_group .groups {
952     margin-right: 30px;
954 .userenrolment .col_role .role,
955 .userenrolment .col_group .group {
956     float: left;
957     padding: 3px;
958     margin: 3px;
959     white-space: nowrap;
961 .userenrolment .col_role .role a,
962 .userenrolment .col_group .group a {
963     margin-left: 3px;
964     cursor: pointer;
966 .userenrolment .col_role .addrole,
967 .userenrolment .col_group .addgroup {
968     float: right;
969     padding: 3px;
970     margin: 3px;
971     > a:hover {
972         border-bottom:1px solid #666;
973     }
975 .userenrolment .col_role .addrole img,
976 .userenrolment .col_group .addgroup img {
977     vertical-align: baseline;
980 .userenrolment .hasAllRoles .col_role .addrole {
981     display: none;
984 .userenrolment .col_enrol .enrolment {
985     float: left;
986     padding: 3px;
987     margin: 3px;
989 .userenrolment .col_enrol .enrolment a {
990     float: right;
991     margin-left: 3px;
993 #page-enrol-users {
994     .enrol_user_buttons {
995         float: right;
996         .enrolusersbutton {
997             display: inline;
998             div,
999             form {
1000                 display: inline;
1001                 margin-right: 0;
1002             }
1003         }
1004     }
1005     #filterform {
1006         @extend .card;
1007         display: inline-block;
1008         .fitem {
1009             display: inline-block;
1010             line-height: $line-height * 2;
1011             margin-right: .3em;
1012             white-space: nowrap;
1013             label {
1014                 display: inline;
1015                 line-height: $line-height;
1016                 padding-right: .3em;
1017             }
1018             :before,
1019             :after {
1020                 display: inline;
1021             }
1022         }
1023         div,
1024         fieldset {
1025             display: inline;
1026             float: none;
1027             clear: none;
1028             width: auto;
1029             margin: 0;
1030         }
1031         select,
1032         .ftext input {
1033             width: 7em;
1034         }
1035         input,
1036         select {
1037             margin-bottom: 0;
1038         }
1039     }
1040   .user-enroller-panel .uep-search-results .user .details {
1041     width: 237px;
1042   }
1043   .user-enroller-panel .uep-search-results .cohort .details {
1044     width: 237px;
1045   }
1047 #page-enrol-users .enrol-users-page-action input {
1048     margin-left: 0
1050 .corelightbox {
1051     background-color: #CCC;
1052     position: absolute;
1053     top: 0;
1054     left: 0;
1055     width: 100%;
1056     height: 100%;
1057     text-align: center;
1059 .corelightbox img {
1060     position: fixed;
1061     top: 50%;
1062     left: 50%;
1065 .mod-indent-outer {
1066     display: table;
1068 .mod-indent {
1069     display: table-cell;
1071 .label .mod-indent {
1072   float:left;
1073   padding-top:20px
1076 $mod-indent-size: 30px;
1077 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1078 @for $i from 1 through 16 {
1079    $width: ($i * $mod-indent-size);
1081    .mod-indent-#{$i} {
1082        width: $width;
1083    }
1085 .mod-indent-huge {
1086    width: (16 * $mod-indent-size);
1089 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1090 .resourcecontent .mediaplugin_mp3 object {
1091     height: 25px;
1092     width: 600px
1094 .resourcecontent audio.mediaplugin_html5audio {
1095     width: 600px
1097 /** Large resource images should avoid hidden overflow **/
1098 .resourceimage {
1099     max-width: 100%;
1101 /* Audio player size in 'inline' mode (can only change width, as above) */
1102 .mediaplugin_mp3 object {
1103     height: 15px;
1104     width: 300px
1106 audio.mediaplugin_html5audio {
1107     width: 300px
1109 /* TinyMCE moodle media preview frame should not have padding */
1110 .core_media_preview.pagelayout-embedded #content {
1111     padding: 0;
1113 .core_media_preview.pagelayout-embedded #maincontent {
1114     height: 0;
1116 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1117     padding: 0;
1118     margin: 0;
1119     min-width: 0;
1120     background: none;
1122 .path-rating .ratingtable {
1123     width: 100%;
1124     margin-bottom: 1em;
1126 .path-rating .ratingtable th.rating {
1127     width: 100%;
1129 .path-rating .ratingtable td.rating,
1130 .path-rating .ratingtable td.time {
1131     white-space: nowrap;
1132     text-align: center;
1134 .initialbar {
1135     a, strong {
1136         padding-left: 3px;
1137         padding-right: 3px;
1138     }
1141 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1142 .moodle-dialogue-base .moodle-dialogue-lightbox {
1143     background-color: #AAA;
1145 .moodle-dialogue-base .hidden,
1146 .moodle-dialogue-base .moodle-dialogue-hidden {
1147     display: none;
1149 .no-scrolling {
1150     overflow: hidden;
1152 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1153     left: 0px;
1154     top: 0px;
1155     right: 0px;
1156     bottom: -50px;
1157     position: fixed;
1159 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1160     overflow: auto;
1162 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1163     width: 28px;
1164     height: 16px;
1165     background-size: 100%;
1167 .moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content {
1168     @extend .modal-content;
1170 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1171     @extend .modal-header;
1173 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1174     // Undo some YUI damage.
1175     min-height: 3rem;
1176     color: initial;
1177     background-color: initial;
1178     background: initial;
1179     font-size: 1.5rem;
1180     line-height: 1.5;
1182 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1183     @extend .modal-title;
1185 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1186     padding: 5px;
1188 .moodle-dialogue-base .closebutton {
1189     @extend .close;
1190     margin: 0;
1191     padding: 10px ! important;
1192     background: 0;
1193     border-style: none;
1194     box-shadow: none;
1196 .moodle-dialogue-base .closebutton::after {
1197     content: "×";
1199 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1200     @extend .modal-body;
1203 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1204     overflow: auto;
1205     position: absolute;
1206     top: 0px;
1207     bottom: 50px;
1208     left: 0px;
1209     right: 0px;
1210     margin: 0px;
1211     border: 0px;
1213 .moodle-dialogue-confirm .confirmation-dialogue {
1214     text-align: center;
1216 .moodle-dialogue-confirm .confirmation-dialogue input {
1217     text-align: center;
1219 .moodle-dialogue-exception .moodle-exception-message {
1220     text-align: center
1222 .moodle-dialogue-exception .moodle-exception-param label {
1223     font-weight: bold;
1225 .moodle-dialogue-exception .param-stacktrace label {
1226     background-color: #EEE;
1227     border: 1px solid #ccc;
1228     border-bottom-width: 0;
1230 .moodle-dialogue-exception .param-stacktrace pre {
1231     border: 1px solid #ccc;
1232     background-color: #fff;
1234 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1235     color: navy;
1236     font-size: $font-size-sm;
1238 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1239     @extend .text-warning;
1240     font-size: $font-size-sm;
1242 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1243     color: #333;
1244     font-size: 90%;
1245     border-bottom: 1px solid #eee;
1247 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1248     @extend .modal-footer;
1250 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1251     // Undo some YUI damage.
1252     background: initial;
1254 .moodle-dialogue-confirm .confirmation-message {
1255     margin: 0.5em 1em;
1257 .moodle-dialogue-confirm .confirmation-dialogue input {
1258     min-width: 80px
1260 .moodle-dialogue-exception .moodle-exception-message {
1261     margin: 1em;
1263 .moodle-dialogue-exception .moodle-exception-param {
1264     margin-bottom: 0.5em;
1266 .moodle-dialogue-exception .moodle-exception-param label {
1267     width: 150px;
1269 .moodle-dialogue-exception .param-stacktrace label {
1270     display: block;
1271     margin: 0;
1272     padding: 4px 1em;
1274 .moodle-dialogue-exception .param-stacktrace pre {
1275     display: block;
1276     height: 200px;
1277     overflow: auto;
1279 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1280     display: inline-block;
1281     margin: 4px 0;
1283 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1284     display: inline-block;
1285     width: 50px;
1286     margin: 4px 1em;
1288 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1289     padding-left: 25px;
1290     margin-bottom: 4px;
1291     padding-bottom: 4px;
1293 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1294     opacity: 0.75;
1295     width: 100%;
1296     height: 100%;
1297     top: 0;
1298     left: 0;
1299     background-color: white;
1300     text-align: center;
1301     padding: 10% 0;
1303 /* Apply a default max-height on tooltip text */
1304 .moodle-dialogue .tooltiptext {
1305     max-height: 300px;
1308 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1309     z-index: 3001;
1311     .moodle-dialogue-bd {
1312         overflow: auto;
1313     }
1316 /**
1317  * Chooser Dialogues (moodle-core-chooserdialogue)
1318  *
1319  * This CSS belong to the chooser dialogue which should work both with, and
1320  * without javascript enabled
1321  */
1322 /* Hide the dialog and it's title */
1323 .chooserdialoguebody,
1324 .choosertitle {
1325     display: none;
1327 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1328     margin: 0;
1330 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1331     padding: 0;
1332     background: #F2F2F2;
1333     @include border-bottom-radius(10px);
1335 /* Center the submit buttons within the area */
1336 .choosercontainer #chooseform .submitbuttons {
1337     padding: 0.7em 0;
1338     text-align: center;
1340 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1341 @media (max-height: 639px) {
1342     .ios.safari .choosercontainer #chooseform .submitbuttons {
1343         padding: 45px 0;
1344     }
1346 .choosercontainer #chooseform .submitbuttons input {
1347     min-width: 100px;
1348     margin: 0 0.5em;
1350 /* Various settings for the options area */
1351 .choosercontainer #chooseform .options {
1352     position: relative;
1353     border-bottom: 1px solid #BBBBBB;
1355 /* Only set these options if we're showing the js container */
1356 .jschooser .choosercontainer #chooseform .alloptions {
1357     overflow-x: hidden;
1358     overflow-y: auto;
1359     max-width: 20.3em;
1360     @include box-shadow(inset 0 0 30px 0px #ccc);
1361     .option {
1362         input[type=radio] {
1363             display: inline-block;
1364         }
1365         .modicon {
1366             display: inline-block;
1367         }
1368         .typename {
1369             display: inline-block;
1370             width: 65%;
1371         }
1372     }
1374 /* Settings for option rows and option subtypes */
1375 .choosercontainer #chooseform .moduletypetitle,
1376 .choosercontainer #chooseform .option,
1377 .choosercontainer #chooseform .nonoption {
1378     margin-bottom: 0;
1379     padding: 0 1.6em 0 1.6em;
1381 .choosercontainer #chooseform .moduletypetitle {
1382     text-transform: uppercase;
1383     padding-top: 1.2em;
1384     padding-bottom: 0.4em;
1386 .choosercontainer #chooseform .option .typename,
1387 .choosercontainer #chooseform .option span.modicon img.icon,
1388 .choosercontainer #chooseform .nonoption .typename,
1389 .choosercontainer #chooseform .nonoption span.modicon img.icon {
1390     padding: 0 0 0 0.5em;
1393 .chooserdialogue-course-modchooser .choosercontainer #chooseform .option span.modicon img.icon,
1394 .chooserdialogue-course-modchooser .choosercontainer #chooseform .nonoption span.modicon img.icon {
1395     height: 24px;
1396     width: 24px;
1398 .choosercontainer #chooseform .option input[type=radio],
1399 .choosercontainer #chooseform .option span.typename,
1400 .choosercontainer #chooseform .option span.modicon {
1401     vertical-align: middle;
1403 .choosercontainer #chooseform .option label {
1404     display: block;
1405     padding: 0.3em 0 0.1em 0;
1406     border-bottom: 1px solid #FFFFFF;
1408 .choosercontainer #chooseform .nonoption {
1409     padding-left: 2.7em;
1410     padding-top: 0.3em;
1411     padding-bottom: 0.1em;
1413 .choosercontainer #chooseform .subtype {
1414     margin-bottom: 0;
1415     padding: 0 1.6em 0 3.2em;
1417 .choosercontainer #chooseform .subtype .typename {
1418     margin: 0 0 0 0.2em;
1420 /* The instruction/help area */
1421 .jschooser .choosercontainer #chooseform .instruction,
1422 .jschooser .choosercontainer #chooseform .typesummary {
1423    display: none;
1424     position: absolute;
1425     top: 0;
1426     right: 0;
1427     bottom: 0;
1428     left: 20.3em;
1429     margin: 0;
1430     padding: 1.6em;
1431     background-color: #fff;
1432     overflow-x: hidden;
1433     overflow-y: auto;
1434     line-height: 2em;
1436 /* Selected option settings */
1437 .jschooser .choosercontainer #chooseform .instruction,
1438 .choosercontainer #chooseform .selected .typesummary {
1439     display: block;
1441 .choosercontainer #chooseform .selected {
1442     background-color: #fff;
1443     @include box-shadow(0px 0 10px 0 #ccc);
1445 /* Form element: listing */
1446 .formlistingradio {
1447     padding-bottom: 25px;
1448     padding-right: 10px;
1450 .formlistinginputradio {
1451     float: left;
1453 .formlistingmain {
1454     min-height: 225px;
1456 .formlisting {
1457     position: relative;
1458     margin: 15px 0;
1459     padding: 1px 19px 14px;
1460     background-color: white;
1461     border: 1px solid #DDD;
1462     @include border-radius(4px);
1464 .formlistingmore {
1465     position: absolute;
1466     cursor: pointer;
1467     bottom: -1px;
1468     right: -1px;
1469     padding: 3px 7px;
1470     font-size: 12px;
1471     font-weight: bold;
1472     background-color: whiteSmoke;
1473     border: 1px solid #ddd;
1474     color: #9DA0A4;
1475     @include border-radius(4px 0 4px 0);
1477 .formlistingall {
1478     margin: 15px 0;
1479     padding: 0;
1480     @include border-radius(4px);
1482 .formlistingrow {
1483     cursor: pointer;
1484     border-bottom: 1px solid;
1485     border-color: #E1E1E8;
1486     border-left: 1px solid #E1E1E8;
1487     border-right: 1px solid #E1E1E8;
1488     background-color: #F7F7F9;
1489     @include border-radius(0 0 4px 4px);
1490     padding: 6px;
1491     top: 50%;
1492     left: 50%;
1493     min-height: 34px;
1494     float: left;
1495     width: 150px;
1497 body.jsenabled .formlistingradio {
1498     display: none;
1500 body.jsenabled .formlisting {
1501     display: block;
1504 /* Badges styles */
1505 table.collection {
1506     @extend .table;
1507     @extend .table-bordered;
1508     @extend .table-striped;
1510 table.collection .name {
1511     text-align: left;
1512     vertical-align: middle;
1514 table.collection .awards {
1515     width: 10%;
1516     text-align: center;
1517     vertical-align: middle;
1519 table.collection .criteria {
1520     width: 40%;
1521     text-align: left;
1522     vertical-align: top;
1524 table.collection .badgeimage,
1525 table.collection .status {
1526     width: 15%;
1527     text-align: center;
1528     vertical-align: middle;
1530 table.collection .description {
1531     width: 25%;
1532     text-align: left;
1534 table.collection .actions {
1535     width: 11em;
1536     text-align: center;
1537     vertical-align: middle;
1540 a.criteria-action {
1541     padding: 0px 3px;
1542     float: right;
1544 div.criteria-description {
1545     padding: 10px 15px;
1546     margin: 5px 0px;
1547     background: none repeat scroll 0 0 #f9f9f9;
1548     border: 1px solid #EEE;
1550 ul.badges {
1551     margin: 0;
1552     list-style: none;
1554 .badges li {
1555     position: relative;
1556     display: inline-block;
1557     padding-top: 1em;
1558     text-align: center;
1559     vertical-align: top;
1560     width: 150px;
1562 .badges li .badge-name {
1563     display: block;
1564     padding: 5px;
1566 .badges li > img {
1567     position: absolute;
1569 .badges li .badge-image {
1570     width: 100px;
1571     height: 100px;
1572     left: 10px;
1573     top: 0px;
1574     z-index: 1;
1576 .badges li .badge-actions {
1577     position: relative;
1579 .badges li .expireimage {
1580     width: 100px;
1581     height: 100px;
1582     left: 25px;
1583     top: 0px;
1584     position: absolute;
1585     z-index: 10;
1586     opacity: 0.85;
1589 #badge-image {
1590     background-color: transparent;
1591     padding: 0;
1592     position: relative;
1593     min-width: 100px;
1594     width: 20%;
1595     display: inline-block;
1596     vertical-align: top;
1597     margin-top: 17px;
1599     .expireimage {
1600         width: 100px;
1601         height: 100px;
1602         left: 0px;
1603         top: 0px;
1604         opacity: 0.85;
1605         position: absolute;
1606         z-index:10;
1607     }
1609     .singlebutton {
1610         padding-top: 5px;
1612         input {
1613             margin-left: 0px;
1614         }
1615     }
1617 #badge-details {
1618     display: inline-block;
1619     width: 79%;
1622 #badge-overview dl,
1623 #badge-details dl {
1624     margin: 0;
1626     dt,
1627     dd {
1628         vertical-align: top;
1629         padding: 3px 0;
1630     }
1631     dt {
1632         clear: both;
1633         display: inline-block;
1634         width: 20%;
1635         min-width: 100px;
1636     }
1637     dd {
1638         display: inline-block;
1639         width: 79%;
1640         margin-left: 1%;
1641     }
1644 .badge-profile {
1645     vertical-align: top;
1647 .connected {
1648     @extend .text-success;
1650 .notconnected {
1651     @extend .text-danger;
1653 .connecting {
1654     @extend .text-warning;
1656 #page-badges-award .recipienttable tr td {
1657     vertical-align: top;
1659 #page-badges-award .recipienttable tr td.actions .actionbutton {
1660     margin: 0.3em 0;
1661     padding: 0.5em 0;
1662     width: 100%;
1664 #page-badges-award .recipienttable tr td.existing,
1665 #page-badges-award .recipienttable tr td.potential {
1666     width: 42%;
1669 #issued-badge-table .activatebadge {
1670     display: inline-block;
1672 .statusbox.active {
1673     background-color: $state-success-bg;
1675 .statusbox.inactive {
1676     background-color: $state-warning-bg;
1678 .statusbox {
1679     text-align: center;
1680     margin-bottom: 5px;
1681     padding: 5px;
1683 .statusbox .activatebadge {
1684     display: inline-block;
1686 .statusbox .activatebadge input[type=submit]{
1687     margin: 3px;
1689 .activatebadge {
1690     margin: 0px;
1691     text-align: left;
1692     vertical-align: middle;
1694 img#persona_signin {
1695     cursor: pointer;
1697 .addcourse {
1698     float: right;
1700 .invisiblefieldset {
1701     display: inline;
1702     margin: 0;
1703     padding: 0;
1704     border-width: 0;
1706 .breadcrumb-nav {
1707     float: left;
1708     margin-bottom: 10px;
1710 .breadcrumb-button .singlebutton div {
1711     margin-right: 0;
1713 .breadcrumb-nav .breadcrumb {
1714     margin: 0;
1717 /** Header-bar styles **/
1718 .page-context-header {
1719     // We need to be explicit about the height of the header.
1720     $pageHeaderHeight: 140px;
1722     // Do not remove these rules.
1723     overflow: hidden;
1725     .page-header-image,
1726     .page-header-headings {
1727         display: block;
1728         position: relative;
1729     }
1730     .page-header-image {
1731         float: left;
1732         margin-right: 1em;
1733         margin-bottom: 1em;
1734     }
1735     .page-header-headings {
1736         margin-top: 30px;
1737         margin-bottom: 10px;
1739         h1 {
1740             display: block;
1741         }
1742     }
1744     .page-header-headings,
1745     .header-button-group {
1746         position: relative;
1747         line-height: 24px;
1748         vertical-align: middle;
1749     }
1751     .header-button-group {
1752         display: block;
1753         float: left;
1754         a {
1755             position: relative;
1757             // Don't touch it unless you know exactly what you are doing.
1758             top: -0.4em;
1759         }
1760     }
1763 ul.dragdrop-keyboard-drag li {
1764     list-style-type: none;
1767 .block-control-actions .moodle-core-dragdrop-draghandle img {
1768     width: 12px;
1769     height: 12px;
1772 a.disabled:hover,
1773 a.disabled {
1774     text-decoration: none;
1775     cursor: default;
1776     font-style: italic;
1777     color: #808080;
1779 body.lockscroll {
1780   height: 100%;
1781   overflow: hidden;
1784 .progressbar_container {
1785     max-width: 500px;
1786     margin: 0 auto;
1789 /* IE10 only fix for calendar titling */
1790 .ie10 .yui3-calendar-header-label {
1791     display: inline-block;
1794 dd:before,
1795 dd:after {
1796   display: block;
1797   content: " ";
1799 dd:after {
1800   clear: both;
1803 // Active tabs with links should have a different
1804 // cursor to indicate they are clickable.
1805 .nav-tabs > .active > a[href],
1806 .nav-tabs > .active > a[href]:hover,
1807 .nav-tabs > .active > a[href]:focus {
1808     cursor: pointer;
1811 .inplaceeditable {
1813     &.inplaceeditingon {
1814         position: relative;
1816         .editinstructions {
1817             margin-top: -30px;
1818             font-weight: normal;
1819             margin-right: 0;
1820             margin-left: 0;
1821             left: 0;
1822             right: auto;
1823             white-space: nowrap;
1824         }
1826         input {
1827             width: 330px;
1828             height: 16px;
1829             vertical-align: text-bottom;
1830             margin-bottom: 0;
1831         }
1833         select {
1834             margin-bottom: 0;
1835         }
1836     }
1838     .quickediticon img {
1839         opacity: 0.2;
1840     }
1842     .quickeditlink {
1843         color: inherit;
1844         text-decoration: inherit;
1845     }
1847     &:hover .quickeditlink .quickediticon img,
1848     .quickeditlink:focus .quickediticon img {
1849         opacity: 1;
1850     }
1852     &.inplaceeditable-toggle .quickediticon {
1853         display: none;
1854     }
1857 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
1858     margin-top: -20px;
1860 // Reset for ul.
1861 ul {
1862     padding-left: 1rem;