MDL-68301 theme_boost: move course format css
[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;
64de4dec
BB
328 margin: 0;
329 list-style: none;
f4143537 330
137c289a 331 li.section {
0e202eca 332 margin-top: $spacer;
137c289a 333 padding-bottom: $spacer;
f4143537 334
8341055e
MG
335 .summary,
336 .content > .availabilityinfo {
337 margin-left: 25px;
338 }
0dc0281c 339
64de4dec
BB
340 .left,
341 .right {
342 padding: 0 6px 0;
78b60a18 343 text-align: right;
64de4dec 344 width: auto;
78b60a18 345 }
137c289a 346 }
536f0460
DW
347}
348
349.course-content {
350 margin-top: 0;
351}
352
536f0460
DW
353.course-content .hidden {
354 display: none;
355}
356
357.course-content li {
358 &.section {
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 }
f4143537 370
536f0460
DW
371 li {
372 &.activity {
373 ul {
374 list-style: disc;
f4143537 375
536f0460
DW
376 ul {
377 list-style: circle;
f4143537 378
536f0460
DW
379 ul {
380 list-style: square;
381 }
382 }
383 }
384 }
385 }
f4143537 386
137c289a
FM
387 .right {
388 > .icon:first-child {
389 /* Remove the spacer icon. */
390 display: none;
391 }
392 }
536f0460
DW
393 }
394}
395
5cfaecac 396.path-course-view.editing #region-main > .card-block {
7135bbb1
JD
397 padding-bottom: 13rem;
398}
399
76721ad6
GB
400.jumpmenu .form-inline {
401 display: block;
402}
403
536f0460 404.path-course-view .completionprogress {
f4143537 405 margin-left: 25px;
536f0460
DW
406}
407
408.path-course-view .completionprogress {
409 display: block;
410 float: right;
411 height: 20px;
412 position: relative;
413}
414
415#page-site-index .subscribelink {
416 text-align: right;
417}
f4143537 418
536f0460
DW
419#site-news-forum h2,
420#frontpage-course-list h2,
421#frontpage-category-names h2,
422#frontpage-category-combo h2 {
423 margin-bottom: 9px;
424}
f4143537 425
536f0460
DW
426.path-course-view a.reduce-sections {
427 padding-left: 0.2em;
428}
f4143537 429
536f0460
DW
430.path-course-view .subscribelink {
431 text-align: right;
432}
f4143537 433
536f0460
DW
434.path-course-view .unread {
435 margin-left: 30px;
436}
f4143537 437
536f0460
DW
438.path-course-view .block.drag .header {
439 cursor: move;
440}
f4143537 441
536f0460
DW
442.path-course-view .completionprogress {
443 text-align: right;
444}
f4143537 445
536f0460
DW
446.path-course-view .single-section .completionprogress {
447 margin-right: 5px;
448}
f4143537 449
536f0460
DW
450.path-site li.activity > div,
451.path-course-view li.activity > div {
452 position: relative;
453 padding: 0 16px 0 0; /* to accommodate the floated completion icon with highlighting */
454}
f4143537 455
536f0460
DW
456.path-course-view li.activity span.autocompletion img {
457 vertical-align: text-bottom;
e241e76a 458 margin-left: 0;
536f0460 459}
f4143537 460
e241e76a
DW
461.path-course-view li.activity form.togglecompletion .btn {
462 padding: 0;
463}
536f0460
DW
464.path-course-view li.activity form.togglecompletion img {
465 max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
466}
f4143537 467
a4808411
FM
468.path-course-view {
469 &.editing {
470 li.activity span.autocompletion img {
471 /* Use the same spacing as the filler. */
472 margin-right: $spacer / 2;
473 margin-left: $spacer / 2;
474 }
475 }
476}
477
536f0460
DW
478.path-course-view li.activity form.togglecompletion .ajaxworking {
479 width: 16px;
480 height: 16px;
481 position: absolute;
482 right: 22px;
483 top: 3px;
484 background: url([[pix:i/ajaxloader]]) no-repeat;
485}
486
487li.section.hidden span.commands a.editing_hide,
488li.section.hidden span.commands a.editing_show {
489 cursor: default;
490}
f4143537 491
536f0460
DW
492.single-section h3.sectionname {
493 text-align: center;
494 clear: both;
495}
496
536f0460
DW
497input.titleeditor {
498 width: 330px;
499 vertical-align: text-bottom;
500}
501
502span.editinstructions {
6e402aeb 503 /*rtl:remove*/
536f0460 504 position: absolute;
6e402aeb
NK
505 /*rtl:raw:
506 position: relative;
507 */
536f0460
DW
508 top: 0;
509 margin-top: -22px;
510 margin-left: 30px;
536f0460
DW
511 font-size: $font-size-sm;
512 padding: .1em .4em;
513 background-color: $state-info-bg;
514 color: $state-info-text;
515 text-decoration: none;
516 z-index: 9999;
f4143537 517
536f0460
DW
518 @include box-shadow(2px 2px 5px 1px #ccc);
519 border: 1px solid $state-info-border;
520}
521
522/* Course drag and drop upload styles */
523#dndupload-status {
524 position: fixed;
f4143537 525 left: 0;
536f0460
DW
526 width: 40%;
527 margin: 0 30%;
528 padding: 6px;
529 border: 1px solid $state-info-border;
530 text-align: center;
531 background: $state-info-bg;
532 color: $state-info-text;
533 z-index: 1; // Required in order to have this above relatively positioned course content@mixin
f4143537 534
536f0460
DW
535 @include box-shadow(2px 2px 5px 1px #ccc);
536 @include border-radius(8px);
537}
f4143537 538
536f0460
DW
539.dndupload-preview {
540 color: #909090;
541 border: 1px dashed #909090;
542 list-style: none;
543 margin-top: .2em;
544 padding: .3em;
545}
f4143537 546
536f0460
DW
547.dndupload-hidden {
548 display: none;
549}
550
551/* COURSES LISTINGS AND COURSE SUMMARY */
552#page-course-pending .singlebutton,
553#page-course-index .singlebutton,
554#page-course-index-category .singlebutton,
555#page-course-editsection .singlebutton {
556 text-align: center;
557}
f4143537 558
536f0460
DW
559#page-admin-course-manage #movecourses td img {
560 margin: 0 .22em;
561 vertical-align: text-bottom;
562}
536f0460
DW
563
564#coursesearch {
565 margin-top: 1em;
8398273d 566 text-align: left;
536f0460
DW
567}
568
569#page-course-pending .pendingcourserequests {
570 margin-bottom: 1em;
571}
f4143537 572
536f0460
DW
573#page-course-pending .pendingcourserequests .singlebutton {
574 display: inline;
575}
f4143537 576
536f0460
DW
577#page-course-pending .pendingcourserequests .cell {
578 padding: 0 5px;
579}
f4143537 580
536f0460
DW
581#page-course-pending .pendingcourserequests .cell.c6 {
582 white-space: nowrap;
583}
584
585.coursebox {
137c289a 586 padding: $spacer / 2;
536f0460
DW
587}
588
589.coursebox > .info > .coursename a {
590 display: block;
23fc4008
DW
591 background-image: url([[pix:moodle|i/course]]);
592 background-repeat: no-repeat;
593 padding-left: 21px;
594 background-position: left 0.2em;
536f0460 595}
f4143537 596
536f0460
DW
597.coursebox > .info > .coursename,
598.coursebox .content .teachers,
599.coursebox .content .courseimage,
c1e15d20
MG
600.coursebox .content .coursefile,
601.coursebox .content .customfields-container {
536f0460
DW
602 float: left;
603 clear: left;
604}
f4143537 605
536f0460
DW
606.coursebox .content .teachers,
607.coursebox .content .courseimage,
c1e15d20
MG
608.coursebox .content .coursefile,
609.coursebox .content .customfields-container {
536f0460
DW
610 width: 40%;
611}
f4143537 612
536f0460
DW
613.coursebox > .info > h3.coursename {
614 margin: 5px;
536f0460 615}
f4143537 616
536f0460
DW
617.coursebox > .info > .coursename {
618 margin: 5px;
619 padding: 0;
620}
f4143537 621
536f0460 622.coursebox .content .teachers li {
f4143537
DP
623 list-style-type: none;
624 padding: 0;
625 margin: 0;
536f0460 626}
f4143537 627
33389741
BB
628.coursebox .moreinfo,
629.coursebox .enrolmenticons {
f4143537
DP
630 padding: 3px 0;
631 float: right;
536f0460 632}
f4143537 633
536f0460 634.coursebox .moreinfo img {
f4143537 635 margin: 0 .2em;
536f0460 636}
f4143537 637
536f0460 638.coursebox .content {
f4143537 639 clear: both;
536f0460 640}
f4143537 641
536f0460
DW
642.coursebox .content .summary,
643.coursebox .content .coursecat {
f4143537 644 float: right;
536f0460
DW
645 width: 55%;
646}
f4143537 647
536f0460 648.coursebox .content .coursecat {
f4143537
DP
649 text-align: right;
650 clear: right;
536f0460 651}
f4143537 652
536f0460 653.coursebox.remotecoursebox .remotecourseinfo {
f4143537 654 float: left;
536f0460
DW
655 width: 40%;
656}
f4143537 657
536f0460 658.coursebox .content .courseimage img {
f4143537
DP
659 max-width: 100px;
660 max-height: 100px;
536f0460 661}
f4143537 662
536f0460
DW
663.coursebox .content .coursecat,
664.coursebox .content .summary,
665.coursebox .content .courseimage,
666.coursebox .content .coursefile,
667.coursebox .content .teachers,
c1e15d20
MG
668.coursebox.remotecoursebox .remotecourseinfo,
669.coursebox .content .customfields-container {
137c289a
FM
670 margin: 15px 5px 5px;
671 padding: 0;
536f0460
DW
672}
673
674.coursebox.remotehost > .info > .categoryname a {
f4143537 675 background-image: url([[pix:moodle|i/mnethost]]);
536f0460 676}
f4143537 677
536f0460 678.coursebox.collapsed {
f4143537 679 margin-bottom: 0;
536f0460 680}
f4143537 681
536f0460 682.coursebox.collapsed > .content {
f4143537 683 display: none;
536f0460 684}
536f0460 685
137c289a
FM
686.courses .coursebox {
687 &.collapsed {
688 padding-top: $spacer-y / 2;
689 padding-bottom: $spacer-y / 2;
690 }
f4143537 691
137c289a
FM
692 &.even {
693 background-color: $table-bg-accent;
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 {
6dccde9d 790 margin-bottom: 0;
536f0460
DW
791
792 /** Two column layout */
793 &.columns-2 {
794 > #course-listing > div {
f4143537
DP
795 position: relative;
796 left: -1px;
536f0460
DW
797 }
798 }
799 /** Three column layout */
800 &.columns-3 > #course-listing > div {
f4143537 801 height: 100%;
536f0460
DW
802 }
803
804 > div > div {
f4143537
DP
805 min-height: 300px;
806
536f0460 807 > ul.ml > li:first-child > div {
f4143537 808 border-top: 0;
536f0460
DW
809 }
810 }
f4143537 811
536f0460 812 h3 {
f4143537
DP
813 margin: 0;
814 padding: 0.4rem 0.6rem 0.3rem;
536f0460 815 }
f4143537 816
536f0460 817 h4 {
f4143537
DP
818 margin: 1rem 0 0;
819 padding: 0.6rem 1rem 0.5rem;
536f0460 820 }
f4143537 821
536f0460 822 .moodle-actionmenu {
f4143537 823 white-space: nowrap;
536f0460
DW
824 }
825
536f0460 826 .listing-actions {
f4143537 827 text-align: center;
f4143537 828
536f0460 829 > .moodle-actionmenu {
f4143537 830 display: inline-block;
536f0460 831 }
536f0460 832 }
f4143537 833
536f0460
DW
834 ul.ml {
835 list-style: none;
f4143537
DP
836 margin: 1rem 0;
837
536f0460 838 ul.ml {
f4143537 839 margin: 0;
536f0460
DW
840 }
841 }
f4143537 842
ba5c5083 843 .listitem {
f4143537 844
536f0460 845 &[data-selected='1'] {
3ec69c2e
BB
846 background-color: $table-bg-accent;
847 &:hover {
536f0460
DW
848 background-color: $table-bg-hover;
849 }
850 }
536f0460
DW
851 }
852
853 .item-actions {
f4143537
DP
854 margin-right: 1em;
855 display: inline-block;
f4143537 856
536f0460 857 &.show .menu {
f4143537 858
536f0460
DW
859 img {
860 width: 12px;
f4143537 861 max-width: none;
536f0460
DW
862 }
863 }
f4143537 864
536f0460
DW
865 .menu-action-text {
866 vertical-align: inherit;
867 }
868 }
869
870 .listitem {
871 > div {
872 > .float-left {
f4143537 873 float: left;
536f0460 874 }
f4143537 875
536f0460 876 > .float-right {
f4143537
DP
877 float: right;
878 text-align: right;
536f0460 879 }
f4143537 880
536f0460
DW
881 .item-actions {
882 .action-show {
f4143537 883 display: none;
536f0460 884 }
f4143537 885
536f0460 886 .action-hide {
f4143537 887 display: inline;
536f0460
DW
888 }
889 }
f4143537 890
536f0460
DW
891 .without-actions {
892 color: #333;
893 }
f4143537 894
536f0460 895 .idnumber {
f4143537
DP
896 color: #a1a1a8;
897 margin-right: 2em;
536f0460
DW
898 }
899 }
900 // The category or course is hidden.
901 &[data-visible="0"] {
6239d808 902 color: $text-muted;
f4143537 903
536f0460
DW
904 > div {
905 > a {
6239d808 906 color: $text-muted;
536f0460 907 }
f4143537 908
536f0460
DW
909 .item-actions {
910 .action-show {
f4143537 911 display: inline;
536f0460 912 }
f4143537 913
536f0460 914 .action-hide {
f4143537 915 display: none;
536f0460
DW
916 }
917 }
918 }
919 }
f4143537 920
536f0460
DW
921 &.highlight {
922 background-color: $body-bg;
f4143537 923
536f0460
DW
924 > div,
925 > div:hover,
926 &[data-selected='1'] > div {
927 background-color: $table-bg-hover;
928 }
929 }
930 }
931
932 #course-listing {
933 .listitem {
934 .categoryname {
f4143537
DP
935 display: inline-block;
936 margin-left: 1em;
937 color: #a1a1a8;
536f0460 938 }
f4143537 939
536f0460 940 .coursename {
f4143537 941 display: inline-block;
536f0460 942 }
536f0460 943 }
f4143537 944
536f0460
DW
945 > .firstpage .listitem:first-child > div .item-actions .action-moveup,
946 > .lastpage .listitem:last-child > div .item-actions .action-movedown {
9cb41231 947 display: none;
536f0460 948 }
f4143537 949
536f0460 950 .bulk-action-checkbox {
f4143537 951 margin: -2px 6px 0 0;
536f0460
DW
952 }
953 }
f4143537 954
536f0460
DW
955 #category-listing {
956 .listitem.collapsed > ul.ml {
957 display: none;
958 }
f4143537 959
536f0460
DW
960 .listitem {
961 > div {
962 > .ba-checkbox {
f4143537
DP
963 width: 2.2em;
964 text-align: center;
965 margin: -1px 0.5em 0 0;
966 padding-top: 2px;
536f0460
DW
967 }
968 }
f4143537 969
536f0460
DW
970 &.highlight > div > .ba-checkbox {
971 background-color: $table-bg-hover;
972 }
f4143537 973
536f0460 974 &[data-selected='1'] > div > .ba-checkbox {
f4143537
DP
975 margin: 0 0.5em 0 0;
976 padding: 0;
536f0460
DW
977 background-color: inherit;
978 }
f4143537 979
536f0460
DW
980 &:first-child > div .item-actions .action-moveup,
981 &:last-child > div .item-actions .action-movedown {
9cb41231 982 display: none;
536f0460
DW
983 }
984 }
f4143537 985
536f0460 986 .course-count {
f4143537
DP
987 color: #a1a1a8;
988 margin-right: 2rem;
989 min-width: 3.5em;
990 display: inline-block;
536f0460 991 }
f4143537 992
536f0460
DW
993 .bulk-action-checkbox {
994 margin-right: -3px;
995 }
f4143537 996
536f0460 997 .category-listing > ul > .listitem:first-child {
f4143537 998 position: relative;
536f0460 999 }
f4143537 1000
536f0460
DW
1001 .category-bulk-actions {
1002 margin: 0 0.5em 0.5em;
f4143537 1003 position: relative;
536f0460
DW
1004 }
1005 }
1006
1007 .detail-pair {
f4143537 1008
536f0460 1009 > * {
f4143537 1010 display: inline-block;
536f0460 1011 }
f4143537 1012
536f0460 1013 .pair-key {
f4143537 1014 font-weight: bold;
536f0460 1015 vertical-align: top;
f4143537 1016
536f0460
DW
1017 span {
1018 margin-right: 1rem;
f4143537 1019 display: block;
536f0460
DW
1020 }
1021 }
f4143537 1022
536f0460 1023 .pair-value select {
f4143537 1024 max-width: 100%;
536f0460
DW
1025 }
1026 }
1027
1028 .bulk-actions .detail-pair {
1029 > * {
f4143537
DP
1030 display: block;
1031 width: 100%;
536f0460
DW
1032 }
1033 }
1034
1035 .listing-pagination {
f4143537
DP
1036 text-align: center;
1037
536f0460 1038 .yui3-button {
3ec69c2e 1039 @include button-variant($info, $info);
f4143537
DP
1040 border: 0;
1041 margin: 0.4rem 0.2rem 0.45rem;
1042 font-size: 10.4px;
1043
536f0460 1044 &.active-page {
3ec69c2e 1045 @include button-variant($primary, $primary);
536f0460
DW
1046 }
1047 }
1048 }
f4143537 1049
536f0460 1050 .listing-pagination-totals {
f4143537
DP
1051 text-align: center;
1052
536f0460 1053 &.dimmed {
6239d808 1054 color: $text-muted;
f4143537 1055 margin: 0.4rem 1rem 0.45rem;
536f0460
DW
1056 }
1057 }
f4143537 1058
536f0460
DW
1059 .select-a-category .notifymessage,
1060 .select-a-category .alert {
1061 margin: 1em;
1062 }
1063}
1064
1065#course-category-listings #course-listing .listitem .drag-handle {
1066 display: none;
1067}
f4143537 1068
536f0460 1069.jsenabled #course-category-listings #course-listing .listitem .drag-handle {
f4143537 1070 display: inline-block;
536f0460 1071 margin: 0 6px 0 0;
f4143537 1072 cursor: pointer;
536f0460
DW
1073}
1074
1075/** Management header styling **/
1076.coursecat-management-header {
f4143537
DP
1077 vertical-align: middle;
1078
536f0460 1079 h2 {
f4143537
DP
1080 display: inline-block;
1081 text-align: left;
536f0460 1082 }
f4143537 1083
536f0460 1084 > div {
f4143537
DP
1085 display: inline-block;
1086 float: right;
f4143537 1087
536f0460 1088 > div {
46c1713c 1089 margin: 10px 0 10px 1em;
f4143537 1090 display: inline-block;
536f0460
DW
1091 }
1092 }
f4143537 1093
536f0460
DW
1094 select {
1095 max-width: 300px;
1096 cursor: pointer;
1097 padding: 0.4em 0.5em 0.45em 1em;
1098 vertical-align: baseline;
1099 white-space: nowrap;
1100 }
f4143537 1101
536f0460
DW
1102 .view-mode-selector {
1103 .moodle-actionmenu {
f4143537
DP
1104 white-space: nowrap;
1105 display: inline-block;
536f0460 1106 }
f4143537 1107
536f0460 1108 .moodle-actionmenu[data-enhanced].show .menu a {
f4143537 1109 padding-left: 1em;
536f0460
DW
1110 }
1111 }
1112}
f4143537 1113
536f0460
DW
1114.course-being-dragged-proxy {
1115 border: 0;
1116 color: $link-color;
f4143537 1117 vertical-align: middle;
536f0460
DW
1118 padding: 0 0 0 4em;
1119}
f4143537 1120
536f0460
DW
1121.course-being-dragged {
1122 opacity: 0.5;
1123}
1124
1125/**
1126 * Display sizes:
1127 * Large displays 1200 +
1128 * Default displays 980 1199
1129 * Tablets 768 979
1130 * Small tablets and large phones 481 767
1131 * Phones 0 480
1132 */
f4143537 1133
536f0460
DW
1134@media (min-width: 1200px) and (max-width: 1600px) {
1135 #course-category-listings.columns-3 {
1136 background-color: $body-bg;
f4143537 1137 border: 0;
536f0460
DW
1138
1139 #category-listing,
1140 #course-listing {
f4143537 1141 width: 50%;
536f0460 1142 }
f4143537 1143
536f0460
DW
1144 #category-listing > div,
1145 #course-listing > div,
1146 #course-detail > div {
1147 background-color: $body-bg;
1148 }
f4143537 1149
536f0460 1150 #course-detail {
f4143537
DP
1151 width: 100%;
1152 margin-top: 1em;
536f0460
DW
1153 }
1154 }
536f0460
DW
1155}
1156
1157@media (max-width: 1199px) {
1158 #course-category-listings.columns-2,
1159 #course-category-listings.columns-3 {
f4143537
DP
1160 border: 0;
1161
536f0460
DW
1162 #category-listing,
1163 #course-listing,
1164 #course-detail {
f4143537
DP
1165 width: 100%;
1166 margin: 0 0 1em;
536f0460 1167 }
536f0460
DW
1168 }
1169}
99061152
DW
1170
1171.page-settings-menu .menubar > a > .icon {
1172 width: auto;
1173 height: 32px;
9d67a408 1174 font-size: 32px;
99061152 1175}
df926896
BB
1176
1177.activity-navigation {
1178 .row {
1179 align-items: center;
1180 }
1181 #prev-activity-link,
1182 #next-activity-link {
1183 white-space: pre-wrap;
1184 }
1185}