56 lines
907 B
SCSS
56 lines
907 B
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 auto;
|
|
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;
|
|
}
|
|
|
|
|
|
&__footer {
|
|
grid-area: f;
|
|
margin-top: 3*$large-spacing;
|
|
}
|
|
}
|