Files
edx-platform/lms/static/sass/shared-v2/_layouts.scss
Andy Armstrong 268bea9e62 Make the course content page responsive
LEARNER-2754
2017-11-01 17:34:04 -04:00

87 lines
1.7 KiB
SCSS

// LMS layouts
.content-wrapper {
max-width: map-get($container-max-widths, xl);
margin-top: $baseline;
padding: 0 0 $baseline/2;
@include media-breakpoint-up(md) {
padding: 0 $baseline $baseline/2;
}
.page-content-container {
@include clearfix();
border: 1px solid $border-color;
background-color: $body-bg;
max-width: map-get($container-max-widths, xl);
margin: 0 auto;
}
.page-header {
@include clearfix();
border-bottom: 1px solid $border-color;
padding: $baseline;
.page-title {
@extend %t-title4;
margin-bottom: ($baseline/4);
text-transform: none;
color: $black;
}
.page-description {
@extend %t-copy-sub1;
margin-bottom: ($baseline/4);
color: $gray;
}
&.has-secondary {
.page-header-main {
display: inline-block;
}
@include media-breakpoint-up(md) {
.page-header-secondary {
@include float(right);
@include text-align(right);
display: flex;
vertical-align: text-bottom;
.form-actions {
@include margin-left($baseline/2);
display: inline-block;
}
.form-actions > *:first-child {
@include margin-left(0);
}
}
}
}
}
.page-content {
padding: $baseline;
@media (min-width: $grid-breakpoints-md) {
display: flex;
.page-content-main {
flex-grow: 1; // This column should consume all the available space
}
.page-content-secondary {
min-width: 350px; // Note: setting width only is not obeyed
max-width: 350px; // Note: setting width only is not obeyed
margin-left: $baseline*2;
}
}
}
}