MDL-43688 dndupload: fixed positioning across themes
[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     }
93     .label {
94       .contentwithoutlink,
95       .activityinstance {
96         padding-right: 32px;
97         display: block;
98         height: inherit;
99       }
101       .mod-indent-outer {
102         padding-left: 24px;
103         display: block;
104       }
105     }
107     .filler {
108         width: 16px;
109         height: 16px;
110         padding: 0.3em;
111         display: inline-block;
112     }
114     .activity.editor_displayed {
115         a.editing_title,
116         .moodle-actionmenu {
117             display: none;
118         }
119         div.activityinstance {
120             padding-right: initial;
122             input {
123                 margin-bottom: initial;
124                 padding-top: initial;
125                 padding-bottom: initial;
126                 vertical-align: text-bottom;
127             }
128         }
129     }
132 .dir-rtl .section {
133     .activity {
134         .spinner {
135             left: auto;
136             right: 100%;
137         }
139         .mod-indent-outer {
140             /**
141              * Add appropriate padding such that nothing overlaps the
142              * absolute positioned move icon.
143              */
144             padding-left: initial;
145             padding-right: 32px;
146         }
148         /* The command block for each activity */
149         .actions {
150             left: 0;
151             right: auto;
152         }
154         .contentwithoutlink,
155         .activityinstance {
156             padding-left: 4px;
157             padding-right: initial;
158         }
159     }
162 .dir-rtl.editing .section {
163     .activity {
164         .editing_move {
165             /* Move the move icon to the start of the line */
166             left: auto;
167             right: 0;
168         }
170         &.editor_displayed {
171             div.activityinstance {
172                 padding-left: initial;
173             }
174         }
175     }
178 .activity img.activityicon {
179     margin-right: 6px;
180     vertical-align: text-bottom;
182 .dir-rtl .section .activity img.activityicon {
183     margin-left: 6px;
184     margin-right: 0;
186 .section .activity .activityinstance,
187 .section .activity .activityinstance div {
188     display: inline-block;
190 .editing {
191     .section {
192         .activity {
193             .contentwithoutlink,
194             .activityinstance {
195                 padding-right: 200px;
196             }
197         }
198     }
201 .dir-rtl.editing {
202     .section {
203         .activity {
204             .contentwithoutlink,
205             .activityinstance {
206                 padding-left: 200px;
207                 padding-right: 0;
208             }
209         }
210     }
213 .editing_show + .editing_assign,
214 .editing_hide + .editing_assign {
215     // if roles icon missing, add space
216     margin-left: 20px;
218 .section .activity .commands {
219     white-space: nowrap;
220     display: inline;
222 .section .activity.modtype_label.label {
223     font-weight: normal;
224     padding: .2em;
226 .section li.activity {
227     padding: .2em;
228     clear: both;
230 .section .activity .activityinstance .groupinglabel {
231     padding-left: 30px;
233 .dir-rtl .section .activity .activityinstance .groupinglabel {
234     padding-right: 30px;
236 .section .activity .availabilityinfo,
237 .section .activity .contentafterlink {
238     margin-top: 0.5em;
239     margin-left: 30px;
241 .dir-rtl .section .activity .availabilityinfo,
242 .dir-rtl .section .activity .contentafterlink {
243     margin-left: 0;
244     margin-right: 30px;
246 .section .activity .contentafterlink p {
247     margin: .5em 0;
249 .editing .section .activity:hover,
250 .editing .section .activity.action-menu-shown {
251     background-color: @grayLighter;
253 .course-content .current {
254     background-color: @infoBackground;
256 .course-content .section-summary {
257     border: 1px solid #DDD;
258     margin-top: 5px;
259     list-style: none;
261 .course-content .section-summary .section-title  {
262     margin: 2px 5px 10px 5px;
264 .course-content .section-summary .summarytext {
265     margin: 2px 5px 2px 5px;
267 .course-content .section-summary .section-summary-activities .activity-count {
268     .muted;
269     font-size: @fontSizeSmall;
270     margin: 3px;
271     white-space: nowrap;
272     display: inline-block;
274 .course-content .section-summary .summary {
275     margin-top: 5px;
277 .course-content .single-section {
278     margin-top: 1em;
280 .course-content .single-section .section-navigation {
281     display: block;
282     padding: 0.5em;
283     margin-bottom: -0.5em;
285 .course-content .single-section .section-navigation .title {
286     font-weight: bold;
287     font-size: 108%;
288     clear: both;
290 .course-content .single-section .section-navigation .mdl-left {
291     font-weight: normal;
292     float: left;
293     margin-right: 1em;
295 .dir-rtl .course-content .single-section .section-navigation .mdl-left {
296     float: right;
298 .course-content .single-section .section-navigation .mdl-left .larrow {
299     margin-right: 0.1em;
301 .course-content .single-section .section-navigation .mdl-right {
302     font-weight: normal;
303     float: right;
304     margin-left: 1em;
306 .dir-rtl .course-content .single-section .section-navigation .mdl-right {
307     float: left;
309 .course-content .single-section .section-navigation .mdl-right .rarrow {
310     margin-left: 0.1em;
312 .course-content .single-section .section-navigation .mdl-bottom {
313     margin-top: 0;
315 .course-content ul li.section.main {
316     border-bottom: 2px solid #eee;
317     margin-top: 0;
319 .course-content ul li.section.hidden {
320     opacity: 0.5;
322 .course-content ul.topics li.section .content,
323 .course-content ul.weeks li.section .content {
324     margin-right: 20px;
325     margin-left: 20px;
326     padding: 0;
329 .course-content {
330     margin-top: 0;
333 .course-content ul.topics li.section {
334     padding-bottom: 20px;
337 .course-content ul.topics li.section .summary {
338     margin-left: 25px;
341 .path-course-view .completionprogress {
342     margin-left: 25px
345 .path-course-view .completionprogress {
346     display: block;
347     float: right;
348     height: 20px;
349     position: relative;
350     z-index: 1000;
353 #page-site-index .subscribelink {
354     text-align: right;
356 #site-news-forum h2,
357 #frontpage-course-list h2,
358 #frontpage-category-names h2,
359 #frontpage-category-combo h2 {
360     margin-bottom: 9px;
362 .path-course-view a.reduce-sections {
363     padding-left: 0.2em;
365 .path-course-view .subscribelink {
366     text-align: right;
368 .path-course-view .unread {
369     margin-left: 30px;
371 .dir-rtl.path-course-view .unread {
372     margin-right: 30px;
374 .path-course-view .block.drag .header {
375     cursor: move;
377 .path-course-view .completionprogress {
378     text-align: right;
380 .dir-rtl.path-course-view .completionprogress {
381     text-align: left;
383 .path-course-view .single-section .completionprogress {
384     margin-right: 5px;
386 .path-course-view .section .summary {
387     line-height: normal;
390 .path-site li.activity > div,
391 .path-course-view li.activity > div {
392     position: relative;
393     padding: 0 16px 0 0; /* to accommodate the floated completion icon with highlighting */
395 .dir-rtl.path-site li.activity > div,
396 .dir-rtl.path-course-view li.activity > div {
397     position: relative;
398     padding: 0 0 0 16px;
400 .path-course-view li.activity span.autocompletion img {
401     vertical-align: text-bottom;
403 .path-course-view li.activity form.togglecompletion img {
404     max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
406 .path-course-view li.activity form.togglecompletion .ajaxworking {
407     width: 16px;
408     height: 16px;
409     position: absolute;
410     right: 22px;
411     top: 3px;
412     background: url([[pix:i/ajaxloader]]) no-repeat;
414 .dir-rtl.path-course-view .completionprogress {
415     float: none;
417 .dir-rtl.path-course-view li.activity form.togglecompletion .ajaxworking {
418     right: -22px;
421 li.section.hidden span.commands a.editing_hide,
422 li.section.hidden span.commands a.editing_show {
423     cursor: default;
425 ul.weeks h3.sectionname {
426     white-space: nowrap;
428 .editing ul.weeks h3.sectionname {
429     white-space: normal;
432 .single-section h3.sectionname {
433     text-align: center;
434     clear: both;
437 .section img.movetarget {
438     height: 16px;
439     width: 80px;
442 input.titleeditor {
443     width: 330px;
444     vertical-align: text-bottom;
447 span.editinstructions {
448     position: absolute;
449     top: 0;
450     margin-top: -22px;
451     margin-left: 30px;
452     line-height: 16px;
453     font-size: @fontSizeSmall;
454     padding: .1em .4em;
455     background-color: @infoBackground;
456     color: @infoText;
457     text-decoration: none;
458     z-index: 9999;
459     .box-shadow(2px 2px 5px 1px #ccc);
460     border: 1px solid @infoBorder;
462 .dir-rtl span.editinstructions {
465 /* Course drag and drop upload styles */
466 #dndupload-status {
467     position: fixed;
468     left:0;
469     width: 40%;
470     margin: 0 30%;
471     padding: 6px;
472     border: 1px solid @infoBorder;
473     text-align: center;
474     background: @infoBackground;
475     color: @infoText;
476     z-index: 1; // Required in order to have this above relatively positioned course content.
477     .box-shadow(2px 2px 5px 1px #ccc);
478     .border-radius(8px);
480 .dndupload-preview {
481     color: #909090;
482     border: 1px dashed #909090;
483     list-style: none;
484     margin-top: .2em;
485     padding: .3em;
487 .dndupload-preview img.icon {
488     vertical-align: text-bottom;
489     padding: 0;
491 .dndupload-progress-outer {
492     .progress;
494 .dndupload-progress-inner {
495     .progress .bar;
497 .dndupload-hidden {
498     display: none;
501 /* COURSES LISTINGS AND COURSE SUMMARY */
502 #page-course-pending .singlebutton,
503 #page-course-index .singlebutton,
504 #page-course-index-category .singlebutton,
505 #page-course-editsection .singlebutton {
506     text-align: center;
508 #page-admin-course-manage #movecourses td img {
509     margin: 0 .22em;
510     vertical-align: text-bottom;
512 #page-admin-course-manage #movecourses td img.icon {
513     padding: 0;
516 #coursesearch {
517     margin-top: 1em;
518     text-align: center;
521 #page-course-pending .pendingcourserequests {
522     margin-bottom: 1em;
524 #page-course-pending .pendingcourserequests .singlebutton {
525     display: inline;
527 #page-course-pending .pendingcourserequests .cell {
528     padding: 0 5px;
530 #page-course-pending .pendingcourserequests .cell.c6 {
531     white-space: nowrap;
534 .coursebox {
535     margin-bottom: 15px;
536     border: 1px dotted #ddd;
537     .border-radius(4px);
538     padding: 5px;
541 .coursebox > .info > .coursename a {
542     display:block;
543     background-image:url([[pix:moodle|i/course]]);
544     background-repeat: no-repeat;
545     padding-left:21px;
546     background-position: left 0.5em;
548 .dir-rtl .coursebox > .info > .coursename a {
549     padding-left: 0;
550     padding-right: 21px;
551     background-position: right;
553 .coursebox.remotehost > .info > .categoryname a {
554     background-image:url([[pix:moodle|i/mnethost]]);
556 .coursebox .content .teachers,
557 .coursebox .content .courseimage,
558 .coursebox .content .coursefile {
559     float:left;
560     width:40%;
561     clear:left;
563 .dir-rtl .coursebox > .info > .coursename,
564 .dir-rtl .coursebox .teachers,
565 .dir-rtl .coursebox .content .courseimage,
566 .dir-rtl .coursebox .content .coursefile {
567     float: right;
568     clear: right;
570 .coursebox > .info > h3.coursename {
571     margin: 5px;
573 .coursebox > .info > .coursename {
574     margin: 5px;
575     padding: 0;
577 .coursebox .content .teachers li {
578     list-style-type:none;
579     padding:0;
580     margin:0;
582 .coursebox .enrolmenticons {
583     padding:3px 0;
584     float:right;
586 .coursebox .moreinfo {
587     padding:3px 0;
588     float:right;
590 .coursebox .enrolmenticons img,
591 .coursebox .moreinfo img {
592     margin:0 .2em;
594 .coursebox .content {
595     clear:both;
597 .coursebox .content .summary,
598 .coursebox .content .coursecat {
599     float:right;
600     width: 55%;
602 .coursebox .content .coursecat {
603     text-align:right;
604     clear:right;
606 .coursebox.remotecoursebox .remotecourseinfo {
607     float:left;
608     width: 40%;
610 .coursebox .content .courseimage img {
611     max-width:100px;
612     max-height:100px;
614 .coursebox .content .coursecat,
615 .coursebox .content .summary,
616 .coursebox .content .courseimage,
617 .coursebox .content .coursefile,
618 .coursebox .content .teachers,
619 .coursebox.remotecoursebox .remotecourseinfo {
620     margin:3px 5px;
621     padding:0;
624 .dir-rtl .coursebox > .info > .categoryname a {
625     padding-left:0;
626     padding-right:21px;
627     background-position: center right;
629 .dir-rtl .coursebox > .info > .categoryname,
630 .dir-rtl .coursebox .teachers,
631 .dir-rtl .coursebox .content .courseimage,
632 .dir-rtl .coursebox .content .coursefile {
633     float:right;
634     clear:right;
636 .dir-rtl .coursebox .enrolmenticons,
637 .dir-rtl .coursebox .moreinfo {
638     float:left;
640 .dir-rtl .coursebox .summary,
641 .dir-rtl .coursebox .coursecat {
642     float:left;
644 .dir-rtl .coursebox .coursecat {
645     text-align:left;
646     clear:left;
649 .coursebox.collapsed {
650     margin-bottom:0;
652 .coursebox.collapsed > .content {
653     display:none;
655 .courses .coursebox.collapsed {
656     border:1px solid #eeeeee;
657     padding:5px;
660 .courses .coursebox.even {
661     background-color:#f6f6f6;
663 .courses .coursebox:hover,
664 .course_category_tree .courses > .paging.paging-morelink:hover {
665     background-color:#eeeeee;
668 .course_category_tree .category .numberofcourse {
669     font-size: @fontSizeSmall;
672 .course_category_tree .controls {
673     visibility: hidden;
675 .course_category_tree .controls div {
676     display:inline;
677     cursor:pointer;
679 .jsenabled .course_category_tree .controls {
680     visibility: visible;
682 .course_category_tree .controls {
683     margin-bottom:5px;
684     text-align:right;
685     float:right;
687 .course_category_tree .controls div {
688     padding-right:2em;
689     font-size:75%;
692 .course_category_tree .category > .info > .categoryname{
693     background-image:url([[pix:moodle|t/collapsed_empty]]);
694     background-repeat: no-repeat;
695     padding:2px 18px;
696     margin:3px;
697     background-position:center left;
699 .dir-rtl .course_category_tree .category > .info > .categoryname {
700     background-image:url([[pix:moodle|t/collapsed_empty_rtl]]);
701     background-position:center right;
703 .course_category_tree .category.with_children > .info > .categoryname {
704     background-image:url([[pix:moodle|t/expanded]]);
705     cursor: pointer;
707 .course_category_tree .category.with_children.collapsed >.info > .categoryname {
708     background-image:url([[pix:moodle|t/collapsed]]);
710 .dir-rtl .course_category_tree .category.with_children.collapsed > .info > .categoryname {
711     background-image:url([[pix:moodle|t/collapsed_rtl]]);
713 .course_category_tree .category.collapsed>.content {
714     display:none;
717 .course_category_tree .category >.info {
718     .well;
719     min-height:0;
720     padding:0;
721     margin:3px 0;
722     margin-bottom:3px;
723     clear: both;
725 .course_category_tree.frontpage-category-names .category >.info {
726     background:none;
727     border:none;
728     margin:0;
730 .course_category_tree .category > .content {
731     padding-left:16px;
734 .dir-rtl .course_category_tree .category > .content {
735     padding-left:0;
736     padding-right:16px;
739 .course_category_tree .subcategories > .paging,
740 .courses > .paging {
741     margin:0;
742     padding:5px;
743     text-align:center;
746 .courses > .paging.paging-morelink,
747 .course_category_tree .subcategories > .paging.paging-morelink {
748     text-align:left;
751 .course_category_tree .paging.paging-morelink a {
752     font-size: @fontSizeSmall;
754 .dir-rtl .courses > .paging.paging-morelink,
755 .dir-rtl .course_category_tree .paging.paging-morelink {
756     text-align:right;
759 #page-course-index-category .generalbox.info {
760     margin-bottom: 15px;
761     border: 1px dotted #ddd;
762     .border-radius(4px);
763     padding: 5px;
766 #page-course-index-category .categorypicker {
767     text-align: center;
768     margin: 10px 0 20px;
771 .section {
772     .summary,
773     .activity {
774         .iconsmall {
775             width: 16px;
776             height: 16px;
777         }
778     }
779     .editing_title {
780         .iconsmall {
781             width: 12px;
782             height: 12px;
783             margin: 8px 8px 0px 0;
784             padding: 4px 8px 0px 0;
785             vertical-align: text-bottom;
786         }
787     }
788     .moodle-actionmenu {
789         .iconsmall {
790             max-width: none !important; /** reset sets 100% !important which breaks on IE8 without this !important */
791             width:16px;
792             height:16px;
793             padding: 4px;
794             vertical-align: text-bottom;
795         }
796     }
797     .moodle-actionmenu[data-enhanced] {
798         .menu {
799             img {
800               width: 12px;
801               height: 12px;
802             }
803         }
804     }
807 .dir-rtl .section {
808     .editing_title {
809         .iconsmall {
810             margin: 8px 0 0 8px;
811             padding: 4px 0 0 8px;
812         }
813     }
816 /**
817  * Course management page
818  * Palette
819  *
820  * Background (reg)         #F5F5F5
821  * Background (light        #fafafa
822  * Background (highlight)   #ddffaa
823  * Borders                  #e1e1e8
824  */
825 #course-category-listings {
826     background-color:#fff;
827     margin-bottom:200px;
829     /** Two column layout */
830     &.columns-2 {
831         > #course-listing > div {
832             position:relative;
833             left:-1px;
834         }
835     }
836     /** Three column layout */
837     &.columns-3 > #course-listing > div {
838         height:100%;
839     }
841     > div > div {
842         min-height:300px;
843         border:1px solid #e1e1e8;
844         > ul.ml > li:first-child > div {
845             border-top:0;
846         }
847     }
848     h3 {
849         margin:0;
850         padding:0.4rem 0.6rem 0.3rem;
851         background-color:#F5F5F5;
852         border-bottom:1px solid #e1e1e8;
853     }
854     h4 {
855         margin:1rem 0 0;
856         padding:0.6rem 1rem 0.5rem;
857     }
858     .moodle-actionmenu {
859         white-space:nowrap;
860     }
862     .moodle-actionmenu[data-enhance] {
863         .toggle-display {
864             img {
865                 width: auto;
866             }
867             &.textmenu {
868                 padding-right: 4px;
870                 .caret {
871                     margin-top: 12px;
872                 }
873             }
874         }
875     }
877     .listing-actions {
878         text-align:center;
879         padding:0.4rem 0.3rem 0.3rem;
880         line-height:2.2em;
881         > .moodle-actionmenu {
882             display:inline-block;
883             .menu a {
884                 padding-left:1rem;
885             }
886         }
887         .moodle-actionmenu:not([data-enhanced]) {
888             li {line-height:normal;}
889             > .menubar a {
890                 color:inherit;
891                 display:inline-block;
892                 > img {
893                     display:none;
894                 }
895                 .caret {
896                     display: none;
897                 }
898             }
899             > .menu .menu-action-text {
900                 display:inline-block;
901             }
902         }
903     }
904     ul.ml {
905         list-style: none;
906         margin:1rem 0;
907         ul.ml {
908             margin:0;
909         }
910     }
911     li {
912         line-height:2.2em;
913         > div {
914             &:hover {
915                 background-color:#fafafa;
916             }
917         }
918         .tree-icon {
919             margin: 2px 6px 0 0;
920             width:12px;
921             vertical-align:inherit;
922         }
923         &[data-selected='1'] {
924             > div {
925                 background-color:#FFFFD8;
926                 border-top-color: #e1e1e8;
927                 border-bottom-color:#F5F5F5;
928             }
929             li:first-of-type > div,
930             &[data-expandable='0']+li > div {
931                 border-top-color:#e1e1e8;
932             }
933             &:last-of-type > div {
934                 border-bottom-color:#e1e1e8;
935             }
936         }
938         // Tree item indenting to represent depth.
939         .tree-icon {margin-left:0;}
940         li .tree-icon {margin-left:1em;}
941         li li .tree-icon {margin-left:2em;}
942         li li li .tree-icon {margin-left:3em;}
943         li li li li .tree-icon {margin-left:4em;}
944         li li li li li .tree-icon {margin-left:4.5em;}
945         li li li li li li .tree-icon {margin-left:5em;}
946         li li li li li li li .tree-icon {margin-left:5.5em;}
948         &+li > div,
949         &:first-child > div {
950             border-top-color:#F5F5F5;
951         }
952     }
954     .item-actions {
955         margin-right:1em;
956         display:inline-block;
957         display:initial;
958         img {
959             margin: 0 4px;
960             height:12px;
961             padding: 0;
962             vertical-align: inherit;
963         }
964         &.show .menu {
965             a {
966                 padding:4px 1em 4px 4px;
967             }
968             img {
969                 width: 12px;
970                 max-width:none;
971             }
972         }
973         .menu-action-text {
974             vertical-align: inherit;
975         }
976     }
978     .listitem {
979         > div {
980             > .float-left {
981                 float:left;
982             }
983             > .float-right {
984                 float:right;
985                 text-align:right;
986             }
987             .item-actions {
988                 .action-show {
989                     display:none;
990                 }
991                 .action-hide {
992                     display:inline;
993                 }
994             }
995             .without-actions {
996                 color: #333;
997             }
998             .idnumber {
999                 color:#a1a1a8;
1000                 margin-right:2em;
1001             }
1002         }
1003         // The category or course is hidden.
1004         &[data-visible="0"] {
1005             .muted;
1006             > div {
1007                 > a {
1008                     .muted;
1009                 }
1010                 .item-actions {
1011                     .action-show {
1012                         display:inline;
1013                     }
1014                     .action-hide {
1015                         display:none;
1016                     }
1017                 }
1018             }
1019         }
1020         &.highlight {
1021             background-color:transparent;
1022             > div,
1023             > div:hover,
1024             &[data-selected='1'] > div {
1025                 background-color:#ddffaa;
1026             }
1027         }
1028     }
1030     #course-listing {
1031         .listitem {
1032             .categoryname {
1033                 display:inline-block;
1034                 margin-left:1em;
1035                 color:#a1a1a8;
1036             }
1037             .coursename {
1038                 display:inline-block;
1039             }
1040             > div {
1041                 padding-left:1rem;
1042             }
1043         }
1044         > .firstpage .listitem:first-child > div .item-actions .action-moveup,
1045         > .lastpage .listitem:last-child > div .item-actions .action-movedown {
1046           display: none;
1047         }
1048         .bulk-action-checkbox {
1049             margin:-2px 6px 0 0;
1050         }
1051     }
1052     #category-listing {
1053         .listitem.collapsed > ul.ml {
1054             display: none;
1055         }
1056         .listitem {
1057             > div {
1058                 > .ba-checkbox {
1059                     width:2.2em;
1060                     text-align:center;
1061                     margin:-1px 0.5em 0 0;
1062                     padding-top:2px;
1063                 }
1064             }
1065             &.highlight > div > .ba-checkbox {
1066                 background-color:#ddffaa;
1067             }
1068             &[data-selected='1'] > div > .ba-checkbox {
1069                 margin:0 0.5em 0 0;
1070                 padding:0;
1071                 background-color: inherit;
1072             }
1073             &:first-child > div .item-actions .action-moveup,
1074             &:last-child > div .item-actions .action-movedown {
1075               display: none;
1076             }
1077         }
1078         .course-count {
1079             color:#a1a1a8;
1080             margin-right:2rem;
1081             min-width:3.5em;
1082             display:inline-block;
1083             .smallicon {
1084                 width:12px;
1085                 margin-left:4px;
1086                 vertical-align: inherit;
1087             }
1088         }
1089         .bulk-action-checkbox {
1090             margin-right: -3px;
1091         }
1092         .category-listing > ul > .listitem:first-child {
1093             position:relative;
1094         }
1095         .category-bulk-actions {
1096             margin: 0 0.5em 0.5em;
1097             position:relative;
1098         }
1099     }
1101     .detail-pair {
1102         border-bottom:1px solid #e1e1e8;
1103         margin:0 1rem;
1104         > * {
1105             display:inline-block;
1106             line-height:2.2rem;
1107         }
1108         .pair-key {
1109             font-weight:bold;
1110             vertical-align: top;
1111             span {
1112                 margin-right: 1rem;
1113                 display:block;
1114             }
1115         }
1116         .pair-value select {
1117             max-width:100%;
1118         }
1119     }
1121     .bulk-actions .detail-pair {
1122         > * {
1123             display:block;
1124             width:100%;
1125         }
1126     }
1128     .listing-pagination {
1129         text-align:center;
1130         .yui3-button {
1131             background-color:#FFF;
1132             border:0;
1133             margin:0.4rem 0.2rem 0.45rem;
1134             font-size:10.4px;
1135             &.active-page {
1136                 background-color:#E5EFFD;
1137             }
1138         }
1139     }
1140     .listing-pagination-totals {
1141         text-align:center;
1142         &.dimmed {
1143             .muted;
1144             margin:0.4rem 1rem 0.45rem;
1145         }
1146     }
1147     .select-a-category .notifymessage,
1148     .select-a-category .alert {
1149         margin: 1em;
1150     }
1153 #course-category-listings #course-listing .listitem .drag-handle {
1154     display: none;
1156 .jsenabled #course-category-listings #course-listing .listitem .drag-handle {
1157     display:inline-block;
1158     margin: 0 6px 0 0;
1159     cursor:pointer;
1162 .dir-rtl #course-category-listings {
1163     #category-listing,
1164     #course-listing {
1165         float: right;
1166         margin-left: 0;
1167     }
1169     .listitem {
1170         > div {
1171             > .float-left {
1172                 float:right;
1173             }
1174             > .float-right {
1175                 float:left;
1176                 text-align:left;
1177             }
1178         }
1179     }
1180     li {
1181         .tree-icon {
1182             margin: 2px 0 0 6px;
1183         }
1185         // Tree item indenting to represent depth.
1186         .tree-icon {margin-right:0;}
1187         li .tree-icon {margin-right:1em;}
1188         li li .tree-icon {margin-right:2em;}
1189         li li li .tree-icon {margin-right:3em;}
1190         li li li li .tree-icon {margin-right:4em;}
1191         li li li li li .tree-icon {margin-right:4.5em;}
1192         li li li li li li .tree-icon {margin-right:5em;}
1193         li li li li li li li .tree-icon {margin-right:5.5em;}
1194     }
1195     #category-listing {
1196         .listitem {
1197             > div {
1198                 margin-right:0.5em;
1199                 margin-left: 0;
1200                 > .ba-checkbox {
1201                   margin:-1px 0 0 0.5em;
1202                 }
1203             }
1205             &[data-selected='1'] > div > .ba-checkbox {
1206                 margin:0 0 0 0.5em;
1207             }
1208         }
1209         .course-count {
1210             margin-left:2rem;
1211         }
1212         .bulk-action-checkbox {
1213             margin-left: -3px;
1214             margin-right: 0;
1215         }
1216     }
1217     #course-listing {
1218         padding-right: 24px;
1219         .listitem {
1220             .idnumber {
1221                 color:#a1a1a8;
1222                 padding-right:2em;
1223             }
1224             .categoryname {
1225                 display:inline-block;
1226                 margin-right:1em;
1227                 margin-left:0;
1228             }
1229             .drag-handle {
1230                 margin: 0 6px 0 6px;
1231             }
1232             > div {
1233                 padding-left:1rem;
1234             }
1235         }
1236         .bulk-action-checkbox {
1237             vertical-align:middle;
1238             margin:-2px 0 0 6px;
1239         }
1240     }
1241   .detail-pair {
1242         > * {
1243             float: right;
1244             margin-right: 0;
1245         }
1246         .pair-key {
1247             span {
1248                 margin-right:0;
1249                 margin-left: 0;
1250             }
1251         }
1252         .pair-value {
1253             margin-right: 0.5em;
1254         }
1255     }
1258 /** Management header styling **/
1259 .coursecat-management-header {
1260     vertical-align:middle;
1261     h2 {
1262         display:inline-block;
1263         text-align:left;
1264     }
1265     > div {
1266         display:inline-block;
1267         float:right;
1268         line-height:40px;
1269         > div {
1270           margin-left:1em;
1271           margin: 10px 0;
1272           display:inline-block;
1273         }
1274     }
1275     select {
1276         max-width: 300px;
1277         cursor: pointer;
1278         padding: 0.4em 0.5em 0.45em 1em;
1279         vertical-align: baseline;
1280         white-space: nowrap;
1281     }
1282     .view-mode-selector {
1283         .moodle-actionmenu {
1284             white-space:nowrap;
1285             display:inline-block;
1286         }
1287         .moodle-actionmenu[data-enhanced].show .menu a {
1288             padding-left:1em;
1289         }
1290     }
1292 .dir-rtl .coursecat-management-header {
1293     h2 {
1294         text-align:right;
1295     }
1296     > div {
1297         float:left;
1298         margin-right:1em;
1299         margin-left: 0;
1300     }
1302 .course-being-dragged-proxy {
1303     border: 0;
1304     color: @linkColor;
1305     vertical-align:middle;
1306     padding: 0 0 0 4em;
1308 .course-being-dragged {
1309     .opacity(50);
1312 /**
1313  * Display sizes:
1314  * Large displays                   1200        +
1315  * Default displays                  980     1199
1316  * Tablets                           768      979
1317  * Small tablets and large phones    481      767
1318  * Phones                              0      480
1319  */
1320 @media (min-width: 1200px) and (max-width: 1600px) {
1321     #course-category-listings.columns-3 {
1322         background-color:transparent;
1323         border:0;
1325         #category-listing,
1326         #course-listing {
1327             width:50%;
1328         }
1329         #category-listing > div,
1330         #course-listing > div,
1331         #course-detail > div {
1332             border:1px solid #e1e1e8;
1333             background-color:#FFF;
1334         }
1335         #course-detail {
1336             width:100%;
1337             margin-top:1em;
1338         }
1339     }
1343 @media (max-width: 1199px) {
1344     #course-category-listings.columns-2,
1345     #course-category-listings.columns-3 {
1346         background-color:transparent;
1347         border:0;
1348         #category-listing,
1349         #course-listing,
1350         #course-detail {
1351             width:100%;
1352             margin:0 0 1em;
1353         }
1354         #category-listing > div,
1355         #course-listing > div,
1356         #course-detail > div {
1357             border:1px solid #e1e1e8;
1358             background-color:#FFF;
1359         }
1360     }