ddb4a47b3caaa170819ad6d8dacc2572e875211c
[moodle.git] / theme / boost / scss / moodle / course.scss
1 /* course.less */
2 /* COURSE CONTENT */
3 .section-modchooser-link img {
4     margin-right: 0.5rem;
5     width: 16px;
6     height: 16px;
7 }
9 .section_add_menus {
10     text-align: right;
11     clear: both;
12 }
14 .section-modchooser {
15     clear: both;
16 }
18 .block_tree .tree_item.branch {
19     margin-left: 8px;
20 }
22 .section_add_menus .horizontal div,
23 .section_add_menus .horizontal form {
24     display: inline;
25 }
27 .section_add_menus optgroup {
28     font-weight: normal;
29     font-style: italic;
30 }
31 /*rtl:ignore*/
32 .section_add_menus .urlselect {
33     text-align: left;
34     margin-left: .4em;
35 }
36 /*rtl:ignore*/
37 .section_add_menus .urlselect select {
38     margin-left: .2em;
39 }
41 .sitetopic ul.section {
42     margin: 0;
43 }
45 .course-content ul.section {
46     margin: $spacer;
47 }
49 .section {
50     .side {
51         &.left {
52             float: left;
53         }
55         &.right {
56             float: right;
57             clear: right;
58         }
59         margin-top: 0.5rem;
60     }
62     .spinner {
63         height: 16px;
64         width: 16px;
65     }
67     .activity {
68         .spinner {
69             left: 100%;
70             position: absolute;
71         }
73         /* The command block for each activity */
74         .actions {
75             position: absolute;
76             right: 0;
77             top: 0;
78         }
80         .contentwithoutlink,
81         .activityinstance {
82             min-width: 40%;
83             display: table-cell;
84             padding-right: 4px;
85             min-height: 2em;
87             > a {
88                 display: block;
89                 text-indent: -31px;
90                 padding-left: 31px;
91             }
93             .dimmed {
94                 .activityicon {
95                     opacity: .5;
96                 }
97             }
98         }
100         .stealth {
101             @extend .text-muted;
102         }
103         a.stealth,
104         a.stealth:hover {
105             color: lighten($link-color, 25%) !important; /* stylelint-disable-line declaration-no-important */
106         }
107     }
109     .label {
110         .contentwithoutlink,
111         .activityinstance {
112             padding-right: 32px;
113             display: block;
114             height: inherit;
115         }
117         .mod-indent-outer {
118             padding-left: 24px;
119             display: block;
120         }
121     }
123     .filler {
124         // This must be sized like an icon to fill the space.
125         width: 16px;
126         height: 16px;
127         padding: 0;
128         margin: 0 ($spacer / 2);
129         display: inline-block;
130     }
132     .activity.editor_displayed {
133         a.editing_title,
134         .moodle-actionmenu {
135             display: none;
136         }
138         div.activityinstance {
139             padding-right: initial;
141             input {
142                 margin-bottom: initial;
143                 padding-top: initial;
144                 padding-bottom: initial;
145                 vertical-align: text-bottom;
146             }
147         }
148     }
151 .activity img.activityicon {
152     margin-right: 6px;
153     vertical-align: text-bottom;
156 .section .activity .activityinstance,
157 .section .activity .activityinstance div {
158     display: inline-block;
161 .editing {
162     .section {
163         .activity {
164             .contentwithoutlink,
165             .activityinstance {
166                 padding-right: 200px;
167             }
168             .editing_move {
169                 /* Move the move icon to the start of the line */
170                 position: absolute;
171                 left: 0;
172                 top: 0;
173             }
175             .mod-indent-outer {
176                 /**
177                  * Add appropriate padding such that nothing overlaps the
178                  * absolute positioned move icon.
179                  */
180                 padding-left: 2rem;
181             }
182         }
183     }
186 .editing_show + .editing_assign,
187 .editing_hide + .editing_assign {
188     // if roles icon missing, add space
189     margin-left: 20px;
192 .section .activity .commands {
193     white-space: nowrap;
194     display: inline-block;
197 .section .activity.modtype_label.label {
198     font-weight: normal;
199     padding: .2em;
202 .section li.activity {
203     padding: .2em;
204     clear: both;
207 .section .activity .activityinstance .groupinglabel {
208     padding-left: 30px;
211 .section .activity .availabilityinfo,
212 .section .activity .contentafterlink {
213     margin-top: 0.5em;
214     margin-left: 30px;
217 .section .activity .contentafterlink p {
218     margin: .5em 0;
221 .editing .section .activity:hover,
222 .editing .section .activity.action-menu-shown {
223     background-color: $table-bg-accent;
226 .course-content .current {
227     position: relative;
230 .course-content .current::before {
231     content: "";
232     border-left: $brand-primary 2px solid;
233     position: absolute;
234     left: -15px;
235     top: 0;
236     bottom: 0;
239 .course-content .section-summary {
240     border: 1px solid $table-border-color;
241     margin-top: 5px;
242     list-style: none;
245 .course-content .section-summary .section-title {
246     margin: 2px 5px 10px 5px;
249 .course-content .section-summary .summarytext {
250     margin: 2px 5px 2px 5px;
253 .course-content .section-summary .section-summary-activities .activity-count {
254     @extend .text-muted;
255     font-size: $font-size-sm;
256     margin: 3px;
257     white-space: nowrap;
258     display: inline-block;
261 .course-content .section-summary .summary {
262     margin-top: 5px;
265 .course-content .single-section {
266     margin-top: 1em;
269 .course-content .single-section .section-navigation {
270     display: block;
271     padding: 0.5em;
272     margin-bottom: -0.5em;
275 .course-content .single-section .section-navigation .title {
276     font-weight: bold;
277     font-size: 108%;
278     clear: both;
281 .course-content .single-section .section-navigation .mdl-left {
282     font-weight: normal;
283     float: left;
284     margin-right: 1em;
287 .course-content .single-section .section-navigation .mdl-left .larrow {
288     margin-right: 0.1em;
291 .course-content .single-section .section-navigation .mdl-right {
292     font-weight: normal;
293     float: right;
294     margin-left: 1em;
297 .course-content .single-section .section-navigation .mdl-right .rarrow {
298     margin-left: 0.1em;
301 .course-content .single-section .section-navigation .mdl-bottom {
302     margin-top: 0;
305 .course-content ul li.section.main {
306     border-bottom: $border-width solid $table-border-color;
307     margin-top: 0;
309     &:last-child {
310         border-bottom: 0;
311     }
314 .course-content ul li.section.hidden {
315     .sectionname > span,
316     .content > div.summary,
317     .activity .activityinstance {
318         @extend .text-muted;
319     }
322 .course-content ul.topics,
323 .course-content ul.weeks {
324     padding: 0;
326     li.section {
327         padding-top: $spacer;
328         padding-bottom: $spacer;
330         .content {
331             margin: 0;
332             padding: 0;
333         }
335         .summary,
336         .content > .availabilityinfo {
337             margin-left: 25px;
338         }
340         .left {
341             padding-top: 0;
342             text-align: right;
343         }
344     }
347 .course-content {
348     margin-top: 0;
351 .course-content .hidden {
352     display: none;
355 .course-content li {
356     &.section {
357         ul {
358             list-style: disc;
360             ul {
361                 list-style: circle;
363                 ul {
364                     list-style: square;
365                 }
366             }
367         }
369         li {
370             &.activity {
371                 ul {
372                     list-style: disc;
374                     ul {
375                         list-style: circle;
377                         ul {
378                             list-style: square;
379                         }
380                     }
381                 }
382             }
383         }
385         .right {
386             > .icon:first-child {
387                 /* Remove the spacer icon. */
388                 display: none;
389             }
390         }
391     }
394 .path-course-view.editing #region-main > .card-block {
395     padding-bottom: 13rem;
398 .path-course-view .completionprogress {
399     margin-left: 25px;
402 .path-course-view .completionprogress {
403     display: block;
404     float: right;
405     height: 20px;
406     position: relative;
409 #page-site-index .subscribelink {
410     text-align: right;
413 #site-news-forum h2,
414 #frontpage-course-list h2,
415 #frontpage-category-names h2,
416 #frontpage-category-combo h2 {
417     margin-bottom: 9px;
420 .path-course-view a.reduce-sections {
421     padding-left: 0.2em;
424 .path-course-view .subscribelink {
425     text-align: right;
428 .path-course-view .unread {
429     margin-left: 30px;
432 .path-course-view .block.drag .header {
433     cursor: move;
436 .path-course-view .completionprogress {
437     text-align: right;
440 .path-course-view .single-section .completionprogress {
441     margin-right: 5px;
444 .path-site li.activity > div,
445 .path-course-view li.activity > div {
446     position: relative;
447     padding: 0 16px 0 0; /* to accommodate the floated completion icon with highlighting */
450 .path-course-view li.activity span.autocompletion img {
451     vertical-align: text-bottom;
452     margin-right: 0;
455 .path-course-view li.activity form.togglecompletion img {
456     max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
459 .path-course-view {
460     &.editing {
461         li.activity span.autocompletion img {
462             /* Use the same spacing as the filler. */
463             margin-right: $spacer / 2;
464             margin-left: $spacer / 2;
465         }
466     }
469 .path-course-view li.activity form.togglecompletion .ajaxworking {
470     width: 16px;
471     height: 16px;
472     position: absolute;
473     right: 22px;
474     top: 3px;
475     background: url([[pix:i/ajaxloader]]) no-repeat;
478 li.section.hidden span.commands a.editing_hide,
479 li.section.hidden span.commands a.editing_show {
480     cursor: default;
483 .single-section h3.sectionname {
484     text-align: center;
485     clear: both;
488 .section img.movetarget {
489     height: 16px;
490     width: 80px;
493 input.titleeditor {
494     width: 330px;
495     vertical-align: text-bottom;
498 span.editinstructions {
499     /*rtl:remove*/
500     position: absolute;
501     /*rtl:raw:
502     position: relative;
503     */
504     top: 0;
505     margin-top: -22px;
506     margin-left: 30px;
507     font-size: $font-size-sm;
508     padding: .1em .4em;
509     background-color: $state-info-bg;
510     color: $state-info-text;
511     text-decoration: none;
512     z-index: 9999;
514     @include box-shadow(2px 2px 5px 1px #ccc);
515     border: 1px solid $state-info-border;
518 /* Course drag and drop upload styles */
519 #dndupload-status {
520     position: fixed;
521     left: 0;
522     width: 40%;
523     margin: 0 30%;
524     padding: 6px;
525     border: 1px solid $state-info-border;
526     text-align: center;
527     background: $state-info-bg;
528     color: $state-info-text;
529     z-index: 1; // Required in order to have this above relatively positioned course content@mixin
531     @include box-shadow(2px 2px 5px 1px #ccc);
532     @include border-radius(8px);
535 .dndupload-preview {
536     color: #909090;
537     border: 1px dashed #909090;
538     list-style: none;
539     margin-top: .2em;
540     padding: .3em;
543 .dndupload-progress-outer {
544     @extend progress;
547 .dndupload-progress-inner {
548     .progress {
549         @extend .progress-bar;
550     }
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     float: left;
608     clear: left;
611 .coursebox .content .teachers,
612 .coursebox .content .courseimage,
613 .coursebox .content .coursefile {
614     width: 40%;
617 .coursebox > .info > h3.coursename {
618     margin: 5px;
621 .coursebox > .info > .coursename {
622     margin: 5px;
623     padding: 0;
626 .coursebox .content .teachers li {
627     list-style-type: none;
628     padding: 0;
629     margin: 0;
632 .coursebox .moreinfo {
633     padding: 3px 0;
634     float: right;
637 .coursebox .moreinfo img {
638     margin: 0 .2em;
641 .coursebox .content {
642     clear: both;
645 .coursebox .content .summary,
646 .coursebox .content .coursecat {
647     float: right;
648     width: 55%;
651 .coursebox .content .coursecat {
652     text-align: right;
653     clear: right;
656 .coursebox.remotecoursebox .remotecourseinfo {
657     float: left;
658     width: 40%;
661 .coursebox .content .courseimage img {
662     max-width: 100px;
663     max-height: 100px;
666 .coursebox .content .coursecat,
667 .coursebox .content .summary,
668 .coursebox .content .courseimage,
669 .coursebox .content .coursefile,
670 .coursebox .content .teachers,
671 .coursebox.remotecoursebox .remotecourseinfo {
672     margin: 15px 5px 5px;
673     padding: 0;
676 .coursebox.remotehost > .info > .categoryname a {
677     background-image: url([[pix:moodle|i/mnethost]]);
680 .coursebox.collapsed {
681     margin-bottom: 0;
684 .coursebox.collapsed > .content {
685     display: none;
688 .courses .coursebox {
689     &.collapsed {
690         padding-top: $spacer-y / 2;
691         padding-bottom: $spacer-y / 2;
692     }
694     &.even {
695         background-color: $table-bg-accent;
696     }
698     &:hover {
699         background-color: $table-bg-hover;
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;
834         padding: 0.4rem 0.3rem 0.3rem;
836         > .moodle-actionmenu {
837             display: inline-block;
838         }
839     }
841     ul.ml {
842         list-style: none;
843         margin: 1rem 0;
845         ul.ml {
846             margin: 0;
847         }
848     }
850     .listitem {
852         > div {
853             &:hover {
854                 background-color: $table-bg-hover;
855             }
856         }
858         &[data-selected='1'] {
859             > div {
860                 background-color: $table-bg-accent;
861             }
863             > div:hover {
864                 background-color: $table-bg-hover;
865             }
866         }
867     }
869     .item-actions {
870         margin-right: 1em;
871         display: inline-block;
873         &.show .menu {
875             img {
876                 width: 12px;
877                 max-width: none;
878             }
879         }
881         .menu-action-text {
882             vertical-align: inherit;
883         }
884     }
886     .listitem {
887         > div {
888             > .float-left {
889                 float: left;
890             }
892             > .float-right {
893                 float: right;
894                 text-align: right;
895             }
897             .item-actions {
898                 .action-show {
899                     display: none;
900                 }
902                 .action-hide {
903                     display: inline;
904                 }
905             }
907             .without-actions {
908                 color: #333;
909             }
911             .idnumber {
912                 color: #a1a1a8;
913                 margin-right: 2em;
914             }
915         }
916         // The category or course is hidden.
917         &[data-visible="0"] {
918             @extend .text-muted;
920             > div {
921                 > a {
922                     @extend .text-muted;
923                 }
925                 .item-actions {
926                     .action-show {
927                         display: inline;
928                     }
930                     .action-hide {
931                         display: none;
932                     }
933                 }
934             }
935         }
937         &.highlight {
938             background-color: $body-bg;
940             > div,
941             > div:hover,
942             &[data-selected='1'] > div {
943                 background-color: $table-bg-hover;
944             }
945         }
946     }
948     #course-listing {
949         .listitem {
950             .categoryname {
951                 display: inline-block;
952                 margin-left: 1em;
953                 color: #a1a1a8;
954             }
956             .coursename {
957                 display: inline-block;
958             }
960             > div {
961                 padding-left: 1rem;
962             }
963         }
965         > .firstpage .listitem:first-child > div .item-actions .action-moveup,
966         > .lastpage .listitem:last-child > div .item-actions .action-movedown {
967             display: none;
968         }
970         .bulk-action-checkbox {
971             margin: -2px 6px 0 0;
972         }
973     }
975     #category-listing {
976         .listitem.collapsed > ul.ml {
977             display: none;
978         }
980         .listitem {
981             > div {
982                 > .ba-checkbox {
983                     width: 2.2em;
984                     text-align: center;
985                     margin: -1px 0.5em 0 0;
986                     padding-top: 2px;
987                 }
988             }
990             &.highlight > div > .ba-checkbox {
991                 background-color: $table-bg-hover;
992             }
994             &[data-selected='1'] > div > .ba-checkbox {
995                 margin: 0 0.5em 0 0;
996                 padding: 0;
997                 background-color: inherit;
998             }
1000             &:first-child > div .item-actions .action-moveup,
1001             &:last-child > div .item-actions .action-movedown {
1002                 display: none;
1003             }
1004         }
1006         .course-count {
1007             color: #a1a1a8;
1008             margin-right: 2rem;
1009             min-width: 3.5em;
1010             display: inline-block;
1011         }
1013         .bulk-action-checkbox {
1014             margin-right: -3px;
1015         }
1017         .category-listing > ul > .listitem:first-child {
1018             position: relative;
1019         }
1021         .category-bulk-actions {
1022             margin: 0 0.5em 0.5em;
1023             position: relative;
1024         }
1025     }
1027     .detail-pair {
1028         border-bottom: 1px solid $table-border-color;
1029         margin: 0 1rem;
1031         > * {
1032             display: inline-block;
1033         }
1035         .pair-key {
1036             font-weight: bold;
1037             vertical-align: top;
1039             span {
1040                 margin-right: 1rem;
1041                 display: block;
1042             }
1043         }
1045         .pair-value select {
1046             max-width: 100%;
1047         }
1048     }
1050     .bulk-actions .detail-pair {
1051         > * {
1052             display: block;
1053             width: 100%;
1054         }
1055     }
1057     .listing-pagination {
1058         text-align: center;
1060         .yui3-button {
1061             background-color: $btn-info-bg;
1062             border: 0;
1063             margin: 0.4rem 0.2rem 0.45rem;
1064             font-size: 10.4px;
1066             &.active-page {
1067                 background-color: $btn-primary-color;
1068             }
1069         }
1070     }
1072     .listing-pagination-totals {
1073         text-align: center;
1075         &.dimmed {
1076             @extend .text-muted;
1077             margin: 0.4rem 1rem 0.45rem;
1078         }
1079     }
1081     .select-a-category .notifymessage,
1082     .select-a-category .alert {
1083         margin: 1em;
1084     }
1087 #course-category-listings #course-listing .listitem .drag-handle {
1088     display: none;
1091 .jsenabled #course-category-listings #course-listing .listitem .drag-handle {
1092     display: inline-block;
1093     margin: 0 6px 0 0;
1094     cursor: pointer;
1097 /** Management header styling **/
1098 .coursecat-management-header {
1099     vertical-align: middle;
1101     h2 {
1102         display: inline-block;
1103         text-align: left;
1104     }
1106     > div {
1107         display: inline-block;
1108         float: right;
1110         > div {
1111             margin: 10px 0 10px 1em;
1112             display: inline-block;
1113         }
1114     }
1116     select {
1117         max-width: 300px;
1118         cursor: pointer;
1119         padding: 0.4em 0.5em 0.45em 1em;
1120         vertical-align: baseline;
1121         white-space: nowrap;
1122     }
1124     .view-mode-selector {
1125         .moodle-actionmenu {
1126             white-space: nowrap;
1127             display: inline-block;
1128         }
1130         .moodle-actionmenu[data-enhanced].show .menu a {
1131             padding-left: 1em;
1132         }
1133     }
1136 .course-being-dragged-proxy {
1137     border: 0;
1138     color: $link-color;
1139     vertical-align: middle;
1140     padding: 0 0 0 4em;
1143 .course-being-dragged {
1144     opacity: 0.5;
1147 /**
1148  * Display sizes:
1149  * Large displays                   1200        +
1150  * Default displays                  980     1199
1151  * Tablets                           768      979
1152  * Small tablets and large phones    481      767
1153  * Phones                              0      480
1154  */
1156 @media (min-width: 1200px) and (max-width: 1600px) {
1157     #course-category-listings.columns-3 {
1158         background-color: $body-bg;
1159         border: 0;
1161         #category-listing,
1162         #course-listing {
1163             width: 50%;
1164         }
1166         #category-listing > div,
1167         #course-listing > div,
1168         #course-detail > div {
1169             background-color: $body-bg;
1170         }
1172         #course-detail {
1173             width: 100%;
1174             margin-top: 1em;
1175         }
1176     }
1179 @media (max-width: 1199px) {
1180     #course-category-listings.columns-2,
1181     #course-category-listings.columns-3 {
1182         border: 0;
1184         #category-listing,
1185         #course-listing,
1186         #course-detail {
1187             width: 100%;
1188             margin: 0 0 1em;
1189         }
1190     }
1193 .page-settings-menu .menubar > a > .icon {
1194     width: auto;
1195     height: 32px;
1196     font-size: 32px;