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