3e7e55b123e8d6764a0073e8c6eb5d6962a2883d
[moodle.git] / theme / boost / scss / moodle / course.scss
1 /* course.less */
2 /* COURSE CONTENT */
3 .section-modchooser-link img {
4     margin-right: 0.5rem;
5     width: 16px;
6     height: 16px;
7 }
9 .section_add_menus {
10     text-align: right;
11     clear: both;
12 }
14 .section-modchooser {
15     clear: both;
16 }
18 .block_tree .tree_item.branch {
19     margin-left: 8px;
20 }
22 .section_add_menus .horizontal div,
23 .section_add_menus .horizontal form {
24     display: inline;
25 }
27 .section_add_menus optgroup {
28     font-weight: normal;
29     font-style: italic;
30 }
31 /*rtl:ignore*/
32 .section_add_menus .urlselect {
33     text-align: left;
34     margin-left: .4em;
35 }
36 /*rtl:ignore*/
37 .section_add_menus .urlselect select {
38     margin-left: .2em;
39 }
41 .sitetopic ul.section {
42     margin: 0;
43 }
45 .course-content ul.section {
46     margin: $spacer;
47 }
49 .section {
50     .side {
51         &.left {
52             float: left;
53         }
55         &.right {
56             float: right;
57         }
58     }
60     .spinner {
61         height: 16px;
62         width: 16px;
63     }
65     .activity {
66         .spinner {
67             left: 100%;
68             position: absolute;
69         }
71         .editing_move {
72             /* Move the move icon to the start of the line */
73             position: absolute;
74             left: 0;
75             top: 0;
76         }
78         .mod-indent-outer {
79             /**
80              * Add appropriate padding such that nothing overlaps the
81              * absolute positioned move icon.
82              */
83             padding-left: 32px;
84         }
86         /* The command block for each activity */
87         .actions {
88             position: absolute;
89             right: 0;
90             top: 0;
91         }
93         .contentwithoutlink,
94         .activityinstance {
95             min-width: 40%;
96             display: table-cell;
97             padding-right: 4px;
98             min-height: 2em;
100             > a,
101             > .inplaceeditable-text {
102                 display: block;
103                 text-indent: -31px;
104                 padding-left: 31px;
105             }
106         }
107     }
109     .label {
110         .contentwithoutlink,
111         .activityinstance {
112             padding-right: 32px;
113             display: block;
114             height: inherit;
115         }
117         .mod-indent-outer {
118             padding-left: 24px;
119             display: block;
120         }
121     }
123     .filler {
124         // This must be sized like an icon to fill the space.
125         width: 16px;
126         height: 16px;
127         padding: 0;
128         margin: 0 ($spacer / 2);
129         display: inline-block;
130     }
132     .activity.editor_displayed {
133         a.editing_title,
134         .moodle-actionmenu {
135             display: none;
136         }
138         div.activityinstance {
139             padding-right: initial;
141             input {
142                 margin-bottom: initial;
143                 padding-top: initial;
144                 padding-bottom: initial;
145                 vertical-align: text-bottom;
146             }
147         }
148     }
151 .activity img.activityicon {
152     margin-right: 6px;
153     vertical-align: text-bottom;
156 .section .activity .activityinstance,
157 .section .activity .activityinstance div {
158     display: inline-block;
161 .editing {
162     .section {
163         .activity {
164             .contentwithoutlink,
165             .activityinstance {
166                 padding-right: 200px;
167             }
168         }
169     }
172 .editing_show + .editing_assign,
173 .editing_hide + .editing_assign {
174     // if roles icon missing, add space
175     margin-left: 20px;
178 .section .activity .commands {
179     white-space: nowrap;
180     display: inline-block;
183 .section .activity.modtype_label.label {
184     font-weight: normal;
185     padding: .2em;
188 .section li.activity {
189     padding: .2em;
190     clear: both;
193 .section .activity .activityinstance .groupinglabel {
194     padding-left: 30px;
197 .section .activity .availabilityinfo,
198 .section .activity .contentafterlink {
199     margin-top: 0.5em;
200     margin-left: 30px;
203 .section .activity .contentafterlink p {
204     margin: .5em 0;
207 .editing .section .activity:hover,
208 .editing .section .activity.action-menu-shown {
209     background-color: $table-bg-accent;
212 .course-content .current {
213     position: relative;
216 .course-content .current::before {
217     content: "";
218     border-left: $brand-primary 2px solid;
219     position: absolute;
220     left: -15px;
221     top: 0;
222     bottom: 0;
225 .course-content .section-summary {
226     border: 1px solid $table-border-color;
227     margin-top: 5px;
228     list-style: none;
231 .course-content .section-summary .section-title {
232     margin: 2px 5px 10px 5px;
235 .course-content .section-summary .summarytext {
236     margin: 2px 5px 2px 5px;
239 .course-content .section-summary .section-summary-activities .activity-count {
240     @extend .text-muted;
241     font-size: $font-size-sm;
242     margin: 3px;
243     white-space: nowrap;
244     display: inline-block;
247 .course-content .section-summary .summary {
248     margin-top: 5px;
251 .course-content .single-section {
252     margin-top: 1em;
255 .course-content .single-section .section-navigation {
256     display: block;
257     padding: 0.5em;
258     margin-bottom: -0.5em;
261 .course-content .single-section .section-navigation .title {
262     font-weight: bold;
263     font-size: 108%;
264     clear: both;
267 .course-content .single-section .section-navigation .mdl-left {
268     font-weight: normal;
269     float: left;
270     margin-right: 1em;
273 .course-content .single-section .section-navigation .mdl-left .larrow {
274     margin-right: 0.1em;
277 .course-content .single-section .section-navigation .mdl-right {
278     font-weight: normal;
279     float: right;
280     margin-left: 1em;
283 .course-content .single-section .section-navigation .mdl-right .rarrow {
284     margin-left: 0.1em;
287 .course-content .single-section .section-navigation .mdl-bottom {
288     margin-top: 0;
291 .course-content ul li.section.main {
292     border-bottom: $border-width solid $table-border-color;
293     margin-top: 0;
295     &:last-child {
296         border-bottom: 0;
297     }
300 .course-content ul li.section.hidden {
301     .sectionname > span,
302     .content > div,
303     .activity .activityinstance {
304         opacity: .5;
305     }
307     .sectionname > span,
308     .activity .activityinstance {
309         margin-left: 10px;
310         margin-right: 10px;
311     }
314 .course-content ul.topics,
315 .course-content ul.weeks {
316     padding: 0;
318     li.section {
319         padding-top: $spacer;
320         padding-bottom: $spacer;
322         .content {
323             margin: 0;
324             padding: 0;
325         }
326     }
329 .course-content {
330     margin-top: 0;
333 .course-content ul.topics li.section .summary {
334     margin-left: 25px;
337 .course-content .hidden {
338     display: none;
341 .course-content li {
342     &.section {
343         ul {
344             list-style: disc;
346             ul {
347                 list-style: circle;
349                 ul {
350                     list-style: square;
351                 }
352             }
353         }
355         li {
356             &.activity {
357                 ul {
358                     list-style: disc;
360                     ul {
361                         list-style: circle;
363                         ul {
364                             list-style: square;
365                         }
366                     }
367                 }
368             }
369         }
371         .right {
372             > .icon:first-child {
373                 /* Remove the spacer icon. */
374                 display: none;
375             }
376         }
377     }
380 .path-course-view .completionprogress {
381     margin-left: 25px;
384 .path-course-view .completionprogress {
385     display: block;
386     float: right;
387     height: 20px;
388     position: relative;
391 #page-site-index .subscribelink {
392     text-align: right;
395 #site-news-forum h2,
396 #frontpage-course-list h2,
397 #frontpage-category-names h2,
398 #frontpage-category-combo h2 {
399     margin-bottom: 9px;
402 .path-course-view a.reduce-sections {
403     padding-left: 0.2em;
406 .path-course-view .subscribelink {
407     text-align: right;
410 .path-course-view .unread {
411     margin-left: 30px;
414 .path-course-view .block.drag .header {
415     cursor: move;
418 .path-course-view .completionprogress {
419     text-align: right;
422 .path-course-view .single-section .completionprogress {
423     margin-right: 5px;
426 .path-course-view .section .summary {
427     line-height: normal;
430 .path-site li.activity > div,
431 .path-course-view li.activity > div {
432     position: relative;
433     padding: 0 16px 0 0; /* to accommodate the floated completion icon with highlighting */
436 .path-course-view li.activity span.autocompletion img {
437     vertical-align: text-bottom;
438     margin-right: 0;
441 .path-course-view li.activity form.togglecompletion img {
442     max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
445 .path-course-view {
446     &.editing {
447         li.activity span.autocompletion img {
448             /* Use the same spacing as the filler. */
449             margin-right: $spacer / 2;
450             margin-left: $spacer / 2;
451         }
452     }
455 .path-course-view li.activity form.togglecompletion .ajaxworking {
456     width: 16px;
457     height: 16px;
458     position: absolute;
459     right: 22px;
460     top: 3px;
461     background: url([[pix:i/ajaxloader]]) no-repeat;
464 li.section.hidden span.commands a.editing_hide,
465 li.section.hidden span.commands a.editing_show {
466     cursor: default;
469 ul.weeks h3.sectionname {
470     white-space: nowrap;
473 .editing ul.weeks h3.sectionname {
474     white-space: normal;
477 .single-section h3.sectionname {
478     text-align: center;
479     clear: both;
482 .section img.movetarget {
483     height: 16px;
484     width: 80px;
487 input.titleeditor {
488     width: 330px;
489     vertical-align: text-bottom;
492 span.editinstructions {
493     position: absolute;
494     top: 0;
495     margin-top: -22px;
496     margin-left: 30px;
497     line-height: 16px;
498     font-size: $font-size-sm;
499     padding: .1em .4em;
500     background-color: $state-info-bg;
501     color: $state-info-text;
502     text-decoration: none;
503     z-index: 9999;
505     @include box-shadow(2px 2px 5px 1px #ccc);
506     border: 1px solid $state-info-border;
509 /* Course drag and drop upload styles */
510 #dndupload-status {
511     position: fixed;
512     left: 0;
513     width: 40%;
514     margin: 0 30%;
515     padding: 6px;
516     border: 1px solid $state-info-border;
517     text-align: center;
518     background: $state-info-bg;
519     color: $state-info-text;
520     z-index: 1; // Required in order to have this above relatively positioned course content@mixin
522     @include box-shadow(2px 2px 5px 1px #ccc);
523     @include border-radius(8px);
526 .dndupload-preview {
527     color: #909090;
528     border: 1px dashed #909090;
529     list-style: none;
530     margin-top: .2em;
531     padding: .3em;
534 .dndupload-progress-outer {
535     @extend progress;
538 .dndupload-progress-inner {
539     .progress {
540         @extend .progress-bar;
541     }
544 .dndupload-hidden {
545     display: none;
548 /* COURSES LISTINGS AND COURSE SUMMARY */
549 #page-course-pending .singlebutton,
550 #page-course-index .singlebutton,
551 #page-course-index-category .singlebutton,
552 #page-course-editsection .singlebutton {
553     text-align: center;
556 #page-admin-course-manage #movecourses td img {
557     margin: 0 .22em;
558     vertical-align: text-bottom;
561 #coursesearch {
562     margin-top: 1em;
563     text-align: center;
566 #page-course-pending .pendingcourserequests {
567     margin-bottom: 1em;
570 #page-course-pending .pendingcourserequests .singlebutton {
571     display: inline;
574 #page-course-pending .pendingcourserequests .cell {
575     padding: 0 5px;
578 #page-course-pending .pendingcourserequests .cell.c6 {
579     white-space: nowrap;
582 .coursebox {
583     padding: $spacer / 2;
586 .coursebox > .info > .coursename a {
587     display: block;
588     background-image: url([[pix:moodle|i/course]]);
589     background-repeat: no-repeat;
590     padding-left: 21px;
591     background-position: left 0.2em;
594 .coursebox > .info > .coursename,
595 .coursebox .content .teachers,
596 .coursebox .content .courseimage,
597 .coursebox .content .coursefile {
598     float: left;
599     clear: left;
602 .coursebox .content .teachers,
603 .coursebox .content .courseimage,
604 .coursebox .content .coursefile {
605     width: 40%;
608 .coursebox > .info > h3.coursename {
609     margin: 5px;
610     line-height: 1;
613 .coursebox > .info > .coursename {
614     margin: 5px;
615     padding: 0;
618 .coursebox .content .teachers li {
619     list-style-type: none;
620     padding: 0;
621     margin: 0;
624 .coursebox .moreinfo {
625     padding: 3px 0;
626     float: right;
629 .coursebox .moreinfo img {
630     margin: 0 .2em;
633 .coursebox .content {
634     clear: both;
637 .coursebox .content .summary,
638 .coursebox .content .coursecat {
639     float: right;
640     width: 55%;
643 .coursebox .content .coursecat {
644     text-align: right;
645     clear: right;
648 .coursebox.remotecoursebox .remotecourseinfo {
649     float: left;
650     width: 40%;
653 .coursebox .content .courseimage img {
654     max-width: 100px;
655     max-height: 100px;
658 .coursebox .content .coursecat,
659 .coursebox .content .summary,
660 .coursebox .content .courseimage,
661 .coursebox .content .coursefile,
662 .coursebox .content .teachers,
663 .coursebox.remotecoursebox .remotecourseinfo {
664     margin: 15px 5px 5px;
665     padding: 0;
668 .coursebox.remotehost > .info > .categoryname a {
669     background-image: url([[pix:moodle|i/mnethost]]);
672 .coursebox.collapsed {
673     margin-bottom: 0;
676 .coursebox.collapsed > .content {
677     display: none;
680 .courses .coursebox {
681     &.collapsed {
682         padding-top: $spacer-y / 2;
683         padding-bottom: $spacer-y / 2;
684     }
686     &.even {
687         background-color: $table-bg-accent;
688     }
690     &:hover {
691         background-color: $table-bg-hover;
692     }
695 .courses > .paging.paging-morelink {
696     text-align: center;
697     padding: $spacer;
700 .course_category_tree .category .numberofcourse {
701     font-size: $font-size-sm;
704 .course_category_tree .controls {
705     visibility: hidden;
708 .course_category_tree .controls div {
709     display: inline;
710     cursor: pointer;
713 .jsenabled .course_category_tree .controls {
714     visibility: visible;
717 .course_category_tree .controls {
718     margin-bottom: 5px;
719     text-align: right;
720     float: right;
723 .course_category_tree .controls div {
724     padding-right: 2em;
725     font-size: 75%;
728 .course_category_tree .category > .info > .categoryname {
729     background-image: url([[pix:moodle|t/collapsed_empty]]);
730     background-repeat: no-repeat;
731     padding: 2px 18px;
732     margin: 3px;
733     background-position: center left;
735 /* rtl:raw:
736 .course_category_tree .category > .info > .categoryname {
737     background-image:url([[pix:moodle|t/collapsed_empty_rtl]]);
739  */
740 .course_category_tree .category.with_children > .info > .categoryname {
741     background-image: url([[pix:moodle|t/expanded]]);
742     cursor: pointer;
745 .course_category_tree .category.with_children.collapsed > .info > .categoryname {
746     background-image: url([[pix:moodle|t/collapsed]]);
748 /* rtl:raw:
749 .course_category_tree .category.with_children.collapsed > .info > .categoryname {
750     background-image:url([[pix:moodle|t/collapsed_rtl]]);
752 */
753 .course_category_tree .category.collapsed > .content {
754     display: none;
757 .course_category_tree .category > .info {
758     clear: both;
761 .course_category_tree .category > .content {
762     padding-left: 16px;
765 #page-course-index-category .generalbox.info {
766     margin-bottom: 15px;
767     border: 1px dotted #ddd;
769     @include border-radius(4px);
770     padding: 5px;
773 #page-course-index-category .categorypicker {
774     text-align: center;
775     margin: 10px 0 20px;
778 /**
779  * Course management page
780  * Palette
781  *
782  * Background (reg)         #F5F5F5
783  * Background (light        #fafafa
784  * Background (highlight)   #ddffaa
785  * Borders                  #e1e1e8
786  */
787 #course-category-listings {
788     background-color: $body-bg;
789     margin-bottom: 200px;
791     /** Two column layout */
792     &.columns-2 {
793         > #course-listing > div {
794             position: relative;
795             left: -1px;
796         }
797     }
798     /** Three column layout */
799     &.columns-3 > #course-listing > div {
800         height: 100%;
801     }
803     > div > div {
804         min-height: 300px;
806         > ul.ml > li:first-child > div {
807             border-top: 0;
808         }
809     }
811     h3 {
812         margin: 0;
813         padding: 0.4rem 0.6rem 0.3rem;
814     }
816     h4 {
817         margin: 1rem 0 0;
818         padding: 0.6rem 1rem 0.5rem;
819     }
821     .moodle-actionmenu {
822         white-space: nowrap;
823     }
825     .listing-actions {
826         text-align: center;
827         padding: 0.4rem 0.3rem 0.3rem;
828         line-height: 2.2em;
830         > .moodle-actionmenu {
831             display: inline-block;
832         }
833     }
835     ul.ml {
836         list-style: none;
837         margin: 1rem 0;
839         ul.ml {
840             margin: 0;
841         }
842     }
844     li {
845         line-height: 2.2em;
847         > div {
848             &:hover {
849                 background-color: $table-bg-hover;
850             }
851         }
853         &[data-selected='1'] {
854             > div {
855                 background-color: $table-bg-accent;
856             }
858             > div:hover {
859                 background-color: $table-bg-hover;
860             }
861         }
862     }
864     .item-actions {
865         margin-right: 1em;
866         display: inline-block;
868         > a img,
869         .menubar img {
870             margin: 0 4px;
871             height: 12px;
872             padding: 0;
873             vertical-align: inherit;
874         }
876         &.show .menu {
877             li {
878                 line-height: 20px;
879             }
881             img {
882                 width: 12px;
883                 max-width: none;
884             }
885         }
887         .menu-action-text {
888             vertical-align: inherit;
889         }
890     }
892     .listitem {
893         > div {
894             > .float-left {
895                 float: left;
896             }
898             > .float-right {
899                 float: right;
900                 text-align: right;
901             }
903             .item-actions {
904                 .action-show {
905                     display: none;
906                 }
908                 .action-hide {
909                     display: inline;
910                 }
911             }
913             .without-actions {
914                 color: #333;
915             }
917             .idnumber {
918                 color: #a1a1a8;
919                 margin-right: 2em;
920             }
921         }
922         // The category or course is hidden.
923         &[data-visible="0"] {
924             @extend .text-muted;
926             > div {
927                 > a {
928                     @extend .text-muted;
929                 }
931                 .item-actions {
932                     .action-show {
933                         display: inline;
934                     }
936                     .action-hide {
937                         display: none;
938                     }
939                 }
940             }
941         }
943         &.highlight {
944             background-color: $body-bg;
946             > div,
947             > div:hover,
948             &[data-selected='1'] > div {
949                 background-color: $table-bg-hover;
950             }
951         }
952     }
954     #course-listing {
955         .listitem {
956             .categoryname {
957                 display: inline-block;
958                 margin-left: 1em;
959                 color: #a1a1a8;
960             }
962             .coursename {
963                 display: inline-block;
964             }
966             > div {
967                 padding-left: 1rem;
968             }
969         }
971         > .firstpage .listitem:first-child > div .item-actions .action-moveup,
972         > .lastpage .listitem:last-child > div .item-actions .action-movedown {
973             display: none;
974         }
976         .bulk-action-checkbox {
977             margin: -2px 6px 0 0;
978         }
979     }
981     #category-listing {
982         .listitem.collapsed > ul.ml {
983             display: none;
984         }
986         .listitem {
987             > div {
988                 > .ba-checkbox {
989                     width: 2.2em;
990                     text-align: center;
991                     margin: -1px 0.5em 0 0;
992                     padding-top: 2px;
993                 }
994             }
996             &.highlight > div > .ba-checkbox {
997                 background-color: $table-bg-hover;
998             }
1000             &[data-selected='1'] > div > .ba-checkbox {
1001                 margin: 0 0.5em 0 0;
1002                 padding: 0;
1003                 background-color: inherit;
1004             }
1006             &:first-child > div .item-actions .action-moveup,
1007             &:last-child > div .item-actions .action-movedown {
1008                 display: none;
1009             }
1010         }
1012         .course-count {
1013             color: #a1a1a8;
1014             margin-right: 2rem;
1015             min-width: 3.5em;
1016             display: inline-block;
1017         }
1019         .bulk-action-checkbox {
1020             margin-right: -3px;
1021         }
1023         .category-listing > ul > .listitem:first-child {
1024             position: relative;
1025         }
1027         .category-bulk-actions {
1028             margin: 0 0.5em 0.5em;
1029             position: relative;
1030         }
1031     }
1033     .detail-pair {
1034         border-bottom: 1px solid $table-border-color;
1035         margin: 0 1rem;
1037         > * {
1038             display: inline-block;
1039             line-height: 2.2rem;
1040         }
1042         .pair-key {
1043             font-weight: bold;
1044             vertical-align: top;
1046             span {
1047                 margin-right: 1rem;
1048                 display: block;
1049             }
1050         }
1052         .pair-value select {
1053             max-width: 100%;
1054         }
1055     }
1057     .bulk-actions .detail-pair {
1058         > * {
1059             display: block;
1060             width: 100%;
1061         }
1062     }
1064     .listing-pagination {
1065         text-align: center;
1067         .yui3-button {
1068             background-color: $btn-info-bg;
1069             border: 0;
1070             margin: 0.4rem 0.2rem 0.45rem;
1071             font-size: 10.4px;
1073             &.active-page {
1074                 background-color: $btn-primary-color;
1075             }
1076         }
1077     }
1079     .listing-pagination-totals {
1080         text-align: center;
1082         &.dimmed {
1083             @extend .text-muted;
1084             margin: 0.4rem 1rem 0.45rem;
1085         }
1086     }
1088     .select-a-category .notifymessage,
1089     .select-a-category .alert {
1090         margin: 1em;
1091     }
1094 #course-category-listings #course-listing .listitem .drag-handle {
1095     display: none;
1098 .jsenabled #course-category-listings #course-listing .listitem .drag-handle {
1099     display: inline-block;
1100     margin: 0 6px 0 0;
1101     cursor: pointer;
1104 /** Management header styling **/
1105 .coursecat-management-header {
1106     vertical-align: middle;
1108     h2 {
1109         display: inline-block;
1110         text-align: left;
1111     }
1113     > div {
1114         display: inline-block;
1115         float: right;
1116         line-height: 40px;
1118         > div {
1119             margin: 10px 0 10px 1em;
1120             display: inline-block;
1121         }
1122     }
1124     select {
1125         max-width: 300px;
1126         cursor: pointer;
1127         padding: 0.4em 0.5em 0.45em 1em;
1128         vertical-align: baseline;
1129         white-space: nowrap;
1130     }
1132     .view-mode-selector {
1133         .moodle-actionmenu {
1134             white-space: nowrap;
1135             display: inline-block;
1136         }
1138         .moodle-actionmenu[data-enhanced].show .menu a {
1139             padding-left: 1em;
1140         }
1141     }
1144 .course-being-dragged-proxy {
1145     border: 0;
1146     color: $link-color;
1147     vertical-align: middle;
1148     padding: 0 0 0 4em;
1151 .course-being-dragged {
1152     opacity: 0.5;
1155 /**
1156  * Display sizes:
1157  * Large displays                   1200        +
1158  * Default displays                  980     1199
1159  * Tablets                           768      979
1160  * Small tablets and large phones    481      767
1161  * Phones                              0      480
1162  */
1164 @media (min-width: 1200px) and (max-width: 1600px) {
1165     #course-category-listings.columns-3 {
1166         background-color: $body-bg;
1167         border: 0;
1169         #category-listing,
1170         #course-listing {
1171             width: 50%;
1172         }
1174         #category-listing > div,
1175         #course-listing > div,
1176         #course-detail > div {
1177             background-color: $body-bg;
1178         }
1180         #course-detail {
1181             width: 100%;
1182             margin-top: 1em;
1183         }
1184     }
1187 @media (max-width: 1199px) {
1188     #course-category-listings.columns-2,
1189     #course-category-listings.columns-3 {
1190         background-color: $body-bg;
1191         border: 0;
1193         #category-listing,
1194         #course-listing,
1195         #course-detail {
1196             width: 100%;
1197             margin: 0 0 1em;
1198         }
1200         #category-listing > div,
1201         #course-listing > div,
1202         #course-detail > div {
1203             background-color: $body-bg;
1204         }
1205     }