Merge branch 'wip-MDL-43006-master' of git://github.com/marinaglancy/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 .coursebox.remotehost > .info > .categoryname a {
536     background-image:url([[pix:moodle|i/mnethost]]);
538 .coursebox .content .teachers,
539 .coursebox .content .courseimage,
540 .coursebox .content .coursefile {
541     float:left;
542     width:40%;
543     clear:left;
545 .coursebox > .info > h3.coursename {
546     margin: 5px;
548 .coursebox > .info > .coursename {
549     margin: 5px;
550     padding: 0;
552 .coursebox .content .teachers li {
553     list-style-type:none;
554     padding:0;
555     margin:0;
557 .coursebox .enrolmenticons {
558     padding:3px 0;
559     float:right;
561 .coursebox .moreinfo {
562     padding:3px 0;
563     float:right;
565 .coursebox .enrolmenticons img,
566 .coursebox .moreinfo img {
567     margin:0 .2em;
569 .coursebox .content {
570     clear:both;
572 .coursebox .content .summary,
573 .coursebox .content .coursecat {
574     float:right;
575     width: 55%;
577 .coursebox .content .coursecat {
578     text-align:right;
579     clear:right;
581 .coursebox.remotecoursebox .remotecourseinfo {
582     float:left;
583     width: 40%;
585 .coursebox .content .courseimage img {
586     max-width:100px;
587     max-height:100px;
589 .coursebox .content .coursecat,
590 .coursebox .content .summary,
591 .coursebox .content .courseimage,
592 .coursebox .content .coursefile,
593 .coursebox .content .teachers,
594 .coursebox.remotecoursebox .remotecourseinfo {
595     margin:3px 5px;
596     padding:0;
599 .dir-rtl .coursebox > .info > .categoryname a {
600     padding-left:0;
601     padding-right:21px;
602     background-position: center right;
604 .dir-rtl .coursebox > .info > .categoryname,
605 .dir-rtl .coursebox .teachers,
606 .dir-rtl .coursebox .content .courseimage,
607 .dir-rtl .coursebox .content .coursefile {
608     float:right;
609     clear:right;
611 .dir-rtl .coursebox .enrolmenticons,
612 .dir-rtl .coursebox .moreinfo {
613     float:left;
615 .dir-rtl .coursebox .summary,
616 .dir-rtl .coursebox .coursecat {
617     float:left;
619 .dir-rtl .coursebox .coursecat {
620     text-align:left;
621     clear:left;
624 .coursebox.collapsed {
625     margin-bottom:0;
627 .coursebox.collapsed > .content {
628     display:none;
630 .courses .coursebox.collapsed {
631     border:1px solid #eeeeee;
632     padding:5px;
635 .courses .coursebox.even {
636     background-color:#f6f6f6;
638 .courses .coursebox:hover,
639 .course_category_tree .courses > .paging.paging-morelink:hover {
640     background-color:#eeeeee;
643 .course_category_tree .category .numberofcourse {
644     font-size: @fontSizeSmall;
647 .course_category_tree .controls {
648     visibility: hidden;
650 .course_category_tree .controls div {
651     display:inline;
652     cursor:pointer;
654 .jsenabled .course_category_tree .controls {
655     visibility: visible;
657 .course_category_tree .controls {
658     margin-bottom:5px;
659     text-align:right;
660     float:right;
662 .course_category_tree .controls div {
663     padding-right:2em;
664     font-size:75%;
667 .course_category_tree .category > .info > .categoryname{
668     background-image:url([[pix:moodle|t/collapsed_empty]]);
669     background-repeat: no-repeat;
670     padding:2px 18px;
671     margin:3px;
672     background-position:center left;
674 .dir-rtl .course_category_tree .category > .info > .categoryname {
675     background-image:url([[pix:moodle|t/collapsed_empty_rtl]]);
676     background-position:center right;
678 .course_category_tree .category.with_children > .info > .categoryname {
679     background-image:url([[pix:moodle|t/expanded]]);
680     cursor: pointer;
682 .course_category_tree .category.with_children.collapsed >.info > .categoryname {
683     background-image:url([[pix:moodle|t/collapsed]]);
685 .dir-rtl .course_category_tree .category.with_children.collapsed > .info > .categoryname {
686     background-image:url([[pix:moodle|t/collapsed_rtl]]);
688 .course_category_tree .category.collapsed>.content {
689     display:none;
692 .course_category_tree .category >.info {
693     .well;
694     min-height:0;
695     padding:0;
696     margin:3px 0;
697     margin-bottom:3px;
698     clear: both;
700 .course_category_tree.frontpage-category-names .category >.info {
701     background:none;
702     border:none;
703     margin:0;
705 .course_category_tree .category > .content {
706     padding-left:16px;
709 .dir-rtl .course_category_tree .category > .content {
710     padding-left:0;
711     padding-right:16px;
714 .course_category_tree .subcategories > .paging,
715 .courses > .paging {
716     margin:0;
717     padding:5px;
718     text-align:center;
721 .courses > .paging.paging-morelink,
722 .course_category_tree .subcategories > .paging.paging-morelink {
723     text-align:left;
726 .course_category_tree .paging.paging-morelink a {
727     font-size: @fontSizeSmall;
729 .dir-rtl .courses > .paging.paging-morelink,
730 .dir-rtl .course_category_tree .paging.paging-morelink {
731     text-align:right;
734 #page-course-index-category .generalbox.info {
735     margin-bottom: 15px;
736     border: 1px dotted #ddd;
737     .border-radius(4px);
738     padding: 5px;
741 #page-course-index-category .categorypicker {
742     text-align: center;
743     margin: 10px 0 20px;
746 .section {
747     .summary,
748     .activity {
749         .iconsmall {
750             width: 16px;
751             height: 16px;
752         }
753     }
754     .editing_title {
755         .iconsmall {
756             width: 12px;
757             height: 12px;
758             margin: 8px 8px 0px 0;
759             padding: 4px 8px 0px 0;
760             vertical-align: text-bottom;
761         }
762     }
763     .moodle-actionmenu {
764         .iconsmall {
765             max-width: none !important; /** reset sets 100% !important which breaks on IE8 without this !important */
766             width:16px;
767             height:16px;
768             padding: 4px;
769             vertical-align: text-bottom;
770         }
771     }
772     .moodle-actionmenu[data-enhanced] {
773         .menu {
774             img {
775               width: 12px;
776               height: 12px;
777             }
778         }
779     }
782 .dir-rtl .section {
783     .editing_title {
784         .iconsmall {
785             margin: 8px 0 0 8px;
786             padding: 4px 0 0 8px;
787         }
788     }
791 /**
792  * Course management page
793  * Palette
794  *
795  * Background (reg)         #F5F5F5
796  * Background (light        #fafafa
797  * Background (highlight)   #ddffaa
798  * Borders                  #e1e1e8
799  */
800 #course-category-listings {
801     background-color:#fff;
802     margin-bottom:200px;
804     /** Two column layout */
805     &.columns-2 {
806         > #course-listing > div {
807             position:relative;
808             left:-1px;
809         }
810     }
811     /** Three column layout */
812     &.columns-3 > #course-listing > div {
813         height:100%;
814     }
816     > div > div {
817         min-height:300px;
818         border:1px solid #e1e1e8;
819         > ul.ml > li:first-child > div {
820             border-top:0;
821         }
822     }
823     h3 {
824         margin:0;
825         padding:0.4rem 0.6rem 0.3rem;
826         background-color:#F5F5F5;
827         border-bottom:1px solid #e1e1e8;
828     }
829     h4 {
830         margin:1rem 0 0;
831         padding:0.6rem 1rem 0.5rem;
832     }
833     .moodle-actionmenu {
834         white-space:nowrap;
835     }
837     .moodle-actionmenu[data-enhance] {
838         .toggle-display {
839             img {
840                 width: auto;
841             }
842             &.textmenu {
843                 padding-right: 4px;
845                 .caret {
846                     margin-top: 12px;
847                 }
848             }
849         }
850     }
852     .listing-actions {
853         text-align:center;
854         padding:0.4rem 0.3rem 0.3rem;
855         line-height:2.2em;
856         > .moodle-actionmenu {
857             display:inline-block;
858             .menu a {
859                 padding-left:1rem;
860             }
861         }
862         .moodle-actionmenu:not([data-enhanced]) {
863             li {line-height:normal;}
864             > .menubar a {
865                 color:inherit;
866                 display:inline-block;
867                 > img {
868                     display:none;
869                 }
870                 .caret {
871                     display: none;
872                 }
873             }
874             > .menu .menu-action-text {
875                 display:inline-block;
876             }
877         }
878     }
879     ul.ml {
880         list-style: none;
881         margin:1rem 0;
882         ul.ml {
883             margin:0;
884         }
885     }
886     li {
887         line-height:2.2em;
888         > div {
889             &:hover {
890                 background-color:#fafafa;
891             }
892         }
893         .tree-icon {
894             margin: 2px 6px 0 0;
895             width:12px;
896             vertical-align:inherit;
897         }
898         &[data-selected='1'] {
899             > div {
900                 background-color:#FFFFD8;
901                 border-top-color: #e1e1e8;
902                 border-bottom-color:#F5F5F5;
903             }
904             li:first-of-type > div,
905             &[data-expandable='0']+li > div {
906                 border-top-color:#e1e1e8;
907             }
908             &:last-of-type > div {
909                 border-bottom-color:#e1e1e8;
910             }
911         }
913         // Tree item indenting to represent depth.
914         .tree-icon {margin-left:0;}
915         li .tree-icon {margin-left:1em;}
916         li li .tree-icon {margin-left:2em;}
917         li li li .tree-icon {margin-left:3em;}
918         li li li li .tree-icon {margin-left:4em;}
919         li li li li li .tree-icon {margin-left:4.5em;}
920         li li li li li li .tree-icon {margin-left:5em;}
921         li li li li li li li .tree-icon {margin-left:5.5em;}
923         &+li > div,
924         &:first-child > div {
925             border-top-color:#F5F5F5;
926         }
927     }
929     .item-actions {
930         margin-right:1em;
931         display:inline-block;
932         display:initial;
933         img {
934             margin: 0 4px;
935             height:12px;
936             padding: 0;
937             vertical-align: inherit;
938         }
939         &.show .menu {
940             a {
941                 padding:4px 1em 4px 4px;
942             }
943             img {
944                 width: 12px;
945                 max-width:none;
946             }
947         }
948         .menu-action-text {
949             vertical-align: inherit;
950         }
951     }
953     .listitem {
954         > div {
955             > .float-left {
956                 float:left;
957             }
958             > .float-right {
959                 float:right;
960                 text-align:right;
961             }
962             .item-actions {
963                 .action-show {
964                     display:none;
965                 }
966                 .action-hide {
967                     display:inline;
968                 }
969             }
970             .without-actions {
971                 color: #333;
972             }
973             .idnumber {
974                 color:#a1a1a8;
975                 margin-right:2em;
976             }
977         }
978         // The category or course is hidden.
979         &[data-visible="0"] {
980             .muted;
981             > div {
982                 > a {
983                     .muted;
984                 }
985                 .item-actions {
986                     .action-show {
987                         display:inline;
988                     }
989                     .action-hide {
990                         display:none;
991                     }
992                 }
993             }
994         }
995         &.highlight {
996             background-color:transparent;
997             > div,
998             > div:hover,
999             &[data-selected='1'] > div {
1000                 background-color:#ddffaa;
1001             }
1002         }
1003     }
1005     #course-listing {
1006         .listitem {
1007             .categoryname {
1008                 display:inline-block;
1009                 margin-left:1em;
1010                 color:#a1a1a8;
1011             }
1012             .coursename {
1013                 display:inline-block;
1014             }
1015             > div {
1016                 padding-left:1rem;
1017             }
1018         }
1019         > .firstpage .listitem:first-child > div .item-actions .action-moveup,
1020         > .lastpage .listitem:last-child > div .item-actions .action-movedown {
1021           display: none;
1022         }
1023         .bulk-action-checkbox {
1024             margin:-2px 6px 0 0;
1025         }
1026     }
1027     #category-listing {
1028         .listitem.collapsed > ul.ml {
1029             display: none;
1030         }
1031         .listitem {
1032             > div {
1033                 > .ba-checkbox {
1034                     width:2.2em;
1035                     text-align:center;
1036                     margin:-1px 0.5em 0 0;
1037                     padding-top:2px;
1038                 }
1039             }
1040             &.highlight > div > .ba-checkbox {
1041                 background-color:#ddffaa;
1042             }
1043             &[data-selected='1'] > div > .ba-checkbox {
1044                 margin:0 0.5em 0 0;
1045                 padding:0;
1046                 background-color: inherit;
1047             }
1048             &:first-child > div .item-actions .action-moveup,
1049             &:last-child > div .item-actions .action-movedown {
1050               display: none;
1051             }
1052         }
1053         .course-count {
1054             color:#a1a1a8;
1055             margin-right:2rem;
1056             min-width:3.5em;
1057             display:inline-block;
1058             .smallicon {
1059                 width:12px;
1060                 margin-left:4px;
1061                 vertical-align: inherit;
1062             }
1063         }
1064         .bulk-action-checkbox {
1065             margin-right: -3px;
1066         }
1067         .category-listing > ul > .listitem:first-child {
1068             position:relative;
1069         }
1070         .category-bulk-actions {
1071             margin: 0 0.5em 0.5em;
1072             position:relative;
1073         }
1074     }
1076     .detail-pair {
1077         border-bottom:1px solid #e1e1e8;
1078         margin:0 1rem;
1079         > * {
1080             display:inline-block;
1081             line-height:2.2rem;
1082         }
1083         .pair-key {
1084             font-weight:bold;
1085             vertical-align: top;
1086             span {
1087                 margin-right: 1rem;
1088                 display:block;
1089             }
1090         }
1091         .pair-value select {
1092             max-width:100%;
1093         }
1094     }
1096     .bulk-actions .detail-pair {
1097         > * {
1098             display:block;
1099             width:100%;
1100         }
1101     }
1103     .listing-pagination {
1104         text-align:center;
1105         .yui3-button {
1106             background-color:#FFF;
1107             border:0;
1108             margin:0.4rem 0.2rem 0.45rem;
1109             font-size:10.4px;
1110             &.active-page {
1111                 background-color:#E5EFFD;
1112             }
1113         }
1114     }
1115     .listing-pagination-totals {
1116         text-align:center;
1117         &.dimmed {
1118             .muted;
1119             margin:0.4rem 1rem 0.45rem;
1120         }
1121     }
1122     .select-a-category .notifymessage,
1123     .select-a-category .alert {
1124         margin: 1em;
1125     }
1128 #course-category-listings #course-listing .listitem .drag-handle {
1129     display: none;
1131 .jsenabled #course-category-listings #course-listing .listitem .drag-handle {
1132     display:inline-block;
1133     margin: 0 6px 0 0;
1134     cursor:pointer;
1137 .dir-rtl #course-category-listings {
1138     #category-listing,
1139     #course-listing {
1140         float: right;
1141         margin-left: 0;
1142     }
1144     .listitem {
1145         > div {
1146             > .float-left {
1147                 float:right;
1148             }
1149             > .float-right {
1150                 float:left;
1151                 text-align:left;
1152             }
1153         }
1154     }
1155     li {
1156         .tree-icon {
1157             margin: 2px 0 0 6px;
1158         }
1160         // Tree item indenting to represent depth.
1161         .tree-icon {margin-right:0;}
1162         li .tree-icon {margin-right:1em;}
1163         li li .tree-icon {margin-right:2em;}
1164         li li li .tree-icon {margin-right:3em;}
1165         li li li li .tree-icon {margin-right:4em;}
1166         li li li li li .tree-icon {margin-right:4.5em;}
1167         li li li li li li .tree-icon {margin-right:5em;}
1168         li li li li li li li .tree-icon {margin-right:5.5em;}
1169     }
1170     #category-listing {
1171         .listitem {
1172             > div {
1173                 margin-right:0.5em;
1174                 margin-left: 0;
1175                 > .ba-checkbox {
1176                   margin:-1px 0 0 0.5em;
1177                 }
1178             }
1180             &[data-selected='1'] > div > .ba-checkbox {
1181                 margin:0 0 0 0.5em;
1182             }
1183         }
1184         .course-count {
1185             margin-left:2rem;
1186         }
1187         .bulk-action-checkbox {
1188             margin-left: -3px;
1189             margin-right: 0;
1190         }
1191     }
1192     #course-listing {
1193         padding-right: 24px;
1194         .listitem {
1195             .idnumber {
1196                 color:#a1a1a8;
1197                 padding-right:2em;
1198             }
1199             .categoryname {
1200                 display:inline-block;
1201                 margin-right:1em;
1202                 margin-left:0;
1203             }
1204             .drag-handle {
1205                 margin: 0 6px 0 6px;
1206             }
1207             > div {
1208                 padding-left:1rem;
1209             }
1210         }
1211         .bulk-action-checkbox {
1212             vertical-align:middle;
1213             margin:-2px 0 0 6px;
1214         }
1215     }
1216   .detail-pair {
1217         > * {
1218             float: right;
1219             margin-right: 0;
1220         }
1221         .pair-key {
1222             span {
1223                 margin-right:0;
1224                 margin-left: 0;
1225             }
1226         }
1227         .pair-value {
1228             margin-right: 0.5em;
1229         }
1230     }
1233 /** Management header styling **/
1234 .coursecat-management-header {
1235     vertical-align:middle;
1236     h2 {
1237         display:inline-block;
1238         text-align:left;
1239     }
1240     > div {
1241         display:inline-block;
1242         float:right;
1243         line-height:40px;
1244         > div {
1245           margin-left:1em;
1246           margin: 10px 0;
1247           display:inline-block;
1248         }
1249     }
1250     select {
1251         max-width: 300px;
1252         cursor: pointer;
1253         padding: 0.4em 0.5em 0.45em 1em;
1254         vertical-align: baseline;
1255         white-space: nowrap;
1256     }
1257     .view-mode-selector {
1258         .moodle-actionmenu {
1259             white-space:nowrap;
1260             display:inline-block;
1261         }
1262         .moodle-actionmenu[data-enhanced].show .menu a {
1263             padding-left:1em;
1264         }
1265     }
1267 .dir-rtl .coursecat-management-header {
1268     h2 {
1269         text-align:right;
1270     }
1271     > div {
1272         float:left;
1273         margin-right:1em;
1274         margin-left: 0;
1275     }
1277 .course-being-dragged-proxy {
1278     border: 0;
1279     color: @linkColor;
1280     vertical-align:middle;
1281     padding: 0 0 0 4em;
1283 .course-being-dragged {
1284     .opacity(50);
1287 /**
1288  * Display sizes:
1289  * Large displays                   1200        +
1290  * Default displays                  980     1199
1291  * Tablets                           768      979
1292  * Small tablets and large phones    481      767
1293  * Phones                              0      480
1294  */
1295 @media (min-width: 1200px) and (max-width: 1600px) {
1296     #course-category-listings.columns-3 {
1297         background-color:transparent;
1298         border:0;
1300         #category-listing,
1301         #course-listing {
1302             width:50%;
1303         }
1304         #category-listing > div,
1305         #course-listing > div,
1306         #course-detail > div {
1307             border:1px solid #e1e1e8;
1308             background-color:#FFF;
1309         }
1310         #course-detail {
1311             width:100%;
1312             margin-top:1em;
1313         }
1314     }
1318 @media (max-width: 1199px) {
1319     #course-category-listings.columns-2,
1320     #course-category-listings.columns-3 {
1321         background-color:transparent;
1322         border:0;
1323         #category-listing,
1324         #course-listing,
1325         #course-detail {
1326             width:100%;
1327             margin:0 0 1em;
1328         }
1329         #category-listing > div,
1330         #course-listing > div,
1331         #course-detail > div {
1332             border:1px solid #e1e1e8;
1333             background-color:#FFF;
1334         }
1335     }