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