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