MDL-42851 frontpage: fix rtl in clean theme for course listings
[moodle.git] / theme / bootstrapbase / less / moodle / course.less
1 /* course.less */
2 /* COURSE CONTENT */
3 .section_add_menus {
4     text-align: right;
5 }
6 .dir-rtl .section_add_menus {
7     text-align: left;
8 }
9 .section_add_menus .horizontal div,
10 .section_add_menus .horizontal form {
11     display: inline;
12 }
13 .section_add_menus optgroup {
14     font-weight: normal;
15     font-style: italic;
16 }
17 .section_add_menus .urlselect {
18     margin-left: .4em;
19 }
20 .dir-rtl .section_add_menus .urlselect {
21     margin-right: .4em;
22     margin-left: 0;
23 }
24 .section_add_menus .urlselect select {
25     margin-left: .2em;
26 }
27 .dir-rtl .section_add_menus .urlselect select {
28     margin-right: .2em;
29     margin-left: 0;
30 }
31 .section_add_menus .urlselect img.iconhelp {
32     padding: 0;
33     margin: 0;
34     vertical-align: text-bottom;
35 }
37 .sitetopic ul.section {
38     margin: 0;
39 }
40 .course-content ul.section {
41     margin: 1em;
42 }
43 .section {
44     .spinner {
45         height: 16px;
46         width: 16px;
47     }
48     .activity {
49         .spinner {
50             left: 100%;
51             position: absolute;
52             vertical-align: text-bottom;
53         }
55         .editing_move {
56             /* Move the move icon to the start of the line */
57             position: absolute;
58             left: 0;
59             top: 0;
60         }
62         .mod-indent-outer {
63             /**
64              * Add appropriate padding such that nothing overlaps the
65              * absolute positioned move icon.
66              */
67             padding-left: 32px;
68         }
70         /* The command block for each activity */
71         .actions {
72             position: absolute;
73             right: 0;
74             top: 0;
75         }
77         .contentwithoutlink,
78         .activityinstance {
80             min-width: 40%;
81             display: table-cell;
82             padding-right: 4px;
83             min-height: 2em;
85             .dimmed {
86                 img.activityicon {
87                   opacity: 0.5;
88                   filter: alpha(opacity=50);
89                 }
90             }
91         }
92     }
94     .filler {
95         width: 16px;
96         height: 16px;
97         padding: 0.3em;
98         display: inline-block;
99     }
101     .activity.editor_displayed {
102         a.editing_title,
103         .moodle-actionmenu {
104             display: none;
105         }
106         div.activityinstance {
107             padding-right: initial;
109             input {
110                 margin-bottom: initial;
111                 padding-top: initial;
112                 padding-bottom: initial;
113                 vertical-align: text-bottom;
114             }
115         }
116     }
119 .dir-rtl .section {
120     .activity {
121         .spinner {
122             left: auto;
123             right: 100%;
124         }
126         .mod-indent-outer {
127             /**
128              * Add appropriate padding such that nothing overlaps the
129              * absolute positioned move icon.
130              */
131             padding-left: initial;
132             padding-right: 32px;
133         }
135         /* The command block for each activity */
136         .actions {
137             left: 0;
138             right: auto;
139         }
141         .contentwithoutlink,
142         .activityinstance {
143             padding-left: 4px;
144             padding-right: initial;
145         }
146     }
149 .dir-rtl.editing .section {
150     .activity {
151         .editing_move {
152             /* Move the move icon to the start of the line */
153             left: auto;
154             right: 0;
155         }
157         &.editor_displayed {
158             div.activityinstance {
159                 padding-left: initial;
160             }
161         }
162     }
165 .activity img.activityicon {
166     margin-right: 6px;
167     vertical-align: text-bottom;
169 .dir-rtl .section .activity img.activityicon {
170     margin-left: 6px;
171     margin-right: 0;
173 .section .activity .activityinstance,
174 .section .activity .activityinstance div {
175     display: inline-block;
177 .editing {
178     .section {
179         .activity {
180             .contentwithoutlink,
181             .activityinstance {
182                 padding-right: 200px;
183             }
184         }
185     }
188 .dir-rtl.editing {
189     .section {
190         .activity {
191             .contentwithoutlink,
192             .activityinstance {
193                 padding-left: 200px;
194                 padding-right: 0;
195             }
196         }
197     }
200 .editing_show + .editing_assign,
201 .editing_hide + .editing_assign {
202     // if roles icon missing, add space
203     margin-left: 20px;
205 .section .activity .commands {
206     white-space: nowrap;
207     display: inline;
209 .section .activity.modtype_label.label {
210     font-weight: normal;
211     padding: .2em;
213 .section li.activity {
214     padding: .2em;
215     clear: both;
217 .section .activity .activityinstance .groupinglabel {
218     padding-left: 30px;
220 .dir-rtl .section .activity .activityinstance .groupinglabel {
221     padding-right: 30px;
223 .section .activity .availabilityinfo,
224 .section .activity .contentafterlink {
225     margin-top: 0.5em;
226     margin-left: 30px;
228 .dir-rtl .section .activity .availabilityinfo,
229 .dir-rtl .section .activity .contentafterlink {
230     margin-left: 0;
231     margin-right: 30px;
233 .section .activity .contentafterlink p {
234     margin: .5em 0;
236 .editing .section .activity:hover,
237 .editing .section .activity.action-menu-shown {
238     background-color: @grayLighter;
240 .course-content .current {
241     background-color: @infoBackground;
243 .course-content .section-summary {
244     border: 1px solid #DDD;
245     margin-top: 5px;
246     list-style: none;
248 .course-content .section-summary .section-title  {
249     margin: 2px 5px 10px 5px;
251 .course-content .section-summary .summarytext {
252     margin: 2px 5px 2px 5px;
254 .course-content .section-summary .section-summary-activities .activity-count {
255     .muted;
256     font-size: @fontSizeSmall;
257     margin: 3px;
258     white-space: nowrap;
259     display: inline-block;
261 .course-content .section-summary .summary {
262     margin-top: 5px;
264 .course-content .single-section {
265     margin-top: 1em;
267 .course-content .single-section .section-navigation {
268     display: block;
269     padding: 0.5em;
270     margin-bottom: -0.5em;
272 .course-content .single-section .section-navigation .title {
273     font-weight: bold;
274     font-size: 108%;
275     clear: both;
277 .course-content .single-section .section-navigation .mdl-left {
278     font-weight: normal;
279     float: left;
280     margin-right: 1em;
282 .dir-rtl .course-content .single-section .section-navigation .mdl-left {
283     float: right;
285 .course-content .single-section .section-navigation .mdl-left .larrow {
286     margin-right: 0.1em;
288 .course-content .single-section .section-navigation .mdl-right {
289     font-weight: normal;
290     float: right;
291     margin-left: 1em;
293 .dir-rtl .course-content .single-section .section-navigation .mdl-right {
294     float: left;
296 .course-content .single-section .section-navigation .mdl-right .rarrow {
297     margin-left: 0.1em;
299 .course-content .single-section .section-navigation .mdl-bottom {
300     margin-top: 0;
302 .course-content ul li.section.main {
303     border-bottom: 2px solid #eee;
304     margin-top: 0;
306 .course-content ul li.section.hidden {
307     opacity: 0.5;
309 .course-content ul.topics li.section .content,
310 .course-content ul.weeks li.section .content {
311     margin-right: 20px;
312     margin-left: 20px;
313     padding: 0;
316 .course-content {
317     margin-top: 0;
320 .course-content ul.topics li.section {
321     padding-bottom: 20px;
324 .course-content ul.topics li.section .summary {
325     margin-left: 25px;
328 .path-course-view .completionprogress {
329     margin-left: 25px
332 .path-course-view .completionprogress {
333     display: block;
334     float: right;
335     height: 20px;
336     position: relative;
337     z-index: 1000;
340 #page-site-index .subscribelink {
341     text-align: right;
343 #site-news-forum h2,
344 #frontpage-course-list h2,
345 #frontpage-category-names h2,
346 #frontpage-category-combo h2 {
347     margin-bottom: 9px;
349 .path-course-view a.reduce-sections {
350     padding-left: 0.2em;
352 .path-course-view .subscribelink {
353     text-align: right;
355 .path-course-view .unread {
356     margin-left: 30px;
358 .dir-rtl.path-course-view .unread {
359     margin-right: 30px;
361 .path-course-view .block.drag .header {
362     cursor: move;
364 .path-course-view .completionprogress {
365     text-align: right;
367 .dir-rtl.path-course-view .completionprogress {
368     text-align: left;
370 .path-course-view .single-section .completionprogress {
371     margin-right: 5px;
373 .path-course-view .section .summary {
374     line-height: normal;
377 .path-site li.activity > div,
378 .path-course-view li.activity > div {
379     position: relative;
380     padding: 0 16px 0 0; /* to accommodate the floated completion icon with highlighting */
382 .dir-rtl.path-site li.activity > div,
383 .dir-rtl.path-course-view li.activity > div {
384     position: relative;
385     padding: 0 0 0 16px;
387 .path-course-view li.activity span.autocompletion img {
388     vertical-align: text-bottom;
390 .path-course-view li.activity form.togglecompletion img {
391     max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
393 .path-course-view li.activity form.togglecompletion .ajaxworking {
394     width: 16px;
395     height: 16px;
396     position: absolute;
397     right: 22px;
398     top: 3px;
399     background: url([[pix:i/ajaxloader]]) no-repeat;
401 .dir-rtl.path-course-view .completionprogress {
402     float: none;
404 .dir-rtl.path-course-view li.activity form.togglecompletion .ajaxworking {
405     right: -22px;
408 li.section.hidden span.commands a.editing_hide,
409 li.section.hidden span.commands a.editing_show {
410     cursor: default;
412 ul.weeks h3.sectionname {
413     white-space: nowrap;
415 .editing ul.weeks h3.sectionname {
416     white-space: normal;
419 .single-section h3.sectionname {
420     text-align: center;
421     clear: both;
424 .section img.movetarget {
425     height: 16px;
426     width: 80px;
429 input.titleeditor {
430     width: 330px;
431     vertical-align: text-bottom;
434 span.editinstructions {
435     position: absolute;
436     top: 0;
437     margin-top: -22px;
438     margin-left: 30px;
439     line-height: 16px;
440     font-size: @fontSizeSmall;
441     padding: .1em .4em;
442     background-color: @infoBackground;
443     color: @infoText;
444     text-decoration: none;
445     z-index: 9999;
446     .box-shadow(2px 2px 5px 1px #ccc);
447     border: 1px solid @infoBorder;
449 .dir-rtl span.editinstructions {
452 /* Course drag and drop upload styles */
453 #dndupload-status {
454     width: 40%;
455     margin: 0 30%;
456     padding: 6px;
457     border: 1px solid @infoBorder;
458     text-align: center;
459     background: @infoBackground;
460     color: @infoText;
461     position: absolute;
462     z-index: 9999;
463     .box-shadow(2px 2px 5px 1px #ccc);
464     .border-bottom-radius(8px);
465     z-index: 0;
467 .dndupload-preview {
468     color: #909090;
469     border: 1px dashed #909090;
470     list-style: none;
471     margin-top: .2em;
472     padding: .3em;
474 .dndupload-preview img.icon {
475     vertical-align: text-bottom;
476     padding: 0;
478 .dndupload-progress-outer {
479     .progress;
481 .dndupload-progress-inner {
482     .progress .bar;
484 .dndupload-hidden {
485     display: none;
488 /* COURSES LISTINGS AND COURSE SUMMARY */
489 #page-course-pending .singlebutton,
490 #page-course-index .singlebutton,
491 #page-course-index-category .singlebutton,
492 #page-course-editsection .singlebutton {
493     text-align: center;
495 #page-admin-course-manage #movecourses td img {
496     margin: 0 .22em;
497     vertical-align: text-bottom;
499 #page-admin-course-manage #movecourses td img.icon {
500     padding: 0;
503 #coursesearch {
504     margin-top: 1em;
505     text-align: center;
508 #page-course-pending .pendingcourserequests {
509     margin-bottom: 1em;
511 #page-course-pending .pendingcourserequests .singlebutton {
512     display: inline;
514 #page-course-pending .pendingcourserequests .cell {
515     padding: 0 5px;
517 #page-course-pending .pendingcourserequests .cell.c6 {
518     white-space: nowrap;
521 .coursebox {
522     margin-bottom: 15px;
523     border: 1px dotted #ddd;
524     .border-radius(4px);
525     padding: 5px;
528 .coursebox > .info > .coursename a {
529     display:block;
530     background-image:url([[pix:moodle|i/course]]);
531     background-repeat: no-repeat;
532     padding-left:21px;
533     background-position: left 0.5em;
535 .dir-rtl .coursebox > .info > .coursename a {
536     padding-left: 0;
537     padding-right: 21px;
538     background-position: right;
540 .coursebox.remotehost > .info > .categoryname a {
541     background-image:url([[pix:moodle|i/mnethost]]);
543 .coursebox .content .teachers,
544 .coursebox .content .courseimage,
545 .coursebox .content .coursefile {
546     float:left;
547     width:40%;
548     clear:left;
550 .dir-rtl .coursebox > .info > .coursename,
551 .dir-rtl .coursebox .teachers,
552 .dir-rtl .coursebox .content .courseimage,
553 .dir-rtl .coursebox .content .coursefile {
554     float: right;
555     clear: right;
557 .coursebox > .info > h3.coursename {
558     margin: 5px;
560 .coursebox > .info > .coursename {
561     margin: 5px;
562     padding: 0;
564 .coursebox .content .teachers li {
565     list-style-type:none;
566     padding:0;
567     margin:0;
569 .coursebox .enrolmenticons {
570     padding:3px 0;
571     float:right;
573 .coursebox .moreinfo {
574     padding:3px 0;
575     float:right;
577 .coursebox .enrolmenticons img,
578 .coursebox .moreinfo img {
579     margin:0 .2em;
581 .coursebox .content {
582     clear:both;
584 .coursebox .content .summary,
585 .coursebox .content .coursecat {
586     float:right;
587     width: 55%;
589 .coursebox .content .coursecat {
590     text-align:right;
591     clear:right;
593 .coursebox.remotecoursebox .remotecourseinfo {
594     float:left;
595     width: 40%;
597 .coursebox .content .courseimage img {
598     max-width:100px;
599     max-height:100px;
601 .coursebox .content .coursecat,
602 .coursebox .content .summary,
603 .coursebox .content .courseimage,
604 .coursebox .content .coursefile,
605 .coursebox .content .teachers,
606 .coursebox.remotecoursebox .remotecourseinfo {
607     margin:3px 5px;
608     padding:0;
611 .dir-rtl .coursebox > .info > .categoryname a {
612     padding-left:0;
613     padding-right:21px;
614     background-position: center right;
616 .dir-rtl .coursebox > .info > .categoryname,
617 .dir-rtl .coursebox .teachers,
618 .dir-rtl .coursebox .content .courseimage,
619 .dir-rtl .coursebox .content .coursefile {
620     float:right;
621     clear:right;
623 .dir-rtl .coursebox .enrolmenticons,
624 .dir-rtl .coursebox .moreinfo {
625     float:left;
627 .dir-rtl .coursebox .summary,
628 .dir-rtl .coursebox .coursecat {
629     float:left;
631 .dir-rtl .coursebox .coursecat {
632     text-align:left;
633     clear:left;
636 .coursebox.collapsed {
637     margin-bottom:0;
639 .coursebox.collapsed > .content {
640     display:none;
642 .courses .coursebox.collapsed {
643     border:1px solid #eeeeee;
644     padding:5px;
647 .courses .coursebox.even {
648     background-color:#f6f6f6;
650 .courses .coursebox:hover,
651 .course_category_tree .courses > .paging.paging-morelink:hover {
652     background-color:#eeeeee;
655 .course_category_tree .category .numberofcourse {
656     font-size: @fontSizeSmall;
659 .course_category_tree .controls {
660     visibility: hidden;
662 .course_category_tree .controls div {
663     display:inline;
664     cursor:pointer;
666 .jsenabled .course_category_tree .controls {
667     visibility: visible;
669 .course_category_tree .controls {
670     margin-bottom:5px;
671     text-align:right;
672     float:right;
674 .course_category_tree .controls div {
675     padding-right:2em;
676     font-size:75%;
679 .course_category_tree .category > .info > .categoryname{
680     background-image:url([[pix:moodle|t/collapsed_empty]]);
681     background-repeat: no-repeat;
682     padding:2px 18px;
683     margin:3px;
684     background-position:center left;
686 .dir-rtl .course_category_tree .category > .info > .categoryname {
687     background-image:url([[pix:moodle|t/collapsed_empty_rtl]]);
688     background-position:center right;
690 .course_category_tree .category.with_children > .info > .categoryname {
691     background-image:url([[pix:moodle|t/expanded]]);
692     cursor: pointer;
694 .course_category_tree .category.with_children.collapsed >.info > .categoryname {
695     background-image:url([[pix:moodle|t/collapsed]]);
697 .dir-rtl .course_category_tree .category.with_children.collapsed > .info > .categoryname {
698     background-image:url([[pix:moodle|t/collapsed_rtl]]);
700 .course_category_tree .category.collapsed>.content {
701     display:none;
704 .course_category_tree .category >.info {
705     .well;
706     min-height:0;
707     padding:0;
708     margin:3px 0;
709     margin-bottom:3px;
710     clear: both;
712 .course_category_tree.frontpage-category-names .category >.info {
713     background:none;
714     border:none;
715     margin:0;
717 .course_category_tree .category > .content {
718     padding-left:16px;
721 .dir-rtl .course_category_tree .category > .content {
722     padding-left:0;
723     padding-right:16px;
726 .course_category_tree .subcategories > .paging,
727 .courses > .paging {
728     margin:0;
729     padding:5px;
730     text-align:center;
733 .courses > .paging.paging-morelink,
734 .course_category_tree .subcategories > .paging.paging-morelink {
735     text-align:left;
738 .course_category_tree .paging.paging-morelink a {
739     font-size: @fontSizeSmall;
741 .dir-rtl .courses > .paging.paging-morelink,
742 .dir-rtl .course_category_tree .paging.paging-morelink {
743     text-align:right;
746 #page-course-index-category .generalbox.info {
747     margin-bottom: 15px;
748     border: 1px dotted #ddd;
749     .border-radius(4px);
750     padding: 5px;
753 #page-course-index-category .categorypicker {
754     text-align: center;
755     margin: 10px 0 20px;
758 .section {
759     .summary,
760     .activity {
761         .iconsmall {
762             width: 16px;
763             height: 16px;
764         }
765     }
766     .editing_title {
767         .iconsmall {
768             width: 12px;
769             height: 12px;
770             margin: 8px 8px 0px 0;
771             padding: 4px 8px 0px 0;
772             vertical-align: text-bottom;
773         }
774     }
775     .moodle-actionmenu {
776         .iconsmall {
777             max-width: none !important; /** reset sets 100% !important which breaks on IE8 without this !important */
778             width:16px;
779             height:16px;
780             padding: 4px;
781             vertical-align: text-bottom;
782         }
783     }
784     .moodle-actionmenu[data-enhanced] {
785         .menu {
786             img {
787               width: 12px;
788               height: 12px;
789             }
790         }
791     }
794 .dir-rtl .section {
795     .editing_title {
796         .iconsmall {
797             margin: 8px 0 0 8px;
798             padding: 4px 0 0 8px;
799         }
800     }
803 /**
804  * Course management page
805  * Palette
806  *
807  * Background (reg)         #F5F5F5
808  * Background (light        #fafafa
809  * Background (highlight)   #ddffaa
810  * Borders                  #e1e1e8
811  */
812 #course-category-listings {
813     background-color:#fff;
814     margin-bottom:200px;
816     /** Two column layout */
817     &.columns-2 {
818         > #course-listing > div {
819             position:relative;
820             left:-1px;
821         }
822     }
823     /** Three column layout */
824     &.columns-3 > #course-listing > div {
825         height:100%;
826     }
828     > div > div {
829         min-height:300px;
830         border:1px solid #e1e1e8;
831         > ul.ml > li:first-child > div {
832             border-top:0;
833         }
834     }
835     h3 {
836         margin:0;
837         padding:0.4rem 0.6rem 0.3rem;
838         background-color:#F5F5F5;
839         border-bottom:1px solid #e1e1e8;
840     }
841     h4 {
842         margin:1rem 0 0;
843         padding:0.6rem 1rem 0.5rem;
844     }
845     .moodle-actionmenu {
846         white-space:nowrap;
847     }
849     .moodle-actionmenu[data-enhance] {
850         .toggle-display {
851             img {
852                 width: auto;
853             }
854             &.textmenu {
855                 padding-right: 4px;
857                 .caret {
858                     margin-top: 12px;
859                 }
860             }
861         }
862     }
864     .listing-actions {
865         text-align:center;
866         padding:0.4rem 0.3rem 0.3rem;
867         line-height:2.2em;
868         > .moodle-actionmenu {
869             display:inline-block;
870             .menu a {
871                 padding-left:1rem;
872             }
873         }
874         .moodle-actionmenu:not([data-enhanced]) {
875             li {line-height:normal;}
876             > .menubar a {
877                 color:inherit;
878                 display:inline-block;
879                 > img {
880                     display:none;
881                 }
882                 .caret {
883                     display: none;
884                 }
885             }
886             > .menu .menu-action-text {
887                 display:inline-block;
888             }
889         }
890     }
891     ul.ml {
892         list-style: none;
893         margin:1rem 0;
894         ul.ml {
895             margin:0;
896         }
897     }
898     li {
899         line-height:2.2em;
900         > div {
901             &:hover {
902                 background-color:#fafafa;
903             }
904         }
905         .tree-icon {
906             margin: 2px 6px 0 0;
907             width:12px;
908             vertical-align:inherit;
909         }
910         &[data-selected='1'] {
911             > div {
912                 background-color:#FFFFD8;
913                 border-top-color: #e1e1e8;
914                 border-bottom-color:#F5F5F5;
915             }
916             li:first-of-type > div,
917             &[data-expandable='0']+li > div {
918                 border-top-color:#e1e1e8;
919             }
920             &:last-of-type > div {
921                 border-bottom-color:#e1e1e8;
922             }
923         }
925         // Tree item indenting to represent depth.
926         .tree-icon {margin-left:0;}
927         li .tree-icon {margin-left:1em;}
928         li li .tree-icon {margin-left:2em;}
929         li li li .tree-icon {margin-left:3em;}
930         li li li li .tree-icon {margin-left:4em;}
931         li li li li li .tree-icon {margin-left:4.5em;}
932         li li li li li li .tree-icon {margin-left:5em;}
933         li li li li li li li .tree-icon {margin-left:5.5em;}
935         &+li > div,
936         &:first-child > div {
937             border-top-color:#F5F5F5;
938         }
939     }
941     .item-actions {
942         margin-right:1em;
943         display:inline-block;
944         display:initial;
945         img {
946             margin: 0 4px;
947             height:12px;
948             padding: 0;
949             vertical-align: inherit;
950         }
951         &.show .menu {
952             a {
953                 padding:4px 1em 4px 4px;
954             }
955             img {
956                 width: 12px;
957                 max-width:none;
958             }
959         }
960         .menu-action-text {
961             vertical-align: inherit;
962         }
963     }
965     .listitem {
966         > div {
967             > .float-left {
968                 float:left;
969             }
970             > .float-right {
971                 float:right;
972                 text-align:right;
973             }
974             .item-actions {
975                 .action-show {
976                     display:none;
977                 }
978                 .action-hide {
979                     display:inline;
980                 }
981             }
982             .without-actions {
983                 color: #333;
984             }
985             .idnumber {
986                 color:#a1a1a8;
987                 margin-right:2em;
988             }
989         }
990         // The category or course is hidden.
991         &[data-visible="0"] {
992             .muted;
993             a.categoryname {
994                 .muted;
995             }
996             > div {
997                 > a {
998                     .muted;
999                 }
1000                 .item-actions {
1001                     .action-show {
1002                         display:inline;
1003                     }
1004                     .action-hide {
1005                         display:none;
1006                     }
1007                 }
1008             }
1009             > ul .item-actions.category-item-actions {
1010                 // If the category is hidden hide both show and hide icons for sub categories.
1011                 .action-hide,
1012                 .action-show {
1013                     display: none;
1014                 }
1015             }
1016         }
1017         &.highlight {
1018             background-color:transparent;
1019             > div,
1020             > div:hover,
1021             &[data-selected='1'] > div {
1022                 background-color:#ddffaa;
1023             }
1024         }
1025     }
1027     #course-listing {
1028         .listitem {
1029             .categoryname {
1030                 display:inline-block;
1031                 margin-left:1em;
1032                 color:#a1a1a8;
1033             }
1034             .coursename {
1035                 display:inline-block;
1036             }
1037             > div {
1038                 padding-left:1rem;
1039             }
1040         }
1041         > .firstpage .listitem:first-child > div .item-actions .action-moveup,
1042         > .lastpage .listitem:last-child > div .item-actions .action-movedown {
1043           display: none;
1044         }
1045         .bulk-action-checkbox {
1046             margin:-2px 6px 0 0;
1047         }
1048     }
1049     #category-listing {
1050         .listitem.collapsed > ul.ml {
1051             display: none;
1052         }
1053         .listitem {
1054             > div {
1055                 > .ba-checkbox {
1056                     width:2.2em;
1057                     text-align:center;
1058                     margin:-1px 0.5em 0 0;
1059                     padding-top:2px;
1060                 }
1061             }
1062             &.highlight > div > .ba-checkbox {
1063                 background-color:#ddffaa;
1064             }
1065             &[data-selected='1'] > div > .ba-checkbox {
1066                 margin:0 0.5em 0 0;
1067                 padding:0;
1068                 background-color: inherit;
1069             }
1070             &:first-child > div .item-actions .action-moveup,
1071             &:last-child > div .item-actions .action-movedown {
1072               display: none;
1073             }
1074         }
1075         .course-count {
1076             color:#a1a1a8;
1077             margin-right:2rem;
1078             min-width:3.5em;
1079             display:inline-block;
1080             .smallicon {
1081                 width:12px;
1082                 margin-left:4px;
1083                 vertical-align: inherit;
1084             }
1085         }
1086         .bulk-action-checkbox {
1087             margin-right: -3px;
1088         }
1089         .category-listing > ul > .listitem:first-child {
1090             position:relative;
1091         }
1092         .category-bulk-actions {
1093             margin: 0 0.5em 0.5em;
1094             position:relative;
1095         }
1096     }
1098     .detail-pair {
1099         border-bottom:1px solid #e1e1e8;
1100         margin:0 1rem;
1101         > * {
1102             display:inline-block;
1103             line-height:2.2rem;
1104         }
1105         .pair-key {
1106             font-weight:bold;
1107             vertical-align: top;
1108             span {
1109                 margin-right: 1rem;
1110                 display:block;
1111             }
1112         }
1113         .pair-value select {
1114             max-width:100%;
1115         }
1116     }
1118     .bulk-actions .detail-pair {
1119         > * {
1120             display:block;
1121             width:100%;
1122         }
1123     }
1125     .listing-pagination {
1126         text-align:center;
1127         .yui3-button {
1128             background-color:#FFF;
1129             border:0;
1130             margin:0.4rem 0.2rem 0.45rem;
1131             font-size:10.4px;
1132             &.active-page {
1133                 background-color:#E5EFFD;
1134             }
1135         }
1136     }
1137     .listing-pagination-totals {
1138         text-align:center;
1139         &.dimmed {
1140             .muted;
1141             margin:0.4rem 1rem 0.45rem;
1142         }
1143     }
1144     .select-a-category .notifymessage,
1145     .select-a-category .alert {
1146         margin: 1em;
1147     }
1150 #course-category-listings #course-listing .listitem .drag-handle {
1151     display: none;
1153 .jsenabled #course-category-listings #course-listing .listitem .drag-handle {
1154     display:inline-block;
1155     margin: 0 6px 0 0;
1156     cursor:pointer;
1159 .dir-rtl #course-category-listings {
1160     #category-listing,
1161     #course-listing {
1162         float: right;
1163         margin-left: 0;
1164     }
1166     .listitem {
1167         > div {
1168             > .float-left {
1169                 float:right;
1170             }
1171             > .float-right {
1172                 float:left;
1173                 text-align:left;
1174             }
1175         }
1176     }
1177     li {
1178         .tree-icon {
1179             margin: 2px 0 0 6px;
1180         }
1182         // Tree item indenting to represent depth.
1183         .tree-icon {margin-right:0;}
1184         li .tree-icon {margin-right:1em;}
1185         li li .tree-icon {margin-right:2em;}
1186         li li li .tree-icon {margin-right:3em;}
1187         li li li li .tree-icon {margin-right:4em;}
1188         li li li li li .tree-icon {margin-right:4.5em;}
1189         li li li li li li .tree-icon {margin-right:5em;}
1190         li li li li li li li .tree-icon {margin-right:5.5em;}
1191     }
1192     #category-listing {
1193         .listitem {
1194             > div {
1195                 margin-right:0.5em;
1196                 margin-left: 0;
1197                 > .ba-checkbox {
1198                   margin:-1px 0 0 0.5em;
1199                 }
1200             }
1202             &[data-selected='1'] > div > .ba-checkbox {
1203                 margin:0 0 0 0.5em;
1204             }
1205         }
1206         .course-count {
1207             margin-left:2rem;
1208         }
1209         .bulk-action-checkbox {
1210             margin-left: -3px;
1211             margin-right: 0;
1212         }
1213     }
1214     #course-listing {
1215         padding-right: 24px;
1216         .listitem {
1217             .idnumber {
1218                 color:#a1a1a8;
1219                 padding-right:2em;
1220             }
1221             .categoryname {
1222                 display:inline-block;
1223                 margin-right:1em;
1224                 margin-left:0;
1225             }
1226             .drag-handle {
1227                 margin: 0 6px 0 6px;
1228             }
1229             > div {
1230                 padding-left:1rem;
1231             }
1232         }
1233         .bulk-action-checkbox {
1234             vertical-align:middle;
1235             margin:-2px 0 0 6px;
1236         }
1237     }
1238   .detail-pair {
1239         > * {
1240             float: right;
1241             margin-right: 0;
1242         }
1243         .pair-key {
1244             span {
1245                 margin-right:0;
1246                 margin-left: 0;
1247             }
1248         }
1249         .pair-value {
1250             margin-right: 0.5em;
1251         }
1252     }
1255 /** Management header styling **/
1256 .coursecat-management-header {
1257     vertical-align:middle;
1258     h2 {
1259         display:inline-block;
1260         text-align:left;
1261     }
1262     > div {
1263         display:inline-block;
1264         float:right;
1265         line-height:40px;
1266         > div {
1267           margin-left:1em;
1268           margin: 10px 0;
1269           display:inline-block;
1270         }
1271     }
1272     select {
1273         max-width: 300px;
1274         cursor: pointer;
1275         padding: 0.4em 0.5em 0.45em 1em;
1276         vertical-align: baseline;
1277         white-space: nowrap;
1278     }
1279     .view-mode-selector {
1280         .moodle-actionmenu {
1281             white-space:nowrap;
1282             display:inline-block;
1283         }
1284         .moodle-actionmenu[data-enhanced].show .menu a {
1285             padding-left:1em;
1286         }
1287     }
1289 .dir-rtl .coursecat-management-header {
1290     h2 {
1291         text-align:right;
1292     }
1293     > div {
1294         float:left;
1295         margin-right:1em;
1296         margin-left: 0;
1297     }
1299 .course-being-dragged-proxy {
1300     border: 0;
1301     color: @linkColor;
1302     vertical-align:middle;
1303     padding: 0 0 0 4em;
1305 .course-being-dragged {
1306     .opacity(50);
1309 /**
1310  * Display sizes:
1311  * Large displays                   1200        +
1312  * Default displays                  980     1199
1313  * Tablets                           768      979
1314  * Small tablets and large phones    481      767
1315  * Phones                              0      480
1316  */
1317 @media (min-width: 1200px) and (max-width: 1600px) {
1318     #course-category-listings.columns-3 {
1319         background-color:transparent;
1320         border:0;
1322         #category-listing,
1323         #course-listing {
1324             width:50%;
1325         }
1326         #category-listing > div,
1327         #course-listing > div,
1328         #course-detail > div {
1329             border:1px solid #e1e1e8;
1330             background-color:#FFF;
1331         }
1332         #course-detail {
1333             width:100%;
1334             margin-top:1em;
1335         }
1336     }
1340 @media (max-width: 1199px) {
1341     #course-category-listings.columns-2,
1342     #course-category-listings.columns-3 {
1343         background-color:transparent;
1344         border:0;
1345         #category-listing,
1346         #course-listing,
1347         #course-detail {
1348             width:100%;
1349             margin:0 0 1em;
1350         }
1351         #category-listing > div,
1352         #course-listing > div,
1353         #course-detail > div {
1354             border:1px solid #e1e1e8;
1355             background-color:#FFF;
1356         }
1357     }