MDL-68301 theme_boost: move course format css
[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;
328     margin: 0;
329     list-style: none;
331     li.section {
332         margin-top: $spacer;
333         padding-bottom: $spacer;
335         .summary,
336         .content > .availabilityinfo {
337             margin-left: 25px;
338         }
340         .left,
341         .right {
342             padding: 0 6px 0;
343             text-align: right;
344             width: auto;
345         }
346     }
349 .course-content {
350     margin-top: 0;
353 .course-content .hidden {
354     display: none;
357 .course-content li {
358     &.section {
359         ul {
360             list-style: disc;
362             ul {
363                 list-style: circle;
365                 ul {
366                     list-style: square;
367                 }
368             }
369         }
371         li {
372             &.activity {
373                 ul {
374                     list-style: disc;
376                     ul {
377                         list-style: circle;
379                         ul {
380                             list-style: square;
381                         }
382                     }
383                 }
384             }
385         }
387         .right {
388             > .icon:first-child {
389                 /* Remove the spacer icon. */
390                 display: none;
391             }
392         }
393     }
396 .path-course-view.editing #region-main > .card-block {
397     padding-bottom: 13rem;
400 .jumpmenu .form-inline {
401     display: block;
404 .path-course-view .completionprogress {
405     margin-left: 25px;
408 .path-course-view .completionprogress {
409     display: block;
410     float: right;
411     height: 20px;
412     position: relative;
415 #page-site-index .subscribelink {
416     text-align: right;
419 #site-news-forum h2,
420 #frontpage-course-list h2,
421 #frontpage-category-names h2,
422 #frontpage-category-combo h2 {
423     margin-bottom: 9px;
426 .path-course-view a.reduce-sections {
427     padding-left: 0.2em;
430 .path-course-view .subscribelink {
431     text-align: right;
434 .path-course-view .unread {
435     margin-left: 30px;
438 .path-course-view .block.drag .header {
439     cursor: move;
442 .path-course-view .completionprogress {
443     text-align: right;
446 .path-course-view .single-section .completionprogress {
447     margin-right: 5px;
450 .path-site li.activity > div,
451 .path-course-view li.activity > div {
452     position: relative;
453     padding: 0 16px 0 0; /* to accommodate the floated completion icon with highlighting */
456 .path-course-view li.activity span.autocompletion img {
457     vertical-align: text-bottom;
458     margin-left: 0;
461 .path-course-view li.activity form.togglecompletion .btn {
462     padding: 0;
464 .path-course-view li.activity form.togglecompletion img {
465     max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
468 .path-course-view {
469     &.editing {
470         li.activity span.autocompletion img {
471             /* Use the same spacing as the filler. */
472             margin-right: $spacer / 2;
473             margin-left: $spacer / 2;
474         }
475     }
478 .path-course-view li.activity form.togglecompletion .ajaxworking {
479     width: 16px;
480     height: 16px;
481     position: absolute;
482     right: 22px;
483     top: 3px;
484     background: url([[pix:i/ajaxloader]]) no-repeat;
487 li.section.hidden span.commands a.editing_hide,
488 li.section.hidden span.commands a.editing_show {
489     cursor: default;
492 .single-section h3.sectionname {
493     text-align: center;
494     clear: both;
497 input.titleeditor {
498     width: 330px;
499     vertical-align: text-bottom;
502 span.editinstructions {
503     /*rtl:remove*/
504     position: absolute;
505     /*rtl:raw:
506     position: relative;
507     */
508     top: 0;
509     margin-top: -22px;
510     margin-left: 30px;
511     font-size: $font-size-sm;
512     padding: .1em .4em;
513     background-color: $state-info-bg;
514     color: $state-info-text;
515     text-decoration: none;
516     z-index: 9999;
518     @include box-shadow(2px 2px 5px 1px #ccc);
519     border: 1px solid $state-info-border;
522 /* Course drag and drop upload styles */
523 #dndupload-status {
524     position: fixed;
525     left: 0;
526     width: 40%;
527     margin: 0 30%;
528     padding: 6px;
529     border: 1px solid $state-info-border;
530     text-align: center;
531     background: $state-info-bg;
532     color: $state-info-text;
533     z-index: 1; // Required in order to have this above relatively positioned course content@mixin
535     @include box-shadow(2px 2px 5px 1px #ccc);
536     @include border-radius(8px);
539 .dndupload-preview {
540     color: #909090;
541     border: 1px dashed #909090;
542     list-style: none;
543     margin-top: .2em;
544     padding: .3em;
547 .dndupload-hidden {
548     display: none;
551 /* COURSES LISTINGS AND COURSE SUMMARY */
552 #page-course-pending .singlebutton,
553 #page-course-index .singlebutton,
554 #page-course-index-category .singlebutton,
555 #page-course-editsection .singlebutton {
556     text-align: center;
559 #page-admin-course-manage #movecourses td img {
560     margin: 0 .22em;
561     vertical-align: text-bottom;
564 #coursesearch {
565     margin-top: 1em;
566     text-align: left;
569 #page-course-pending .pendingcourserequests {
570     margin-bottom: 1em;
573 #page-course-pending .pendingcourserequests .singlebutton {
574     display: inline;
577 #page-course-pending .pendingcourserequests .cell {
578     padding: 0 5px;
581 #page-course-pending .pendingcourserequests .cell.c6 {
582     white-space: nowrap;
585 .coursebox {
586     padding: $spacer / 2;
589 .coursebox > .info > .coursename a {
590     display: block;
591     background-image: url([[pix:moodle|i/course]]);
592     background-repeat: no-repeat;
593     padding-left: 21px;
594     background-position: left 0.2em;
597 .coursebox > .info > .coursename,
598 .coursebox .content .teachers,
599 .coursebox .content .courseimage,
600 .coursebox .content .coursefile,
601 .coursebox .content .customfields-container {
602     float: left;
603     clear: left;
606 .coursebox .content .teachers,
607 .coursebox .content .courseimage,
608 .coursebox .content .coursefile,
609 .coursebox .content .customfields-container {
610     width: 40%;
613 .coursebox > .info > h3.coursename {
614     margin: 5px;
617 .coursebox > .info > .coursename {
618     margin: 5px;
619     padding: 0;
622 .coursebox .content .teachers li {
623     list-style-type: none;
624     padding: 0;
625     margin: 0;
628 .coursebox .moreinfo,
629 .coursebox .enrolmenticons {
630     padding: 3px 0;
631     float: right;
634 .coursebox .moreinfo img {
635     margin: 0 .2em;
638 .coursebox .content {
639     clear: both;
642 .coursebox .content .summary,
643 .coursebox .content .coursecat {
644     float: right;
645     width: 55%;
648 .coursebox .content .coursecat {
649     text-align: right;
650     clear: right;
653 .coursebox.remotecoursebox .remotecourseinfo {
654     float: left;
655     width: 40%;
658 .coursebox .content .courseimage img {
659     max-width: 100px;
660     max-height: 100px;
663 .coursebox .content .coursecat,
664 .coursebox .content .summary,
665 .coursebox .content .courseimage,
666 .coursebox .content .coursefile,
667 .coursebox .content .teachers,
668 .coursebox.remotecoursebox .remotecourseinfo,
669 .coursebox .content .customfields-container {
670     margin: 15px 5px 5px;
671     padding: 0;
674 .coursebox.remotehost > .info > .categoryname a {
675     background-image: url([[pix:moodle|i/mnethost]]);
678 .coursebox.collapsed {
679     margin-bottom: 0;
682 .coursebox.collapsed > .content {
683     display: none;
686 .courses .coursebox {
687     &.collapsed {
688         padding-top: $spacer-y / 2;
689         padding-bottom: $spacer-y / 2;
690     }
692     &.even {
693         background-color: $table-bg-accent;
694     }
697 .courses > .paging.paging-morelink {
698     text-align: center;
699     padding: $spacer;
702 .course_category_tree .category .numberofcourse {
703     font-size: $font-size-sm;
706 .course_category_tree .controls {
707     visibility: hidden;
710 .course_category_tree .controls div {
711     display: inline;
712     cursor: pointer;
715 .jsenabled .course_category_tree .controls {
716     visibility: visible;
719 .course_category_tree .controls {
720     margin-bottom: 5px;
721     text-align: right;
722     float: right;
725 .course_category_tree .controls div {
726     padding-right: 2em;
727     font-size: 75%;
730 .course_category_tree .category > .info > .categoryname {
731     background-image: url([[pix:moodle|t/collapsed_empty]]);
732     background-repeat: no-repeat;
733     padding: 2px 18px;
734     margin: 3px;
735     background-position: center left;
737 /* rtl:raw:
738 .course_category_tree .category > .info > .categoryname {
739     background-image:url([[pix:moodle|t/collapsed_empty_rtl]]);
741  */
742 .course_category_tree .category.with_children > .info > .categoryname {
743     background-image: url([[pix:moodle|t/expanded]]);
744     cursor: pointer;
747 .course_category_tree .category.with_children.collapsed > .info > .categoryname {
748     background-image: url([[pix:moodle|t/collapsed]]);
750 /* rtl:raw:
751 .course_category_tree .category.with_children.collapsed > .info > .categoryname {
752     background-image:url([[pix:moodle|t/collapsed_rtl]]);
754 */
755 .course_category_tree .category.collapsed > .content {
756     display: none;
759 .course_category_tree .category > .info {
760     clear: both;
763 .course_category_tree .category > .content {
764     padding-left: 16px;
767 #page-course-index-category .generalbox.info {
768     margin-bottom: 15px;
769     border: 1px dotted #ddd;
771     @include border-radius(4px);
772     padding: 5px;
775 #page-course-index-category .categorypicker {
776     text-align: center;
777     margin: 10px 0 20px;
780 /**
781  * Course management page
782  * Palette
783  *
784  * Background (reg)         #F5F5F5
785  * Background (light        #fafafa
786  * Background (highlight)   #ddffaa
787  * Borders                  #e1e1e8
788  */
789 #course-category-listings {
790     margin-bottom: 0;
792     /** Two column layout */
793     &.columns-2 {
794         > #course-listing > div {
795             position: relative;
796             left: -1px;
797         }
798     }
799     /** Three column layout */
800     &.columns-3 > #course-listing > div {
801         height: 100%;
802     }
804     > div > div {
805         min-height: 300px;
807         > ul.ml > li:first-child > div {
808             border-top: 0;
809         }
810     }
812     h3 {
813         margin: 0;
814         padding: 0.4rem 0.6rem 0.3rem;
815     }
817     h4 {
818         margin: 1rem 0 0;
819         padding: 0.6rem 1rem 0.5rem;
820     }
822     .moodle-actionmenu {
823         white-space: nowrap;
824     }
826     .listing-actions {
827         text-align: center;
829         > .moodle-actionmenu {
830             display: inline-block;
831         }
832     }
834     ul.ml {
835         list-style: none;
836         margin: 1rem 0;
838         ul.ml {
839             margin: 0;
840         }
841     }
843     .listitem {
845         &[data-selected='1'] {
846             background-color: $table-bg-accent;
847             &:hover {
848                 background-color: $table-bg-hover;
849             }
850         }
851     }
853     .item-actions {
854         margin-right: 1em;
855         display: inline-block;
857         &.show .menu {
859             img {
860                 width: 12px;
861                 max-width: none;
862             }
863         }
865         .menu-action-text {
866             vertical-align: inherit;
867         }
868     }
870     .listitem {
871         > div {
872             > .float-left {
873                 float: left;
874             }
876             > .float-right {
877                 float: right;
878                 text-align: right;
879             }
881             .item-actions {
882                 .action-show {
883                     display: none;
884                 }
886                 .action-hide {
887                     display: inline;
888                 }
889             }
891             .without-actions {
892                 color: #333;
893             }
895             .idnumber {
896                 color: #a1a1a8;
897                 margin-right: 2em;
898             }
899         }
900         // The category or course is hidden.
901         &[data-visible="0"] {
902             color: $text-muted;
904             > div {
905                 > a {
906                     color: $text-muted;
907                 }
909                 .item-actions {
910                     .action-show {
911                         display: inline;
912                     }
914                     .action-hide {
915                         display: none;
916                     }
917                 }
918             }
919         }
921         &.highlight {
922             background-color: $body-bg;
924             > div,
925             > div:hover,
926             &[data-selected='1'] > div {
927                 background-color: $table-bg-hover;
928             }
929         }
930     }
932     #course-listing {
933         .listitem {
934             .categoryname {
935                 display: inline-block;
936                 margin-left: 1em;
937                 color: #a1a1a8;
938             }
940             .coursename {
941                 display: inline-block;
942             }
943         }
945         > .firstpage .listitem:first-child > div .item-actions .action-moveup,
946         > .lastpage .listitem:last-child > div .item-actions .action-movedown {
947             display: none;
948         }
950         .bulk-action-checkbox {
951             margin: -2px 6px 0 0;
952         }
953     }
955     #category-listing {
956         .listitem.collapsed > ul.ml {
957             display: none;
958         }
960         .listitem {
961             > div {
962                 > .ba-checkbox {
963                     width: 2.2em;
964                     text-align: center;
965                     margin: -1px 0.5em 0 0;
966                     padding-top: 2px;
967                 }
968             }
970             &.highlight > div > .ba-checkbox {
971                 background-color: $table-bg-hover;
972             }
974             &[data-selected='1'] > div > .ba-checkbox {
975                 margin: 0 0.5em 0 0;
976                 padding: 0;
977                 background-color: inherit;
978             }
980             &:first-child > div .item-actions .action-moveup,
981             &:last-child > div .item-actions .action-movedown {
982                 display: none;
983             }
984         }
986         .course-count {
987             color: #a1a1a8;
988             margin-right: 2rem;
989             min-width: 3.5em;
990             display: inline-block;
991         }
993         .bulk-action-checkbox {
994             margin-right: -3px;
995         }
997         .category-listing > ul > .listitem:first-child {
998             position: relative;
999         }
1001         .category-bulk-actions {
1002             margin: 0 0.5em 0.5em;
1003             position: relative;
1004         }
1005     }
1007     .detail-pair {
1009         > * {
1010             display: inline-block;
1011         }
1013         .pair-key {
1014             font-weight: bold;
1015             vertical-align: top;
1017             span {
1018                 margin-right: 1rem;
1019                 display: block;
1020             }
1021         }
1023         .pair-value select {
1024             max-width: 100%;
1025         }
1026     }
1028     .bulk-actions .detail-pair {
1029         > * {
1030             display: block;
1031             width: 100%;
1032         }
1033     }
1035     .listing-pagination {
1036         text-align: center;
1038         .yui3-button {
1039             @include button-variant($info, $info);
1040             border: 0;
1041             margin: 0.4rem 0.2rem 0.45rem;
1042             font-size: 10.4px;
1044             &.active-page {
1045                 @include button-variant($primary, $primary);
1046             }
1047         }
1048     }
1050     .listing-pagination-totals {
1051         text-align: center;
1053         &.dimmed {
1054             color: $text-muted;
1055             margin: 0.4rem 1rem 0.45rem;
1056         }
1057     }
1059     .select-a-category .notifymessage,
1060     .select-a-category .alert {
1061         margin: 1em;
1062     }
1065 #course-category-listings #course-listing .listitem .drag-handle {
1066     display: none;
1069 .jsenabled #course-category-listings #course-listing .listitem .drag-handle {
1070     display: inline-block;
1071     margin: 0 6px 0 0;
1072     cursor: pointer;
1075 /** Management header styling **/
1076 .coursecat-management-header {
1077     vertical-align: middle;
1079     h2 {
1080         display: inline-block;
1081         text-align: left;
1082     }
1084     > div {
1085         display: inline-block;
1086         float: right;
1088         > div {
1089             margin: 10px 0 10px 1em;
1090             display: inline-block;
1091         }
1092     }
1094     select {
1095         max-width: 300px;
1096         cursor: pointer;
1097         padding: 0.4em 0.5em 0.45em 1em;
1098         vertical-align: baseline;
1099         white-space: nowrap;
1100     }
1102     .view-mode-selector {
1103         .moodle-actionmenu {
1104             white-space: nowrap;
1105             display: inline-block;
1106         }
1108         .moodle-actionmenu[data-enhanced].show .menu a {
1109             padding-left: 1em;
1110         }
1111     }
1114 .course-being-dragged-proxy {
1115     border: 0;
1116     color: $link-color;
1117     vertical-align: middle;
1118     padding: 0 0 0 4em;
1121 .course-being-dragged {
1122     opacity: 0.5;
1125 /**
1126  * Display sizes:
1127  * Large displays                   1200        +
1128  * Default displays                  980     1199
1129  * Tablets                           768      979
1130  * Small tablets and large phones    481      767
1131  * Phones                              0      480
1132  */
1134 @media (min-width: 1200px) and (max-width: 1600px) {
1135     #course-category-listings.columns-3 {
1136         background-color: $body-bg;
1137         border: 0;
1139         #category-listing,
1140         #course-listing {
1141             width: 50%;
1142         }
1144         #category-listing > div,
1145         #course-listing > div,
1146         #course-detail > div {
1147             background-color: $body-bg;
1148         }
1150         #course-detail {
1151             width: 100%;
1152             margin-top: 1em;
1153         }
1154     }
1157 @media (max-width: 1199px) {
1158     #course-category-listings.columns-2,
1159     #course-category-listings.columns-3 {
1160         border: 0;
1162         #category-listing,
1163         #course-listing,
1164         #course-detail {
1165             width: 100%;
1166             margin: 0 0 1em;
1167         }
1168     }
1171 .page-settings-menu .menubar > a > .icon {
1172     width: auto;
1173     height: 32px;
1174     font-size: 32px;
1177 .activity-navigation {
1178     .row {
1179         align-items: center;
1180     }
1181     #prev-activity-link,
1182     #next-activity-link {
1183         white-space: pre-wrap;
1184     }