d068d112def38caeebe6c6a8c92f30ddaae08a50
[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 body:not(.editing)  .sitetopic ul.section {
46     padding-left: 0;
47     .label .mod-indent-outer {
48         padding-left: 0;
49     }
50 }
52 .course-content ul.section {
53     margin: $spacer;
54 }
56 .section {
57     .side {
58         &.left {
59             float: left;
60         }
62         &.right {
63             float: right;
64             clear: right;
65         }
66         margin-top: 0.5rem;
67     }
69     .spinner {
70         height: 16px;
71         width: 16px;
72     }
74     .activity {
75         .spinner {
76             left: 100%;
77             position: absolute;
78         }
80         /* The command block for each activity */
81         .actions {
82             position: absolute;
83             right: 0;
84             top: 0;
85             display: flex;
86         }
88         .contentwithoutlink,
89         .activityinstance {
90             min-width: 40%;
91             display: table-cell;
92             padding-right: 4px;
93             min-height: 2em;
95             > a {
96                 display: block;
97                 text-indent: -31px;
98                 padding-left: 31px;
99             }
101             .dimmed {
102                 .activityicon {
103                     opacity: .5;
104                 }
105             }
106         }
108         .stealth {
109             color: $text-muted;
110         }
111         a.stealth,
112         a.stealth:hover {
113             color: lighten($link-color, 25%) !important; /* stylelint-disable-line declaration-no-important */
114         }
115     }
117     .label {
118         .contentwithoutlink,
119         .activityinstance {
120             padding-right: 32px;
121             display: block;
122             height: inherit;
123         }
125         .mod-indent-outer {
126             padding-left: 24px;
127             display: block;
128         }
129     }
131     .filler {
132         // This must be sized like an icon to fill the space.
133         width: 16px;
134         height: 16px;
135         padding: 0;
136         margin: 0 ($spacer / 2);
137         display: inline-block;
138     }
140     .activity.editor_displayed {
141         a.editing_title,
142         .moodle-actionmenu {
143             display: none;
144         }
146         div.activityinstance {
147             padding-right: initial;
149             input {
150                 margin-bottom: initial;
151                 padding-top: initial;
152                 padding-bottom: initial;
153                 vertical-align: text-bottom;
154             }
155         }
156     }
159 .activity img.activityicon {
160     margin-right: 6px;
161     vertical-align: text-bottom;
164 .section .activity .activityinstance,
165 .section .activity .activityinstance div {
166     display: inline-block;
169 .editing {
170     .section {
171         .activity {
172             .contentwithoutlink,
173             .activityinstance {
174                 padding-right: 200px;
175             }
176             .editing_move {
177                 /* Move the move icon to the start of the line */
178                 position: absolute;
179                 left: 0;
180                 top: 0;
181             }
183             .mod-indent-outer {
184                 /**
185                  * Add appropriate padding such that nothing overlaps the
186                  * absolute positioned move icon.
187                  */
188                 padding-left: 2rem;
189             }
190         }
191     }
194 .editing_show + .editing_assign,
195 .editing_hide + .editing_assign {
196     // if roles icon missing, add space
197     margin-left: 20px;
200 .section .activity .commands {
201     white-space: nowrap;
202     display: inline-block;
205 .section .activity.modtype_label.label {
206     font-weight: normal;
207     padding: .2em;
210 .section li.activity {
211     padding: .2em;
212     clear: both;
215 .section .activity .activityinstance .groupinglabel {
216     padding-left: 30px;
219 .section .activity .availabilityinfo,
220 .section .activity .contentafterlink {
221     margin-top: 0.5em;
222     margin-left: 30px;
225 .section .activity .contentafterlink p {
226     margin: .5em 0;
229 .editing .section .activity:hover,
230 .editing .section .activity.action-menu-shown {
231     background-color: $table-bg-accent;
234 .course-content .current {
235     position: relative;
238 .course-content .current::before {
239     content: "";
240     border-left: $brand-primary 2px solid;
241     position: absolute;
242     left: -$card-spacer-x;
243     top: 0;
244     bottom: 0;
247 .course-content .section-summary {
248     border: 1px solid $table-border-color;
249     margin-top: 5px;
250     list-style: none;
253 .course-content .section-summary .section-title {
254     margin: 2px 5px 10px 5px;
257 .course-content .section-summary .summarytext {
258     margin: 2px 5px 2px 5px;
261 .course-content .section-summary .section-summary-activities .activity-count {
262     color: $text-muted;
263     font-size: $font-size-sm;
264     margin: 3px;
265     white-space: nowrap;
266     display: inline-block;
269 .course-content .section-summary .summary {
270     margin-top: 5px;
273 .course-content .single-section {
274     margin-top: 1em;
277 .course-content .single-section .section-navigation {
278     display: block;
279     padding: 0.5em;
280     margin-bottom: -0.5em;
283 .course-content .single-section .section-navigation .title {
284     font-weight: bold;
285     font-size: 108%;
286     clear: both;
289 .course-content .single-section .section-navigation .mdl-left {
290     font-weight: normal;
291     float: left;
292     margin-right: 1em;
295 .course-content .single-section .section-navigation .mdl-left .larrow {
296     margin-right: 0.1em;
299 .course-content .single-section .section-navigation .mdl-right {
300     font-weight: normal;
301     float: right;
302     margin-left: 1em;
305 .course-content .single-section .section-navigation .mdl-right .rarrow {
306     margin-left: 0.1em;
309 .course-content .single-section .section-navigation .mdl-bottom {
310     margin-top: 0;
313 .course-content ul li.section.main {
314     border-bottom: $border-width solid $table-border-color;
315     margin-top: 0;
317     &:last-child {
318         border-bottom: 0;
319     }
322 .course-content ul li.section.hidden {
323     .sectionname > span,
324     .content > div.summary,
325     .activity .activityinstance {
326         color: $text-muted;
327     }
330 .course-content ul.topics,
331 .course-content ul.weeks {
332     padding: 0;
334     li.section {
335         margin-top: $spacer;
336         padding-bottom: $spacer;
338         .content {
339             margin: 0;
340             padding: 0;
341         }
343         .summary,
344         .content > .availabilityinfo {
345             margin-left: 25px;
346         }
348         .left {
349             padding-top: 0;
350             text-align: right;
351         }
352     }
355 .course-content {
356     margin-top: 0;
359 .course-content .hidden {
360     display: none;
363 .course-content li {
364     &.section {
365         ul {
366             list-style: disc;
368             ul {
369                 list-style: circle;
371                 ul {
372                     list-style: square;
373                 }
374             }
375         }
377         li {
378             &.activity {
379                 ul {
380                     list-style: disc;
382                     ul {
383                         list-style: circle;
385                         ul {
386                             list-style: square;
387                         }
388                     }
389                 }
390             }
391         }
393         .right {
394             > .icon:first-child {
395                 /* Remove the spacer icon. */
396                 display: none;
397             }
398         }
399     }
402 .path-course-view.editing #region-main > .card-block {
403     padding-bottom: 13rem;
406 .jumpmenu .form-inline {
407     display: block;
410 .path-course-view .completionprogress {
411     margin-left: 25px;
414 .path-course-view .completionprogress {
415     display: block;
416     float: right;
417     height: 20px;
418     position: relative;
421 #page-site-index .subscribelink {
422     text-align: right;
425 #site-news-forum h2,
426 #frontpage-course-list h2,
427 #frontpage-category-names h2,
428 #frontpage-category-combo h2 {
429     margin-bottom: 9px;
432 .path-course-view a.reduce-sections {
433     padding-left: 0.2em;
436 .path-course-view .subscribelink {
437     text-align: right;
440 .path-course-view .unread {
441     margin-left: 30px;
444 .path-course-view .block.drag .header {
445     cursor: move;
448 .path-course-view .completionprogress {
449     text-align: right;
452 .path-course-view .single-section .completionprogress {
453     margin-right: 5px;
456 .path-site li.activity > div,
457 .path-course-view li.activity > div {
458     position: relative;
459     padding: 0 16px 0 0; /* to accommodate the floated completion icon with highlighting */
462 .path-course-view li.activity span.autocompletion img {
463     vertical-align: text-bottom;
464     margin-left: 0;
467 .path-course-view li.activity form.togglecompletion .btn {
468     padding: 0;
470 .path-course-view li.activity form.togglecompletion img {
471     max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
474 .path-course-view {
475     &.editing {
476         li.activity span.autocompletion img {
477             /* Use the same spacing as the filler. */
478             margin-right: $spacer / 2;
479             margin-left: $spacer / 2;
480         }
481     }
484 .path-course-view li.activity form.togglecompletion .ajaxworking {
485     width: 16px;
486     height: 16px;
487     position: absolute;
488     right: 22px;
489     top: 3px;
490     background: url([[pix:i/ajaxloader]]) no-repeat;
493 li.section.hidden span.commands a.editing_hide,
494 li.section.hidden span.commands a.editing_show {
495     cursor: default;
498 .single-section h3.sectionname {
499     text-align: center;
500     clear: both;
503 input.titleeditor {
504     width: 330px;
505     vertical-align: text-bottom;
508 span.editinstructions {
509     /*rtl:remove*/
510     position: absolute;
511     /*rtl:raw:
512     position: relative;
513     */
514     top: 0;
515     margin-top: -22px;
516     margin-left: 30px;
517     font-size: $font-size-sm;
518     padding: .1em .4em;
519     background-color: $state-info-bg;
520     color: $state-info-text;
521     text-decoration: none;
522     z-index: 9999;
524     @include box-shadow(2px 2px 5px 1px #ccc);
525     border: 1px solid $state-info-border;
528 /* Course drag and drop upload styles */
529 #dndupload-status {
530     position: fixed;
531     left: 0;
532     width: 40%;
533     margin: 0 30%;
534     padding: 6px;
535     border: 1px solid $state-info-border;
536     text-align: center;
537     background: $state-info-bg;
538     color: $state-info-text;
539     z-index: 1; // Required in order to have this above relatively positioned course content@mixin
541     @include box-shadow(2px 2px 5px 1px #ccc);
542     @include border-radius(8px);
545 .dndupload-preview {
546     color: #909090;
547     border: 1px dashed #909090;
548     list-style: none;
549     margin-top: .2em;
550     padding: .3em;
553 .dndupload-hidden {
554     display: none;
557 /* COURSES LISTINGS AND COURSE SUMMARY */
558 #page-course-pending .singlebutton,
559 #page-course-index .singlebutton,
560 #page-course-index-category .singlebutton,
561 #page-course-editsection .singlebutton {
562     text-align: center;
565 #page-admin-course-manage #movecourses td img {
566     margin: 0 .22em;
567     vertical-align: text-bottom;
570 #coursesearch {
571     margin-top: 1em;
572     text-align: center;
575 #page-course-pending .pendingcourserequests {
576     margin-bottom: 1em;
579 #page-course-pending .pendingcourserequests .singlebutton {
580     display: inline;
583 #page-course-pending .pendingcourserequests .cell {
584     padding: 0 5px;
587 #page-course-pending .pendingcourserequests .cell.c6 {
588     white-space: nowrap;
591 .coursebox {
592     padding: $spacer / 2;
595 .coursebox > .info > .coursename a {
596     display: block;
597     background-image: url([[pix:moodle|i/course]]);
598     background-repeat: no-repeat;
599     padding-left: 21px;
600     background-position: left 0.2em;
603 .coursebox > .info > .coursename,
604 .coursebox .content .teachers,
605 .coursebox .content .courseimage,
606 .coursebox .content .coursefile,
607 .coursebox .content .customfields-container {
608     float: left;
609     clear: left;
612 .coursebox .content .teachers,
613 .coursebox .content .courseimage,
614 .coursebox .content .coursefile,
615 .coursebox .content .customfields-container {
616     width: 40%;
619 .coursebox > .info > h3.coursename {
620     margin: 5px;
623 .coursebox > .info > .coursename {
624     margin: 5px;
625     padding: 0;
628 .coursebox .content .teachers li {
629     list-style-type: none;
630     padding: 0;
631     margin: 0;
634 .coursebox .moreinfo,
635 .coursebox .enrolmenticons {
636     padding: 3px 0;
637     float: right;
640 .coursebox .moreinfo img {
641     margin: 0 .2em;
644 .coursebox .content {
645     clear: both;
648 .coursebox .content .summary,
649 .coursebox .content .coursecat {
650     float: right;
651     width: 55%;
654 .coursebox .content .coursecat {
655     text-align: right;
656     clear: right;
659 .coursebox.remotecoursebox .remotecourseinfo {
660     float: left;
661     width: 40%;
664 .coursebox .content .courseimage img {
665     max-width: 100px;
666     max-height: 100px;
669 .coursebox .content .coursecat,
670 .coursebox .content .summary,
671 .coursebox .content .courseimage,
672 .coursebox .content .coursefile,
673 .coursebox .content .teachers,
674 .coursebox.remotecoursebox .remotecourseinfo,
675 .coursebox .content .customfields-container {
676     margin: 15px 5px 5px;
677     padding: 0;
680 .coursebox.remotehost > .info > .categoryname a {
681     background-image: url([[pix:moodle|i/mnethost]]);
684 .coursebox.collapsed {
685     margin-bottom: 0;
688 .coursebox.collapsed > .content {
689     display: none;
692 .courses .coursebox {
693     &.collapsed {
694         padding-top: $spacer-y / 2;
695         padding-bottom: $spacer-y / 2;
696     }
698     &.even {
699         background-color: $table-bg-accent;
700     }
703 .courses > .paging.paging-morelink {
704     text-align: center;
705     padding: $spacer;
708 .course_category_tree .category .numberofcourse {
709     font-size: $font-size-sm;
712 .course_category_tree .controls {
713     visibility: hidden;
716 .course_category_tree .controls div {
717     display: inline;
718     cursor: pointer;
721 .jsenabled .course_category_tree .controls {
722     visibility: visible;
725 .course_category_tree .controls {
726     margin-bottom: 5px;
727     text-align: right;
728     float: right;
731 .course_category_tree .controls div {
732     padding-right: 2em;
733     font-size: 75%;
736 .course_category_tree .category > .info > .categoryname {
737     background-image: url([[pix:moodle|t/collapsed_empty]]);
738     background-repeat: no-repeat;
739     padding: 2px 18px;
740     margin: 3px;
741     background-position: center left;
743 /* rtl:raw:
744 .course_category_tree .category > .info > .categoryname {
745     background-image:url([[pix:moodle|t/collapsed_empty_rtl]]);
747  */
748 .course_category_tree .category.with_children > .info > .categoryname {
749     background-image: url([[pix:moodle|t/expanded]]);
750     cursor: pointer;
753 .course_category_tree .category.with_children.collapsed > .info > .categoryname {
754     background-image: url([[pix:moodle|t/collapsed]]);
756 /* rtl:raw:
757 .course_category_tree .category.with_children.collapsed > .info > .categoryname {
758     background-image:url([[pix:moodle|t/collapsed_rtl]]);
760 */
761 .course_category_tree .category.collapsed > .content {
762     display: none;
765 .course_category_tree .category > .info {
766     clear: both;
769 .course_category_tree .category > .content {
770     padding-left: 16px;
773 #page-course-index-category .generalbox.info {
774     margin-bottom: 15px;
775     border: 1px dotted #ddd;
777     @include border-radius(4px);
778     padding: 5px;
781 #page-course-index-category .categorypicker {
782     text-align: center;
783     margin: 10px 0 20px;
786 /**
787  * Course management page
788  * Palette
789  *
790  * Background (reg)         #F5F5F5
791  * Background (light        #fafafa
792  * Background (highlight)   #ddffaa
793  * Borders                  #e1e1e8
794  */
795 #course-category-listings {
796     margin-bottom: 0;
798     /** Two column layout */
799     &.columns-2 {
800         > #course-listing > div {
801             position: relative;
802             left: -1px;
803         }
804     }
805     /** Three column layout */
806     &.columns-3 > #course-listing > div {
807         height: 100%;
808     }
810     > div > div {
811         min-height: 300px;
813         > ul.ml > li:first-child > div {
814             border-top: 0;
815         }
816     }
818     h3 {
819         margin: 0;
820         padding: 0.4rem 0.6rem 0.3rem;
821     }
823     h4 {
824         margin: 1rem 0 0;
825         padding: 0.6rem 1rem 0.5rem;
826     }
828     .moodle-actionmenu {
829         white-space: nowrap;
830     }
832     .listing-actions {
833         text-align: center;
835         > .moodle-actionmenu {
836             display: inline-block;
837         }
838     }
840     ul.ml {
841         list-style: none;
842         margin: 1rem 0;
844         ul.ml {
845             margin: 0;
846         }
847     }
849     .listitem {
851         &[data-selected='1'] {
852             background-color: $table-bg-accent;
853             &:hover {
854                 background-color: $table-bg-hover;
855             }
856         }
857     }
859     .item-actions {
860         margin-right: 1em;
861         display: inline-block;
863         &.show .menu {
865             img {
866                 width: 12px;
867                 max-width: none;
868             }
869         }
871         .menu-action-text {
872             vertical-align: inherit;
873         }
874     }
876     .listitem {
877         > div {
878             > .float-left {
879                 float: left;
880             }
882             > .float-right {
883                 float: right;
884                 text-align: right;
885             }
887             .item-actions {
888                 .action-show {
889                     display: none;
890                 }
892                 .action-hide {
893                     display: inline;
894                 }
895             }
897             .without-actions {
898                 color: #333;
899             }
901             .idnumber {
902                 color: #a1a1a8;
903                 margin-right: 2em;
904             }
905         }
906         // The category or course is hidden.
907         &[data-visible="0"] {
908             color: $text-muted;
910             > div {
911                 > a {
912                     color: $text-muted;
913                 }
915                 .item-actions {
916                     .action-show {
917                         display: inline;
918                     }
920                     .action-hide {
921                         display: none;
922                     }
923                 }
924             }
925         }
927         &.highlight {
928             background-color: $body-bg;
930             > div,
931             > div:hover,
932             &[data-selected='1'] > div {
933                 background-color: $table-bg-hover;
934             }
935         }
936     }
938     #course-listing {
939         .listitem {
940             .categoryname {
941                 display: inline-block;
942                 margin-left: 1em;
943                 color: #a1a1a8;
944             }
946             .coursename {
947                 display: inline-block;
948             }
949         }
951         > .firstpage .listitem:first-child > div .item-actions .action-moveup,
952         > .lastpage .listitem:last-child > div .item-actions .action-movedown {
953             display: none;
954         }
956         .bulk-action-checkbox {
957             margin: -2px 6px 0 0;
958         }
959     }
961     #category-listing {
962         .listitem.collapsed > ul.ml {
963             display: none;
964         }
966         .listitem {
967             > div {
968                 > .ba-checkbox {
969                     width: 2.2em;
970                     text-align: center;
971                     margin: -1px 0.5em 0 0;
972                     padding-top: 2px;
973                 }
974             }
976             &.highlight > div > .ba-checkbox {
977                 background-color: $table-bg-hover;
978             }
980             &[data-selected='1'] > div > .ba-checkbox {
981                 margin: 0 0.5em 0 0;
982                 padding: 0;
983                 background-color: inherit;
984             }
986             &:first-child > div .item-actions .action-moveup,
987             &:last-child > div .item-actions .action-movedown {
988                 display: none;
989             }
990         }
992         .course-count {
993             color: #a1a1a8;
994             margin-right: 2rem;
995             min-width: 3.5em;
996             display: inline-block;
997         }
999         .bulk-action-checkbox {
1000             margin-right: -3px;
1001         }
1003         .category-listing > ul > .listitem:first-child {
1004             position: relative;
1005         }
1007         .category-bulk-actions {
1008             margin: 0 0.5em 0.5em;
1009             position: relative;
1010         }
1011     }
1013     .detail-pair {
1015         > * {
1016             display: inline-block;
1017         }
1019         .pair-key {
1020             font-weight: bold;
1021             vertical-align: top;
1023             span {
1024                 margin-right: 1rem;
1025                 display: block;
1026             }
1027         }
1029         .pair-value select {
1030             max-width: 100%;
1031         }
1032     }
1034     .bulk-actions .detail-pair {
1035         > * {
1036             display: block;
1037             width: 100%;
1038         }
1039     }
1041     .listing-pagination {
1042         text-align: center;
1044         .yui3-button {
1045             @include button-variant($info, $info);
1046             border: 0;
1047             margin: 0.4rem 0.2rem 0.45rem;
1048             font-size: 10.4px;
1050             &.active-page {
1051                 @include button-variant($primary, $primary);
1052             }
1053         }
1054     }
1056     .listing-pagination-totals {
1057         text-align: center;
1059         &.dimmed {
1060             color: $text-muted;
1061             margin: 0.4rem 1rem 0.45rem;
1062         }
1063     }
1065     .select-a-category .notifymessage,
1066     .select-a-category .alert {
1067         margin: 1em;
1068     }
1071 #course-category-listings #course-listing .listitem .drag-handle {
1072     display: none;
1075 .jsenabled #course-category-listings #course-listing .listitem .drag-handle {
1076     display: inline-block;
1077     margin: 0 6px 0 0;
1078     cursor: pointer;
1081 /** Management header styling **/
1082 .coursecat-management-header {
1083     vertical-align: middle;
1085     h2 {
1086         display: inline-block;
1087         text-align: left;
1088     }
1090     > div {
1091         display: inline-block;
1092         float: right;
1094         > div {
1095             margin: 10px 0 10px 1em;
1096             display: inline-block;
1097         }
1098     }
1100     select {
1101         max-width: 300px;
1102         cursor: pointer;
1103         padding: 0.4em 0.5em 0.45em 1em;
1104         vertical-align: baseline;
1105         white-space: nowrap;
1106     }
1108     .view-mode-selector {
1109         .moodle-actionmenu {
1110             white-space: nowrap;
1111             display: inline-block;
1112         }
1114         .moodle-actionmenu[data-enhanced].show .menu a {
1115             padding-left: 1em;
1116         }
1117     }
1120 .course-being-dragged-proxy {
1121     border: 0;
1122     color: $link-color;
1123     vertical-align: middle;
1124     padding: 0 0 0 4em;
1127 .course-being-dragged {
1128     opacity: 0.5;
1131 /**
1132  * Display sizes:
1133  * Large displays                   1200        +
1134  * Default displays                  980     1199
1135  * Tablets                           768      979
1136  * Small tablets and large phones    481      767
1137  * Phones                              0      480
1138  */
1140 @media (min-width: 1200px) and (max-width: 1600px) {
1141     #course-category-listings.columns-3 {
1142         background-color: $body-bg;
1143         border: 0;
1145         #category-listing,
1146         #course-listing {
1147             width: 50%;
1148         }
1150         #category-listing > div,
1151         #course-listing > div,
1152         #course-detail > div {
1153             background-color: $body-bg;
1154         }
1156         #course-detail {
1157             width: 100%;
1158             margin-top: 1em;
1159         }
1160     }
1163 @media (max-width: 1199px) {
1164     #course-category-listings.columns-2,
1165     #course-category-listings.columns-3 {
1166         border: 0;
1168         #category-listing,
1169         #course-listing,
1170         #course-detail {
1171             width: 100%;
1172             margin: 0 0 1em;
1173         }
1174     }
1177 .page-settings-menu .menubar > a > .icon {
1178     width: auto;
1179     height: 32px;
1180     font-size: 32px;
1183 .activity-navigation {
1184     .row {
1185         align-items: center;
1186     }
1187     #prev-activity-link,
1188     #next-activity-link {
1189         white-space: pre-wrap;
1190     }