72 lines
1.3 KiB
SCSS
72 lines
1.3 KiB
SCSS
@import "@/styles/_variables.scss";
|
|
@import "@/styles/_mixins.scss";
|
|
|
|
.layout {
|
|
$footer-height: 287px;
|
|
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
|
|
/*
|
|
* For IE10+
|
|
*/
|
|
display: flex;
|
|
flex-direction: column;
|
|
@supports (display: grid) {
|
|
display: grid;
|
|
}
|
|
grid-template-rows: auto 1fr max-content;
|
|
grid-template-areas: "h" "c" "f";
|
|
min-height: 100vh;
|
|
grid-auto-rows: 1fr;
|
|
|
|
&--show-filter {
|
|
grid-template-rows: auto auto 1fr $footer-height;
|
|
-ms-grid-rows: 50px 50px 30px 1fr $footer-height; // 1 extra row for gap
|
|
grid-template-areas: "h" "." "c" "f";
|
|
}
|
|
|
|
/*
|
|
* For IE10+
|
|
*/
|
|
|
|
&--show-filter &__content {
|
|
-ms-grid-row: 4;
|
|
-ms-grid-column: 1;
|
|
}
|
|
|
|
&--show-filter &__filter-bar {
|
|
-ms-grid-row: 2;
|
|
-ms-grid-column: 1;
|
|
}
|
|
|
|
@include skillbox-colors;
|
|
|
|
&__header {
|
|
grid-area: h;
|
|
}
|
|
|
|
&__content {
|
|
padding: 0 $small-spacing;
|
|
|
|
@include desktop {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
|
|
&__footer {
|
|
grid-area: f;
|
|
// we usually set the margin to the bottom and the right, but here we want the footer to always have
|
|
// this margin, and we don't want to set it on every content element. And we don't want to set it on
|
|
// the content element, for if there's no footer.
|
|
margin-top: 3*$large-spacing;
|
|
|
|
padding: 0 $small-spacing;
|
|
|
|
@include desktop {
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|