Merge branch 'MDL-42711-master' of git://github.com/nebgor/moodle
[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 .site-topic ul.section,
38 .course-content ul.section {
39     margin: 1em;
40 }
41 .section {
42     .spinner {
43         height: 16px;
44         width: 16px;
45     }
46     .activity {
47         .spinner {
48             left: 100%;
49             position: absolute;
50             vertical-align: text-bottom;
51         }
53         .editing_move {
54             /* Move the move icon to the start of the line */
55             position: absolute;
56             left: 0;
57             top: 0;
58         }
60         .mod-indent-outer {
61             /**
62              * Add appropriate padding such that nothing overlaps the
63              * absolute positioned move icon.
64              */
65             padding-left: 32px;
66         }
68         /* The command block for each activity */
69         .actions {
70             position: absolute;
71             right: 0;
72             top: 0;
73         }
75         .contentwithoutlink,
76         .activityinstance {
78             min-width: 40%;
79             display: table-cell;
80             padding-right: 4px;
81             min-height: 2em;
83             .dimmed {
84                 img.activityicon {
85                   opacity: 0.5;
86                   filter: alpha(opacity=50);
87                 }
88             }
89         }
90     }
92     .filler {
93         width: 16px;
94         height: 16px;
95         padding: 0.3em;
96         display: inline-block;
97     }
99     .activity.editor_displayed {
100         a.editing_title,
101         .moodle-actionmenu {
102             display: none;
103         }
104         div.activityinstance {
105             padding-right: initial;
107             input {
108                 margin-bottom: initial;
109                 padding-top: initial;
110                 padding-bottom: initial;
111                 vertical-align: text-bottom;
112             }
113         }
114     }
117 .dir-rtl .section {
118     .activity {
119         .spinner {
120             left: auto;
121             right: 100%;
122         }
124         .mod-indent-outer {
125             /**
126              * Add appropriate padding such that nothing overlaps the
127              * absolute positioned move icon.
128              */
129             padding-left: initial;
130             padding-right: 32px;
131         }
133         /* The command block for each activity */
134         .actions {
135             left: 0;
136             right: auto;
137         }
139         .contentwithoutlink,
140         .activityinstance {
141             padding-left: 4px;
142             padding-right: initial;
143         }
144     }
147 .dir-rtl.editing .section {
148     .activity {
149         .editing_move {
150             /* Move the move icon to the start of the line */
151             left: auto;
152             right: 0;
153         }
155         &.editor_displayed {
156             div.activityinstance {
157                 padding-left: initial;
158             }
159         }
160     }
163 .activity img.activityicon {
164     margin-right: 6px;
165     vertical-align: text-bottom;
167 .dir-rtl .section .activity img.activityicon {
168     margin-left: 6px;
169     margin-right: 0;
171 .section .activity .activityinstance,
172 .section .activity .activityinstance div {
173     display: inline-block;
175 .editing {
176     .section {
177         .activity {
178             .contentwithoutlink,
179             .activityinstance {
180                 padding-right: 200px;
181             }
182         }
183     }
186 .dir-rtl.editing {
187     .section {
188         .activity {
189             .contentwithoutlink,
190             .activityinstance {
191                 padding-left: 200px;
192                 padding-right: 0;
193             }
194         }
195     }
198 .editing_show + .editing_assign,
199 .editing_hide + .editing_assign {
200     // if roles icon missing, add space
201     margin-left: 20px;
203 .section .activity .commands {
204     white-space: nowrap;
205     display: inline;
207 .section .activity.modtype_label.label {
208     font-weight: normal;
209     padding: .2em;
211 .section li.activity {
212     padding: .2em;
213     clear: both;
215 .section .activity .activityinstance .groupinglabel {
216     padding-left: 30px;
218 .dir-rtl .section .activity .activityinstance .groupinglabel {
219     padding-right: 30px;
221 .section .activity .availabilityinfo,
222 .section .activity .contentafterlink {
223     margin-top: 0.5em;
224     margin-left: 30px;
226 .dir-rtl .section .activity .availabilityinfo,
227 .dir-rtl .section .activity .contentafterlink {
228     margin-left: 0;
229     margin-right: 30px;
231 .section .activity .contentafterlink p {
232     margin: .5em 0;
234 .editing .section .activity:hover,
235 .editing .section .activity.action-menu-shown {
236     background-color: @grayLighter;
238 .course-content .current {
239     background-color: @infoBackground;
241 .course-content .section-summary {
242     border: 1px solid #DDD;
243     margin-top: 5px;
244     list-style: none;
246 .course-content .section-summary .section-title  {
247     margin: 2px 5px 10px 5px;
249 .course-content .section-summary .summarytext {
250     margin: 2px 5px 2px 5px;
252 .course-content .section-summary .section-summary-activities .activity-count {
253     .muted;
254     font-size: @fontSizeSmall;
255     margin: 3px;
256     white-space: nowrap;
257     display: inline-block;
259 .course-content .section-summary .summary {
260     margin-top: 5px;
262 .course-content .single-section {
263     margin-top: 1em;
265 .course-content .single-section .section-navigation {
266     display: block;
267     padding: 0.5em;
268     margin-bottom: -0.5em;
270 .course-content .single-section .section-navigation .title {
271     font-weight: bold;
272     font-size: 108%;
273     clear: both;
275 .course-content .single-section .section-navigation .mdl-left {
276     font-weight: normal;
277     float: left;
278     margin-right: 1em;
280 .dir-rtl .course-content .single-section .section-navigation .mdl-left {
281     float: right;
283 .course-content .single-section .section-navigation .mdl-left .larrow {
284     margin-right: 0.1em;
286 .course-content .single-section .section-navigation .mdl-right {
287     font-weight: normal;
288     float: right;
289     margin-left: 1em;
291 .dir-rtl .course-content .single-section .section-navigation .mdl-right {
292     float: left;
294 .course-content .single-section .section-navigation .mdl-right .rarrow {
295     margin-left: 0.1em;
297 .course-content .single-section .section-navigation .mdl-bottom {
298     margin-top: 0;
300 .course-content ul li.section.main {
301     border-bottom: 2px solid #eee;
302     margin-top: 0;
304 .course-content ul li.section.hidden {
305     opacity: 0.5;
307 .course-content ul.topics li.section .content,
308 .course-content ul.weeks li.section .content {
309     margin-right: 20px;
310     margin-left: 20px;
311     padding: 0;
314 .course-content {
315     margin-top: 0;
318 .course-content ul.topics li.section {
319     padding-bottom: 20px;
322 .course-content ul.topics li.section .summary {
323     margin-left: 25px;
326 .path-course-view .completionprogress {
327     margin-left: 25px
330 .path-course-view .completionprogress {
331     display: block;
332     float: right;
333     height: 20px;
334     position: relative;
335     z-index: 1000;
338 #page-site-index .subscribelink {
339     text-align: right;
341 #site-news-forum h2,
342 #frontpage-course-list h2,
343 #frontpage-category-names h2,
344 #frontpage-category-combo h2 {
345     margin-bottom: 9px;
347 .path-course-view a.reduce-sections {
348     padding-left: 0.2em;
350 .path-course-view .subscribelink {
351     text-align: right;
353 .path-course-view .unread {
354     margin-left: 30px;
356 .dir-rtl.path-course-view .unread {
357     margin-right: 30px;
359 .path-course-view .block.drag .header {
360     cursor: move;
362 .path-course-view .completionprogress {
363     text-align: right;
365 .dir-rtl.path-course-view .completionprogress {
366     text-align: left;
368 .path-course-view .single-section .completionprogress {
369     margin-right: 5px;
371 .path-course-view .section .summary {
372     line-height: normal;
375 .path-site li.activity > div,
376 .path-course-view li.activity > div {
377     position: relative;
378     padding: 0 16px 0 0; /* to accommodate the floated completion icon with highlighting */
380 .dir-rtl.path-site li.activity > div,
381 .dir-rtl.path-course-view li.activity > div {
382     position: relative;
383     padding: 0 0 0 16px;
385 .path-course-view li.activity span.autocompletion img {
386     vertical-align: text-bottom;
388 .path-course-view li.activity form.togglecompletion img {
389     max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
391 .path-course-view li.activity form.togglecompletion .ajaxworking {
392     width: 16px;
393     height: 16px;
394     position: absolute;
395     right: 22px;
396     top: 3px;
397     background: url([[pix:i/ajaxloader]]) no-repeat;
399 .dir-rtl.path-course-view .completionprogress {
400     float: none;
402 .dir-rtl.path-course-view li.activity form.togglecompletion .ajaxworking {
403     right: -22px;
406 li.section.hidden span.commands a.editing_hide,
407 li.section.hidden span.commands a.editing_show {
408     cursor: default;
410 ul.weeks h3.sectionname {
411     white-space: nowrap;
413 .editing ul.weeks h3.sectionname {
414     white-space: normal;
417 .single-section h3.sectionname {
418     text-align: center;
419     clear: both;
422 .section img.movetarget {
423     height: 16px;
424     width: 80px;
427 input.titleeditor {
428     width: 330px;
429     vertical-align: text-bottom;
432 span.editinstructions {
433     position: absolute;
434     top: 0;
435     margin-top: -22px;
436     margin-left: 30px;
437     line-height: 16px;
438     font-size: @fontSizeSmall;
439     padding: .1em .4em;
440     background-color: @infoBackground;
441     color: @infoText;
442     text-decoration: none;
443     z-index: 9999;
444     .box-shadow(2px 2px 5px 1px #ccc);
445     border: 1px solid @infoBorder;
447 .dir-rtl span.editinstructions {
450 /* Course drag and drop upload styles */
451 #dndupload-status {
452     width: 40%;
453     margin: 0 30%;
454     padding: 6px;
455     border: 1px solid @infoBorder;
456     text-align: center;
457     background: @infoBackground;
458     color: @infoText;
459     position: absolute;
460     z-index: 9999;
461     .box-shadow(2px 2px 5px 1px #ccc);
462     .border-bottom-radius(8px);
463     z-index: 0;
465 .dndupload-preview {
466     color: #909090;
467     border: 1px dashed #909090;
468     list-style: none;
469     margin-top: .2em;
470     padding: .3em;
472 .dndupload-preview img.icon {
473     vertical-align: text-bottom;
474     padding: 0;
476 .dndupload-progress-outer {
477     .progress;
479 .dndupload-progress-inner {
480     .progress .bar;
482 .dndupload-hidden {
483     display: none;
486 /* COURSES LISTINGS AND COURSE SUMMARY */
487 #page-course-pending .singlebutton,
488 #page-course-index .singlebutton,
489 #page-course-index-category .singlebutton,
490 #page-course-editsection .singlebutton {
491     text-align: center;
493 #page-admin-course-manage #movecourses td img {
494     margin: 0 .22em;
495     vertical-align: text-bottom;
497 #page-admin-course-manage #movecourses td img.icon {
498     padding: 0;
501 #coursesearch {
502     margin-top: 1em;
503     text-align: center;
506 #page-course-pending .pendingcourserequests {
507     margin-bottom: 1em;
509 #page-course-pending .pendingcourserequests .singlebutton {
510     display: inline;
512 #page-course-pending .pendingcourserequests .cell {
513     padding: 0 5px;
515 #page-course-pending .pendingcourserequests .cell.c6 {
516     white-space: nowrap;
519 .coursebox {
520     margin-bottom: 15px;
521     border: 1px dotted #ddd;
522     .border-radius(4px);
523     padding: 5px;
526 .coursebox > .info > .coursename a {
527     display:block;
528     background-image:url([[pix:moodle|i/course]]);
529     background-repeat: no-repeat;
530     padding-left:21px;
531     background-position: left 0.5em;
533 .coursebox.remotehost > .info > .categoryname a {
534     background-image:url([[pix:moodle|i/mnethost]]);
536 .coursebox .content .teachers,
537 .coursebox .content .courseimage,
538 .coursebox .content .coursefile {
539     float:left;
540     width:40%;
541     clear:left;
543 .coursebox > .info > h3.coursename {
544     margin: 5px;
546 .coursebox > .info > .coursename {
547     margin: 5px;
548     padding: 0;
550 .coursebox .content .teachers li {
551     list-style-type:none;
552     padding:0;
553     margin:0;
555 .coursebox .enrolmenticons {
556     padding:3px 0;
557     float:right;
559 .coursebox .moreinfo {
560     padding:3px 0;
561     float:right;
563 .coursebox .enrolmenticons img,
564 .coursebox .moreinfo img {
565     margin:0 .2em;
567 .coursebox .content {
568     clear:both;
570 .coursebox .content .summary,
571 .coursebox .content .coursecat {
572     float:right;
573     width: 55%;
575 .coursebox .content .coursecat {
576     text-align:right;
577     clear:right;
579 .coursebox.remotecoursebox .remotecourseinfo {
580     float:left;
581     width: 40%;
583 .coursebox .content .courseimage img {
584     max-width:100px;
585     max-height:100px;
587 .coursebox .content .coursecat,
588 .coursebox .content .summary,
589 .coursebox .content .courseimage,
590 .coursebox .content .coursefile,
591 .coursebox .content .teachers,
592 .coursebox.remotecoursebox .remotecourseinfo {
593     margin:3px 5px;
594     padding:0;
597 .dir-rtl .coursebox > .info > .categoryname a {
598     padding-left:0;
599     padding-right:21px;
600     background-position: center right;
602 .dir-rtl .coursebox > .info > .categoryname,
603 .dir-rtl .coursebox .teachers,
604 .dir-rtl .coursebox .content .courseimage,
605 .dir-rtl .coursebox .content .coursefile {
606     float:right;
607     clear:right;
609 .dir-rtl .coursebox .enrolmenticons,
610 .dir-rtl .coursebox .moreinfo {
611     float:left;
613 .dir-rtl .coursebox .summary,
614 .dir-rtl .coursebox .coursecat {
615     float:left;
617 .dir-rtl .coursebox .coursecat {
618     text-align:left;
619     clear:left;
622 .coursebox.collapsed {
623     margin-bottom:0;
625 .coursebox.collapsed > .content {
626     display:none;
628 .courses .coursebox.collapsed {
629     border:1px solid #eeeeee;
630     padding:5px;
633 .courses .coursebox.even {
634     background-color:#f6f6f6;
636 .courses .coursebox:hover,
637 .course_category_tree .courses > .paging.paging-morelink:hover {
638     background-color:#eeeeee;
641 .course_category_tree .category .numberofcourse {
642     font-size: @fontSizeSmall;
645 .course_category_tree .controls {
646     visibility: hidden;
648 .course_category_tree .controls div {
649     display:inline;
650     cursor:pointer;
652 .jsenabled .course_category_tree .controls {
653     visibility: visible;
655 .course_category_tree .controls {
656     margin-bottom:5px;
657     text-align:right;
658     float:right;
660 .course_category_tree .controls div {
661     padding-right:2em;
662     font-size:75%;
665 .course_category_tree .category > .info > .categoryname{
666     background-image:url([[pix:moodle|t/collapsed_empty]]);
667     background-repeat: no-repeat;
668     padding:2px 18px;
669     margin:3px;
670     background-position:center left;
672 .dir-rtl .course_category_tree .category > .info > .categoryname {
673     background-image:url([[pix:moodle|t/collapsed_empty_rtl]]);
674     background-position:center right;
676 .course_category_tree .category.with_children > .info > .categoryname {
677     background-image:url([[pix:moodle|t/expanded]]);
678     cursor: pointer;
680 .course_category_tree .category.with_children.collapsed >.info > .categoryname {
681     background-image:url([[pix:moodle|t/collapsed]]);
683 .dir-rtl .course_category_tree .category.with_children.collapsed > .info > .categoryname {
684     background-image:url([[pix:moodle|t/collapsed_rtl]]);
686 .course_category_tree .category.collapsed>.content {
687     display:none;
690 .course_category_tree .category >.info {
691     .well;
692     min-height:0;
693     padding:0;
694     margin:3px 0;
695     margin-bottom:3px;
696     clear: both;
698 .course_category_tree.frontpage-category-names .category >.info {
699     background:none;
700     border:none;
701     margin:0;
703 .course_category_tree .category > .content {
704     padding-left:16px;
707 .dir-rtl .course_category_tree .category > .content {
708     padding-left:0;
709     padding-right:16px;
712 .course_category_tree .subcategories > .paging,
713 .courses > .paging {
714     margin:0;
715     padding:5px;
716     text-align:center;
719 .courses > .paging.paging-morelink,
720 .course_category_tree .subcategories > .paging.paging-morelink {
721     text-align:left;
724 .course_category_tree .paging.paging-morelink a {
725     font-size: @fontSizeSmall;
727 .dir-rtl .courses > .paging.paging-morelink,
728 .dir-rtl .course_category_tree .paging.paging-morelink {
729     text-align:right;
732 #page-course-index-category .generalbox.info {
733     margin-bottom: 15px;
734     border: 1px dotted #ddd;
735     .border-radius(4px);
736     padding: 5px;
739 #page-course-index-category .categorypicker {
740     text-align: center;
741     margin: 10px 0 20px;
744 .section {
745     .summary,
746     .activity {
747         .iconsmall {
748             width: 16px;
749             height: 16px;
750         }
751     }
752     .editing_title {
753         .iconsmall {
754             width: 12px;
755             height: 12px;
756             margin: 8px 8px 0px 0;
757             padding: 4px 8px 0px 0;
758             vertical-align: text-bottom;
759         }
760     }
761     .moodle-actionmenu {
762         .iconsmall {
763             max-width: none !important; /** reset sets 100% !important which breaks on IE8 without this !important */
764             width:16px;
765             height:16px;
766             padding: 4px;
767             vertical-align: text-bottom;
768         }
769     }
770     .moodle-actionmenu[data-enhanced] {
771         .menu {
772             img {
773               width: 12px;
774               height: 12px;
775             }
776         }
777     }
780 /**
781  * Course management page
782  * Palette
783  *
784  * Background (reg)         #F5F5F5
785  * Background (light        #fafafa
786  * Background (highlight)   #ddffaa
787  * Borders                  #e1e1e8
788  */
789 #course-category-listings {
790     background-color:#fff;
791     margin-bottom:200px;
793     /** Two column layout */
794     &.columns-2 {
795         > #course-listing > div {
796             position:relative;
797             left:-1px;
798         }
799     }
800     /** Three column layout */
801     &.columns-3 > #course-listing > div {
802         height:100%;
803     }
805     > div > div {
806         min-height:300px;
807         border:1px solid #e1e1e8;
808         > ul.ml > li:first-child > div {
809             border-top:0;
810         }
811     }
812     h3 {
813         margin:0;
814         padding:0.4rem 0.6rem 0.3rem;
815         background-color:#F5F5F5;
816         border-bottom:1px solid #e1e1e8;
817     }
818     h4 {
819         margin:1rem 0 0;
820         padding:0.6rem 1rem 0.5rem;
821     }
822     .moodle-actionmenu {
823         white-space:nowrap;
824     }
826     .moodle-actionmenu[data-enhance] {
827         .toggle-display {
828             img {
829                 width: auto;
830             }
831             &.textmenu {
832                 padding-right: 4px;
834                 .caret {
835                     margin-top: 12px;
836                 }
837             }
838         }
839     }
841     .listing-actions {
842         text-align:center;
843         padding:0.4rem 0.3rem 0.3rem;
844         line-height:2.2em;
845         > .moodle-actionmenu {
846             display:inline-block;
847             .menu a {
848                 padding-left:1rem;
849             }
850         }
851         .moodle-actionmenu:not([data-enhanced]) {
852             li {line-height:normal;}
853             > .menubar a {
854                 color:inherit;
855                 display:inline-block;
856                 > img {
857                     display:none;
858                 }
859                 .caret {
860                     display: none;
861                 }
862             }
863             > .menu .menu-action-text {
864                 display:inline-block;
865             }
866         }
867     }
868     ul.ml {
869         list-style: none;
870         margin:1rem 0;
871         ul.ml {
872             margin:0;
873         }
874     }
875     li {
876         line-height:2.2em;
877         > div {
878             &:hover {
879                 background-color:#fafafa;
880             }
881         }
882         .tree-icon {
883             margin: 2px 6px 0 0;
884             width:12px;
885             vertical-align:inherit;
886         }
887         &[data-selected='1'] {
888             > div {
889                 background-color:#FFFFD8;
890                 border-top-color: #e1e1e8;
891                 border-bottom-color:#F5F5F5;
892             }
893             li:first-of-type > div,
894             &[data-expandable='0']+li > div {
895                 border-top-color:#e1e1e8;
896             }
897             &:last-of-type > div {
898                 border-bottom-color:#e1e1e8;
899             }
900         }
902         // Tree item indenting to represent depth.
903         .tree-icon {margin-left:0;}
904         li .tree-icon {margin-left:1em;}
905         li li .tree-icon {margin-left:2em;}
906         li li li .tree-icon {margin-left:3em;}
907         li li li li .tree-icon {margin-left:4em;}
908         li li li li li .tree-icon {margin-left:4.5em;}
909         li li li li li li .tree-icon {margin-left:5em;}
910         li li li li li li li .tree-icon {margin-left:5.5em;}
912         &+li > div,
913         &:first-child > div {
914             border-top-color:#F5F5F5;
915         }
916     }
918     .item-actions {
919         margin-right:1em;
920         display:inline-block;
921         display:initial;
922         img {
923             margin: 0 4px;
924             height:12px;
925             padding: 0;
926             vertical-align: inherit;
927         }
928         &.show .menu {
929             a {
930                 padding:4px 1em 4px 4px;
931             }
932             img {
933                 width: 12px;
934                 max-width:none;
935             }
936         }
937         .menu-action-text {
938             vertical-align: inherit;
939         }
940     }
942     .listitem {
943         > div {
944             > .float-left {
945                 float:left;
946             }
947             > .float-right {
948                 float:right;
949                 text-align:right;
950             }
951             .item-actions {
952                 .action-show {
953                     display:none;
954                 }
955                 .action-hide {
956                     display:inline;
957                 }
958             }
959             .without-actions {
960                 color: #333;
961             }
962             .idnumber {
963                 color:#a1a1a8;
964                 margin-right:2em;
965             }
966         }
967         // The category or course is hidden.
968         &[data-visible="0"] {
969             .muted;
970             a.categoryname {
971                 .muted;
972             }
973             > div {
974                 > a {
975                     .muted;
976                 }
977                 .item-actions {
978                     .action-show {
979                         display:inline;
980                     }
981                     .action-hide {
982                         display:none;
983                     }
984                 }
985             }
986             > ul .item-actions.category-item-actions {
987                 // If the category is hidden hide both show and hide icons for sub categories.
988                 .action-hide,
989                 .action-show {
990                     display: none;
991                 }
992             }
993         }
994         &.highlight {
995             background-color:transparent;
996             > div,
997             > div:hover,
998             &[data-selected='1'] > div {
999                 background-color:#ddffaa;
1000             }
1001         }
1002     }
1004     #course-listing {
1005         .listitem {
1006             .categoryname {
1007                 display:inline-block;
1008                 margin-left:1em;
1009                 color:#a1a1a8;
1010             }
1011             .coursename {
1012                 display:inline-block;
1013             }
1014             > div {
1015                 padding-left:1rem;
1016             }
1017         }
1018         > .firstpage .listitem:first-child > div .item-actions .action-moveup,
1019         > .lastpage .listitem:last-child > div .item-actions .action-movedown {
1020           display: none;
1021         }
1022         .bulk-action-checkbox {
1023             margin:-2px 6px 0 0;
1024         }
1025     }
1026     #category-listing {
1027         .listitem.collapsed > ul.ml {
1028             display: none;
1029         }
1030         .listitem {
1031             > div {
1032                 > .ba-checkbox {
1033                     width:2.2em;
1034                     text-align:center;
1035                     margin:-1px 0.5em 0 0;
1036                     padding-top:2px;
1037                 }
1038             }
1039             &.highlight > div > .ba-checkbox {
1040                 background-color:#ddffaa;
1041             }
1042             &[data-selected='1'] > div > .ba-checkbox {
1043                 margin:0 0.5em 0 0;
1044                 padding:0;
1045                 background-color: inherit;
1046             }
1047             &:first-child > div .item-actions .action-moveup,
1048             &:last-child > div .item-actions .action-movedown {
1049               display: none;
1050             }
1051         }
1052         .course-count {
1053             color:#a1a1a8;
1054             margin-right:2rem;
1055             min-width:3.5em;
1056             display:inline-block;
1057             .smallicon {
1058                 width:12px;
1059                 margin-left:4px;
1060                 vertical-align: inherit;
1061             }
1062         }
1063         .bulk-action-checkbox {
1064             margin-right: -3px;
1065         }
1066         .category-listing > ul > .listitem:first-child {
1067             position:relative;
1068         }
1069         .category-bulk-actions {
1070             margin: 0 0.5em 0.5em;
1071             position:relative;
1072         }
1073     }
1075     .detail-pair {
1076         border-bottom:1px solid #e1e1e8;
1077         margin:0 1rem;
1078         > * {
1079             display:inline-block;
1080             line-height:2.2rem;
1081         }
1082         .pair-key {
1083             font-weight:bold;
1084             vertical-align: top;
1085             span {
1086                 margin-right: 1rem;
1087                 display:block;
1088             }
1089         }
1090         .pair-value select {
1091             max-width:100%;
1092         }
1093     }
1095     .bulk-actions .detail-pair {
1096         > * {
1097             display:block;
1098             width:100%;
1099         }
1100     }
1102     .listing-pagination {
1103         text-align:center;
1104         .yui3-button {
1105             background-color:#FFF;
1106             border:0;
1107             margin:0.4rem 0.2rem 0.45rem;
1108             font-size:10.4px;
1109             &.active-page {
1110                 background-color:#E5EFFD;
1111             }
1112         }
1113     }
1114     .listing-pagination-totals {
1115         text-align:center;
1116         &.dimmed {
1117             .muted;
1118             margin:0.4rem 1rem 0.45rem;
1119         }
1120     }
1121     .select-a-category .notifymessage,
1122     .select-a-category .alert {
1123         margin: 1em;
1124     }
1127 #course-category-listings #course-listing .listitem .drag-handle {
1128     display: none;
1130 .jsenabled #course-category-listings #course-listing .listitem .drag-handle {
1131     display:inline-block;
1132     margin: 0 6px 0 0;
1133     cursor:pointer;
1136 .dir-rtl #course-category-listings {
1137     #category-listing,
1138     #course-listing {
1139         float: right;
1140         margin-left: 0;
1141     }
1143     .listitem {
1144         > div {
1145             > .float-left {
1146                 float:right;
1147             }
1148             > .float-right {
1149                 float:left;
1150                 text-align:left;
1151             }
1152         }
1153     }
1154     li {
1155         .tree-icon {
1156             margin: 2px 0 0 6px;
1157         }
1159         // Tree item indenting to represent depth.
1160         .tree-icon {margin-right:0;}
1161         li .tree-icon {margin-right:1em;}
1162         li li .tree-icon {margin-right:2em;}
1163         li li li .tree-icon {margin-right:3em;}
1164         li li li li .tree-icon {margin-right:4em;}
1165         li li li li li .tree-icon {margin-right:4.5em;}
1166         li li li li li li .tree-icon {margin-right:5em;}
1167         li li li li li li li .tree-icon {margin-right:5.5em;}
1168     }
1169     #category-listing {
1170         .listitem {
1171             > div {
1172                 margin-right:0.5em;
1173                 margin-left: 0;
1174                 > .ba-checkbox {
1175                   margin:-1px 0 0 0.5em;
1176                 }
1177             }
1179             &[data-selected='1'] > div > .ba-checkbox {
1180                 margin:0 0 0 0.5em;
1181             }
1182         }
1183         .course-count {
1184             margin-left:2rem;
1185         }
1186         .bulk-action-checkbox {
1187             margin-left: -3px;
1188             margin-right: 0;
1189         }
1190     }
1191     #course-listing {
1192         padding-right: 24px;
1193         .listitem {
1194             .idnumber {
1195                 color:#a1a1a8;
1196                 padding-right:2em;
1197             }
1198             .categoryname {
1199                 display:inline-block;
1200                 margin-right:1em;
1201                 margin-left:0;
1202             }
1203             .drag-handle {
1204                 margin: 0 6px 0 6px;
1205             }
1206             > div {
1207                 padding-left:1rem;
1208             }
1209         }
1210         .bulk-action-checkbox {
1211             vertical-align:middle;
1212             margin:-2px 0 0 6px;
1213         }
1214     }
1215   .detail-pair {
1216         > * {
1217             float: right;
1218             margin-right: 0;
1219         }
1220         .pair-key {
1221             span {
1222                 margin-right:0;
1223                 margin-left: 0;
1224             }
1225         }
1226         .pair-value {
1227             margin-right: 0.5em;
1228         }
1229     }
1232 /** Management header styling **/
1233 .coursecat-management-header {
1234     vertical-align:middle;
1235     h2 {
1236         display:inline-block;
1237         text-align:left;
1238     }
1239     > div {
1240         display:inline-block;
1241         float:right;
1242         line-height:40px;
1243         > div {
1244           margin-left:1em;
1245           margin: 10px 0;
1246           display:inline-block;
1247         }
1248     }
1249     select {
1250         max-width: 300px;
1251         cursor: pointer;
1252         padding: 0.4em 0.5em 0.45em 1em;
1253         vertical-align: baseline;
1254         white-space: nowrap;
1255     }
1256     .view-mode-selector {
1257         .moodle-actionmenu {
1258             white-space:nowrap;
1259             display:inline-block;
1260         }
1261         .moodle-actionmenu[data-enhanced].show .menu a {
1262             padding-left:1em;
1263         }
1264     }
1266 .dir-rtl .coursecat-management-header {
1267     h2 {
1268         text-align:right;
1269     }
1270     > div {
1271         float:left;
1272         margin-right:1em;
1273         margin-left: 0;
1274     }
1276 .course-being-dragged-proxy {
1277     border: 0;
1278     color: @linkColor;
1279     vertical-align:middle;
1280     padding: 0 0 0 4em;
1282 .course-being-dragged {
1283     .opacity(50);
1286 /**
1287  * Display sizes:
1288  * Large displays                   1200        +
1289  * Default displays                  980     1199
1290  * Tablets                           768      979
1291  * Small tablets and large phones    481      767
1292  * Phones                              0      480
1293  */
1294 @media (min-width: 1200px) and (max-width: 1600px) {
1295     #course-category-listings.columns-3 {
1296         background-color:transparent;
1297         border:0;
1299         #category-listing,
1300         #course-listing {
1301             width:50%;
1302         }
1303         #category-listing > div,
1304         #course-listing > div,
1305         #course-detail > div {
1306             border:1px solid #e1e1e8;
1307             background-color:#FFF;
1308         }
1309         #course-detail {
1310             width:100%;
1311             margin-top:1em;
1312         }
1313     }
1317 @media (max-width: 1199px) {
1318     #course-category-listings.columns-2,
1319     #course-category-listings.columns-3 {
1320         background-color:transparent;
1321         border:0;
1322         #category-listing,
1323         #course-listing,
1324         #course-detail {
1325             width:100%;
1326             margin:0 0 1em;
1327         }
1328         #category-listing > div,
1329         #course-listing > div,
1330         #course-detail > div {
1331             border:1px solid #e1e1e8;
1332             background-color:#FFF;
1333         }
1334     }