Files
edx-platform/lms/static/sass/bootstrap/_layouts.scss
2020-12-16 17:30:04 +05:00

139 lines
2.7 KiB
SCSS

// LMS layouts
.content-wrapper {
max-width: map-get($container-max-widths, xl);
margin: $baseline auto 0 auto;
padding: 0 0 $baseline/2;
@include media-breakpoint-up(md) {
padding: 0 $baseline $baseline/2;
}
.course-tabs {
padding: 0;
font-size: $font-size-sm;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
.navbar-nav {
display: flex;
flex-direction: row;
}
.nav-item {
.nav-link {
padding: $baseline/2 $baseline*3/4 $baseline*13/20;
border-style: solid;
border-width: 0 0 $baseline/5 0;
border-bottom-color: transparent;
color: theme-color("secondary");
}
&.active,
&:hover {
.nav-link {
border-bottom-color: theme-color("primary");
color: theme-color("primary");
}
}
}
}
&.container-fluid {
max-width: map-get($container-max-widths, xl);
@extend %ui-print-excluded;
}
}
.page-header {
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid $border-color;
padding: $baseline;
.page-header-search {
@include margin-right($baseline);
flex-grow: 1;
.search-form {
display: flex;
}
}
.form-actions {
@include media-breakpoint-down(sm) {
margin-top: $baseline/2;
}
}
.page-header-main {
flex-grow: 1; // This column should consume all the available space
.page-title {
margin-top: $baseline*0.4;
}
}
.page-header-secondary {
display: flex;
flex-wrap: wrap;
@include media-breakpoint-up(md) {
margin-left: $baseline;
&:not(:last-child) {
margin-right: $baseline;
}
}
}
@include media-breakpoint-down(sm) {
padding: $baseline;
.page-header-search {
width: 100%;
}
}
}
.page-content-container {
border: 1px solid $border-color;
background-color: $body-bg;
max-width: map-get($container-max-widths, xl);
margin: 0 auto;
}
.page-content {
padding: $baseline;
// Adjust styles for desktop sized screens
@include media-breakpoint-up(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;
}
}
// Override styles for tablet sized screens
@include media-breakpoint-only(md) {
.page-content-secondary {
min-width: 250px;
max-width: 250px;
}
}
// Adjust styles for phone sized screens
@include media-breakpoint-down(sm) {
padding: $baseline;
}
}