MDL-42629 course: management resorting improvements
[moodle.git] / theme / bootstrapbase / less / moodle / course.less
CommitLineData
8903b17b 1/* course.less */
73fe7470 2/* COURSE CONTENT */
8903b17b
BB
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;
4460e380 34 vertical-align: text-bottom;
8903b17b
BB
35}
36
37.site-topic ul.section,
38.course-content ul.section {
39 margin: 1em;
40}
41.section .activity img.activityicon {
8903b17b
BB
42 margin-right: 6px;
43}
44.dir-rtl .section .activity img.activityicon {
45 margin-left: 6px;
46 margin-right: 0;
47}
48.section .activity .activityinstance,
49.section .activity .activityinstance div {
50 display: inline-block;
51}
52.editing .section .activity .activityinstance {
53 min-width: 40%;
54}
55.section .activity .activityinstance > a {
56 display: block;
57}
58.editing_show + .editing_assign,
59.editing_hide + .editing_assign {
60 // if roles icon missing, add space
61 margin-left: 20px;
62}
63.section .activity .commands {
64 white-space: nowrap;
65 display: inline;
66}
67.section .activity.modtype_label .commands {
68 margin-left: 40%;
77063326 69 padding-left: .2em;
8903b17b 70}
c604e01c
JF
71.section .activity.modtype_label.label {
72 font-weight: normal;
77063326 73 padding: .2em;
c604e01c 74}
8903b17b
BB
75.section li.activity {
76 padding: .2em;
77 clear: both;
78}
79.section .activity .activityinstance .groupinglabel {
c604e01c
JF
80 padding-left: 30px;
81}
82.dir-rtl .section .activity .activityinstance .groupinglabel {
83 padding-right: 30px;
8903b17b
BB
84}
85.section .activity .availabilityinfo,
86.section .activity .contentafterlink {
87 margin-top: 0.5em;
88 margin-left: 30px;
89}
90.dir-rtl .section .activity .availabilityinfo,
91.dir-rtl .section .activity .contentafterlink {
92 margin-left: 0;
93 margin-right: 30px;
94}
95.section .activity .contentafterlink p {
96 margin: .5em 0;
97}
b59f2e3b
SH
98.editing .section .activity:hover,
99.editing .section .activity.action-menu-shown {
8903b17b
BB
100 background-color: @grayLighter;
101}
13cb4ee0
DS
102.course-content .current {
103 background-color: @infoBackground;
104}
8903b17b
BB
105.course-content .section-summary {
106 border: 1px solid #DDD;
107 margin-top: 5px;
108 list-style: none;
109}
110.course-content .section-summary .section-title {
111 margin: 2px 5px 10px 5px;
112}
113.course-content .section-summary .summarytext {
114 margin: 2px 5px 2px 5px;
115}
116.course-content .section-summary .section-summary-activities .activity-count {
117 .muted;
118 font-size: @fontSizeSmall;
119 margin: 3px;
120 white-space: nowrap;
121 display: inline-block;
122}
123.course-content .section-summary .summary {
124 margin-top: 5px;
125}
126.course-content .single-section {
127 margin-top: 1em;
128}
129.course-content .single-section .section-navigation {
130 display: block;
131 padding: 0.5em;
132 margin-bottom: -0.5em;
133}
134.course-content .single-section .section-navigation .title {
135 font-weight: bold;
136 font-size: 108%;
137 clear: both;
138}
139.course-content .single-section .section-navigation .mdl-left {
140 font-weight: normal;
141 float: left;
142 margin-right: 1em;
143}
144.dir-rtl .course-content .single-section .section-navigation .mdl-left {
145 float: right;
146}
147.course-content .single-section .section-navigation .mdl-left .larrow {
148 margin-right: 0.1em;
149}
150.course-content .single-section .section-navigation .mdl-right {
151 font-weight: normal;
152 float: right;
153 margin-left: 1em;
154}
155.dir-rtl .course-content .single-section .section-navigation .mdl-right {
156 float: left;
157}
158.course-content .single-section .section-navigation .mdl-right .rarrow {
159 margin-left: 0.1em;
160}
161.course-content .single-section .section-navigation .mdl-bottom {
162 margin-top: 0;
163}
164.course-content ul li.section.main {
165 border-bottom: 2px solid #eee;
166 margin-top: 0;
167}
168.course-content ul li.section.hidden {
169 opacity: 0.5;
170}
171.course-content ul.topics li.section .content,
172.course-content ul.weeks li.section .content {
173 margin-right: 20px;
174 margin-left: 20px;
175 padding: 0;
176}
177
178.course-content {
179 margin-top: 0;
180}
181
182.course-content ul.topics li.section {
183 padding-bottom: 20px;
184}
185
186.course-content ul.topics li.section .summary {
187 margin-left: 25px;
188}
189
190.path-course-view .completionprogress {
191 margin-left: 25px
192}
193
194.path-course-view .completionprogress {
195 display: block;
196 float: right;
197 height: 20px;
198 position: relative;
199 z-index: 1000;
200}
201
202#page-site-index .subscribelink {
203 text-align: right;
204}
faf6010b 205#site-news-forum h2,
206#frontpage-course-list h2,
207#frontpage-category-names h2,
208#frontpage-category-combo h2 {
1d49a5cd
DP
209 margin-bottom: 9px;
210}
8903b17b
BB
211.path-course-view a.reduce-sections {
212 padding-left: 0.2em;
213}
8903b17b
BB
214.path-course-view .subscribelink {
215 text-align: right;
216}
217.path-course-view .unread {
c604e01c
JF
218 margin-left: 30px;
219}
220.dir-rtl.path-course-view .unread {
221 margin-right: 30px;
8903b17b
BB
222}
223.path-course-view .block.drag .header {
224 cursor: move;
225}
226.path-course-view .completionprogress {
227 text-align: right;
228}
229.dir-rtl.path-course-view .completionprogress {
230 text-align: left;
231}
232.path-course-view .single-section .completionprogress {
233 margin-right: 5px;
234}
235.path-course-view .section .summary {
236 line-height: normal;
237}
238
239.path-site li.activity > div,
240.path-course-view li.activity > div {
241 position: relative;
a4f01fe4
SH
242 padding: 0 16px 0 0; /* to accommodate the floated completion icon with highlighting */
243}
244.dir-rtl.path-site li.activity > div,
245.dir-rtl.path-course-view li.activity > div {
246 position: relative;
247 padding: 0 0 0 16px;
8903b17b
BB
248}
249.path-course-view li.activity span.autocompletion,
250.path-course-view li.activity form.togglecompletion {
251 float: right;
a4f01fe4
SH
252 width: 0; /* Reduce the width of the control to 0 and rely on natural overflow */
253}
254.path-course-view li.activity span.autocompletion img,
255.path-course-view li.activity form.togglecompletion img {
256 max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
8903b17b
BB
257}
258.path-course-view li.activity form.togglecompletion .ajaxworking {
259 width: 16px;
260 height: 16px;
261 background: url([[pix:i/ajaxloader]]) no-repeat;
262}
263.dir-rtl.path-course-view li.activity form.togglecompletion,
264.dir-rtl.path-course-view li.activity span.autocompletion {
265 float: left;
266}
267.dir-rtl.path-course-view .completionprogress {
268 float: none;
269}
270.dir-rtl.path-course-view li.activity form.togglecompletion .ajaxworking {
271 right: -22px;
272}
273
274li.section.hidden span.commands a.editing_hide,
275li.section.hidden span.commands a.editing_show {
276 cursor: default;
277}
278ul.weeks h3.sectionname {
279 white-space: nowrap;
280}
281.editing ul.weeks h3.sectionname {
282 white-space: normal;
283}
284
fe3a7466
JF
285.single-section h3.sectionname {
286 text-align: center;
3eb439e2 287 clear: both;
fe3a7466
JF
288}
289
8903b17b
BB
290.section img.movetarget {
291 height: 16px;
292 width: 80px;
293}
294
73fe7470
MG
295input.titleeditor {
296 width: 330px;
297 vertical-align: text-bottom;
298}
299
300span.editinstructions {
301 position: absolute;
302 top: 0;
303 left: 0;
304 margin-top: -22px;
305 margin-left: 30px;
306 line-height: 16px;
307 font-size: @fontSizeSmall;
308 padding: .1em .4em;
309 background-color: @infoBackground;
310 color: @infoText;
311 text-decoration: none;
312 z-index: 9999;
313 .box-shadow(2px 2px 5px 1px #ccc);
314 border: 1px solid @infoBorder;
315}
316.dir-rtl span.editinstructions {
317 left: auto;
318 right: 32px;
319}
320
321/* Course drag and drop upload styles */
322#dndupload-status {
323 width: 40%;
324 margin: 0 30%;
325 padding: 6px;
326 border: 1px solid @infoBorder;
327 text-align: center;
328 background: @infoBackground;
329 color: @infoText;
330 position: absolute;
331 z-index: 9999;
332 .box-shadow(2px 2px 5px 1px #ccc);
333 .border-bottom-radius(8px);
334 z-index: 0;
335}
336.dndupload-preview {
337 color: #909090;
338 border: 1px dashed #909090;
339 list-style: none;
340 margin-top: .2em;
341 padding: .3em;
342}
343.dndupload-preview img.icon {
4460e380 344 vertical-align: text-bottom;
73fe7470
MG
345 padding: 0;
346}
347.dndupload-progress-outer {
348 .progress;
349}
350.dndupload-progress-inner {
351 .progress .bar;
352}
353.dndupload-hidden {
354 display: none;
355}
356
357/* COURSES LISTINGS AND COURSE SUMMARY */
8903b17b 358#page-course-pending .singlebutton,
a610d873 359#page-course-index .singlebutton,
69bbd2a7 360#page-course-index-category .singlebutton,
8903b17b
BB
361#page-course-editsection .singlebutton {
362 text-align: center;
363}
a610d873 364#page-admin-course-manage #movecourses td img {
8903b17b
BB
365 margin: 0 .22em;
366 vertical-align: text-bottom;
367}
a610d873 368#page-admin-course-manage #movecourses td img.icon {
8903b17b
BB
369 padding: 0;
370}
371
a610d873 372#coursesearch {
8903b17b
BB
373 margin-top: 1em;
374 text-align: center;
375}
376
8903b17b
BB
377#page-course-pending .pendingcourserequests {
378 margin-bottom: 1em;
379}
380#page-course-pending .pendingcourserequests .singlebutton {
381 display: inline;
382}
383#page-course-pending .pendingcourserequests .cell {
384 padding: 0 5px;
385}
386#page-course-pending .pendingcourserequests .cell.c6 {
387 white-space: nowrap;
388}
389
390.coursebox {
391 margin-bottom: 15px;
a610d873
MG
392 border: 1px dotted #ddd;
393 .border-radius(4px);
394 padding: 5px;
8903b17b 395}
a610d873 396
983c46a8 397.coursebox > .info > .coursename a {
a610d873
MG
398 display:block;
399 background-image:url([[pix:moodle|i/course]]);
400 background-repeat: no-repeat;
401 padding-left:21px;
8c288b26 402 background-position: center left;
8903b17b 403}
faf6010b 404.coursebox.remotehost > .info > .categoryname a {
a610d873 405 background-image:url([[pix:moodle|i/mnethost]]);
8903b17b 406}
983c46a8 407.coursebox > .info > .coursename,
69bbd2a7 408.coursebox .content .teachers,
a610d873
MG
409.coursebox .content .courseimage,
410.coursebox .content .coursefile {
411 float:left;
412 width:40%;
413 clear:left;
414}
983c46a8 415.coursebox > .info > h3.coursename {
69bbd2a7 416 margin: 5px;
a610d873 417}
983c46a8 418.coursebox > .info > .coursename {
69bbd2a7
MG
419 margin: 5px;
420 padding: 0;
a610d873 421}
69bbd2a7 422.coursebox .content .teachers li {
a610d873
MG
423 list-style-type:none;
424 padding:0;
425 margin:0;
8903b17b
BB
426}
427.coursebox .enrolmenticons {
a610d873
MG
428 padding:3px 0;
429 float:right;
8903b17b 430}
a610d873
MG
431.coursebox .moreinfo {
432 padding:3px 0;
433 float:right;
8903b17b 434}
a610d873
MG
435.coursebox .enrolmenticons img,
436.coursebox .moreinfo img {
437 margin:0 .2em;
438}
439.coursebox .content {
440 clear:both;
441}
69bbd2a7
MG
442.coursebox .content .summary,
443.coursebox .content .coursecat {
a610d873
MG
444 float:right;
445 width: 55%;
446}
69bbd2a7 447.coursebox .content .coursecat {
a610d873
MG
448 text-align:right;
449 clear:right;
450}
451.coursebox.remotecoursebox .remotecourseinfo {
452 float:left;
453 width: 40%;
454}
455.coursebox .content .courseimage img {
456 max-width:100px;
457 max-height:100px;
458}
69bbd2a7
MG
459.coursebox .content .coursecat,
460.coursebox .content .summary,
461.coursebox .content .courseimage,
462.coursebox .content .coursefile,
463.coursebox .content .teachers,
a610d873 464.coursebox.remotecoursebox .remotecourseinfo {
69bbd2a7
MG
465 margin:3px 5px;
466 padding:0;
8903b17b
BB
467}
468
faf6010b 469.dir-rtl .coursebox > .info > .categoryname a {
a610d873
MG
470 padding-left:0;
471 padding-right:21px;
8c288b26 472 background-position: center right;
a610d873 473}
faf6010b 474.dir-rtl .coursebox > .info > .categoryname,
a610d873
MG
475.dir-rtl .coursebox .teachers,
476.dir-rtl .coursebox .content .courseimage,
477.dir-rtl .coursebox .content .coursefile {
478 float:right;
479 clear:right;
480}
481.dir-rtl .coursebox .enrolmenticons,
482.dir-rtl .coursebox .moreinfo {
483 float:left;
484}
485.dir-rtl .coursebox .summary,
486.dir-rtl .coursebox .coursecat {
487 float:left;
488}
489.dir-rtl .coursebox .coursecat {
490 text-align:left;
491 clear:left;
8903b17b
BB
492}
493
a610d873
MG
494.coursebox.collapsed {
495 margin-bottom:0;
8903b17b 496}
a610d873
MG
497.coursebox.collapsed > .content {
498 display:none;
8903b17b 499}
a610d873
MG
500.courses .coursebox.collapsed {
501 border:1px solid #eeeeee;
983c46a8 502 padding:5px;
8903b17b 503}
a610d873
MG
504
505.courses .coursebox.even {
506 background-color:#f6f6f6;
8903b17b 507}
a610d873 508.courses .coursebox:hover,
d891aaba 509.course_category_tree .courses > .paging.paging-morelink:hover {
a610d873 510 background-color:#eeeeee;
8903b17b
BB
511}
512
a610d873 513.course_category_tree .category .numberofcourse {
8c288b26 514 font-size: @fontSizeSmall;
8903b17b
BB
515}
516
faf6010b 517.course_category_tree .controls {
518 visibility: hidden;
519}
520.course_category_tree .controls div {
521 display:inline;
522 cursor:pointer;
523}
524.jsenabled .course_category_tree .controls {
525 visibility: visible;
526}
527.course_category_tree .controls {
528 margin-bottom:5px;
529 text-align:right;
530 float:right;
531}
532.course_category_tree .controls div {
533 padding-right:2em;
534 font-size:75%;
535}
536
537.course_category_tree .category > .info > .categoryname{
a610d873 538 background-image:url([[pix:moodle|t/collapsed_empty]]);
8903b17b 539 background-repeat: no-repeat;
69bbd2a7
MG
540 padding:2px 18px;
541 margin:3px;
a610d873 542 background-position:center left;
8903b17b 543}
faf6010b 544.dir-rtl .course_category_tree .category > .info > .categoryname {
a610d873
MG
545 background-image:url([[pix:moodle|t/collapsed_empty_rtl]]);
546 background-position:center right;
8903b17b 547}
faf6010b 548.course_category_tree .category.with_children > .info > .categoryname {
a610d873 549 background-image:url([[pix:moodle|t/expanded]]);
3df632fb 550 cursor: pointer;
8903b17b 551}
faf6010b 552.course_category_tree .category.with_children.collapsed >.info > .categoryname {
a610d873 553 background-image:url([[pix:moodle|t/collapsed]]);
8903b17b 554}
faf6010b 555.dir-rtl .course_category_tree .category.with_children.collapsed > .info > .categoryname {
a610d873 556 background-image:url([[pix:moodle|t/collapsed_rtl]]);
8903b17b 557}
a610d873
MG
558.course_category_tree .category.collapsed>.content {
559 display:none;
8903b17b 560}
a610d873
MG
561
562.course_category_tree .category >.info {
563 .well;
564 min-height:0;
565 padding:0;
566 margin:3px 0;
567 margin-bottom:3px;
53c1b936 568 clear: both;
8903b17b 569}
a610d873
MG
570.course_category_tree.frontpage-category-names .category >.info {
571 background:none;
572 border:none;
573 margin:0;
8903b17b 574}
a610d873
MG
575.course_category_tree .category > .content {
576 padding-left:16px;
8903b17b
BB
577}
578
a610d873
MG
579.dir-rtl .course_category_tree .category > .content {
580 padding-left:0;
581 padding-right:16px;
8903b17b 582}
a610d873
MG
583
584.course_category_tree .subcategories > .paging,
585.courses > .paging {
586 margin:0;
587 padding:5px;
588 text-align:center;
8903b17b 589}
a610d873
MG
590
591.courses > .paging.paging-morelink,
592.course_category_tree .subcategories > .paging.paging-morelink {
593 text-align:left;
8903b17b 594}
a610d873
MG
595
596.course_category_tree .paging.paging-morelink a {
8c288b26 597 font-size: @fontSizeSmall;
8903b17b 598}
69bbd2a7 599.dir-rtl .courses > .paging.paging-morelink,
a610d873
MG
600.dir-rtl .course_category_tree .paging.paging-morelink {
601 text-align:right;
8903b17b
BB
602}
603
69bbd2a7 604#page-course-index-category .generalbox.info {
a610d873
MG
605 margin-bottom: 15px;
606 border: 1px dotted #ddd;
607 .border-radius(4px);
608 padding: 5px;
8903b17b 609}
a610d873 610
69bbd2a7 611#page-course-index-category .categorypicker {
a610d873
MG
612 text-align: center;
613 margin: 10px 0 20px;
8903b17b 614}
202fcfa1 615
e5de4933 616.section .activity .moodle-actionmenu .iconsmall {
ea5a01fb 617 max-width: none !important; /** reset sets 100% !important which breaks on IE8 without this !important */
202fcfa1
SH
618 width:16px;
619 height:16px;
202fcfa1
SH
620 padding:0.3em;
621}
5dc361e1 622
b488058f
SH
623
624
5dc361e1
SH
625/**
626 * Course management page
627 * Palette
628 *
f8ddf782 629 * Background (reg) #F5F5F5
5dc361e1
SH
630 * Background (light #fafafa
631 * Background (highlight) #ddffaa
632 * Borders #e1e1e8
633 */
634#course-category-listings {
635 background-color:#fff;
636 margin-bottom:200px;
637
638 /** Two column layout */
639 &.columns-2 {
640 > #course-listing > div {
641 position:relative;
642 left:-1px;
643 }
644 }
645 /** Three column layout */
646 &.columns-3 > #course-listing > div {
647 height:100%;
648 }
649
650 > div > div {
651 min-height:300px;
652 border:1px solid #e1e1e8;
653 > ul.ml > li:first-child > div {
654 border-top:0;
655 }
656 }
657 h3 {
658 margin:0;
659 padding:0.4rem 0.6rem 0.3rem;
f8ddf782 660 background-color:#F5F5F5;
5dc361e1
SH
661 border-bottom:1px solid #e1e1e8;
662 }
663 h4 {
664 margin:1rem 0 0;
665 padding:0.6rem 1rem 0.5rem;
666 }
667 .listing-actions {
668 text-align:center;
1b7e2010
SH
669 padding:0.4rem 0.3rem 0.3rem;
670 line-height:2.2em;
5dc361e1
SH
671 > .moodle-actionmenu {
672 display:inline-block;
673 .menu a {
674 padding-left:1rem;
675 }
676 }
677 .iconsmall {
678 vertical-align:text-bottom;
679 }
680 .moodle-actionmenu:not([data-enhanced]) {
681 li {line-height:normal;}
682 > .menubar a {
683 color:inherit;
684 display:inline-block;
685 > img {
686 display:none;
687 }
688 }
689 > .menu .menu-action-text {
690 display:inline-block;
691 }
692 }
693 }
694 ul.ml {
695 list-style: none;
696 margin:1rem 0;
697 ul.ml {
698 margin:0;
699 }
700 }
701 li {
702 line-height:2.2em;
703 > div {
704 border-bottom:1px solid #fff;
705 border-top:1px solid #fff;
5dc361e1
SH
706 &:hover {
707 background-color:#fafafa;
708 }
709 }
5dc361e1
SH
710 .tree-icon {
711 vertical-align:text-top;
712 margin: 2px 6px 0 0;
713 }
484c4c6c
SH
714 &[data-selected='1'] {
715 > div {
3b681e6c 716 background-color:#FFFFD8;
484c4c6c 717 border-top-color: #e1e1e8;
f8ddf782 718 border-bottom-color:#F5F5F5;
484c4c6c 719 }
484c4c6c
SH
720 li:first-of-type > div,
721 &[data-expandable='0']+li > div {
722 border-top-color:#e1e1e8;
723 }
724 &:last-of-type > div {
725 border-bottom-color:#e1e1e8;
726 }
5dc361e1
SH
727 }
728
729 // Tree item indenting to represent depth.
0c80d689
SH
730 .tree-icon {margin-left:0;}
731 li .tree-icon {margin-left:1em;}
732 li li .tree-icon {margin-left:2em;}
733 li li li .tree-icon {margin-left:3em;}
734 li li li li .tree-icon {margin-left:4em;}
735 li li li li li .tree-icon {margin-left:4.5em;}
736 li li li li li li .tree-icon {margin-left:5em;}
737 li li li li li li li .tree-icon {margin-left:5.5em;}
5dc361e1
SH
738
739 &+li > div,
740 &:first-child > div {
f8ddf782 741 border-top-color:#F5F5F5;
5dc361e1
SH
742 }
743 }
744
745 .item-actions {
746 margin-right:1em;
747 display:inline-block;
748 display:initial;
749 img {
7fd307b1 750 margin: 0 0.3em;
5dc361e1
SH
751 }
752 }
753
754 .listitem {
755 > div {
756 > .float-left {
757 float:left;
758 }
759 > .float-right {
760 float:right;
761 text-align:right;
762 }
763 .item-actions {
764 .action-show {
765 display:none;
766 }
767 .action-hide {
768 display:inline;
769 }
770 }
b488058f
SH
771 .without-actions {
772 color: #333;
773 }
c7a2291f
SH
774 .idnumber {
775 color:#a1a1a8;
776 margin-right:2em;
777 }
5dc361e1
SH
778 }
779 // The category or course is hidden.
780 &[data-visible="0"] {
781 .muted;
782 a.categoryname {
783 .muted;
784 }
785 > div {
786 > a {
787 .muted;
788 }
789 .item-actions {
790 .action-show {
791 display:inline;
792 }
793 .action-hide {
794 display:none;
795 }
796 }
797 }
798 > ul .item-actions.category-item-actions {
799 // If the category is hidden hide both show and hide icons for sub categories.
800 .action-hide,
801 .action-show {
802 display: none;
803 }
804 }
805 }
3b681e6c
SH
806 &.highlight {
807 background-color:transparent;
808 > div,
809 > div:hover,
810 &[data-selected='1'] > div {
811 background-color:#ddffaa;
812 }
813 }
5dc361e1
SH
814 }
815
816 #course-listing {
817 .listitem {
5dc361e1
SH
818 .categoryname {
819 display:inline-block;
820 margin-left:1em;
821 color:#a1a1a8;
822 }
823 .coursename {
824 display:inline-block;
5dc361e1
SH
825 }
826 .drag-handle {
827 display:inline-block;
828 margin: 0 6px 0 0;
829 }
3b681e6c
SH
830 > div {
831 padding-left:1rem;
832 }
5dc361e1 833 }
484c4c6c
SH
834 > .firstpage .listitem:first-child > div .item-actions .action-moveup,
835 > .lastpage .listitem:last-child > div .item-actions .action-movedown {display: none;}
5dc361e1
SH
836 .bulk-action-checkbox {
837 vertical-align:middle;
838 margin:-2px 6px 0 0;
839 }
840 }
841 #category-listing {
842 .listitem.collapsed > ul.ml {
843 display: none;
844 }
484c4c6c 845 .listitem {
3b681e6c 846 > div {
3b681e6c 847 > .ba-checkbox {
3b681e6c
SH
848 vertical-align:middle;
849 width:2.2em;
850 text-align:center;
851 margin:-1px 0.5em 0 0;
852 padding-top:2px;
853 }
854 }
855 &.highlight > div > .ba-checkbox {
856 background-color:#ddffaa;
857 }
858 &[data-selected='1'] > div > .ba-checkbox {
859 margin:0 0.5em 0 0;
860 padding:0;
861 background-color: inherit;
862 }
484c4c6c
SH
863 &:first-child > div .item-actions .action-moveup,
864 &:last-child > div .item-actions .action-movedown {display: none;}
865 }
5dc361e1
SH
866 .course-count {
867 color:#a1a1a8;
868 margin-right:2rem;
869 min-width:35px;
870 display:inline-block;
871 .smallicon {
872 width:0.8rem;
873 height:0.8rem;
874 vertical-align:middle;
875 margin:0 0.3rem;
876 }
877 }
878 .bulk-action-checkbox {
879 vertical-align:middle;
3b681e6c
SH
880 margin-right: -3px;
881 }
882 .category-listing > ul > .listitem:first-child {
883 position:relative;
3b681e6c
SH
884 }
885 .category-bulk-actions {
886 margin: 0 0.5em 0.5em;
3b681e6c 887 position:relative;
5dc361e1
SH
888 }
889 }
890
891 .detail-pair {
892 border-bottom:1px solid #e1e1e8;
893 margin:0 1rem;
894 > * {
895 display:inline-block;
896 line-height:2.2rem;
897 }
898 .pair-key {
5dc361e1
SH
899 font-weight:bold;
900 text-align:right;
901 vertical-align: top;
902 span {
903 margin-right: 1rem;
904 display:block;
905 }
906 }
907 .pair-value select {
908 max-width:100%;
909 }
910 &:last-child {
911 border-bottom-width:0;
912 }
913 }
914
915 .bulk-actions .detail-pair {
916 > * {
917 display:block;
918 width:100%;
919 text-align:left;
920 }
921 }
922
923 .listing-pagination {
924 text-align:center;
925 .yui3-button {
926 background-color:#FFF;
927 border:0;
928 margin:0.4rem 0.2rem 0.45rem;
929 font-size:10.4px;
930 &.active-page {
931 background-color:#E5EFFD;
932 }
933 }
934 }
935 .listing-pagination-totals {
936 text-align:center;
937 &.dimmed {
938 .muted;
939 margin:0.4rem 1rem 0.45rem;
940 }
941 }
942 .select-a-category .notifymessage,
943 .select-a-category .alert {
944 margin: 1em;
945 }
946}
7fd307b1
SH
947/** JS MUST be enabled for this next style **/
948.jsenabled #course-category-listings .category-item-actions .menu-action-text {padding-left:0.3em;}
949
5dc361e1
SH
950/** Management header styling **/
951.coursecat-management-header {
952 vertical-align:middle;
953 h2 {
954 display:inline-block;
955 text-align:left;
956 }
957 > div {
958 display:inline-block;
959 float:right;
960 margin-left:1em;
961 margin: 10px 0;
962 line-height:40px;
963 }
964 select {
965 max-width: 300px;
966 cursor: pointer;
967 padding: 0.4em 0.5em 0.45em 1em;
968 vertical-align: baseline;
969 white-space: nowrap;
970 }
971}
972
973.course-being-dragged-proxy {
974 border: 0;
975 color: @linkColor;
976 vertical-align:middle;
977 padding: 0 0 0 4em;
978}
979.course-being-dragged {
980 .opacity(50);
981}
982
983/**
984 * Display sizes:
985 * Large displays 1200 +
986 * Default displays 980 1199
987 * Tablets 768 979
988 * Small tablets and large phones 481 767
989 * Phones 0 480
990 */
991@media (min-width: 1200px) and (max-width: 1600px) {
992 #course-category-listings.columns-3 {
993 background-color:transparent;
994 border:0;
995
996 #category-listing,
997 #course-listing {
998 width:50%;
999 }
1000 #category-listing > div,
1001 #course-listing > div,
484c4c6c 1002 #course-detail > div {
5dc361e1
SH
1003 border:1px solid #e1e1e8;
1004 background-color:#FFF;
1005 }
1006 #course-detail {
1007 width:100%;
1008 margin-top:1em;
1009 }
1010 }
1011
1012}
1013
1014@media (max-width: 1199px) {
484c4c6c 1015 #course-category-listings.columns-2,
5dc361e1
SH
1016 #course-category-listings.columns-3 {
1017 background-color:transparent;
1018 border:0;
1019 #category-listing,
1020 #course-listing,
1021 #course-detail {
1022 width:100%;
484c4c6c 1023 margin:0 0 1em;
5dc361e1
SH
1024 }
1025 #category-listing > div,
1026 #course-listing > div,
1027 #course-detail > div {
1028 border:1px solid #e1e1e8;
1029 background-color:#FFF;
1030 }
1031 }
1032}