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