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