MDL-55452 stylelint: prevent use of !important
[moodle.git] / theme / bootstrapbase / less / moodle / course.less
CommitLineData
8903b17b 1/* course.less */
73fe7470 2/* COURSE CONTENT */
3bd77765 3/* stylelint-disable unit-blacklist */
8903b17b
BB
4.section_add_menus {
5 text-align: right;
60cf0742
S
6 clear: both;
7}
8.section-modchooser {
9 clear: both;
8903b17b
BB
10}
11.dir-rtl .section_add_menus {
12 text-align: left;
60cf0742 13 clear: both;
8903b17b
BB
14}
15.section_add_menus .horizontal div,
16.section_add_menus .horizontal form {
17 display: inline;
18}
19.section_add_menus optgroup {
20 font-weight: normal;
21 font-style: italic;
22}
23.section_add_menus .urlselect {
24 margin-left: .4em;
25}
26.dir-rtl .section_add_menus .urlselect {
27 margin-right: .4em;
28 margin-left: 0;
29}
30.section_add_menus .urlselect select {
31 margin-left: .2em;
32}
33.dir-rtl .section_add_menus .urlselect select {
34 margin-right: .2em;
35 margin-left: 0;
36}
37.section_add_menus .urlselect img.iconhelp {
38 padding: 0;
39 margin: 0;
4460e380 40 vertical-align: text-bottom;
8903b17b
BB
41}
42
e161a5a3
FM
43.sitetopic ul.section {
44 margin: 0;
45}
8903b17b
BB
46.course-content ul.section {
47 margin: 1em;
48}
3072040c 49.section {
60cf0742
S
50 .side {
51 &.left {
52 float: left;
53 }
54 &.right {
55 float: right;
56 }
60cf0742 57 }
3072040c
AN
58 .spinner {
59 height: 16px;
60 width: 16px;
61 }
62 .activity {
63 .spinner {
868575ec 64 left: 100%;
3072040c 65 position: absolute;
868575ec 66 vertical-align: text-bottom;
3072040c 67 }
26dd99d2
AN
68
69 .editing_move {
70 /* Move the move icon to the start of the line */
71 position: absolute;
72 left: 0;
73 top: 0;
74 }
75
4c9e8ea7 76 .mod-indent-outer {
26dd99d2
AN
77 /**
78 * Add appropriate padding such that nothing overlaps the
79 * absolute positioned move icon.
80 */
81 padding-left: 32px;
82 }
83
84 /* The command block for each activity */
85 .actions {
86 position: absolute;
87 right: 0;
88 top: 0;
89 }
d28aeedd 90
4c9e8ea7 91 .contentwithoutlink,
d28aeedd 92 .activityinstance {
4c9e8ea7
AN
93
94 min-width: 40%;
95 display: table-cell;
96 padding-right: 4px;
97 min-height: 2em;
98
d28aeedd
AN
99 .dimmed {
100 img.activityicon {
d3a93557
DP
101 opacity: 0.5;
102 filter: alpha(opacity=50);
d28aeedd
AN
103 }
104 }
105 }
3072040c 106 }
41c2a197 107 .label {
d3a93557
DP
108 .contentwithoutlink,
109 .activityinstance {
110 padding-right: 32px;
111 display: block;
112 height: inherit;
113 }
114
115 .mod-indent-outer {
116 padding-left: 24px;
117 display: block;
118 }
41c2a197 119 }
81dc0796 120
9ac099a1
AN
121 .filler {
122 width: 16px;
123 height: 16px;
124 padding: 0.3em;
125 display: inline-block;
126 }
127
81dc0796
AN
128 .activity.editor_displayed {
129 a.editing_title,
130 .moodle-actionmenu {
131 display: none;
132 }
133 div.activityinstance {
13a73a16 134 padding-right: initial;
81dc0796
AN
135
136 input {
137 margin-bottom: initial;
138 padding-top: initial;
139 padding-bottom: initial;
140 vertical-align: text-bottom;
141 }
142 }
143 }
3072040c
AN
144}
145
26dd99d2 146.dir-rtl .section {
60cf0742
S
147 .side {
148 &.left {
149 float: right;
150 }
151 &.right {
152 float: left;
153 }
60cf0742 154 }
26dd99d2
AN
155 .activity {
156 .spinner {
26dd99d2 157 left: auto;
868575ec 158 right: 100%;
26dd99d2
AN
159 }
160
4c9e8ea7 161 .mod-indent-outer {
26dd99d2
AN
162 /**
163 * Add appropriate padding such that nothing overlaps the
164 * absolute positioned move icon.
165 */
4c9e8ea7 166 padding-left: initial;
26dd99d2
AN
167 padding-right: 32px;
168 }
169
170 /* The command block for each activity */
171 .actions {
172 left: 0;
173 right: auto;
174 }
4c9e8ea7
AN
175
176 .contentwithoutlink,
177 .activityinstance {
178 padding-left: 4px;
179 padding-right: initial;
180 }
26dd99d2
AN
181 }
182}
183
ad6a1455 184.dir-rtl .section {
13a73a16
AN
185 .activity {
186 .editing_move {
187 /* Move the move icon to the start of the line */
188 left: auto;
189 right: 0;
190 }
191
192 &.editor_displayed {
193 div.activityinstance {
194 padding-left: initial;
195 }
196 }
197 }
198}
199
3072040c 200.activity img.activityicon {
8903b17b 201 margin-right: 6px;
40526616 202 vertical-align: text-bottom;
8903b17b
BB
203}
204.dir-rtl .section .activity img.activityicon {
205 margin-left: 6px;
206 margin-right: 0;
207}
208.section .activity .activityinstance,
209.section .activity .activityinstance div {
210 display: inline-block;
211}
26dd99d2
AN
212.editing {
213 .section {
214 .activity {
4c9e8ea7 215 .contentwithoutlink,
26dd99d2 216 .activityinstance {
26dd99d2 217 padding-right: 200px;
26dd99d2
AN
218 }
219 }
220 }
8903b17b 221}
26dd99d2
AN
222
223.dir-rtl.editing {
224 .section {
225 .activity {
4c9e8ea7 226 .contentwithoutlink,
26dd99d2
AN
227 .activityinstance {
228 padding-left: 200px;
229 padding-right: 0;
230 }
231 }
232 }
8903b17b 233}
26dd99d2 234
8903b17b
BB
235.editing_show + .editing_assign,
236.editing_hide + .editing_assign {
237 // if roles icon missing, add space
238 margin-left: 20px;
239}
240.section .activity .commands {
241 white-space: nowrap;
242 display: inline;
243}
c604e01c
JF
244.section .activity.modtype_label.label {
245 font-weight: normal;
77063326 246 padding: .2em;
c604e01c 247}
8903b17b
BB
248.section li.activity {
249 padding: .2em;
250 clear: both;
251}
252.section .activity .activityinstance .groupinglabel {
c604e01c
JF
253 padding-left: 30px;
254}
255.dir-rtl .section .activity .activityinstance .groupinglabel {
256 padding-right: 30px;
8903b17b
BB
257}
258.section .activity .availabilityinfo,
259.section .activity .contentafterlink {
260 margin-top: 0.5em;
261 margin-left: 30px;
262}
263.dir-rtl .section .activity .availabilityinfo,
264.dir-rtl .section .activity .contentafterlink {
265 margin-left: 0;
266 margin-right: 30px;
267}
268.section .activity .contentafterlink p {
269 margin: .5em 0;
270}
b59f2e3b
SH
271.editing .section .activity:hover,
272.editing .section .activity.action-menu-shown {
8903b17b
BB
273 background-color: @grayLighter;
274}
13cb4ee0
DS
275.course-content .current {
276 background-color: @infoBackground;
277}
8903b17b 278.course-content .section-summary {
e514c722 279 border: 1px solid @tableBorder;
8903b17b
BB
280 margin-top: 5px;
281 list-style: none;
282}
0e878352 283.course-content .section-summary .section-title {
8903b17b
BB
284 margin: 2px 5px 10px 5px;
285}
286.course-content .section-summary .summarytext {
287 margin: 2px 5px 2px 5px;
288}
289.course-content .section-summary .section-summary-activities .activity-count {
290 .muted;
291 font-size: @fontSizeSmall;
292 margin: 3px;
293 white-space: nowrap;
294 display: inline-block;
295}
296.course-content .section-summary .summary {
297 margin-top: 5px;
298}
299.course-content .single-section {
300 margin-top: 1em;
301}
302.course-content .single-section .section-navigation {
303 display: block;
304 padding: 0.5em;
305 margin-bottom: -0.5em;
306}
307.course-content .single-section .section-navigation .title {
308 font-weight: bold;
309 font-size: 108%;
310 clear: both;
311}
312.course-content .single-section .section-navigation .mdl-left {
313 font-weight: normal;
314 float: left;
315 margin-right: 1em;
316}
317.dir-rtl .course-content .single-section .section-navigation .mdl-left {
318 float: right;
319}
320.course-content .single-section .section-navigation .mdl-left .larrow {
321 margin-right: 0.1em;
322}
323.course-content .single-section .section-navigation .mdl-right {
324 font-weight: normal;
325 float: right;
326 margin-left: 1em;
327}
328.dir-rtl .course-content .single-section .section-navigation .mdl-right {
329 float: left;
330}
331.course-content .single-section .section-navigation .mdl-right .rarrow {
332 margin-left: 0.1em;
333}
334.course-content .single-section .section-navigation .mdl-bottom {
335 margin-top: 0;
336}
337.course-content ul li.section.main {
e514c722 338 border-bottom: 2px solid @tableBorder;
8903b17b
BB
339 margin-top: 0;
340}
341.course-content ul li.section.hidden {
c73fd11e 342 .sectionname > span,
0e878352
DP
343 .content > div,
344 /* All the divs but the activities which are in a UL. */
c855ced7
FM
345 .activity .activityinstance {
346 opacity: .5;
6b963db3
AN
347 }
348 .sectionname > span,
349 .activity .activityinstance {
cf86d4f5
AN
350 margin-left: 10px;
351 margin-right: 10px;
933183e5 352 }
8903b17b
BB
353}
354.course-content ul.topics li.section .content,
355.course-content ul.weeks li.section .content {
356 margin-right: 20px;
357 margin-left: 20px;
358 padding: 0;
359}
360
361.course-content {
362 margin-top: 0;
363}
364
365.course-content ul.topics li.section {
366 padding-bottom: 20px;
367}
368
369.course-content ul.topics li.section .summary {
370 margin-left: 25px;
371}
372
4c607947
AG
373.course-content li {
374 &.section {
375 ul {
376 list-style: disc;
377 ul {
378 list-style: circle;
379 ul {
380 list-style: square;
381 }
382 }
383 }
384 li {
385 &.activity {
386 ul {
387 list-style: disc;
388 ul {
389 list-style: circle;
390 ul {
391 list-style: square;
392 }
393 }
394 }
395 }
396 }
397 }
398}
399
8903b17b 400.path-course-view .completionprogress {
23bb9e24 401 margin-left: 25px;
8903b17b
BB
402}
403
404.path-course-view .completionprogress {
405 display: block;
406 float: right;
407 height: 20px;
408 position: relative;
8903b17b
BB
409}
410
411#page-site-index .subscribelink {
412 text-align: right;
413}
faf6010b 414#site-news-forum h2,
415#frontpage-course-list h2,
416#frontpage-category-names h2,
417#frontpage-category-combo h2 {
1d49a5cd
DP
418 margin-bottom: 9px;
419}
8903b17b
BB
420.path-course-view a.reduce-sections {
421 padding-left: 0.2em;
422}
8903b17b
BB
423.path-course-view .subscribelink {
424 text-align: right;
425}
426.path-course-view .unread {
c604e01c
JF
427 margin-left: 30px;
428}
429.dir-rtl.path-course-view .unread {
430 margin-right: 30px;
8903b17b
BB
431}
432.path-course-view .block.drag .header {
433 cursor: move;
434}
435.path-course-view .completionprogress {
436 text-align: right;
437}
438.dir-rtl.path-course-view .completionprogress {
439 text-align: left;
440}
441.path-course-view .single-section .completionprogress {
442 margin-right: 5px;
443}
444.path-course-view .section .summary {
445 line-height: normal;
446}
447
448.path-site li.activity > div,
449.path-course-view li.activity > div {
450 position: relative;
a4f01fe4
SH
451 padding: 0 16px 0 0; /* to accommodate the floated completion icon with highlighting */
452}
453.dir-rtl.path-site li.activity > div,
454.dir-rtl.path-course-view li.activity > div {
455 position: relative;
456 padding: 0 0 0 16px;
8903b17b 457}
8d90aec2
AN
458.path-course-view li.activity span.autocompletion img {
459 vertical-align: text-bottom;
a4f01fe4 460}
a4f01fe4
SH
461.path-course-view li.activity form.togglecompletion img {
462 max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
8903b17b
BB
463}
464.path-course-view li.activity form.togglecompletion .ajaxworking {
465 width: 16px;
466 height: 16px;
8d90aec2
AN
467 position: absolute;
468 right: 22px;
469 top: 3px;
8903b17b
BB
470 background: url([[pix:i/ajaxloader]]) no-repeat;
471}
8903b17b
BB
472.dir-rtl.path-course-view .completionprogress {
473 float: none;
474}
475.dir-rtl.path-course-view li.activity form.togglecompletion .ajaxworking {
476 right: -22px;
477}
478
479li.section.hidden span.commands a.editing_hide,
480li.section.hidden span.commands a.editing_show {
481 cursor: default;
482}
483ul.weeks h3.sectionname {
484 white-space: nowrap;
485}
486.editing ul.weeks h3.sectionname {
487 white-space: normal;
488}
489
fe3a7466
JF
490.single-section h3.sectionname {
491 text-align: center;
3eb439e2 492 clear: both;
fe3a7466
JF
493}
494
8903b17b
BB
495.section img.movetarget {
496 height: 16px;
497 width: 80px;
498}
499
73fe7470
MG
500input.titleeditor {
501 width: 330px;
502 vertical-align: text-bottom;
503}
504
505span.editinstructions {
506 position: absolute;
507 top: 0;
73fe7470
MG
508 margin-top: -22px;
509 margin-left: 30px;
510 line-height: 16px;
511 font-size: @fontSizeSmall;
512 padding: .1em .4em;
513 background-color: @infoBackground;
514 color: @infoText;
515 text-decoration: none;
516 z-index: 9999;
517 .box-shadow(2px 2px 5px 1px #ccc);
518 border: 1px solid @infoBorder;
519}
73fe7470
MG
520
521/* Course drag and drop upload styles */
522#dndupload-status {
5a3e5fa0 523 position: fixed;
418b9328 524 left: 0;
73fe7470
MG
525 width: 40%;
526 margin: 0 30%;
527 padding: 6px;
528 border: 1px solid @infoBorder;
529 text-align: center;
530 background: @infoBackground;
531 color: @infoText;
5a3e5fa0 532 z-index: 1; // Required in order to have this above relatively positioned course content.
73fe7470 533 .box-shadow(2px 2px 5px 1px #ccc);
5a3e5fa0 534 .border-radius(8px);
73fe7470
MG
535}
536.dndupload-preview {
537 color: #909090;
538 border: 1px dashed #909090;
539 list-style: none;
540 margin-top: .2em;
541 padding: .3em;
542}
543.dndupload-preview img.icon {
4460e380 544 vertical-align: text-bottom;
73fe7470
MG
545 padding: 0;
546}
547.dndupload-progress-outer {
548 .progress;
549}
550.dndupload-progress-inner {
551 .progress .bar;
552}
553.dndupload-hidden {
554 display: none;
555}
556
557/* COURSES LISTINGS AND COURSE SUMMARY */
8903b17b 558#page-course-pending .singlebutton,
a610d873 559#page-course-index .singlebutton,
69bbd2a7 560#page-course-index-category .singlebutton,
8903b17b
BB
561#page-course-editsection .singlebutton {
562 text-align: center;
563}
a610d873 564#page-admin-course-manage #movecourses td img {
8903b17b
BB
565 margin: 0 .22em;
566 vertical-align: text-bottom;
567}
a610d873 568#page-admin-course-manage #movecourses td img.icon {
8903b17b
BB
569 padding: 0;
570}
571
a610d873 572#coursesearch {
8903b17b
BB
573 margin-top: 1em;
574 text-align: center;
575}
576
8903b17b
BB
577#page-course-pending .pendingcourserequests {
578 margin-bottom: 1em;
579}
580#page-course-pending .pendingcourserequests .singlebutton {
581 display: inline;
582}
583#page-course-pending .pendingcourserequests .cell {
584 padding: 0 5px;
585}
586#page-course-pending .pendingcourserequests .cell.c6 {
587 white-space: nowrap;
588}
589
590.coursebox {
591 margin-bottom: 15px;
a610d873
MG
592 border: 1px dotted #ddd;
593 .border-radius(4px);
594 padding: 5px;
8903b17b 595}
a610d873 596
983c46a8 597.coursebox > .info > .coursename a {
f6218c4b 598 display: block;
418b9328 599 background-image: url([[pix:moodle|i/course]]);
a610d873 600 background-repeat: no-repeat;
f6218c4b
ME
601 padding-left: 21px;
602 background-position: left 0.2em;
8903b17b 603}
1b136466 604.dir-rtl .coursebox > .info > .coursename a {
605 padding-left: 0;
606 padding-right: 21px;
f6218c4b 607 background-position: right 0.2em;
1b136466 608}
f6218c4b
ME
609.coursebox > .info > .coursename,
610.coursebox .content .teachers,
611.coursebox .content .courseimage,
612.coursebox .content .coursefile {
613 float: left;
614 clear: left;
8903b17b 615}
69bbd2a7 616.coursebox .content .teachers,
a610d873
MG
617.coursebox .content .courseimage,
618.coursebox .content .coursefile {
f6218c4b 619 width: 40%;
a610d873 620}
1b136466 621.dir-rtl .coursebox > .info > .coursename,
622.dir-rtl .coursebox .teachers,
623.dir-rtl .coursebox .content .courseimage,
624.dir-rtl .coursebox .content .coursefile {
625 float: right;
626 clear: right;
627}
983c46a8 628.coursebox > .info > h3.coursename {
69bbd2a7 629 margin: 5px;
f6218c4b 630 line-height: 1;
a610d873 631}
983c46a8 632.coursebox > .info > .coursename {
69bbd2a7
MG
633 margin: 5px;
634 padding: 0;
a610d873 635}
69bbd2a7 636.coursebox .content .teachers li {
418b9328
DP
637 list-style-type: none;
638 padding: 0;
639 margin: 0;
8903b17b
BB
640}
641.coursebox .enrolmenticons {
418b9328
DP
642 padding: 3px 0;
643 float: right;
8903b17b 644}
a610d873 645.coursebox .moreinfo {
418b9328
DP
646 padding: 3px 0;
647 float: right;
8903b17b 648}
a610d873
MG
649.coursebox .enrolmenticons img,
650.coursebox .moreinfo img {
418b9328 651 margin: 0 .2em;
a610d873
MG
652}
653.coursebox .content {
418b9328 654 clear: both;
a610d873 655}
69bbd2a7
MG
656.coursebox .content .summary,
657.coursebox .content .coursecat {
418b9328 658 float: right;
a610d873
MG
659 width: 55%;
660}
69bbd2a7 661.coursebox .content .coursecat {
418b9328
DP
662 text-align: right;
663 clear: right;
a610d873
MG
664}
665.coursebox.remotecoursebox .remotecourseinfo {
418b9328 666 float: left;
a610d873
MG
667 width: 40%;
668}
669.coursebox .content .courseimage img {
418b9328
DP
670 max-width: 100px;
671 max-height: 100px;
a610d873 672}
69bbd2a7
MG
673.coursebox .content .coursecat,
674.coursebox .content .summary,
675.coursebox .content .courseimage,
676.coursebox .content .coursefile,
677.coursebox .content .teachers,
a610d873 678.coursebox.remotecoursebox .remotecourseinfo {
418b9328
DP
679 margin: 3px 5px;
680 padding: 0;
8903b17b
BB
681}
682
f6218c4b 683.coursebox.remotehost > .info > .categoryname a {
418b9328 684 background-image: url([[pix:moodle|i/mnethost]]);
f6218c4b
ME
685}
686
faf6010b 687.dir-rtl .coursebox > .info > .categoryname a {
418b9328
DP
688 padding-left: 0;
689 padding-right: 21px;
8c288b26 690 background-position: center right;
a610d873 691}
faf6010b 692.dir-rtl .coursebox > .info > .categoryname,
a610d873
MG
693.dir-rtl .coursebox .teachers,
694.dir-rtl .coursebox .content .courseimage,
695.dir-rtl .coursebox .content .coursefile {
418b9328
DP
696 float: right;
697 clear: right;
a610d873
MG
698}
699.dir-rtl .coursebox .enrolmenticons,
700.dir-rtl .coursebox .moreinfo {
418b9328 701 float: left;
a610d873
MG
702}
703.dir-rtl .coursebox .summary,
704.dir-rtl .coursebox .coursecat {
418b9328 705 float: left;
a610d873
MG
706}
707.dir-rtl .coursebox .coursecat {
418b9328
DP
708 text-align: left;
709 clear: left;
8903b17b
BB
710}
711
a610d873 712.coursebox.collapsed {
418b9328 713 margin-bottom: 0;
8903b17b 714}
a610d873 715.coursebox.collapsed > .content {
418b9328 716 display: none;
8903b17b 717}
a610d873 718.courses .coursebox.collapsed {
e514c722
FM
719 border: 1px solid @tableBorder;
720 padding: 5px;
8903b17b 721}
a610d873
MG
722
723.courses .coursebox.even {
e514c722 724 background-color: @tableBackgroundAccent;
8903b17b 725}
a610d873 726.courses .coursebox:hover,
d891aaba 727.course_category_tree .courses > .paging.paging-morelink:hover {
e514c722 728 background-color: @tableBackgroundHover;
8903b17b
BB
729}
730
a610d873 731.course_category_tree .category .numberofcourse {
8c288b26 732 font-size: @fontSizeSmall;
8903b17b
BB
733}
734
faf6010b 735.course_category_tree .controls {
736 visibility: hidden;
737}
738.course_category_tree .controls div {
418b9328
DP
739 display: inline;
740 cursor: pointer;
faf6010b 741}
742.jsenabled .course_category_tree .controls {
743 visibility: visible;
744}
745.course_category_tree .controls {
418b9328
DP
746 margin-bottom: 5px;
747 text-align: right;
748 float: right;
faf6010b 749}
750.course_category_tree .controls div {
418b9328
DP
751 padding-right: 2em;
752 font-size: 75%;
faf6010b 753}
754
0e878352 755.course_category_tree .category > .info > .categoryname {
418b9328 756 background-image: url([[pix:moodle|t/collapsed_empty]]);
8903b17b 757 background-repeat: no-repeat;
418b9328
DP
758 padding: 2px 18px;
759 margin: 3px;
760 background-position: center left;
8903b17b 761}
faf6010b 762.dir-rtl .course_category_tree .category > .info > .categoryname {
418b9328
DP
763 background-image: url([[pix:moodle|t/collapsed_empty_rtl]]);
764 background-position: center right;
8903b17b 765}
faf6010b 766.course_category_tree .category.with_children > .info > .categoryname {
418b9328 767 background-image: url([[pix:moodle|t/expanded]]);
3df632fb 768 cursor: pointer;
8903b17b 769}
0e878352 770.course_category_tree .category.with_children.collapsed > .info > .categoryname {
418b9328 771 background-image: url([[pix:moodle|t/collapsed]]);
8903b17b 772}
faf6010b 773.dir-rtl .course_category_tree .category.with_children.collapsed > .info > .categoryname {
418b9328 774 background-image: url([[pix:moodle|t/collapsed_rtl]]);
8903b17b 775}
0e878352 776.course_category_tree .category.collapsed > .content {
418b9328 777 display: none;
8903b17b 778}
a610d873 779
0e878352 780.course_category_tree .category > .info {
a610d873 781 .well;
418b9328
DP
782 min-height: 0;
783 padding: 0;
784 margin: 3px 0;
785 margin-bottom: 3px;
53c1b936 786 clear: both;
8903b17b 787}
0e878352 788.course_category_tree.frontpage-category-names .category > .info {
418b9328
DP
789 background: none;
790 border: none;
791 margin: 0;
8903b17b 792}
a610d873 793.course_category_tree .category > .content {
418b9328 794 padding-left: 16px;
8903b17b
BB
795}
796
a610d873 797.dir-rtl .course_category_tree .category > .content {
418b9328
DP
798 padding-left: 0;
799 padding-right: 16px;
8903b17b 800}
a610d873
MG
801
802.course_category_tree .subcategories > .paging,
803.courses > .paging {
418b9328
DP
804 margin: 0;
805 padding: 5px;
806 text-align: center;
8903b17b 807}
a610d873
MG
808
809.courses > .paging.paging-morelink,
810.course_category_tree .subcategories > .paging.paging-morelink {
418b9328 811 text-align: left;
8903b17b 812}
a610d873
MG
813
814.course_category_tree .paging.paging-morelink a {
8c288b26 815 font-size: @fontSizeSmall;
8903b17b 816}
69bbd2a7 817.dir-rtl .courses > .paging.paging-morelink,
a610d873 818.dir-rtl .course_category_tree .paging.paging-morelink {
418b9328 819 text-align: right;
8903b17b
BB
820}
821
69bbd2a7 822#page-course-index-category .generalbox.info {
a610d873
MG
823 margin-bottom: 15px;
824 border: 1px dotted #ddd;
825 .border-radius(4px);
826 padding: 5px;
8903b17b 827}
a610d873 828
69bbd2a7 829#page-course-index-category .categorypicker {
a610d873
MG
830 text-align: center;
831 margin: 10px 0 20px;
8903b17b 832}
202fcfa1 833
a83d83e4 834.section {
685addbd 835 .summary,
a83d83e4
AN
836 .activity {
837 .iconsmall {
4657ba81
AN
838 width: 16px;
839 height: 16px;
a83d83e4
AN
840 }
841 }
842 .editing_title {
843 .iconsmall {
844 width: 12px;
845 height: 12px;
40526616
AN
846 margin: 8px 8px 0px 0;
847 padding: 4px 8px 0px 0;
848 vertical-align: text-bottom;
a83d83e4
AN
849 }
850 }
7f4f7081
AN
851 .moodle-actionmenu {
852 .iconsmall {
eb695207
DP
853 /** reset sets 100% !important which breaks on IE8 without this !important */
854 max-width: none !important; /* stylelint-disable-line declaration-no-important */
418b9328
DP
855 width: 16px;
856 height: 16px;
7f4f7081
AN
857 padding: 4px;
858 vertical-align: text-bottom;
859 }
860 }
861 .moodle-actionmenu[data-enhanced] {
862 .menu {
863 img {
d3a93557
DP
864 width: 12px;
865 height: 12px;
7f4f7081
AN
866 }
867 }
868 }
202fcfa1 869}
5dc361e1 870
7d31a299
FM
871.dir-rtl .section {
872 .editing_title {
873 .iconsmall {
874 margin: 8px 0 0 8px;
875 padding: 4px 0 0 8px;
876 }
877 }
878}
879
5dc361e1
SH
880/**
881 * Course management page
882 * Palette
883 *
f8ddf782 884 * Background (reg) #F5F5F5
5dc361e1
SH
885 * Background (light #fafafa
886 * Background (highlight) #ddffaa
887 * Borders #e1e1e8
888 */
889#course-category-listings {
e514c722 890 background-color: @tableBackground;
418b9328 891 margin-bottom: 200px;
5dc361e1
SH
892
893 /** Two column layout */
894 &.columns-2 {
895 > #course-listing > div {
418b9328
DP
896 position: relative;
897 left: -1px;
5dc361e1
SH
898 }
899 }
900 /** Three column layout */
901 &.columns-3 > #course-listing > div {
418b9328 902 height: 100%;
5dc361e1
SH
903 }
904
905 > div > div {
418b9328 906 min-height: 300px;
5dc361e1 907 > ul.ml > li:first-child > div {
418b9328 908 border-top: 0;
5dc361e1
SH
909 }
910 }
911 h3 {
418b9328
DP
912 margin: 0;
913 padding: 0.4rem 0.6rem 0.3rem;
5dc361e1
SH
914 }
915 h4 {
418b9328
DP
916 margin: 1rem 0 0;
917 padding: 0.6rem 1rem 0.5rem;
5dc361e1 918 }
38a15200 919 .moodle-actionmenu {
418b9328 920 white-space: nowrap;
38a15200 921 }
f5b33487
AN
922
923 .moodle-actionmenu[data-enhance] {
924 .toggle-display {
925 img {
926 width: auto;
927 }
928 &.textmenu {
929 padding-right: 4px;
930
931 .caret {
932 margin-top: 12px;
933 }
934 }
935 }
936 }
937
5dc361e1 938 .listing-actions {
418b9328
DP
939 text-align: center;
940 padding: 0.4rem 0.3rem 0.3rem;
941 line-height: 2.2em;
ad75897d 942 > a,
5dc361e1 943 > .moodle-actionmenu {
418b9328 944 display: inline-block;
ad75897d
SV
945 }
946 > .moodle-actionmenu .menu a {
418b9328 947 padding-left: 1rem;
5dc361e1 948 }
5dc361e1 949 .moodle-actionmenu:not([data-enhanced]) {
75b68df3
DP
950 li {
951 line-height: normal;
952 }
5dc361e1 953 > .menubar a {
418b9328
DP
954 color: inherit;
955 display: inline-block;
5dc361e1 956 > img {
418b9328 957 display: none;
5dc361e1 958 }
52c93a26
SH
959 .caret {
960 display: none;
961 }
5dc361e1
SH
962 }
963 > .menu .menu-action-text {
418b9328 964 display: inline-block;
5dc361e1
SH
965 }
966 }
967 }
968 ul.ml {
969 list-style: none;
418b9328 970 margin: 1rem 0;
5dc361e1 971 ul.ml {
418b9328 972 margin: 0;
5dc361e1
SH
973 }
974 }
975 li {
418b9328 976 line-height: 2.2em;
5dc361e1 977 > div {
5dc361e1 978 &:hover {
e514c722 979 background-color: @tableBackgroundHover;
5dc361e1
SH
980 }
981 }
5dc361e1 982 .tree-icon {
5dc361e1 983 margin: 2px 6px 0 0;
418b9328
DP
984 width: 12px;
985 vertical-align: inherit;
5dc361e1 986 }
484c4c6c
SH
987 &[data-selected='1'] {
988 > div {
e514c722 989 background-color: @tableBackgroundAccent;
484c4c6c 990 }
e514c722
FM
991 > div:hover {
992 background-color: @tableBackgroundHover;
484c4c6c 993 }
5dc361e1
SH
994 }
995
996 // Tree item indenting to represent depth.
75b68df3
DP
997 .tree-icon {
998 margin-left: 0;
999 }
1000
1001 li .tree-icon {
1002 margin-left: 1em;
1003 }
1004
1005 li li .tree-icon {
1006 margin-left: 2em;
1007 }
1008
1009 li li li .tree-icon {
1010 margin-left: 3em;
1011 }
1012
1013 li li li li .tree-icon {
1014 margin-left: 4em;
1015 }
1016
1017 li li li li li .tree-icon {
1018 margin-left: 4.5em;
1019 }
1020
1021 li li li li li li .tree-icon {
1022 margin-left: 5em;
1023 }
1024
1025 li li li li li li li .tree-icon {
1026 margin-left: 5.5em;
1027 }
5dc361e1
SH
1028 }
1029
1030 .item-actions {
418b9328
DP
1031 margin-right: 1em;
1032 display: inline-block;
1033 display: initial;
62876928
JC
1034 > a img,
1035 .menubar img {
38a15200 1036 margin: 0 4px;
418b9328 1037 height: 12px;
52c93a26
SH
1038 padding: 0;
1039 vertical-align: inherit;
38a15200 1040 }
52c93a26 1041 &.show .menu {
62876928
JC
1042 li {
1043 line-height: 20px;
38a15200
SH
1044 }
1045 img {
1046 width: 12px;
418b9328 1047 max-width: none;
38a15200 1048 }
5dc361e1 1049 }
52c93a26
SH
1050 .menu-action-text {
1051 vertical-align: inherit;
1052 }
5dc361e1
SH
1053 }
1054
1055 .listitem {
1056 > div {
1057 > .float-left {
418b9328 1058 float: left;
5dc361e1
SH
1059 }
1060 > .float-right {
418b9328
DP
1061 float: right;
1062 text-align: right;
5dc361e1
SH
1063 }
1064 .item-actions {
1065 .action-show {
418b9328 1066 display: none;
5dc361e1
SH
1067 }
1068 .action-hide {
418b9328 1069 display: inline;
5dc361e1
SH
1070 }
1071 }
b488058f
SH
1072 .without-actions {
1073 color: #333;
1074 }
c7a2291f 1075 .idnumber {
418b9328
DP
1076 color: #a1a1a8;
1077 margin-right: 2em;
c7a2291f 1078 }
5dc361e1
SH
1079 }
1080 // The category or course is hidden.
1081 &[data-visible="0"] {
1082 .muted;
5dc361e1
SH
1083 > div {
1084 > a {
1085 .muted;
1086 }
1087 .item-actions {
1088 .action-show {
418b9328 1089 display: inline;
5dc361e1
SH
1090 }
1091 .action-hide {
418b9328 1092 display: none;
5dc361e1
SH
1093 }
1094 }
1095 }
5dc361e1 1096 }
3b681e6c 1097 &.highlight {
e514c722 1098 background-color: @tableBackground;
3b681e6c
SH
1099 > div,
1100 > div:hover,
1101 &[data-selected='1'] > div {
e514c722 1102 background-color: @tableBackgroundHover;
3b681e6c
SH
1103 }
1104 }
5dc361e1
SH
1105 }
1106
1107 #course-listing {
1108 .listitem {
5dc361e1 1109 .categoryname {
418b9328
DP
1110 display: inline-block;
1111 margin-left: 1em;
1112 color: #a1a1a8;
5dc361e1
SH
1113 }
1114 .coursename {
418b9328 1115 display: inline-block;
5dc361e1 1116 }
3b681e6c 1117 > div {
418b9328 1118 padding-left: 1rem;
3b681e6c 1119 }
5dc361e1 1120 }
484c4c6c 1121 > .firstpage .listitem:first-child > div .item-actions .action-moveup,
38a15200 1122 > .lastpage .listitem:last-child > div .item-actions .action-movedown {
d3a93557 1123 display: none;
38a15200 1124 }
5dc361e1 1125 .bulk-action-checkbox {
418b9328 1126 margin: -2px 6px 0 0;
5dc361e1
SH
1127 }
1128 }
1129 #category-listing {
1130 .listitem.collapsed > ul.ml {
1131 display: none;
1132 }
484c4c6c 1133 .listitem {
3b681e6c 1134 > div {
3b681e6c 1135 > .ba-checkbox {
418b9328
DP
1136 width: 2.2em;
1137 text-align: center;
1138 margin: -1px 0.5em 0 0;
1139 padding-top: 2px;
3b681e6c
SH
1140 }
1141 }
1142 &.highlight > div > .ba-checkbox {
e514c722 1143 background-color: @tableBackgroundHover;
3b681e6c
SH
1144 }
1145 &[data-selected='1'] > div > .ba-checkbox {
418b9328
DP
1146 margin: 0 0.5em 0 0;
1147 padding: 0;
3b681e6c
SH
1148 background-color: inherit;
1149 }
484c4c6c 1150 &:first-child > div .item-actions .action-moveup,
38a15200 1151 &:last-child > div .item-actions .action-movedown {
d3a93557 1152 display: none;
38a15200 1153 }
484c4c6c 1154 }
5dc361e1 1155 .course-count {
418b9328
DP
1156 color: #a1a1a8;
1157 margin-right: 2rem;
1158 min-width: 3.5em;
1159 display: inline-block;
5dc361e1 1160 .smallicon {
418b9328
DP
1161 width: 12px;
1162 margin-left: 4px;
52c93a26 1163 vertical-align: inherit;
5dc361e1
SH
1164 }
1165 }
1166 .bulk-action-checkbox {
3b681e6c
SH
1167 margin-right: -3px;
1168 }
1169 .category-listing > ul > .listitem:first-child {
418b9328 1170 position: relative;
3b681e6c
SH
1171 }
1172 .category-bulk-actions {
1173 margin: 0 0.5em 0.5em;
418b9328 1174 position: relative;
5dc361e1
SH
1175 }
1176 }
1177
1178 .detail-pair {
418b9328
DP
1179 border-bottom: 1px solid @tableBorder;
1180 margin: 0 1rem;
5dc361e1 1181 > * {
418b9328
DP
1182 display: inline-block;
1183 line-height: 2.2rem;
5dc361e1
SH
1184 }
1185 .pair-key {
418b9328 1186 font-weight: bold;
5dc361e1
SH
1187 vertical-align: top;
1188 span {
1189 margin-right: 1rem;
418b9328 1190 display: block;
5dc361e1
SH
1191 }
1192 }
1193 .pair-value select {
418b9328 1194 max-width: 100%;
5dc361e1 1195 }
5dc361e1
SH
1196 }
1197
1198 .bulk-actions .detail-pair {
1199 > * {
418b9328
DP
1200 display: block;
1201 width: 100%;
5dc361e1
SH
1202 }
1203 }
1204
1205 .listing-pagination {
418b9328 1206 text-align: center;
5dc361e1 1207 .yui3-button {
e514c722 1208 background-color: @btnBackground;
418b9328
DP
1209 border: 0;
1210 margin: 0.4rem 0.2rem 0.45rem;
1211 font-size: 10.4px;
5dc361e1 1212 &.active-page {
e514c722 1213 background-color: @btnBackgroundHighlight;
5dc361e1
SH
1214 }
1215 }
1216 }
1217 .listing-pagination-totals {
418b9328 1218 text-align: center;
5dc361e1
SH
1219 &.dimmed {
1220 .muted;
418b9328 1221 margin: 0.4rem 1rem 0.45rem;
5dc361e1
SH
1222 }
1223 }
1224 .select-a-category .notifymessage,
1225 .select-a-category .alert {
1226 margin: 1em;
1227 }
1228}
7fd307b1 1229
52c93a26 1230#course-category-listings #course-listing .listitem .drag-handle {
10a2bf46 1231 display: none;
52c93a26
SH
1232}
1233.jsenabled #course-category-listings #course-listing .listitem .drag-handle {
418b9328 1234 display: inline-block;
10a2bf46 1235 margin: 0 6px 0 0;
418b9328 1236 cursor: pointer;
52c93a26
SH
1237}
1238
b890be68 1239.dir-rtl #course-category-listings {
1240 #category-listing,
1241 #course-listing {
1242 float: right;
1243 margin-left: 0;
1244 }
1245
1246 .listitem {
1247 > div {
1248 > .float-left {
418b9328 1249 float: right;
b890be68 1250 }
1251 > .float-right {
418b9328
DP
1252 float: left;
1253 text-align: left;
b890be68 1254 }
1255 }
1256 }
1257 li {
1258 .tree-icon {
1259 margin: 2px 0 0 6px;
1260 }
1261
1262 // Tree item indenting to represent depth.
75b68df3
DP
1263 .tree-icon {
1264 margin-right: 0;
1265 }
1266
1267 li .tree-icon {
1268 margin-right: 1em;
1269 }
1270
1271 li li .tree-icon {
1272 margin-right: 2em;
1273 }
1274
1275 li li li .tree-icon {
1276 margin-right: 3em;
1277 }
1278
1279 li li li li .tree-icon {
1280 margin-right: 4em;
1281 }
1282
1283 li li li li li .tree-icon {
1284 margin-right: 4.5em;
1285 }
1286
1287 li li li li li li .tree-icon {
1288 margin-right: 5em;
1289 }
1290
1291 li li li li li li li .tree-icon {
1292 margin-right: 5.5em;
1293 }
b890be68 1294 }
1295 #category-listing {
1296 .listitem {
1297 > div {
418b9328 1298 margin-right: 0.5em;
b890be68 1299 margin-left: 0;
1300 > .ba-checkbox {
418b9328 1301 margin: -1px 0 0 0.5em;
b890be68 1302 }
1303 }
1304
1305 &[data-selected='1'] > div > .ba-checkbox {
418b9328 1306 margin: 0 0 0 0.5em;
b890be68 1307 }
1308 }
1309 .course-count {
418b9328 1310 margin-left: 2rem;
62876928
JC
1311
1312 .smallicon {
1313 margin-left: 0px;
1314 margin-right: 4px;
1315 }
b890be68 1316 }
1317 .bulk-action-checkbox {
1318 margin-left: -3px;
1319 margin-right: 0;
1320 }
1321 }
1322 #course-listing {
1323 padding-right: 24px;
1324 .listitem {
1325 .idnumber {
418b9328
DP
1326 color: #a1a1a8;
1327 padding-right: 2em;
b890be68 1328 }
1329 .categoryname {
418b9328
DP
1330 display: inline-block;
1331 margin-right: 1em;
1332 margin-left: 0;
b890be68 1333 }
1334 .drag-handle {
1335 margin: 0 6px 0 6px;
1336 }
1337 > div {
418b9328 1338 padding-left: 1rem;
b890be68 1339 }
1340 }
1341 .bulk-action-checkbox {
418b9328
DP
1342 vertical-align: middle;
1343 margin: -2px 0 0 6px;
b890be68 1344 }
1345 }
d3a93557 1346 .detail-pair {
9cb48f50 1347 > * {
1348 float: right;
1349 margin-right: 0;
1350 }
b890be68 1351 .pair-key {
1352 span {
418b9328 1353 margin-right: 0;
b890be68 1354 margin-left: 0;
1355 }
1356 }
9cb48f50 1357 .pair-value {
1358 margin-right: 0.5em;
1359 }
b890be68 1360 }
1361}
1362
5dc361e1
SH
1363/** Management header styling **/
1364.coursecat-management-header {
418b9328 1365 vertical-align: middle;
5dc361e1 1366 h2 {
418b9328
DP
1367 display: inline-block;
1368 text-align: left;
5dc361e1
SH
1369 }
1370 > div {
418b9328
DP
1371 display: inline-block;
1372 float: right;
1373 line-height: 40px;
d0647301 1374 > div {
418b9328 1375 margin-left: 1em;
d3a93557 1376 margin: 10px 0;
418b9328 1377 display: inline-block;
d0647301 1378 }
5dc361e1
SH
1379 }
1380 select {
1381 max-width: 300px;
1382 cursor: pointer;
1383 padding: 0.4em 0.5em 0.45em 1em;
1384 vertical-align: baseline;
1385 white-space: nowrap;
1386 }
aa861f62
SH
1387 .view-mode-selector {
1388 .moodle-actionmenu {
418b9328
DP
1389 white-space: nowrap;
1390 display: inline-block;
aa861f62
SH
1391 }
1392 .moodle-actionmenu[data-enhanced].show .menu a {
418b9328 1393 padding-left: 1em;
aa861f62 1394 }
05bce411 1395 }
5dc361e1 1396}
b890be68 1397.dir-rtl .coursecat-management-header {
1398 h2 {
418b9328 1399 text-align: right;
b890be68 1400 }
1401 > div {
418b9328
DP
1402 float: left;
1403 margin-right: 1em;
b890be68 1404 margin-left: 0;
1405 }
1406}
5dc361e1
SH
1407.course-being-dragged-proxy {
1408 border: 0;
1409 color: @linkColor;
418b9328 1410 vertical-align: middle;
5dc361e1
SH
1411 padding: 0 0 0 4em;
1412}
1413.course-being-dragged {
1414 .opacity(50);
1415}
1416
1417/**
1418 * Display sizes:
1419 * Large displays 1200 +
1420 * Default displays 980 1199
1421 * Tablets 768 979
1422 * Small tablets and large phones 481 767
1423 * Phones 0 480
1424 */
1425@media (min-width: 1200px) and (max-width: 1600px) {
1426 #course-category-listings.columns-3 {
e514c722 1427 background-color: @tableBackground;
418b9328 1428 border: 0;
5dc361e1
SH
1429
1430 #category-listing,
1431 #course-listing {
418b9328 1432 width: 50%;
5dc361e1
SH
1433 }
1434 #category-listing > div,
1435 #course-listing > div,
484c4c6c 1436 #course-detail > div {
e514c722 1437 background-color: @tableBackground;
5dc361e1
SH
1438 }
1439 #course-detail {
418b9328
DP
1440 width: 100%;
1441 margin-top: 1em;
5dc361e1
SH
1442 }
1443 }
1444
1445}
1446
1447@media (max-width: 1199px) {
484c4c6c 1448 #course-category-listings.columns-2,
5dc361e1 1449 #course-category-listings.columns-3 {
e514c722 1450 background-color: @tableBackground;
418b9328 1451 border: 0;
5dc361e1
SH
1452 #category-listing,
1453 #course-listing,
1454 #course-detail {
418b9328
DP
1455 width: 100%;
1456 margin: 0 0 1em;
5dc361e1
SH
1457 }
1458 #category-listing > div,
1459 #course-listing > div,
1460 #course-detail > div {
e514c722 1461 background-color: @tableBackground;
5dc361e1
SH
1462 }
1463 }
1464}