MDL-67264 core_course: Activity chooser new feature
[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 .course-content ul.section {
48     margin: $spacer;
49 }
51 .section {
52     .side {
53         &.left {
54             float: left;
55         }
57         &.right {
58             float: right;
59             clear: right;
60         }
61         margin-top: 0.5rem;
62     }
64     .spinner {
65         height: 16px;
66         width: 16px;
67     }
69     .activity {
70         .spinner {
71             left: 100%;
72             position: absolute;
73         }
75         /* The command block for each activity */
76         .actions {
77             position: absolute;
78             right: 0;
79             top: 0;
80             display: flex;
81         }
83         .contentwithoutlink,
84         .activityinstance {
85             min-width: 40%;
86             display: table-cell;
87             padding-right: 4px;
88             min-height: 2em;
90             > a {
91                 display: block;
92                 text-indent: -31px;
93                 padding-left: 31px;
94             }
96             .dimmed {
97                 .activityicon {
98                     opacity: .5;
99                 }
100             }
101         }
103         .stealth {
104             color: $text-muted;
105         }
106         a.stealth,
107         a.stealth:hover {
108             color: lighten($link-color, 25%) !important; /* stylelint-disable-line declaration-no-important */
109         }
110     }
112     .label {
113         .contentwithoutlink,
114         .activityinstance {
115             padding-right: 32px;
116             display: block;
117             height: inherit;
118         }
120         .mod-indent-outer {
121             padding-left: 24px;
122             display: block;
123         }
124     }
126     .filler {
127         // This must be sized like an icon to fill the space.
128         width: 16px;
129         height: 16px;
130         padding: 0;
131         margin: 0 ($spacer / 2);
132         display: inline-block;
133     }
135     .activity.editor_displayed {
136         a.editing_title,
137         .moodle-actionmenu {
138             display: none;
139         }
141         div.activityinstance {
142             padding-right: initial;
144             input {
145                 margin-bottom: initial;
146                 padding-top: initial;
147                 padding-bottom: initial;
148                 vertical-align: text-bottom;
149             }
150         }
151     }
154 .activity img.activityicon {
155     margin-right: 6px;
156     vertical-align: text-bottom;
159 .section .activity .activityinstance,
160 .section .activity .activityinstance div {
161     display: inline-block;
164 .editing {
165     .section {
166         .activity {
167             .contentwithoutlink,
168             .activityinstance {
169                 padding-right: 200px;
170             }
171             .editing_move {
172                 /* Move the move icon to the start of the line */
173                 position: absolute;
174                 left: 0;
175                 top: 0;
176             }
178             .mod-indent-outer {
179                 /**
180                  * Add appropriate padding such that nothing overlaps the
181                  * absolute positioned move icon.
182                  */
183                 padding-left: 2rem;
184             }
185         }
186     }
189 .editing_show + .editing_assign,
190 .editing_hide + .editing_assign {
191     // if roles icon missing, add space
192     margin-left: 20px;
195 .section .activity .commands {
196     white-space: nowrap;
197     display: inline-block;
200 .section .activity.modtype_label.label {
201     font-weight: normal;
202     padding: .2em;
205 .section li.activity {
206     padding: .2em;
207     clear: both;
210 .section .activity .activityinstance .groupinglabel {
211     padding-left: 30px;
214 .section .activity .availabilityinfo,
215 .section .activity .contentafterlink {
216     margin-top: 0.5em;
217     margin-left: 30px;
220 .section .activity .contentafterlink p {
221     margin: .5em 0;
224 .editing .section .activity:hover,
225 .editing .section .activity.action-menu-shown {
226     background-color: $table-bg-accent;
229 .course-content .current {
230     position: relative;
233 .course-content .current::before {
234     content: "";
235     border-left: $brand-primary 2px solid;
236     position: absolute;
237     left: -$card-spacer-x;
238     top: 0;
239     bottom: 0;
242 .course-content .section-summary {
243     border: 1px solid $table-border-color;
244     margin-top: 5px;
245     list-style: none;
248 .course-content .section-summary .section-title {
249     margin: 2px 5px 10px 5px;
252 .course-content .section-summary .summarytext {
253     margin: 2px 5px 2px 5px;
256 .course-content .section-summary .section-summary-activities .activity-count {
257     color: $text-muted;
258     font-size: $font-size-sm;
259     margin: 3px;
260     white-space: nowrap;
261     display: inline-block;
264 .course-content .section-summary .summary {
265     margin-top: 5px;
268 .course-content .single-section {
269     margin-top: 1em;
272 .course-content .single-section .section-navigation {
273     display: block;
274     padding: 0.5em;
275     margin-bottom: -0.5em;
278 .course-content .single-section .section-navigation .title {
279     font-weight: bold;
280     font-size: 108%;
281     clear: both;
284 .course-content .single-section .section-navigation .mdl-left {
285     font-weight: normal;
286     float: left;
287     margin-right: 1em;
290 .course-content .single-section .section-navigation .mdl-left .larrow {
291     margin-right: 0.1em;
294 .course-content .single-section .section-navigation .mdl-right {
295     font-weight: normal;
296     float: right;
297     margin-left: 1em;
300 .course-content .single-section .section-navigation .mdl-right .rarrow {
301     margin-left: 0.1em;
304 .course-content .single-section .section-navigation .mdl-bottom {
305     margin-top: 0;
308 .course-content ul li.section.main {
309     border-bottom: $border-width solid $table-border-color;
310     margin-top: 0;
312     &:last-child {
313         border-bottom: 0;
314     }
317 .course-content ul li.section.hidden {
318     .sectionname > span,
319     .content > div.summary,
320     .activity .activityinstance {
321         color: $text-muted;
322     }
325 .course-content ul.topics,
326 .course-content ul.weeks {
327     padding: 0;
329     li.section {
330         margin-top: $spacer;
331         padding-bottom: $spacer;
333         .content {
334             margin: 0;
335             padding: 0;
336         }
338         .summary,
339         .content > .availabilityinfo {
340             margin-left: 25px;
341         }
343         .left {
344             padding-top: 0;
345             text-align: right;
346         }
347     }
350 .course-content {
351     margin-top: 0;
354 .course-content .hidden {
355     display: none;
358 .course-content li {
359     &.section {
360         ul {
361             list-style: disc;
363             ul {
364                 list-style: circle;
366                 ul {
367                     list-style: square;
368                 }
369             }
370         }
372         li {
373             &.activity {
374                 ul {
375                     list-style: disc;
377                     ul {
378                         list-style: circle;
380                         ul {
381                             list-style: square;
382                         }
383                     }
384                 }
385             }
386         }
388         .right {
389             > .icon:first-child {
390                 /* Remove the spacer icon. */
391                 display: none;
392             }
393         }
394     }
397 .path-course-view.editing #region-main > .card-block {
398     padding-bottom: 13rem;
401 .jumpmenu .form-inline {
402     display: block;
405 .path-course-view .completionprogress {
406     margin-left: 25px;
409 .path-course-view .completionprogress {
410     display: block;
411     float: right;
412     height: 20px;
413     position: relative;
416 #page-site-index .subscribelink {
417     text-align: right;
420 #site-news-forum h2,
421 #frontpage-course-list h2,
422 #frontpage-category-names h2,
423 #frontpage-category-combo h2 {
424     margin-bottom: 9px;
427 .path-course-view a.reduce-sections {
428     padding-left: 0.2em;
431 .path-course-view .subscribelink {
432     text-align: right;
435 .path-course-view .unread {
436     margin-left: 30px;
439 .path-course-view .block.drag .header {
440     cursor: move;
443 .path-course-view .completionprogress {
444     text-align: right;
447 .path-course-view .single-section .completionprogress {
448     margin-right: 5px;
451 .path-site li.activity > div,
452 .path-course-view li.activity > div {
453     position: relative;
454     padding: 0 16px 0 0; /* to accommodate the floated completion icon with highlighting */
457 .path-course-view li.activity span.autocompletion img {
458     vertical-align: text-bottom;
459     margin-left: 0;
462 .path-course-view li.activity form.togglecompletion .btn {
463     padding: 0;
465 .path-course-view li.activity form.togglecompletion img {
466     max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
469 .path-course-view {
470     &.editing {
471         li.activity span.autocompletion img {
472             /* Use the same spacing as the filler. */
473             margin-right: $spacer / 2;
474             margin-left: $spacer / 2;
475         }
476     }
479 .path-course-view li.activity form.togglecompletion .ajaxworking {
480     width: 16px;
481     height: 16px;
482     position: absolute;
483     right: 22px;
484     top: 3px;
485     background: url([[pix:i/ajaxloader]]) no-repeat;
488 li.section.hidden span.commands a.editing_hide,
489 li.section.hidden span.commands a.editing_show {
490     cursor: default;
493 .single-section h3.sectionname {
494     text-align: center;
495     clear: both;
498 input.titleeditor {
499     width: 330px;
500     vertical-align: text-bottom;
503 span.editinstructions {
504     /*rtl:remove*/
505     position: absolute;
506     /*rtl:raw:
507     position: relative;
508     */
509     top: 0;
510     margin-top: -22px;
511     margin-left: 30px;
512     font-size: $font-size-sm;
513     padding: .1em .4em;
514     background-color: $state-info-bg;
515     color: $state-info-text;
516     text-decoration: none;
517     z-index: 9999;
519     @include box-shadow(2px 2px 5px 1px #ccc);
520     border: 1px solid $state-info-border;
523 /* Course drag and drop upload styles */
524 #dndupload-status {
525     position: fixed;
526     left: 0;
527     width: 40%;
528     margin: 0 30%;
529     padding: 6px;
530     border: 1px solid $state-info-border;
531     text-align: center;
532     background: $state-info-bg;
533     color: $state-info-text;
534     z-index: 1; // Required in order to have this above relatively positioned course content@mixin
536     @include box-shadow(2px 2px 5px 1px #ccc);
537     @include border-radius(8px);
540 .dndupload-preview {
541     color: #909090;
542     border: 1px dashed #909090;
543     list-style: none;
544     margin-top: .2em;
545     padding: .3em;
548 .dndupload-hidden {
549     display: none;
552 /* COURSES LISTINGS AND COURSE SUMMARY */
553 #page-course-pending .singlebutton,
554 #page-course-index .singlebutton,
555 #page-course-index-category .singlebutton,
556 #page-course-editsection .singlebutton {
557     text-align: center;
560 #page-admin-course-manage #movecourses td img {
561     margin: 0 .22em;
562     vertical-align: text-bottom;
565 #coursesearch {
566     margin-top: 1em;
567     text-align: center;
570 #page-course-pending .pendingcourserequests {
571     margin-bottom: 1em;
574 #page-course-pending .pendingcourserequests .singlebutton {
575     display: inline;
578 #page-course-pending .pendingcourserequests .cell {
579     padding: 0 5px;
582 #page-course-pending .pendingcourserequests .cell.c6 {
583     white-space: nowrap;
586 .coursebox {
587     padding: $spacer / 2;
590 .coursebox > .info > .coursename a {
591     display: block;
592     background-image: url([[pix:moodle|i/course]]);
593     background-repeat: no-repeat;
594     padding-left: 21px;
595     background-position: left 0.2em;
598 .coursebox > .info > .coursename,
599 .coursebox .content .teachers,
600 .coursebox .content .courseimage,
601 .coursebox .content .coursefile,
602 .coursebox .content .customfields-container {
603     float: left;
604     clear: left;
607 .coursebox .content .teachers,
608 .coursebox .content .courseimage,
609 .coursebox .content .coursefile,
610 .coursebox .content .customfields-container {
611     width: 40%;
614 .coursebox > .info > h3.coursename {
615     margin: 5px;
618 .coursebox > .info > .coursename {
619     margin: 5px;
620     padding: 0;
623 .coursebox .content .teachers li {
624     list-style-type: none;
625     padding: 0;
626     margin: 0;
629 .coursebox .moreinfo,
630 .coursebox .enrolmenticons {
631     padding: 3px 0;
632     float: right;
635 .coursebox .moreinfo img {
636     margin: 0 .2em;
639 .coursebox .content {
640     clear: both;
643 .coursebox .content .summary,
644 .coursebox .content .coursecat {
645     float: right;
646     width: 55%;
649 .coursebox .content .coursecat {
650     text-align: right;
651     clear: right;
654 .coursebox.remotecoursebox .remotecourseinfo {
655     float: left;
656     width: 40%;
659 .coursebox .content .courseimage img {
660     max-width: 100px;
661     max-height: 100px;
664 .coursebox .content .coursecat,
665 .coursebox .content .summary,
666 .coursebox .content .courseimage,
667 .coursebox .content .coursefile,
668 .coursebox .content .teachers,
669 .coursebox.remotecoursebox .remotecourseinfo,
670 .coursebox .content .customfields-container {
671     margin: 15px 5px 5px;
672     padding: 0;
675 .coursebox.remotehost > .info > .categoryname a {
676     background-image: url([[pix:moodle|i/mnethost]]);
679 .coursebox.collapsed {
680     margin-bottom: 0;
683 .coursebox.collapsed > .content {
684     display: none;
687 .courses .coursebox {
688     &.collapsed {
689         padding-top: $spacer-y / 2;
690         padding-bottom: $spacer-y / 2;
691     }
693     &.even {
694         background-color: $table-bg-accent;
695     }
698 .courses > .paging.paging-morelink {
699     text-align: center;
700     padding: $spacer;
703 .course_category_tree .category .numberofcourse {
704     font-size: $font-size-sm;
707 .course_category_tree .controls {
708     visibility: hidden;
711 .course_category_tree .controls div {
712     display: inline;
713     cursor: pointer;
716 .jsenabled .course_category_tree .controls {
717     visibility: visible;
720 .course_category_tree .controls {
721     margin-bottom: 5px;
722     text-align: right;
723     float: right;
726 .course_category_tree .controls div {
727     padding-right: 2em;
728     font-size: 75%;
731 .course_category_tree .category > .info > .categoryname {
732     background-image: url([[pix:moodle|t/collapsed_empty]]);
733     background-repeat: no-repeat;
734     padding: 2px 18px;
735     margin: 3px;
736     background-position: center left;
738 /* rtl:raw:
739 .course_category_tree .category > .info > .categoryname {
740     background-image:url([[pix:moodle|t/collapsed_empty_rtl]]);
742  */
743 .course_category_tree .category.with_children > .info > .categoryname {
744     background-image: url([[pix:moodle|t/expanded]]);
745     cursor: pointer;
748 .course_category_tree .category.with_children.collapsed > .info > .categoryname {
749     background-image: url([[pix:moodle|t/collapsed]]);
751 /* rtl:raw:
752 .course_category_tree .category.with_children.collapsed > .info > .categoryname {
753     background-image:url([[pix:moodle|t/collapsed_rtl]]);
755 */
756 .course_category_tree .category.collapsed > .content {
757     display: none;
760 .course_category_tree .category > .info {
761     clear: both;
764 .course_category_tree .category > .content {
765     padding-left: 16px;
768 #page-course-index-category .generalbox.info {
769     margin-bottom: 15px;
770     border: 1px dotted #ddd;
772     @include border-radius(4px);
773     padding: 5px;
776 #page-course-index-category .categorypicker {
777     text-align: center;
778     margin: 10px 0 20px;
781 /**
782  * Course management page
783  * Palette
784  *
785  * Background (reg)         #F5F5F5
786  * Background (light        #fafafa
787  * Background (highlight)   #ddffaa
788  * Borders                  #e1e1e8
789  */
790 #course-category-listings {
791     margin-bottom: 0;
793     /** Two column layout */
794     &.columns-2 {
795         > #course-listing > div {
796             position: relative;
797             left: -1px;
798         }
799     }
800     /** Three column layout */
801     &.columns-3 > #course-listing > div {
802         height: 100%;
803     }
805     > div > div {
806         min-height: 300px;
808         > ul.ml > li:first-child > div {
809             border-top: 0;
810         }
811     }
813     h3 {
814         margin: 0;
815         padding: 0.4rem 0.6rem 0.3rem;
816     }
818     h4 {
819         margin: 1rem 0 0;
820         padding: 0.6rem 1rem 0.5rem;
821     }
823     .moodle-actionmenu {
824         white-space: nowrap;
825     }
827     .listing-actions {
828         text-align: center;
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     .listitem {
846         &[data-selected='1'] {
847             background-color: $table-bg-accent;
848             &:hover {
849                 background-color: $table-bg-hover;
850             }
851         }
852     }
854     .item-actions {
855         margin-right: 1em;
856         display: inline-block;
858         &.show .menu {
860             img {
861                 width: 12px;
862                 max-width: none;
863             }
864         }
866         .menu-action-text {
867             vertical-align: inherit;
868         }
869     }
871     .listitem {
872         > div {
873             > .float-left {
874                 float: left;
875             }
877             > .float-right {
878                 float: right;
879                 text-align: right;
880             }
882             .item-actions {
883                 .action-show {
884                     display: none;
885                 }
887                 .action-hide {
888                     display: inline;
889                 }
890             }
892             .without-actions {
893                 color: #333;
894             }
896             .idnumber {
897                 color: #a1a1a8;
898                 margin-right: 2em;
899             }
900         }
901         // The category or course is hidden.
902         &[data-visible="0"] {
903             color: $text-muted;
905             > div {
906                 > a {
907                     color: $text-muted;
908                 }
910                 .item-actions {
911                     .action-show {
912                         display: inline;
913                     }
915                     .action-hide {
916                         display: none;
917                     }
918                 }
919             }
920         }
922         &.highlight {
923             background-color: $body-bg;
925             > div,
926             > div:hover,
927             &[data-selected='1'] > div {
928                 background-color: $table-bg-hover;
929             }
930         }
931     }
933     #course-listing {
934         .listitem {
935             .categoryname {
936                 display: inline-block;
937                 margin-left: 1em;
938                 color: #a1a1a8;
939             }
941             .coursename {
942                 display: inline-block;
943             }
944         }
946         > .firstpage .listitem:first-child > div .item-actions .action-moveup,
947         > .lastpage .listitem:last-child > div .item-actions .action-movedown {
948             display: none;
949         }
951         .bulk-action-checkbox {
952             margin: -2px 6px 0 0;
953         }
954     }
956     #category-listing {
957         .listitem.collapsed > ul.ml {
958             display: none;
959         }
961         .listitem {
962             > div {
963                 > .ba-checkbox {
964                     width: 2.2em;
965                     text-align: center;
966                     margin: -1px 0.5em 0 0;
967                     padding-top: 2px;
968                 }
969             }
971             &.highlight > div > .ba-checkbox {
972                 background-color: $table-bg-hover;
973             }
975             &[data-selected='1'] > div > .ba-checkbox {
976                 margin: 0 0.5em 0 0;
977                 padding: 0;
978                 background-color: inherit;
979             }
981             &:first-child > div .item-actions .action-moveup,
982             &:last-child > div .item-actions .action-movedown {
983                 display: none;
984             }
985         }
987         .course-count {
988             color: #a1a1a8;
989             margin-right: 2rem;
990             min-width: 3.5em;
991             display: inline-block;
992         }
994         .bulk-action-checkbox {
995             margin-right: -3px;
996         }
998         .category-listing > ul > .listitem:first-child {
999             position: relative;
1000         }
1002         .category-bulk-actions {
1003             margin: 0 0.5em 0.5em;
1004             position: relative;
1005         }
1006     }
1008     .detail-pair {
1010         > * {
1011             display: inline-block;
1012         }
1014         .pair-key {
1015             font-weight: bold;
1016             vertical-align: top;
1018             span {
1019                 margin-right: 1rem;
1020                 display: block;
1021             }
1022         }
1024         .pair-value select {
1025             max-width: 100%;
1026         }
1027     }
1029     .bulk-actions .detail-pair {
1030         > * {
1031             display: block;
1032             width: 100%;
1033         }
1034     }
1036     .listing-pagination {
1037         text-align: center;
1039         .yui3-button {
1040             @include button-variant($info, $info);
1041             border: 0;
1042             margin: 0.4rem 0.2rem 0.45rem;
1043             font-size: 10.4px;
1045             &.active-page {
1046                 @include button-variant($primary, $primary);
1047             }
1048         }
1049     }
1051     .listing-pagination-totals {
1052         text-align: center;
1054         &.dimmed {
1055             color: $text-muted;
1056             margin: 0.4rem 1rem 0.45rem;
1057         }
1058     }
1060     .select-a-category .notifymessage,
1061     .select-a-category .alert {
1062         margin: 1em;
1063     }
1066 #course-category-listings #course-listing .listitem .drag-handle {
1067     display: none;
1070 .jsenabled #course-category-listings #course-listing .listitem .drag-handle {
1071     display: inline-block;
1072     margin: 0 6px 0 0;
1073     cursor: pointer;
1076 /** Management header styling **/
1077 .coursecat-management-header {
1078     vertical-align: middle;
1080     h2 {
1081         display: inline-block;
1082         text-align: left;
1083     }
1085     > div {
1086         display: inline-block;
1087         float: right;
1089         > div {
1090             margin: 10px 0 10px 1em;
1091             display: inline-block;
1092         }
1093     }
1095     select {
1096         max-width: 300px;
1097         cursor: pointer;
1098         padding: 0.4em 0.5em 0.45em 1em;
1099         vertical-align: baseline;
1100         white-space: nowrap;
1101     }
1103     .view-mode-selector {
1104         .moodle-actionmenu {
1105             white-space: nowrap;
1106             display: inline-block;
1107         }
1109         .moodle-actionmenu[data-enhanced].show .menu a {
1110             padding-left: 1em;
1111         }
1112     }
1115 .course-being-dragged-proxy {
1116     border: 0;
1117     color: $link-color;
1118     vertical-align: middle;
1119     padding: 0 0 0 4em;
1122 .course-being-dragged {
1123     opacity: 0.5;
1126 /**
1127  * Display sizes:
1128  * Large displays                   1200        +
1129  * Default displays                  980     1199
1130  * Tablets                           768      979
1131  * Small tablets and large phones    481      767
1132  * Phones                              0      480
1133  */
1135 @media (min-width: 1200px) and (max-width: 1600px) {
1136     #course-category-listings.columns-3 {
1137         background-color: $body-bg;
1138         border: 0;
1140         #category-listing,
1141         #course-listing {
1142             width: 50%;
1143         }
1145         #category-listing > div,
1146         #course-listing > div,
1147         #course-detail > div {
1148             background-color: $body-bg;
1149         }
1151         #course-detail {
1152             width: 100%;
1153             margin-top: 1em;
1154         }
1155     }
1158 @media (max-width: 1199px) {
1159     #course-category-listings.columns-2,
1160     #course-category-listings.columns-3 {
1161         border: 0;
1163         #category-listing,
1164         #course-listing,
1165         #course-detail {
1166             width: 100%;
1167             margin: 0 0 1em;
1168         }
1169     }
1172 .page-settings-menu .menubar > a > .icon {
1173     width: auto;
1174     height: 32px;
1175     font-size: 32px;
1178 .activity-navigation {
1179     .row {
1180         align-items: center;
1181     }
1182     #prev-activity-link,
1183     #next-activity-link {
1184         white-space: pre-wrap;
1185     }