MDL-55452 stylelint: prevent use of !important
[moodle.git] / theme / bootstrapbase / less / moodle / course.less
1 /* course.less */
2 /* COURSE CONTENT */
3 /* stylelint-disable unit-blacklist */
4 .section_add_menus {
5     text-align: right;
6     clear: both;
7 }
8 .section-modchooser {
9     clear: both;
10 }
11 .dir-rtl .section_add_menus {
12     text-align: left;
13     clear: both;
14 }
15 .section_add_menus .horizontal div,
16 .section_add_menus .horizontal form {
17     display: inline;
18 }
19 .section_add_menus optgroup {
20     font-weight: normal;
21     font-style: italic;
22 }
23 .section_add_menus .urlselect {
24     margin-left: .4em;
25 }
26 .dir-rtl .section_add_menus .urlselect {
27     margin-right: .4em;
28     margin-left: 0;
29 }
30 .section_add_menus .urlselect select {
31     margin-left: .2em;
32 }
33 .dir-rtl .section_add_menus .urlselect select {
34     margin-right: .2em;
35     margin-left: 0;
36 }
37 .section_add_menus .urlselect img.iconhelp {
38     padding: 0;
39     margin: 0;
40     vertical-align: text-bottom;
41 }
43 .sitetopic ul.section {
44     margin: 0;
45 }
46 .course-content ul.section {
47     margin: 1em;
48 }
49 .section {
50     .side {
51         &.left {
52             float: left;
53         }
54         &.right {
55             float: right;
56         }
57     }
58     .spinner {
59         height: 16px;
60         width: 16px;
61     }
62     .activity {
63         .spinner {
64             left: 100%;
65             position: absolute;
66             vertical-align: text-bottom;
67         }
69         .editing_move {
70             /* Move the move icon to the start of the line */
71             position: absolute;
72             left: 0;
73             top: 0;
74         }
76         .mod-indent-outer {
77             /**
78              * Add appropriate padding such that nothing overlaps the
79              * absolute positioned move icon.
80              */
81             padding-left: 32px;
82         }
84         /* The command block for each activity */
85         .actions {
86             position: absolute;
87             right: 0;
88             top: 0;
89         }
91         .contentwithoutlink,
92         .activityinstance {
94             min-width: 40%;
95             display: table-cell;
96             padding-right: 4px;
97             min-height: 2em;
99             .dimmed {
100                 img.activityicon {
101                     opacity: 0.5;
102                     filter: alpha(opacity=50);
103                 }
104             }
105         }
106     }
107     .label {
108         .contentwithoutlink,
109         .activityinstance {
110             padding-right: 32px;
111             display: block;
112             height: inherit;
113         }
115         .mod-indent-outer {
116             padding-left: 24px;
117             display: block;
118         }
119     }
121     .filler {
122         width: 16px;
123         height: 16px;
124         padding: 0.3em;
125         display: inline-block;
126     }
128     .activity.editor_displayed {
129         a.editing_title,
130         .moodle-actionmenu {
131             display: none;
132         }
133         div.activityinstance {
134             padding-right: initial;
136             input {
137                 margin-bottom: initial;
138                 padding-top: initial;
139                 padding-bottom: initial;
140                 vertical-align: text-bottom;
141             }
142         }
143     }
146 .dir-rtl .section {
147     .side {
148         &.left {
149             float: right;
150         }
151         &.right {
152             float: left;
153         }
154     }
155     .activity {
156         .spinner {
157             left: auto;
158             right: 100%;
159         }
161         .mod-indent-outer {
162             /**
163              * Add appropriate padding such that nothing overlaps the
164              * absolute positioned move icon.
165              */
166             padding-left: initial;
167             padding-right: 32px;
168         }
170         /* The command block for each activity */
171         .actions {
172             left: 0;
173             right: auto;
174         }
176         .contentwithoutlink,
177         .activityinstance {
178             padding-left: 4px;
179             padding-right: initial;
180         }
181     }
184 .dir-rtl .section {
185     .activity {
186         .editing_move {
187             /* Move the move icon to the start of the line */
188             left: auto;
189             right: 0;
190         }
192         &.editor_displayed {
193             div.activityinstance {
194                 padding-left: initial;
195             }
196         }
197     }
200 .activity img.activityicon {
201     margin-right: 6px;
202     vertical-align: text-bottom;
204 .dir-rtl .section .activity img.activityicon {
205     margin-left: 6px;
206     margin-right: 0;
208 .section .activity .activityinstance,
209 .section .activity .activityinstance div {
210     display: inline-block;
212 .editing {
213     .section {
214         .activity {
215             .contentwithoutlink,
216             .activityinstance {
217                 padding-right: 200px;
218             }
219         }
220     }
223 .dir-rtl.editing {
224     .section {
225         .activity {
226             .contentwithoutlink,
227             .activityinstance {
228                 padding-left: 200px;
229                 padding-right: 0;
230             }
231         }
232     }
235 .editing_show + .editing_assign,
236 .editing_hide + .editing_assign {
237     // if roles icon missing, add space
238     margin-left: 20px;
240 .section .activity .commands {
241     white-space: nowrap;
242     display: inline;
244 .section .activity.modtype_label.label {
245     font-weight: normal;
246     padding: .2em;
248 .section li.activity {
249     padding: .2em;
250     clear: both;
252 .section .activity .activityinstance .groupinglabel {
253     padding-left: 30px;
255 .dir-rtl .section .activity .activityinstance .groupinglabel {
256     padding-right: 30px;
258 .section .activity .availabilityinfo,
259 .section .activity .contentafterlink {
260     margin-top: 0.5em;
261     margin-left: 30px;
263 .dir-rtl .section .activity .availabilityinfo,
264 .dir-rtl .section .activity .contentafterlink {
265     margin-left: 0;
266     margin-right: 30px;
268 .section .activity .contentafterlink p {
269     margin: .5em 0;
271 .editing .section .activity:hover,
272 .editing .section .activity.action-menu-shown {
273     background-color: @grayLighter;
275 .course-content .current {
276     background-color: @infoBackground;
278 .course-content .section-summary {
279     border: 1px solid @tableBorder;
280     margin-top: 5px;
281     list-style: none;
283 .course-content .section-summary .section-title {
284     margin: 2px 5px 10px 5px;
286 .course-content .section-summary .summarytext {
287     margin: 2px 5px 2px 5px;
289 .course-content .section-summary .section-summary-activities .activity-count {
290     .muted;
291     font-size: @fontSizeSmall;
292     margin: 3px;
293     white-space: nowrap;
294     display: inline-block;
296 .course-content .section-summary .summary {
297     margin-top: 5px;
299 .course-content .single-section {
300     margin-top: 1em;
302 .course-content .single-section .section-navigation {
303     display: block;
304     padding: 0.5em;
305     margin-bottom: -0.5em;
307 .course-content .single-section .section-navigation .title {
308     font-weight: bold;
309     font-size: 108%;
310     clear: both;
312 .course-content .single-section .section-navigation .mdl-left {
313     font-weight: normal;
314     float: left;
315     margin-right: 1em;
317 .dir-rtl .course-content .single-section .section-navigation .mdl-left {
318     float: right;
320 .course-content .single-section .section-navigation .mdl-left .larrow {
321     margin-right: 0.1em;
323 .course-content .single-section .section-navigation .mdl-right {
324     font-weight: normal;
325     float: right;
326     margin-left: 1em;
328 .dir-rtl .course-content .single-section .section-navigation .mdl-right {
329     float: left;
331 .course-content .single-section .section-navigation .mdl-right .rarrow {
332     margin-left: 0.1em;
334 .course-content .single-section .section-navigation .mdl-bottom {
335     margin-top: 0;
337 .course-content ul li.section.main {
338     border-bottom: 2px solid @tableBorder;
339     margin-top: 0;
341 .course-content ul li.section.hidden {
342     .sectionname > span,
343     .content > div,
344     /* All the divs but the activities which are in a UL. */
345     .activity .activityinstance {
346         opacity: .5;
347     }
348     .sectionname > span,
349     .activity .activityinstance {
350         margin-left: 10px;
351         margin-right: 10px;
352     }
354 .course-content ul.topics li.section .content,
355 .course-content ul.weeks li.section .content {
356     margin-right: 20px;
357     margin-left: 20px;
358     padding: 0;
361 .course-content {
362     margin-top: 0;
365 .course-content ul.topics li.section {
366     padding-bottom: 20px;
369 .course-content ul.topics li.section .summary {
370     margin-left: 25px;
373 .course-content li {
374     &.section {
375         ul {
376             list-style: disc;
377             ul {
378                 list-style: circle;
379                 ul {
380                     list-style: square;
381                 }
382             }
383         }
384         li {
385             &.activity {
386                 ul {
387                     list-style: disc;
388                     ul {
389                         list-style: circle;
390                         ul {
391                             list-style: square;
392                         }
393                     }
394                 }
395             }
396         }
397     }
400 .path-course-view .completionprogress {
401     margin-left: 25px;
404 .path-course-view .completionprogress {
405     display: block;
406     float: right;
407     height: 20px;
408     position: relative;
411 #page-site-index .subscribelink {
412     text-align: right;
414 #site-news-forum h2,
415 #frontpage-course-list h2,
416 #frontpage-category-names h2,
417 #frontpage-category-combo h2 {
418     margin-bottom: 9px;
420 .path-course-view a.reduce-sections {
421     padding-left: 0.2em;
423 .path-course-view .subscribelink {
424     text-align: right;
426 .path-course-view .unread {
427     margin-left: 30px;
429 .dir-rtl.path-course-view .unread {
430     margin-right: 30px;
432 .path-course-view .block.drag .header {
433     cursor: move;
435 .path-course-view .completionprogress {
436     text-align: right;
438 .dir-rtl.path-course-view .completionprogress {
439     text-align: left;
441 .path-course-view .single-section .completionprogress {
442     margin-right: 5px;
444 .path-course-view .section .summary {
445     line-height: normal;
448 .path-site li.activity > div,
449 .path-course-view li.activity > div {
450     position: relative;
451     padding: 0 16px 0 0; /* to accommodate the floated completion icon with highlighting */
453 .dir-rtl.path-site li.activity > div,
454 .dir-rtl.path-course-view li.activity > div {
455     position: relative;
456     padding: 0 0 0 16px;
458 .path-course-view li.activity span.autocompletion img {
459     vertical-align: text-bottom;
461 .path-course-view li.activity form.togglecompletion img {
462     max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
464 .path-course-view li.activity form.togglecompletion .ajaxworking {
465     width: 16px;
466     height: 16px;
467     position: absolute;
468     right: 22px;
469     top: 3px;
470     background: url([[pix:i/ajaxloader]]) no-repeat;
472 .dir-rtl.path-course-view .completionprogress {
473     float: none;
475 .dir-rtl.path-course-view li.activity form.togglecompletion .ajaxworking {
476     right: -22px;
479 li.section.hidden span.commands a.editing_hide,
480 li.section.hidden span.commands a.editing_show {
481     cursor: default;
483 ul.weeks h3.sectionname {
484     white-space: nowrap;
486 .editing ul.weeks h3.sectionname {
487     white-space: normal;
490 .single-section h3.sectionname {
491     text-align: center;
492     clear: both;
495 .section img.movetarget {
496     height: 16px;
497     width: 80px;
500 input.titleeditor {
501     width: 330px;
502     vertical-align: text-bottom;
505 span.editinstructions {
506     position: absolute;
507     top: 0;
508     margin-top: -22px;
509     margin-left: 30px;
510     line-height: 16px;
511     font-size: @fontSizeSmall;
512     padding: .1em .4em;
513     background-color: @infoBackground;
514     color: @infoText;
515     text-decoration: none;
516     z-index: 9999;
517     .box-shadow(2px 2px 5px 1px #ccc);
518     border: 1px solid @infoBorder;
521 /* Course drag and drop upload styles */
522 #dndupload-status {
523     position: fixed;
524     left: 0;
525     width: 40%;
526     margin: 0 30%;
527     padding: 6px;
528     border: 1px solid @infoBorder;
529     text-align: center;
530     background: @infoBackground;
531     color: @infoText;
532     z-index: 1; // Required in order to have this above relatively positioned course content.
533     .box-shadow(2px 2px 5px 1px #ccc);
534     .border-radius(8px);
536 .dndupload-preview {
537     color: #909090;
538     border: 1px dashed #909090;
539     list-style: none;
540     margin-top: .2em;
541     padding: .3em;
543 .dndupload-preview img.icon {
544     vertical-align: text-bottom;
545     padding: 0;
547 .dndupload-progress-outer {
548     .progress;
550 .dndupload-progress-inner {
551     .progress .bar;
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;
564 #page-admin-course-manage #movecourses td img {
565     margin: 0 .22em;
566     vertical-align: text-bottom;
568 #page-admin-course-manage #movecourses td img.icon {
569     padding: 0;
572 #coursesearch {
573     margin-top: 1em;
574     text-align: center;
577 #page-course-pending .pendingcourserequests {
578     margin-bottom: 1em;
580 #page-course-pending .pendingcourserequests .singlebutton {
581     display: inline;
583 #page-course-pending .pendingcourserequests .cell {
584     padding: 0 5px;
586 #page-course-pending .pendingcourserequests .cell.c6 {
587     white-space: nowrap;
590 .coursebox {
591     margin-bottom: 15px;
592     border: 1px dotted #ddd;
593     .border-radius(4px);
594     padding: 5px;
597 .coursebox > .info > .coursename a {
598     display: block;
599     background-image: url([[pix:moodle|i/course]]);
600     background-repeat: no-repeat;
601     padding-left: 21px;
602     background-position: left 0.2em;
604 .dir-rtl .coursebox > .info > .coursename a {
605     padding-left: 0;
606     padding-right: 21px;
607     background-position: right 0.2em;
609 .coursebox > .info > .coursename,
610 .coursebox .content .teachers,
611 .coursebox .content .courseimage,
612 .coursebox .content .coursefile {
613     float: left;
614     clear: left;
616 .coursebox .content .teachers,
617 .coursebox .content .courseimage,
618 .coursebox .content .coursefile {
619     width: 40%;
621 .dir-rtl .coursebox > .info > .coursename,
622 .dir-rtl .coursebox .teachers,
623 .dir-rtl .coursebox .content .courseimage,
624 .dir-rtl .coursebox .content .coursefile {
625     float: right;
626     clear: right;
628 .coursebox > .info > h3.coursename {
629     margin: 5px;
630     line-height: 1;
632 .coursebox > .info > .coursename {
633     margin: 5px;
634     padding: 0;
636 .coursebox .content .teachers li {
637     list-style-type: none;
638     padding: 0;
639     margin: 0;
641 .coursebox .enrolmenticons {
642     padding: 3px 0;
643     float: right;
645 .coursebox .moreinfo {
646     padding: 3px 0;
647     float: right;
649 .coursebox .enrolmenticons img,
650 .coursebox .moreinfo img {
651     margin: 0 .2em;
653 .coursebox .content {
654     clear: both;
656 .coursebox .content .summary,
657 .coursebox .content .coursecat {
658     float: right;
659     width: 55%;
661 .coursebox .content .coursecat {
662     text-align: right;
663     clear: right;
665 .coursebox.remotecoursebox .remotecourseinfo {
666     float: left;
667     width: 40%;
669 .coursebox .content .courseimage img {
670     max-width: 100px;
671     max-height: 100px;
673 .coursebox .content .coursecat,
674 .coursebox .content .summary,
675 .coursebox .content .courseimage,
676 .coursebox .content .coursefile,
677 .coursebox .content .teachers,
678 .coursebox.remotecoursebox .remotecourseinfo {
679     margin: 3px 5px;
680     padding: 0;
683 .coursebox.remotehost > .info > .categoryname a {
684     background-image: url([[pix:moodle|i/mnethost]]);
687 .dir-rtl .coursebox > .info > .categoryname a {
688     padding-left: 0;
689     padding-right: 21px;
690     background-position: center right;
692 .dir-rtl .coursebox > .info > .categoryname,
693 .dir-rtl .coursebox .teachers,
694 .dir-rtl .coursebox .content .courseimage,
695 .dir-rtl .coursebox .content .coursefile {
696     float: right;
697     clear: right;
699 .dir-rtl .coursebox .enrolmenticons,
700 .dir-rtl .coursebox .moreinfo {
701     float: left;
703 .dir-rtl .coursebox .summary,
704 .dir-rtl .coursebox .coursecat {
705     float: left;
707 .dir-rtl .coursebox .coursecat {
708     text-align: left;
709     clear: left;
712 .coursebox.collapsed {
713     margin-bottom: 0;
715 .coursebox.collapsed > .content {
716     display: none;
718 .courses .coursebox.collapsed {
719     border: 1px solid @tableBorder;
720     padding: 5px;
723 .courses .coursebox.even {
724     background-color: @tableBackgroundAccent;
726 .courses .coursebox:hover,
727 .course_category_tree .courses > .paging.paging-morelink:hover {
728     background-color: @tableBackgroundHover;
731 .course_category_tree .category .numberofcourse {
732     font-size: @fontSizeSmall;
735 .course_category_tree .controls {
736     visibility: hidden;
738 .course_category_tree .controls div {
739     display: inline;
740     cursor: pointer;
742 .jsenabled .course_category_tree .controls {
743     visibility: visible;
745 .course_category_tree .controls {
746     margin-bottom: 5px;
747     text-align: right;
748     float: right;
750 .course_category_tree .controls div {
751     padding-right: 2em;
752     font-size: 75%;
755 .course_category_tree .category > .info > .categoryname {
756     background-image: url([[pix:moodle|t/collapsed_empty]]);
757     background-repeat: no-repeat;
758     padding: 2px 18px;
759     margin: 3px;
760     background-position: center left;
762 .dir-rtl .course_category_tree .category > .info > .categoryname {
763     background-image: url([[pix:moodle|t/collapsed_empty_rtl]]);
764     background-position: center right;
766 .course_category_tree .category.with_children > .info > .categoryname {
767     background-image: url([[pix:moodle|t/expanded]]);
768     cursor: pointer;
770 .course_category_tree .category.with_children.collapsed > .info > .categoryname {
771     background-image: url([[pix:moodle|t/collapsed]]);
773 .dir-rtl .course_category_tree .category.with_children.collapsed > .info > .categoryname {
774     background-image: url([[pix:moodle|t/collapsed_rtl]]);
776 .course_category_tree .category.collapsed > .content {
777     display: none;
780 .course_category_tree .category > .info {
781     .well;
782     min-height: 0;
783     padding: 0;
784     margin: 3px 0;
785     margin-bottom: 3px;
786     clear: both;
788 .course_category_tree.frontpage-category-names .category > .info {
789     background: none;
790     border: none;
791     margin: 0;
793 .course_category_tree .category > .content {
794     padding-left: 16px;
797 .dir-rtl .course_category_tree .category > .content {
798     padding-left: 0;
799     padding-right: 16px;
802 .course_category_tree .subcategories > .paging,
803 .courses > .paging {
804     margin: 0;
805     padding: 5px;
806     text-align: center;
809 .courses > .paging.paging-morelink,
810 .course_category_tree .subcategories > .paging.paging-morelink {
811     text-align: left;
814 .course_category_tree .paging.paging-morelink a {
815     font-size: @fontSizeSmall;
817 .dir-rtl .courses > .paging.paging-morelink,
818 .dir-rtl .course_category_tree .paging.paging-morelink {
819     text-align: right;
822 #page-course-index-category .generalbox.info {
823     margin-bottom: 15px;
824     border: 1px dotted #ddd;
825     .border-radius(4px);
826     padding: 5px;
829 #page-course-index-category .categorypicker {
830     text-align: center;
831     margin: 10px 0 20px;
834 .section {
835     .summary,
836     .activity {
837         .iconsmall {
838             width: 16px;
839             height: 16px;
840         }
841     }
842     .editing_title {
843         .iconsmall {
844             width: 12px;
845             height: 12px;
846             margin: 8px 8px 0px 0;
847             padding: 4px 8px 0px 0;
848             vertical-align: text-bottom;
849         }
850     }
851     .moodle-actionmenu {
852         .iconsmall {
853             /** reset sets 100% !important which breaks on IE8 without this !important */
854             max-width: none !important; /* stylelint-disable-line declaration-no-important */
855             width: 16px;
856             height: 16px;
857             padding: 4px;
858             vertical-align: text-bottom;
859         }
860     }
861     .moodle-actionmenu[data-enhanced] {
862         .menu {
863             img {
864                 width: 12px;
865                 height: 12px;
866             }
867         }
868     }
871 .dir-rtl .section {
872     .editing_title {
873         .iconsmall {
874             margin: 8px 0 0 8px;
875             padding: 4px 0 0 8px;
876         }
877     }
880 /**
881  * Course management page
882  * Palette
883  *
884  * Background (reg)         #F5F5F5
885  * Background (light        #fafafa
886  * Background (highlight)   #ddffaa
887  * Borders                  #e1e1e8
888  */
889 #course-category-listings {
890     background-color: @tableBackground;
891     margin-bottom: 200px;
893     /** Two column layout */
894     &.columns-2 {
895         > #course-listing > div {
896             position: relative;
897             left: -1px;
898         }
899     }
900     /** Three column layout */
901     &.columns-3 > #course-listing > div {
902         height: 100%;
903     }
905     > div > div {
906         min-height: 300px;
907         > ul.ml > li:first-child > div {
908             border-top: 0;
909         }
910     }
911     h3 {
912         margin: 0;
913         padding: 0.4rem 0.6rem 0.3rem;
914     }
915     h4 {
916         margin: 1rem 0 0;
917         padding: 0.6rem 1rem 0.5rem;
918     }
919     .moodle-actionmenu {
920         white-space: nowrap;
921     }
923     .moodle-actionmenu[data-enhance] {
924         .toggle-display {
925             img {
926                 width: auto;
927             }
928             &.textmenu {
929                 padding-right: 4px;
931                 .caret {
932                     margin-top: 12px;
933                 }
934             }
935         }
936     }
938     .listing-actions {
939         text-align: center;
940         padding: 0.4rem 0.3rem 0.3rem;
941         line-height: 2.2em;
942         > a,
943         > .moodle-actionmenu {
944             display: inline-block;
945         }
946         > .moodle-actionmenu .menu a {
947             padding-left: 1rem;
948         }
949         .moodle-actionmenu:not([data-enhanced]) {
950             li {
951                 line-height: normal;
952             }
953             > .menubar a {
954                 color: inherit;
955                 display: inline-block;
956                 > img {
957                     display: none;
958                 }
959                 .caret {
960                     display: none;
961                 }
962             }
963             > .menu .menu-action-text {
964                 display: inline-block;
965             }
966         }
967     }
968     ul.ml {
969         list-style: none;
970         margin: 1rem 0;
971         ul.ml {
972             margin: 0;
973         }
974     }
975     li {
976         line-height: 2.2em;
977         > div {
978             &:hover {
979                 background-color: @tableBackgroundHover;
980             }
981         }
982         .tree-icon {
983             margin: 2px 6px 0 0;
984             width: 12px;
985             vertical-align: inherit;
986         }
987         &[data-selected='1'] {
988             > div {
989                 background-color: @tableBackgroundAccent;
990             }
991             > div:hover {
992                 background-color: @tableBackgroundHover;
993             }
994         }
996         // Tree item indenting to represent depth.
997         .tree-icon {
998             margin-left: 0;
999         }
1001         li .tree-icon {
1002             margin-left: 1em;
1003         }
1005         li li .tree-icon {
1006             margin-left: 2em;
1007         }
1009         li li li .tree-icon {
1010             margin-left: 3em;
1011         }
1013         li li li li .tree-icon {
1014             margin-left: 4em;
1015         }
1017         li li li li li .tree-icon {
1018             margin-left: 4.5em;
1019         }
1021         li li li li li li .tree-icon {
1022             margin-left: 5em;
1023         }
1025         li li li li li li li .tree-icon {
1026             margin-left: 5.5em;
1027         }
1028     }
1030     .item-actions {
1031         margin-right: 1em;
1032         display: inline-block;
1033         display: initial;
1034         > a img,
1035         .menubar img {
1036             margin: 0 4px;
1037             height: 12px;
1038             padding: 0;
1039             vertical-align: inherit;
1040         }
1041         &.show .menu {
1042             li {
1043                 line-height: 20px;
1044             }
1045             img {
1046                 width: 12px;
1047                 max-width: none;
1048             }
1049         }
1050         .menu-action-text {
1051             vertical-align: inherit;
1052         }
1053     }
1055     .listitem {
1056         > div {
1057             > .float-left {
1058                 float: left;
1059             }
1060             > .float-right {
1061                 float: right;
1062                 text-align: right;
1063             }
1064             .item-actions {
1065                 .action-show {
1066                     display: none;
1067                 }
1068                 .action-hide {
1069                     display: inline;
1070                 }
1071             }
1072             .without-actions {
1073                 color: #333;
1074             }
1075             .idnumber {
1076                 color: #a1a1a8;
1077                 margin-right: 2em;
1078             }
1079         }
1080         // The category or course is hidden.
1081         &[data-visible="0"] {
1082             .muted;
1083             > div {
1084                 > a {
1085                     .muted;
1086                 }
1087                 .item-actions {
1088                     .action-show {
1089                         display: inline;
1090                     }
1091                     .action-hide {
1092                         display: none;
1093                     }
1094                 }
1095             }
1096         }
1097         &.highlight {
1098             background-color: @tableBackground;
1099             > div,
1100             > div:hover,
1101             &[data-selected='1'] > div {
1102                 background-color: @tableBackgroundHover;
1103             }
1104         }
1105     }
1107     #course-listing {
1108         .listitem {
1109             .categoryname {
1110                 display: inline-block;
1111                 margin-left: 1em;
1112                 color: #a1a1a8;
1113             }
1114             .coursename {
1115                 display: inline-block;
1116             }
1117             > div {
1118                 padding-left: 1rem;
1119             }
1120         }
1121         > .firstpage .listitem:first-child > div .item-actions .action-moveup,
1122         > .lastpage .listitem:last-child > div .item-actions .action-movedown {
1123             display: none;
1124         }
1125         .bulk-action-checkbox {
1126             margin: -2px 6px 0 0;
1127         }
1128     }
1129     #category-listing {
1130         .listitem.collapsed > ul.ml {
1131             display: none;
1132         }
1133         .listitem {
1134             > div {
1135                 > .ba-checkbox {
1136                     width: 2.2em;
1137                     text-align: center;
1138                     margin: -1px 0.5em 0 0;
1139                     padding-top: 2px;
1140                 }
1141             }
1142             &.highlight > div > .ba-checkbox {
1143                 background-color: @tableBackgroundHover;
1144             }
1145             &[data-selected='1'] > div > .ba-checkbox {
1146                 margin: 0 0.5em 0 0;
1147                 padding: 0;
1148                 background-color: inherit;
1149             }
1150             &:first-child > div .item-actions .action-moveup,
1151             &:last-child > div .item-actions .action-movedown {
1152                 display: none;
1153             }
1154         }
1155         .course-count {
1156             color: #a1a1a8;
1157             margin-right: 2rem;
1158             min-width: 3.5em;
1159             display: inline-block;
1160             .smallicon {
1161                 width: 12px;
1162                 margin-left: 4px;
1163                 vertical-align: inherit;
1164             }
1165         }
1166         .bulk-action-checkbox {
1167             margin-right: -3px;
1168         }
1169         .category-listing > ul > .listitem:first-child {
1170             position: relative;
1171         }
1172         .category-bulk-actions {
1173             margin: 0 0.5em 0.5em;
1174             position: relative;
1175         }
1176     }
1178     .detail-pair {
1179         border-bottom: 1px solid @tableBorder;
1180         margin: 0 1rem;
1181         > * {
1182             display: inline-block;
1183             line-height: 2.2rem;
1184         }
1185         .pair-key {
1186             font-weight: bold;
1187             vertical-align: top;
1188             span {
1189                 margin-right: 1rem;
1190                 display: block;
1191             }
1192         }
1193         .pair-value select {
1194             max-width: 100%;
1195         }
1196     }
1198     .bulk-actions .detail-pair {
1199         > * {
1200             display: block;
1201             width: 100%;
1202         }
1203     }
1205     .listing-pagination {
1206         text-align: center;
1207         .yui3-button {
1208             background-color: @btnBackground;
1209             border: 0;
1210             margin: 0.4rem 0.2rem 0.45rem;
1211             font-size: 10.4px;
1212             &.active-page {
1213                 background-color: @btnBackgroundHighlight;
1214             }
1215         }
1216     }
1217     .listing-pagination-totals {
1218         text-align: center;
1219         &.dimmed {
1220             .muted;
1221             margin: 0.4rem 1rem 0.45rem;
1222         }
1223     }
1224     .select-a-category .notifymessage,
1225     .select-a-category .alert {
1226         margin: 1em;
1227     }
1230 #course-category-listings #course-listing .listitem .drag-handle {
1231     display: none;
1233 .jsenabled #course-category-listings #course-listing .listitem .drag-handle {
1234     display: inline-block;
1235     margin: 0 6px 0 0;
1236     cursor: pointer;
1239 .dir-rtl #course-category-listings {
1240     #category-listing,
1241     #course-listing {
1242         float: right;
1243         margin-left: 0;
1244     }
1246     .listitem {
1247         > div {
1248             > .float-left {
1249                 float: right;
1250             }
1251             > .float-right {
1252                 float: left;
1253                 text-align: left;
1254             }
1255         }
1256     }
1257     li {
1258         .tree-icon {
1259             margin: 2px 0 0 6px;
1260         }
1262         // Tree item indenting to represent depth.
1263         .tree-icon {
1264             margin-right: 0;
1265         }
1267         li .tree-icon {
1268             margin-right: 1em;
1269         }
1271         li li .tree-icon {
1272             margin-right: 2em;
1273         }
1275         li li li .tree-icon {
1276             margin-right: 3em;
1277         }
1279         li li li li .tree-icon {
1280             margin-right: 4em;
1281         }
1283         li li li li li .tree-icon {
1284             margin-right: 4.5em;
1285         }
1287         li li li li li li .tree-icon {
1288             margin-right: 5em;
1289         }
1291         li li li li li li li .tree-icon {
1292             margin-right: 5.5em;
1293         }
1294     }
1295     #category-listing {
1296         .listitem {
1297             > div {
1298                 margin-right: 0.5em;
1299                 margin-left: 0;
1300                 > .ba-checkbox {
1301                     margin: -1px 0 0 0.5em;
1302                 }
1303             }
1305             &[data-selected='1'] > div > .ba-checkbox {
1306                 margin: 0 0 0 0.5em;
1307             }
1308         }
1309         .course-count {
1310             margin-left: 2rem;
1312             .smallicon {
1313                 margin-left: 0px;
1314                 margin-right: 4px;
1315             }
1316         }
1317         .bulk-action-checkbox {
1318             margin-left: -3px;
1319             margin-right: 0;
1320         }
1321     }
1322     #course-listing {
1323         padding-right: 24px;
1324         .listitem {
1325             .idnumber {
1326                 color: #a1a1a8;
1327                 padding-right: 2em;
1328             }
1329             .categoryname {
1330                 display: inline-block;
1331                 margin-right: 1em;
1332                 margin-left: 0;
1333             }
1334             .drag-handle {
1335                 margin: 0 6px 0 6px;
1336             }
1337             > div {
1338                 padding-left: 1rem;
1339             }
1340         }
1341         .bulk-action-checkbox {
1342             vertical-align: middle;
1343             margin: -2px 0 0 6px;
1344         }
1345     }
1346     .detail-pair {
1347         > * {
1348             float: right;
1349             margin-right: 0;
1350         }
1351         .pair-key {
1352             span {
1353                 margin-right: 0;
1354                 margin-left: 0;
1355             }
1356         }
1357         .pair-value {
1358             margin-right: 0.5em;
1359         }
1360     }
1363 /** Management header styling **/
1364 .coursecat-management-header {
1365     vertical-align: middle;
1366     h2 {
1367         display: inline-block;
1368         text-align: left;
1369     }
1370     > div {
1371         display: inline-block;
1372         float: right;
1373         line-height: 40px;
1374         > div {
1375             margin-left: 1em;
1376             margin: 10px 0;
1377             display: inline-block;
1378         }
1379     }
1380     select {
1381         max-width: 300px;
1382         cursor: pointer;
1383         padding: 0.4em 0.5em 0.45em 1em;
1384         vertical-align: baseline;
1385         white-space: nowrap;
1386     }
1387     .view-mode-selector {
1388         .moodle-actionmenu {
1389             white-space: nowrap;
1390             display: inline-block;
1391         }
1392         .moodle-actionmenu[data-enhanced].show .menu a {
1393             padding-left: 1em;
1394         }
1395     }
1397 .dir-rtl .coursecat-management-header {
1398     h2 {
1399         text-align: right;
1400     }
1401     > div {
1402         float: left;
1403         margin-right: 1em;
1404         margin-left: 0;
1405     }
1407 .course-being-dragged-proxy {
1408     border: 0;
1409     color: @linkColor;
1410     vertical-align: middle;
1411     padding: 0 0 0 4em;
1413 .course-being-dragged {
1414     .opacity(50);
1417 /**
1418  * Display sizes:
1419  * Large displays                   1200        +
1420  * Default displays                  980     1199
1421  * Tablets                           768      979
1422  * Small tablets and large phones    481      767
1423  * Phones                              0      480
1424  */
1425 @media (min-width: 1200px) and (max-width: 1600px) {
1426     #course-category-listings.columns-3 {
1427         background-color: @tableBackground;
1428         border: 0;
1430         #category-listing,
1431         #course-listing {
1432             width: 50%;
1433         }
1434         #category-listing > div,
1435         #course-listing > div,
1436         #course-detail > div {
1437             background-color: @tableBackground;
1438         }
1439         #course-detail {
1440             width: 100%;
1441             margin-top: 1em;
1442         }
1443     }
1447 @media (max-width: 1199px) {
1448     #course-category-listings.columns-2,
1449     #course-category-listings.columns-3 {
1450         background-color: @tableBackground;
1451         border: 0;
1452         #category-listing,
1453         #course-listing,
1454         #course-detail {
1455             width: 100%;
1456             margin: 0 0 1em;
1457         }
1458         #category-listing > div,
1459         #course-listing > div,
1460         #course-detail > div {
1461             background-color: @tableBackground;
1462         }
1463     }