Merge branch 'MDL-69069-master' of git://github.com/bmbrands/moodle
[moodle.git] / theme / boost / scss / moodle / course.scss
1 /* course.less */
2 /* COURSE CONTENT */
4 .section_add_menus {
5     text-align: right;
6     clear: both;
7 }
9 .section-modchooser {
10     clear: both;
11 }
13 .block_tree .tree_item.branch {
14     margin-left: 8px;
15 }
17 .section_add_menus .horizontal div,
18 .section_add_menus .horizontal form {
19     display: inline;
20 }
22 .section_add_menus optgroup {
23     font-weight: normal;
24     font-style: italic;
25 }
26 /*rtl:ignore*/
27 .section_add_menus .urlselect {
28     text-align: left;
29     margin-left: .4em;
30 }
31 /*rtl:ignore*/
32 .section_add_menus .urlselect select {
33     margin-left: .2em;
34 }
36 .sitetopic ul.section {
37     margin: 0;
38 }
40 body:not(.editing)  .sitetopic ul.section {
41     padding-left: 0;
42     .label .mod-indent-outer {
43         padding-left: 0;
44     }
45 }
47 @include media-breakpoint-up(sm) {
48     .course-content ul.section {
49         margin: $spacer;
50     }
51 }
52 .section {
53     .side {
54         &.left {
55             float: left;
56         }
58         &.right {
59             float: right;
60             clear: right;
61         }
62         margin-top: 0.5rem;
63     }
65     .spinner {
66         height: 16px;
67         width: 16px;
68     }
70     .activity {
71         .spinner {
72             left: 100%;
73             position: absolute;
74         }
76         /* The command block for each activity */
77         .actions {
78             position: absolute;
79             right: 0;
80             top: 0;
81             display: flex;
82         }
84         .contentwithoutlink,
85         .activityinstance {
86             min-width: 40%;
87             display: table-cell;
88             padding-right: 4px;
89             min-height: 2em;
91             > a {
92                 display: inline-block;
93                 text-indent: -31px;
94                 padding-left: 31px;
95             }
97             .dimmed {
98                 .activityicon {
99                     opacity: .5;
100                 }
101             }
102         }
104         .stealth {
105             color: $text-muted;
106         }
107         a.stealth,
108         a.stealth:hover {
109             color: lighten($link-color, 25%) !important; /* stylelint-disable-line declaration-no-important */
110         }
111     }
113     .label {
114         .contentwithoutlink,
115         .activityinstance {
116             padding-right: 32px;
117             display: block;
118             height: inherit;
119         }
120         @include media-breakpoint-up(sm) {
121             .mod-indent-outer {
122                 padding-left: 24px;
123                 display: block;
124             }
125         }
126     }
128     .filler {
129         // This must be sized like an icon to fill the space.
130         width: 16px;
131         height: 16px;
132         padding: 0;
133         margin: 0 ($spacer / 2);
134         display: inline-block;
135     }
137     .activity.editor_displayed {
138         a.editing_title,
139         .moodle-actionmenu {
140             display: none;
141         }
143         div.activityinstance {
144             padding-right: initial;
146             input {
147                 margin-bottom: initial;
148                 padding-top: initial;
149                 padding-bottom: initial;
150                 vertical-align: text-bottom;
151             }
152         }
153     }
156 .activity img.activityicon {
157     margin-right: 6px;
158     vertical-align: text-bottom;
161 .section .activity .activityinstance,
162 .section .activity .activityinstance div {
163     display: inline-block;
166 .editing {
167     .section {
168         .activity {
169             .contentwithoutlink,
170             .activityinstance {
171                 padding-right: 200px;
172             }
173             .editing_move {
174                 /* Move the move icon to the start of the line */
175                 position: absolute;
176                 left: 0;
177                 top: 0;
178             }
180             .mod-indent-outer {
181                 /**
182                  * Add appropriate padding such that nothing overlaps the
183                  * absolute positioned move icon.
184                  */
185                 padding-left: 2rem;
186             }
187         }
188     }
191 .editing_show + .editing_assign,
192 .editing_hide + .editing_assign {
193     // if roles icon missing, add space
194     margin-left: 20px;
197 .section .activity .commands {
198     white-space: nowrap;
199     display: inline-block;
202 .section .activity.modtype_label.label {
203     font-weight: normal;
204     padding: .2em;
207 .section li.activity {
208     padding: .2em;
209     clear: both;
212 .section .activity .activityinstance .groupinglabel {
213     padding-left: 30px;
216 .section .activity .availabilityinfo,
217 .section .activity .contentafterlink {
218     margin-top: 0.5em;
219     margin-left: 30px;
222 .section .activity .contentafterlink p {
223     margin: .5em 0;
226 .editing .section .activity:hover,
227 .editing .section .activity.action-menu-shown {
228     background-color: $table-accent-bg;
231 .course-content .current {
232     position: relative;
235 .course-content .current::before {
236     content: "";
237     border-left: $primary 2px solid;
238     position: absolute;
239     left: -$card-spacer-x;
240     top: 0;
241     bottom: 0;
244 .course-content .section-summary {
245     border: 1px solid $table-border-color;
246     margin-top: 5px;
247     list-style: none;
250 .course-content .section-summary .section-title {
251     margin: 2px 5px 10px 5px;
254 .course-content .section-summary .summarytext {
255     margin: 2px 5px 2px 5px;
258 .course-content .section-summary .section-summary-activities .activity-count {
259     color: $text-muted;
260     font-size: $font-size-sm;
261     margin: 3px;
262     white-space: nowrap;
263     display: inline-block;
266 .course-content .section-summary .summary {
267     margin-top: 5px;
270 .course-content .single-section {
271     margin-top: 1em;
274 .course-content .single-section .section-navigation {
275     display: block;
276     padding: 0.5em;
277     margin-bottom: -0.5em;
280 .course-content .single-section .section-navigation .title {
281     font-weight: bold;
282     font-size: 108%;
283     clear: both;
286 .course-content .single-section .section-navigation .mdl-left {
287     font-weight: normal;
288     float: left;
289     margin-right: 1em;
292 .course-content .single-section .section-navigation .mdl-left .larrow {
293     margin-right: 0.1em;
296 .course-content .single-section .section-navigation .mdl-right {
297     font-weight: normal;
298     float: right;
299     margin-left: 1em;
302 .course-content .single-section .section-navigation .mdl-right .rarrow {
303     margin-left: 0.1em;
306 .course-content .single-section .section-navigation .mdl-bottom {
307     margin-top: 0;
310 .course-content ul li.section.main {
311     border-bottom: $border-width solid $table-border-color;
312     margin-top: 0;
314     &:last-child {
315         border-bottom: 0;
316     }
319 .course-content ul li.section.hidden {
320     .sectionname > span,
321     .content > div.summary,
322     .activity .activityinstance {
323         color: $text-muted;
324     }
327 .course-content ul.topics,
328 .course-content ul.weeks {
329     padding: 0;
330     margin: 0;
331     list-style: none;
333     li.section {
334         margin-top: $spacer;
335         padding-bottom: $spacer;
336         .content {
337             margin: 0;
338             padding: 0;
339         }
341         @include media-breakpoint-up(sm) {
342             .summary,
343             .content > .availabilityinfo {
344                 margin-left: 25px;
345             }
346         }
348         .left,
349         .right {
350             padding: 0 6px 0;
351             text-align: right;
352             width: auto;
353         }
354     }
357 @include media-breakpoint-down(sm) {
358     body:not(.editing) {
359         .course-content ul.topics,
360         .course-content ul.weeks {
361             li.section {
362                 .left,
363                 .right {
364                     display: none;
365                 }
366             }
367         }
368     }
371 .course-content {
372     margin-top: 0;
375 .course-content .hidden {
376     display: none;
379 .course-content li {
380     &.section {
381         @include media-breakpoint-down(sm) {
382             ul {
383                 padding-left: 0;
384             }
385         }
386         ul {
387             list-style: disc;
389             ul {
390                 list-style: circle;
392                 ul {
393                     list-style: square;
394                 }
395             }
396         }
398         li {
399             &.activity {
400                 ul {
401                     list-style: disc;
403                     ul {
404                         list-style: circle;
406                         ul {
407                             list-style: square;
408                         }
409                     }
410                 }
411             }
412         }
414         .right {
415             > .icon:first-child {
416                 /* Remove the spacer icon. */
417                 display: none;
418             }
419         }
420     }
423 .path-course-view.editing #region-main > .card-block {
424     padding-bottom: 13rem;
427 .jumpmenu .form-inline {
428     display: block;
431 .path-course-view .completionprogress {
432     margin-left: 25px;
435 .path-course-view .completionprogress {
436     display: block;
437     float: right;
438     height: 20px;
439     position: relative;
442 #page-site-index .subscribelink {
443     text-align: right;
446 #site-news-forum h2,
447 #frontpage-course-list h2,
448 #frontpage-category-names h2,
449 #frontpage-category-combo h2 {
450     margin-bottom: 9px;
453 .path-course-view a.reduce-sections {
454     padding-left: 0.2em;
457 .path-course-view .subscribelink {
458     text-align: right;
461 .path-course-view .unread {
462     margin-left: 30px;
465 .path-course-view .block.drag .header {
466     cursor: move;
469 .path-course-view .completionprogress {
470     text-align: right;
473 .path-course-view .single-section .completionprogress {
474     margin-right: 5px;
477 .path-site li.activity > div,
478 .path-course-view li.activity > div {
479     position: relative;
480     padding: 0 16px 0 0; /* to accommodate the floated completion icon with highlighting */
483 .path-course-view li.activity span.autocompletion img {
484     vertical-align: text-bottom;
485     margin-left: 0;
488 .path-course-view li.activity form.togglecompletion .btn {
489     padding: 0;
491 .path-course-view li.activity form.togglecompletion img {
492     max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
495 .path-course-view {
496     &.editing {
497         li.activity span.autocompletion img {
498             /* Use the same spacing as the filler. */
499             margin-right: $spacer / 2;
500             margin-left: $spacer / 2;
501         }
502     }
505 .path-course-view li.activity form.togglecompletion .ajaxworking {
506     width: 16px;
507     height: 16px;
508     position: absolute;
509     right: 22px;
510     top: 3px;
511     background: url([[pix:i/ajaxloader]]) no-repeat;
514 li.section.hidden span.commands a.editing_hide,
515 li.section.hidden span.commands a.editing_show {
516     cursor: default;
519 .single-section h3.sectionname {
520     text-align: center;
521     clear: both;
524 input.titleeditor {
525     width: 330px;
526     vertical-align: text-bottom;
529 span.editinstructions {
530     /*rtl:remove*/
531     position: absolute;
532     /*rtl:raw:
533     position: relative;
534     */
535     top: 0;
536     margin-top: -22px;
537     margin-left: 30px;
538     font-size: $font-size-sm;
539     padding: .1em .4em;
540     text-decoration: none;
541     z-index: 9999;
542     border: $alert-border-width solid transparent;
544     @include alert-variant(
545         theme-color-level('info', $alert-bg-level),
546         theme-color-level('info', $alert-border-level),
547         theme-color-level('info', $alert-color-level)
548     );
551 /* Course drag and drop upload styles */
552 #dndupload-status {
553     position: fixed;
554     left: 0;
555     width: 40%;
556     margin: 0 30%;
557     padding: 6px;
558     text-align: center;
559     z-index: 1; // Required in order to have this above relatively positioned course content@mixin
560     border: $alert-border-width solid transparent;
562     @include alert-variant(
563         theme-color-level('info', $alert-bg-level),
564         theme-color-level('info', $alert-border-level),
565         theme-color-level('info', $alert-color-level)
566     );
569 .dndupload-preview {
570     color: #909090;
571     border: 1px dashed #909090;
572     list-style: none;
573     margin-top: .2em;
574     padding: .3em;
577 .dndupload-hidden {
578     display: none;
581 /* COURSES LISTINGS AND COURSE SUMMARY */
582 #page-course-pending .singlebutton,
583 #page-course-index .singlebutton,
584 #page-course-index-category .singlebutton,
585 #page-course-editsection .singlebutton {
586     text-align: center;
589 #page-admin-course-manage #movecourses td img {
590     margin: 0 .22em;
591     vertical-align: text-bottom;
594 #coursesearch {
595     margin-top: 1em;
596     text-align: left;
599 #page-course-pending .pendingcourserequests {
600     margin-bottom: 1em;
603 #page-course-pending .pendingcourserequests .singlebutton {
604     display: inline;
607 #page-course-pending .pendingcourserequests .cell {
608     padding: 0 5px;
611 #page-course-pending .pendingcourserequests .cell.c6 {
612     white-space: nowrap;
615 .coursebox {
616     padding: $spacer / 2;
619 .coursebox > .info > .coursename a {
620     display: block;
621     background-image: url([[pix:moodle|i/course]]);
622     background-repeat: no-repeat;
623     padding-left: 21px;
624     background-position: left 0.2em;
627 .coursebox > .info > .coursename,
628 .coursebox .content .teachers,
629 .coursebox .content .courseimage,
630 .coursebox .content .coursefile,
631 .coursebox .content .customfields-container {
632     float: left;
633     clear: left;
636 .coursebox .content .teachers,
637 .coursebox .content .courseimage,
638 .coursebox .content .coursefile,
639 .coursebox .content .customfields-container {
640     width: 40%;
643 .coursebox > .info > h3.coursename {
644     margin: 5px;
647 .coursebox > .info > .coursename {
648     margin: 5px;
649     padding: 0;
652 .coursebox .content .teachers li {
653     list-style-type: none;
654     padding: 0;
655     margin: 0;
658 .coursebox .moreinfo,
659 .coursebox .enrolmenticons {
660     padding: 3px 0;
661     float: right;
664 .coursebox .moreinfo img {
665     margin: 0 .2em;
668 .coursebox .content {
669     clear: both;
672 .coursebox .content .summary,
673 .coursebox .content .coursecat {
674     float: right;
675     width: 55%;
678 .coursebox .content .coursecat {
679     text-align: right;
680     clear: right;
683 .coursebox.remotecoursebox .remotecourseinfo {
684     float: left;
685     width: 40%;
688 .coursebox .content .courseimage img {
689     max-width: 100px;
690     max-height: 100px;
693 .coursebox .content .coursecat,
694 .coursebox .content .summary,
695 .coursebox .content .courseimage,
696 .coursebox .content .coursefile,
697 .coursebox .content .teachers,
698 .coursebox.remotecoursebox .remotecourseinfo,
699 .coursebox .content .customfields-container {
700     margin: 15px 5px 5px;
701     padding: 0;
704 .coursebox.remotehost > .info > .categoryname a {
705     background-image: url([[pix:moodle|i/mnethost]]);
708 .coursebox.collapsed {
709     margin-bottom: 0;
712 .coursebox.collapsed > .content {
713     display: none;
716 .courses .coursebox {
717     &.collapsed {
718         padding-top: $spacer / 2;
719         padding-bottom: $spacer / 2;
720     }
722     &.even {
723         background-color: $table-accent-bg;
724     }
727 .courses > .paging.paging-morelink {
728     text-align: center;
729     padding: $spacer;
732 .course_category_tree .category .numberofcourse {
733     font-size: $font-size-sm;
736 .course_category_tree .controls {
737     visibility: hidden;
740 .course_category_tree .controls div {
741     display: inline;
742     cursor: pointer;
745 .jsenabled .course_category_tree .controls {
746     visibility: visible;
749 .course_category_tree .controls {
750     margin-bottom: 5px;
751     text-align: right;
752     float: right;
755 .course_category_tree .controls div {
756     padding-right: 2em;
757     font-size: 75%;
760 .course_category_tree .category > .info > .categoryname {
761     background-image: url([[pix:moodle|t/collapsed_empty]]);
762     background-repeat: no-repeat;
763     padding: 2px 18px;
764     margin: 3px;
765     background-position: center left;
767 /* rtl:raw:
768 .course_category_tree .category > .info > .categoryname {
769     background-image:url([[pix:moodle|t/collapsed_empty_rtl]]);
771  */
772 .course_category_tree .category.with_children > .info > .categoryname {
773     background-image: url([[pix:moodle|t/expanded]]);
774     cursor: pointer;
777 .course_category_tree .category.with_children.collapsed > .info > .categoryname {
778     background-image: url([[pix:moodle|t/collapsed]]);
780 /* rtl:raw:
781 .course_category_tree .category.with_children.collapsed > .info > .categoryname {
782     background-image:url([[pix:moodle|t/collapsed_rtl]]);
784 */
785 .course_category_tree .category.collapsed > .content {
786     display: none;
789 .course_category_tree .category > .info {
790     clear: both;
793 .course_category_tree .category > .content {
794     padding-left: 16px;
797 #page-course-index-category .generalbox.info {
798     margin-bottom: 15px;
799     border: 1px dotted #ddd;
801     @include border-radius(4px);
802     padding: 5px;
805 #page-course-index-category .categorypicker {
806     text-align: center;
807     margin: 10px 0 20px;
810 /**
811  * Course management page
812  * Palette
813  *
814  * Background (reg)         #F5F5F5
815  * Background (light        #fafafa
816  * Background (highlight)   #ddffaa
817  * Borders                  #e1e1e8
818  */
819 #course-category-listings {
820     margin-bottom: 0;
822     /** Two column layout */
823     &.columns-2 {
824         > #course-listing > div {
825             position: relative;
826             left: -1px;
827         }
828     }
829     /** Three column layout */
830     &.columns-3 > #course-listing > div {
831         height: 100%;
832     }
834     > div > div {
835         min-height: 300px;
837         > ul.ml > li:first-child > div {
838             border-top: 0;
839         }
840     }
842     h3 {
843         margin: 0;
844         padding: 0.4rem 0.6rem 0.3rem;
845     }
847     h4 {
848         margin: 1rem 0 0;
849         padding: 0.6rem 1rem 0.5rem;
850     }
852     .moodle-actionmenu {
853         white-space: nowrap;
854     }
856     .listing-actions {
857         text-align: center;
859         > .moodle-actionmenu {
860             display: inline-block;
861         }
862     }
864     ul.ml {
865         list-style: none;
866         margin: 1rem 0;
868         ul.ml {
869             margin: 0;
870         }
871     }
873     .listitem {
875         &[data-selected='1'] {
876             border-left: calc(#{$list-group-border-width} + 5px) solid map-get($theme-colors, 'primary');
877             padding-left: calc(#{$list-group-item-padding-x} - 5px);
878         }
879     }
881     .item-actions {
882         margin-right: 1em;
883         display: inline-block;
885         &.show .menu {
887             img {
888                 width: 12px;
889                 max-width: none;
890             }
891         }
893         .menu-action-text {
894             vertical-align: inherit;
895         }
896     }
898     .listitem {
899         > div {
900             > .float-left {
901                 float: left;
902             }
904             > .float-right {
905                 float: right;
906                 text-align: right;
907             }
909             .item-actions {
910                 .action-show {
911                     display: none;
912                 }
914                 .action-hide {
915                     display: inline;
916                 }
917             }
919             .without-actions {
920                 color: #333;
921             }
923             .idnumber {
924                 margin-right: 2em;
925             }
926         }
927         // The category or course is hidden.
928         &[data-visible="0"] {
929             color: $text-muted;
931             > div {
932                 > a {
933                     color: $text-muted;
934                 }
936                 .item-actions {
937                     .action-show {
938                         display: inline;
939                     }
941                     .action-hide {
942                         display: none;
943                     }
944                 }
945             }
946         }
948         &.highlight {
949             background-color: $body-bg;
951             > div,
952             > div:hover,
953             &[data-selected='1'] > div {
954                 background-color: $table-hover-bg;
955             }
956         }
957     }
959     #course-listing {
960         .listitem {
961             .categoryname {
962                 display: inline-block;
963                 margin-left: 1em;
964                 color: #a1a1a8;
965             }
967             .coursename {
968                 display: inline-block;
969             }
970         }
972         > .firstpage .listitem:first-child > div .item-actions .action-moveup,
973         > .lastpage .listitem:last-child > div .item-actions .action-movedown {
974             display: none;
975         }
977         .bulk-action-checkbox {
978             margin: -2px 6px 0 0;
979         }
980     }
982     #category-listing {
983         .listitem.collapsed > ul.ml {
984             display: none;
985         }
987         .listitem {
988             &:first-child > div .item-actions .action-moveup,
989             &:last-child > div .item-actions .action-movedown {
990                 display: none;
991             }
992         }
994         .course-count {
995             color: #a1a1a8;
996             margin-right: 2rem;
997             min-width: 3.5em;
998             display: inline-block;
999         }
1001         .bulk-action-checkbox {
1002             margin-right: -3px;
1003         }
1005         .category-listing > ul > .listitem:first-child {
1006             position: relative;
1007         }
1009         .category-bulk-actions {
1010             margin: 0 0.5em 0.5em;
1011             position: relative;
1012         }
1013     }
1015     .detail-pair {
1017         > * {
1018             display: inline-block;
1019         }
1021         .pair-key {
1022             font-weight: bold;
1023             vertical-align: top;
1025             span {
1026                 margin-right: 1rem;
1027                 display: block;
1028             }
1029         }
1031         .pair-value select {
1032             max-width: 100%;
1033         }
1034     }
1036     .bulk-actions .detail-pair {
1037         > * {
1038             display: block;
1039             width: 100%;
1040         }
1041     }
1043     .listing-pagination {
1044         text-align: center;
1046         .yui3-button {
1047             @include button-variant($info, $info);
1048             border: 0;
1049             margin: 0.4rem 0.2rem 0.45rem;
1050             font-size: 10.4px;
1052             &.active-page {
1053                 @include button-variant($primary, $primary);
1054             }
1055         }
1056     }
1058     .listing-pagination-totals {
1059         text-align: center;
1061         &.dimmed {
1062             color: $text-muted;
1063             margin: 0.4rem 1rem 0.45rem;
1064         }
1065     }
1067     .select-a-category .notifymessage,
1068     .select-a-category .alert {
1069         margin: 1em;
1070     }
1073 #course-category-listings #course-listing .listitem .drag-handle {
1074     display: none;
1077 .jsenabled #course-category-listings #course-listing .listitem .drag-handle {
1078     display: inline-block;
1079     margin: 0 6px 0 0;
1080     cursor: pointer;
1083 /** Management header styling **/
1084 .coursecat-management-header {
1085     vertical-align: middle;
1087     h2 {
1088         display: inline-block;
1089         text-align: left;
1090     }
1092     > div {
1093         display: inline-block;
1094         float: right;
1096         > div {
1097             margin: 10px 0 10px 1em;
1098             display: inline-block;
1099         }
1100     }
1102     select {
1103         max-width: 300px;
1104         cursor: pointer;
1105         padding: 0.4em 0.5em 0.45em 1em;
1106         vertical-align: baseline;
1107         white-space: nowrap;
1108     }
1110     .view-mode-selector {
1111         .moodle-actionmenu {
1112             white-space: nowrap;
1113             display: inline-block;
1114         }
1116         .moodle-actionmenu[data-enhanced].show .menu a {
1117             padding-left: 1em;
1118         }
1119     }
1122 .course-being-dragged-proxy {
1123     border: 0;
1124     color: $link-color;
1125     vertical-align: middle;
1126     padding: 0 0 0 4em;
1129 .course-being-dragged {
1130     opacity: 0.5;
1133 /**
1134  * Display sizes:
1135  * Large displays                   1200        +
1136  * Default displays                  980     1199
1137  * Tablets                           768      979
1138  * Small tablets and large phones    481      767
1139  * Phones                              0      480
1140  */
1142 @media (min-width: 1200px) and (max-width: 1600px) {
1143     #course-category-listings.columns-3 {
1144         background-color: $body-bg;
1145         border: 0;
1147         #category-listing,
1148         #course-listing {
1149             width: 50%;
1150         }
1152         #category-listing > div,
1153         #course-listing > div,
1154         #course-detail > div {
1155             background-color: $body-bg;
1156         }
1158         #course-detail {
1159             width: 100%;
1160             margin-top: 1em;
1161         }
1162     }
1165 @media (max-width: 1199px) {
1166     #course-category-listings.columns-2,
1167     #course-category-listings.columns-3 {
1168         border: 0;
1170         #category-listing,
1171         #course-listing,
1172         #course-detail {
1173             width: 100%;
1174             margin: 0 0 1em;
1175         }
1176     }
1179 .page-settings-menu .menubar > a > .icon {
1180     width: auto;
1181     height: 32px;
1182     font-size: 32px;
1185 .activity-navigation {
1186     .row {
1187         align-items: center;
1188     }
1189     #prev-activity-link,
1190     #next-activity-link {
1191         white-space: pre-wrap;
1192     }