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