You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
3.8 KiB
137 lines
3.8 KiB
@import '../abstracts/variables';
|
|
|
|
.main-content {
|
|
margin: 0;
|
|
flex: 1 1 auto;
|
|
padding-top: calc(var(--appbar-height) - var(--appbar-height) / 8);
|
|
transition: margin 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
|
|
}
|
|
|
|
@media (min-width:$breakpoint-xs) and (orientation: landscape) {
|
|
.main-content {
|
|
padding-top: calc(var(--appbar-height) - var(--appbar-height) / 4);
|
|
}
|
|
}
|
|
|
|
@media (min-width:$breakpoint-sm) {
|
|
.main-content {
|
|
padding-top: var(--appbar-height);
|
|
}
|
|
}
|
|
|
|
.appbar-dense {
|
|
~ .main-content {
|
|
padding-top: calc(var(--appbar-height) - var(--appbar-height) / 4);
|
|
}
|
|
}
|
|
|
|
.drawer-open {
|
|
&-responsive {
|
|
@each $breakpoint in map-keys($breakpoints) {
|
|
&-#{$breakpoint} {
|
|
@media (min-width: map-get($breakpoints, $breakpoint)) {
|
|
&-left .main-content {
|
|
margin-left: var(--drawer-width-left);
|
|
}
|
|
|
|
&-right .main-content {
|
|
margin-right: var(--drawer-width-right);
|
|
}
|
|
|
|
&-left#{&}-right .main-content {
|
|
margin-right: var(--drawer-width-right);
|
|
margin-left: var(--drawer-width-left);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-persistent {
|
|
&-left:not(&-right) .main-content {
|
|
margin-left: var(--drawer-width-left);
|
|
}
|
|
|
|
&-right:not(&-left) .main-content {
|
|
margin-right: var(--drawer-width-right);
|
|
}
|
|
|
|
&-left#{&}-right .main-content {
|
|
margin-right: var(--drawer-width-right);
|
|
margin-left: var(--drawer-width-left);
|
|
}
|
|
}
|
|
|
|
&-mini {
|
|
@each $breakpoint in map-keys($breakpoints) {
|
|
&-#{$breakpoint} {
|
|
@media (min-width: map-get($breakpoints, $breakpoint)) {
|
|
&-left .main-content {
|
|
margin-left: var(--drawer-width-left);
|
|
}
|
|
|
|
&-right .main-content {
|
|
margin-right: var(--drawer-width-right);
|
|
}
|
|
|
|
&-left#{&}-right .main-content {
|
|
margin-right: var(--drawer-width-right);
|
|
margin-left: var(--drawer-width-left);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-none, &-always {
|
|
&-left .main-content {
|
|
margin-left: var(--drawer-width-left);
|
|
}
|
|
|
|
&-right .main-content {
|
|
margin-right: var(--drawer-width-right);
|
|
}
|
|
|
|
&-left#{&}-right .main-content {
|
|
margin-right: var(--drawer-width-right);
|
|
margin-left: var(--drawer-width-left);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.drawer-close {
|
|
&-mini {
|
|
@each $breakpoint in map-keys($breakpoints) {
|
|
&-#{$breakpoint} {
|
|
&-left .main-content {
|
|
margin-left: var(--drawer-width-mini-left);
|
|
}
|
|
|
|
&-right .main-content {
|
|
margin-right: var(--drawer-width-mini-right);
|
|
}
|
|
|
|
&-left#{&}-right .main-content {
|
|
margin-right: var(--drawer-width-mini-right);
|
|
margin-left: var(--drawer-width-mini-left);
|
|
}
|
|
}
|
|
}
|
|
|
|
&-none, &-always {
|
|
&-left .main-content {
|
|
margin-left: var(--drawer-width-mini-left);
|
|
}
|
|
|
|
&-right .main-content {
|
|
margin-right: var(--drawer-width-mini-right);
|
|
}
|
|
|
|
&-left#{&}-right .main-content {
|
|
margin-right: var(--drawer-width-mini-right);
|
|
margin-left: var(--drawer-width-mini-left);
|
|
}
|
|
}
|
|
}
|
|
}
|