2018-05-22 15:56:54 +01:00
|
|
|
.layout-header,
|
|
|
|
.layout-footer {
|
|
|
|
flex: 0 0 auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
.layout-body {
|
|
|
|
display: flex;
|
|
|
|
flex: 1 0 auto;
|
|
|
|
flex-direction: column;
|
|
|
|
padding: 2rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.layout-content {
|
|
|
|
margin-top: 2rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.layout-sidebar {
|
|
|
|
order: -1;
|
|
|
|
background-color: $color-gray-light2;
|
|
|
|
padding: 1rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
footer {
|
|
|
|
margin: auto auto 0 auto;
|
|
|
|
position: sticky;
|
|
|
|
bottom: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: 720px) {
|
|
|
|
.layout-body {
|
|
|
|
flex-direction: row;
|
|
|
|
}
|
|
|
|
|
|
|
|
.layout-content {
|
2018-05-23 12:37:21 +01:00
|
|
|
// Content area cannot exceed 1200px
|
|
|
|
// but can shrink as required
|
|
|
|
// (was flex: 1;).
|
|
|
|
flex: 0 1 1000px;
|
|
|
|
// flex: 1;
|
|
|
|
|
2018-05-22 15:56:54 +01:00
|
|
|
padding: 0 2rem;
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.layout-sidebar {
|
|
|
|
flex: 0 0 20rem;
|
2018-05-23 12:37:21 +01:00
|
|
|
// height: calc(100vh - 145px);
|
2018-05-22 15:56:54 +01:00
|
|
|
overflow-x: hidden;
|
2018-05-23 12:37:21 +01:00
|
|
|
overflow-y: auto;
|
2018-05-22 15:56:54 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: 1200px) {
|
|
|
|
.layout-sidebar {
|
|
|
|
flex: 0 0 30rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.layout-content {
|
|
|
|
padding: 0 2rem 0 3rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: 1800px) {
|
|
|
|
.layout-sidebar {
|
|
|
|
flex: 0 0 35rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.layout-content {
|
|
|
|
padding: 0 2rem 0 4rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (max-width: 576px) {
|
|
|
|
footer {
|
|
|
|
position: relative;
|
|
|
|
bottom: auto;
|
|
|
|
}
|
|
|
|
}
|