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