3afb88ba24eec5f9e1b3ea1149d41e2c8f10ccd6
[moodle.git] / theme / noname / scss / moodle / course.scss
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 }
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         }
59         .editing_move {
60             /* Move the move icon to the start of the line */
61             position: absolute;
62             left: 0;
63             top: 0;
64         }
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         }
74         /* The command block for each activity */
75         .actions {
76             position: absolute;
77             right: 0;
78             top: 0;
79         }
81         .contentwithoutlink,
82         .activityinstance {
84             min-width: 40%;
85             display: table-cell;
86             padding-right: 4px;
87             min-height: 2em;
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       }
105       .mod-indent-outer {
106         padding-left: 24px;
107         display: block;
108       }
109     }
111     .filler {
112         width: 16px;
113         height: 16px;
114         padding: 0.3em;
115         display: inline-block;
116     }
118     .activity.editor_displayed {
119         a.editing_title,
120         .moodle-actionmenu {
121             display: none;
122         }
123         div.activityinstance {
124             padding-right: initial;
126             input {
127                 margin-bottom: initial;
128                 padding-top: initial;
129                 padding-bottom: initial;
130                 vertical-align: text-bottom;
131             }
132         }
133     }
136 .activity img.activityicon {
137     margin-right: 6px;
138     vertical-align: text-bottom;
140 .section .activity .activityinstance,
141 .section .activity .activityinstance div {
142     display: inline-block;
144 .editing {
145     .section {
146         .activity {
147             .contentwithoutlink,
148             .activityinstance {
149                 padding-right: 200px;
150             }
151         }
152     }
155 .editing_show + .editing_assign,
156 .editing_hide + .editing_assign {
157     // if roles icon missing, add space
158     margin-left: 20px;
160 .section .activity .commands {
161     white-space: nowrap;
162     display: inline;
164 .section .activity.modtype_label.label {
165     font-weight: normal;
166     padding: .2em;
168 .section li.activity {
169     padding: .2em;
170     clear: both;
172 .section .activity .activityinstance .groupinglabel {
173     padding-left: 30px;
175 .section .activity .availabilityinfo,
176 .section .activity .contentafterlink {
177     margin-top: 0.5em;
178     margin-left: 30px;
180 .section .activity .contentafterlink p {
181     margin: .5em 0;
183 .editing .section .activity:hover,
184 .editing .section .activity.action-menu-shown {
185     background-color: $gray-lighter;
187 .course-content .current {
188     @extend .label-info;
190 .course-content .section-summary {
191     border: 1px solid $table-border-color;
192     margin-top: 5px;
193     list-style: none;
195 .course-content .section-summary .section-title  {
196     margin: 2px 5px 10px 5px;
198 .course-content .section-summary .summarytext {
199     margin: 2px 5px 2px 5px;
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;
208 .course-content .section-summary .summary {
209     margin-top: 5px;
211 .course-content .single-section {
212     margin-top: 1em;
214 .course-content .single-section .section-navigation {
215     display: block;
216     padding: 0.5em;
217     margin-bottom: -0.5em;
219 .course-content .single-section .section-navigation .title {
220     font-weight: bold;
221     font-size: 108%;
222     clear: both;
224 .course-content .single-section .section-navigation .mdl-left {
225     font-weight: normal;
226     float: left;
227     margin-right: 1em;
229 .course-content .single-section .section-navigation .mdl-left .larrow {
230     margin-right: 0.1em;
232 .course-content .single-section .section-navigation .mdl-right {
233     font-weight: normal;
234     float: right;
235     margin-left: 1em;
237 .course-content .single-section .section-navigation .mdl-right .rarrow {
238     margin-left: 0.1em;
240 .course-content .single-section .section-navigation .mdl-bottom {
241     margin-top: 0;
243 .course-content ul li.section.main {
244     border-bottom: 2px solid $table-border-color;
245     margin-top: 0;
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     }
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;
266 .course-content {
267     margin-top: 0;
270 .course-content ul.topics li.section {
271     padding-bottom: 20px;
274 .course-content ul.topics li.section .summary {
275     margin-left: 25px;
278 .course-content .hidden {
279     display: none;
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     }
309 .path-course-view .completionprogress {
310     margin-left: 25px
313 .path-course-view .completionprogress {
314     display: block;
315     float: right;
316     height: 20px;
317     position: relative;
320 #page-site-index .subscribelink {
321     text-align: right;
323 #site-news-forum h2,
324 #frontpage-course-list h2,
325 #frontpage-category-names h2,
326 #frontpage-category-combo h2 {
327     margin-bottom: 9px;
329 .path-course-view a.reduce-sections {
330     padding-left: 0.2em;
332 .path-course-view .subscribelink {
333     text-align: right;
335 .path-course-view .unread {
336     margin-left: 30px;
338 .path-course-view .block.drag .header {
339     cursor: move;
341 .path-course-view .completionprogress {
342     text-align: right;
344 .path-course-view .single-section .completionprogress {
345     margin-right: 5px;
347 .path-course-view .section .summary {
348     line-height: normal;
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 */
356 .path-course-view li.activity span.autocompletion img {
357     vertical-align: text-bottom;
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 */
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;
371 li.section.hidden span.commands a.editing_hide,
372 li.section.hidden span.commands a.editing_show {
373     cursor: default;
375 ul.weeks h3.sectionname {
376     white-space: nowrap;
378 .editing ul.weeks h3.sectionname {
379     white-space: normal;
382 .single-section h3.sectionname {
383     text-align: center;
384     clear: both;
387 .section img.movetarget {
388     height: 16px;
389     width: 80px;
392 input.titleeditor {
393     width: 330px;
394     vertical-align: text-bottom;
397 span.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;
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);
428 .dndupload-preview {
429     color: #909090;
430     border: 1px dashed #909090;
431     list-style: none;
432     margin-top: .2em;
433     padding: .3em;
435 .dndupload-preview img.icon {
436     vertical-align: text-bottom;
437     padding: 0;
439 .dndupload-progress-outer {
440     @extend progress;
442 .dndupload-progress-inner {
443     .progress { @extend .progress-bar; }
445 .dndupload-hidden {
446     display: none;
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;
456 #page-admin-course-manage #movecourses td img {
457     margin: 0 .22em;
458     vertical-align: text-bottom;
460 #page-admin-course-manage #movecourses td img.icon {
461     padding: 0;
464 #coursesearch {
465     margin-top: 1em;
466     text-align: center;
469 #page-course-pending .pendingcourserequests {
470     margin-bottom: 1em;
472 #page-course-pending .pendingcourserequests .singlebutton {
473     display: inline;
475 #page-course-pending .pendingcourserequests .cell {
476     padding: 0 5px;
478 #page-course-pending .pendingcourserequests .cell.c6 {
479     white-space: nowrap;
482 .coursebox {
483     margin-bottom: 15px;
484     border: 1px dotted #ddd;
485     @include border-radius(4px);
486     padding: 5px;
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;
496 .coursebox > .info > .coursename,
497 .coursebox .content .teachers,
498 .coursebox .content .courseimage,
499 .coursebox .content .coursefile {
500     float: left;
501     clear: left;
503 .coursebox .content .teachers,
504 .coursebox .content .courseimage,
505 .coursebox .content .coursefile {
506     width: 40%;
508 .coursebox > .info > h3.coursename {
509     margin: 5px;
510     line-height: 1;
512 .coursebox > .info > .coursename {
513     margin: 5px;
514     padding: 0;
516 .coursebox .content .teachers li {
517     list-style-type:none;
518     padding:0;
519     margin:0;
521 .coursebox .enrolmenticons {
522     padding:3px 0;
523     float:right;
525 .coursebox .moreinfo {
526     padding:3px 0;
527     float:right;
529 .coursebox .enrolmenticons img,
530 .coursebox .moreinfo img {
531     margin:0 .2em;
533 .coursebox .content {
534     clear:both;
536 .coursebox .content .summary,
537 .coursebox .content .coursecat {
538     float:right;
539     width: 55%;
541 .coursebox .content .coursecat {
542     text-align:right;
543     clear:right;
545 .coursebox.remotecoursebox .remotecourseinfo {
546     float:left;
547     width: 40%;
549 .coursebox .content .courseimage img {
550     max-width:100px;
551     max-height:100px;
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;
563 .coursebox.remotehost > .info > .categoryname a {
564     background-image:url([[pix:moodle|i/mnethost]]);
566 .coursebox.collapsed {
567     margin-bottom:0;
569 .coursebox.collapsed > .content {
570     display:none;
572 .courses .coursebox.collapsed {
573     border: 1px solid $table-border-color;
574     padding: 5px;
577 .courses .coursebox.even {
578     background-color:  $table-bg-accent;
580 .courses .coursebox:hover,
581 .course_category_tree .courses > .paging.paging-morelink:hover {
582     background-color:  $table-bg-hover;
585 .course_category_tree .category .numberofcourse {
586     font-size: $font-size-sm;
589 .course_category_tree .controls {
590     visibility: hidden;
592 .course_category_tree .controls div {
593     display:inline;
594     cursor:pointer;
596 .jsenabled .course_category_tree .controls {
597     visibility: visible;
599 .course_category_tree .controls {
600     margin-bottom:5px;
601     text-align:right;
602     float:right;
604 .course_category_tree .controls div {
605     padding-right:2em;
606     font-size:75%;
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;
616 /* rtl:ignore */
617 .dir-rtl .course_category_tree .category > .info > .categoryname {
618     background-image:url([[pix:moodle|t/collapsed_empty_rtl]]);
620 .course_category_tree .category.with_children > .info > .categoryname {
621     background-image:url([[pix:moodle|t/expanded]]);
622     cursor: pointer;
624 .course_category_tree .category.with_children.collapsed >.info > .categoryname {
625     background-image:url([[pix:moodle|t/collapsed]]);
627 /* rtl:ignore */
628 .dir-rtl .course_category_tree .category.with_children.collapsed > .info > .categoryname {
629     background-image:url([[pix:moodle|t/collapsed_rtl]]);
631 .course_category_tree .category.collapsed>.content {
632     display:none;
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;
643 .course_category_tree.frontpage-category-names .category >.info {
644     background:none;
645     border:none;
646     margin:0;
648 .course_category_tree .category > .content {
649     padding-left:16px;
652 .course_category_tree .subcategories > .paging,
653 .courses > .paging {
654     margin:0;
655     padding:5px;
656     text-align:center;
659 .courses > .paging.paging-morelink,
660 .course_category_tree .subcategories > .paging.paging-morelink {
661     text-align:left;
664 .course_category_tree .paging.paging-morelink a {
665     font-size: $font-size-sm;
668 #page-course-index-category .generalbox.info {
669     margin-bottom: 15px;
670     border: 1px dotted #ddd;
671     @include border-radius(4px);
672     padding: 5px;
675 #page-course-index-category .categorypicker {
676     text-align: center;
677     margin: 10px 0 20px;
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     }
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;
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     }
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     }
759     .moodle-actionmenu[data-enhance] {
760         .toggle-display {
761             img {
762                 width: auto;
763             }
764             &.textmenu {
765                 padding-right: 4px;
767                 .caret {
768                     margin-top: 12px;
769                 }
770             }
771         }
772     }
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         }
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     }
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     }
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     }
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     }
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     }
1009     .bulk-actions .detail-pair {
1010         > * {
1011             display:block;
1012             width:100%;
1013         }
1014     }
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     }
1041 #course-category-listings #course-listing .listitem .drag-handle {
1042     display: none;
1044 .jsenabled #course-category-listings #course-listing .listitem .drag-handle {
1045     display:inline-block;
1046     margin: 0 6px 0 0;
1047     cursor:pointer;
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     }
1084 .course-being-dragged-proxy {
1085     border: 0;
1086     color: $link-color;
1087     vertical-align:middle;
1088     padding: 0 0 0 4em;
1090 .course-being-dragged {
1091     opacity: 0.5;
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;
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     }
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     }