Merge branch 'MDL-42851' of git://github.com/rwijaya/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 .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             > div {
994                 > a {
995                     .muted;
996                 }
997                 .item-actions {
998                     .action-show {
999                         display:inline;
1000                     }
1001                     .action-hide {
1002                         display:none;
1003                     }
1004                 }
1005             }
1006         }
1007         &.highlight {
1008             background-color:transparent;
1009             > div,
1010             > div:hover,
1011             &[data-selected='1'] > div {
1012                 background-color:#ddffaa;
1013             }
1014         }
1015     }
1017     #course-listing {
1018         .listitem {
1019             .categoryname {
1020                 display:inline-block;
1021                 margin-left:1em;
1022                 color:#a1a1a8;
1023             }
1024             .coursename {
1025                 display:inline-block;
1026             }
1027             > div {
1028                 padding-left:1rem;
1029             }
1030         }
1031         > .firstpage .listitem:first-child > div .item-actions .action-moveup,
1032         > .lastpage .listitem:last-child > div .item-actions .action-movedown {
1033           display: none;
1034         }
1035         .bulk-action-checkbox {
1036             margin:-2px 6px 0 0;
1037         }
1038     }
1039     #category-listing {
1040         .listitem.collapsed > ul.ml {
1041             display: none;
1042         }
1043         .listitem {
1044             > div {
1045                 > .ba-checkbox {
1046                     width:2.2em;
1047                     text-align:center;
1048                     margin:-1px 0.5em 0 0;
1049                     padding-top:2px;
1050                 }
1051             }
1052             &.highlight > div > .ba-checkbox {
1053                 background-color:#ddffaa;
1054             }
1055             &[data-selected='1'] > div > .ba-checkbox {
1056                 margin:0 0.5em 0 0;
1057                 padding:0;
1058                 background-color: inherit;
1059             }
1060             &:first-child > div .item-actions .action-moveup,
1061             &:last-child > div .item-actions .action-movedown {
1062               display: none;
1063             }
1064         }
1065         .course-count {
1066             color:#a1a1a8;
1067             margin-right:2rem;
1068             min-width:3.5em;
1069             display:inline-block;
1070             .smallicon {
1071                 width:12px;
1072                 margin-left:4px;
1073                 vertical-align: inherit;
1074             }
1075         }
1076         .bulk-action-checkbox {
1077             margin-right: -3px;
1078         }
1079         .category-listing > ul > .listitem:first-child {
1080             position:relative;
1081         }
1082         .category-bulk-actions {
1083             margin: 0 0.5em 0.5em;
1084             position:relative;
1085         }
1086     }
1088     .detail-pair {
1089         border-bottom:1px solid #e1e1e8;
1090         margin:0 1rem;
1091         > * {
1092             display:inline-block;
1093             line-height:2.2rem;
1094         }
1095         .pair-key {
1096             font-weight:bold;
1097             vertical-align: top;
1098             span {
1099                 margin-right: 1rem;
1100                 display:block;
1101             }
1102         }
1103         .pair-value select {
1104             max-width:100%;
1105         }
1106     }
1108     .bulk-actions .detail-pair {
1109         > * {
1110             display:block;
1111             width:100%;
1112         }
1113     }
1115     .listing-pagination {
1116         text-align:center;
1117         .yui3-button {
1118             background-color:#FFF;
1119             border:0;
1120             margin:0.4rem 0.2rem 0.45rem;
1121             font-size:10.4px;
1122             &.active-page {
1123                 background-color:#E5EFFD;
1124             }
1125         }
1126     }
1127     .listing-pagination-totals {
1128         text-align:center;
1129         &.dimmed {
1130             .muted;
1131             margin:0.4rem 1rem 0.45rem;
1132         }
1133     }
1134     .select-a-category .notifymessage,
1135     .select-a-category .alert {
1136         margin: 1em;
1137     }
1140 #course-category-listings #course-listing .listitem .drag-handle {
1141     display: none;
1143 .jsenabled #course-category-listings #course-listing .listitem .drag-handle {
1144     display:inline-block;
1145     margin: 0 6px 0 0;
1146     cursor:pointer;
1149 .dir-rtl #course-category-listings {
1150     #category-listing,
1151     #course-listing {
1152         float: right;
1153         margin-left: 0;
1154     }
1156     .listitem {
1157         > div {
1158             > .float-left {
1159                 float:right;
1160             }
1161             > .float-right {
1162                 float:left;
1163                 text-align:left;
1164             }
1165         }
1166     }
1167     li {
1168         .tree-icon {
1169             margin: 2px 0 0 6px;
1170         }
1172         // Tree item indenting to represent depth.
1173         .tree-icon {margin-right:0;}
1174         li .tree-icon {margin-right:1em;}
1175         li li .tree-icon {margin-right:2em;}
1176         li li li .tree-icon {margin-right:3em;}
1177         li li li li .tree-icon {margin-right:4em;}
1178         li li li li li .tree-icon {margin-right:4.5em;}
1179         li li li li li li .tree-icon {margin-right:5em;}
1180         li li li li li li li .tree-icon {margin-right:5.5em;}
1181     }
1182     #category-listing {
1183         .listitem {
1184             > div {
1185                 margin-right:0.5em;
1186                 margin-left: 0;
1187                 > .ba-checkbox {
1188                   margin:-1px 0 0 0.5em;
1189                 }
1190             }
1192             &[data-selected='1'] > div > .ba-checkbox {
1193                 margin:0 0 0 0.5em;
1194             }
1195         }
1196         .course-count {
1197             margin-left:2rem;
1198         }
1199         .bulk-action-checkbox {
1200             margin-left: -3px;
1201             margin-right: 0;
1202         }
1203     }
1204     #course-listing {
1205         padding-right: 24px;
1206         .listitem {
1207             .idnumber {
1208                 color:#a1a1a8;
1209                 padding-right:2em;
1210             }
1211             .categoryname {
1212                 display:inline-block;
1213                 margin-right:1em;
1214                 margin-left:0;
1215             }
1216             .drag-handle {
1217                 margin: 0 6px 0 6px;
1218             }
1219             > div {
1220                 padding-left:1rem;
1221             }
1222         }
1223         .bulk-action-checkbox {
1224             vertical-align:middle;
1225             margin:-2px 0 0 6px;
1226         }
1227     }
1228   .detail-pair {
1229         > * {
1230             float: right;
1231             margin-right: 0;
1232         }
1233         .pair-key {
1234             span {
1235                 margin-right:0;
1236                 margin-left: 0;
1237             }
1238         }
1239         .pair-value {
1240             margin-right: 0.5em;
1241         }
1242     }
1245 /** Management header styling **/
1246 .coursecat-management-header {
1247     vertical-align:middle;
1248     h2 {
1249         display:inline-block;
1250         text-align:left;
1251     }
1252     > div {
1253         display:inline-block;
1254         float:right;
1255         line-height:40px;
1256         > div {
1257           margin-left:1em;
1258           margin: 10px 0;
1259           display:inline-block;
1260         }
1261     }
1262     select {
1263         max-width: 300px;
1264         cursor: pointer;
1265         padding: 0.4em 0.5em 0.45em 1em;
1266         vertical-align: baseline;
1267         white-space: nowrap;
1268     }
1269     .view-mode-selector {
1270         .moodle-actionmenu {
1271             white-space:nowrap;
1272             display:inline-block;
1273         }
1274         .moodle-actionmenu[data-enhanced].show .menu a {
1275             padding-left:1em;
1276         }
1277     }
1279 .dir-rtl .coursecat-management-header {
1280     h2 {
1281         text-align:right;
1282     }
1283     > div {
1284         float:left;
1285         margin-right:1em;
1286         margin-left: 0;
1287     }
1289 .course-being-dragged-proxy {
1290     border: 0;
1291     color: @linkColor;
1292     vertical-align:middle;
1293     padding: 0 0 0 4em;
1295 .course-being-dragged {
1296     .opacity(50);
1299 /**
1300  * Display sizes:
1301  * Large displays                   1200        +
1302  * Default displays                  980     1199
1303  * Tablets                           768      979
1304  * Small tablets and large phones    481      767
1305  * Phones                              0      480
1306  */
1307 @media (min-width: 1200px) and (max-width: 1600px) {
1308     #course-category-listings.columns-3 {
1309         background-color:transparent;
1310         border:0;
1312         #category-listing,
1313         #course-listing {
1314             width:50%;
1315         }
1316         #category-listing > div,
1317         #course-listing > div,
1318         #course-detail > div {
1319             border:1px solid #e1e1e8;
1320             background-color:#FFF;
1321         }
1322         #course-detail {
1323             width:100%;
1324             margin-top:1em;
1325         }
1326     }
1330 @media (max-width: 1199px) {
1331     #course-category-listings.columns-2,
1332     #course-category-listings.columns-3 {
1333         background-color:transparent;
1334         border:0;
1335         #category-listing,
1336         #course-listing,
1337         #course-detail {
1338             width:100%;
1339             margin:0 0 1em;
1340         }
1341         #category-listing > div,
1342         #course-listing > div,
1343         #course-detail > div {
1344             border:1px solid #e1e1e8;
1345             background-color:#FFF;
1346         }
1347     }