mirror of
https://github.com/documize/community.git
synced 2025-07-19 05:09:42 +02:00
153 lines
2.3 KiB
SCSS
153 lines
2.3 KiB
SCSS
$break-1: 900px;
|
|
$break-2: 1200px;
|
|
$break-3: 1400px;
|
|
$break-4: 1600px;
|
|
$break-5: 1800px;
|
|
|
|
.layout-header, .layout-footer {
|
|
flex: 0 0 auto;
|
|
width: 100%;
|
|
}
|
|
|
|
.layout-body {
|
|
display: flex;
|
|
flex: 1 0 auto;
|
|
flex-direction: column;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.layout-content {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.layout-sidebar {
|
|
order: -1;
|
|
background-color: map-get($gray-shades, 200);
|
|
padding: 1rem;
|
|
}
|
|
|
|
footer {
|
|
margin: auto auto 0 auto;
|
|
bottom: 0;
|
|
z-index: 888;
|
|
@include sticky();
|
|
}
|
|
|
|
@media (min-width: $break-1) {
|
|
.layout-body {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.layout-sidebar {
|
|
flex: 0 0 200px;
|
|
width: 200px;
|
|
height: calc(100vh - 140px);
|
|
@include sticky();
|
|
top: 2rem;
|
|
}
|
|
|
|
.layout-content {
|
|
flex: 0 1 700px;
|
|
padding: 0 2rem;
|
|
margin: 0;
|
|
max-width: 700px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: $break-2) {
|
|
.layout-body {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.layout-sidebar {
|
|
flex: 0 0 300px;
|
|
width: 300px;
|
|
}
|
|
|
|
.layout-content {
|
|
flex: 0 1 1000px;
|
|
margin: 0;
|
|
padding: 0 2rem 0 3rem;
|
|
max-width: 1000px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: $break-3) {
|
|
.layout-body {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.layout-sidebar {
|
|
flex: 0 0 400px;
|
|
width: 400px;
|
|
}
|
|
|
|
.layout-content {
|
|
flex: 0 1 1000px;
|
|
margin: 0;
|
|
padding: 0 0 0 3rem;
|
|
max-width: 1000px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: $break-4) {
|
|
.layout-body {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.layout-sidebar {
|
|
flex: 0 0 450px;
|
|
width: 450px;
|
|
}
|
|
|
|
.layout-content {
|
|
flex: 0 1 1200px;
|
|
margin: 0;
|
|
padding: 0 2rem 0 3rem;
|
|
max-width: 1200px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: $break-5) {
|
|
.layout-body {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.layout-sidebar {
|
|
flex: 0 0 500px;
|
|
width: 500px;
|
|
}
|
|
|
|
.layout-content {
|
|
flex: 0 1 1300px;
|
|
margin: 0;
|
|
padding: 0 2rem 0 4rem;
|
|
max-width: 1300px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
footer {
|
|
position: relative;
|
|
bottom: auto;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Conditional CSS for Edge 12+.
|
|
* @link: https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/
|
|
*/
|
|
@supports (-ms-ime-align:auto) {
|
|
// For IE/Edge footer must be at bottom as sticky/flex is not quite supported.
|
|
.layout-footer, footer {
|
|
position: relative !important;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Conditional CSS for IE 8+ (and old Firefox 1.x).
|
|
* @link: https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/
|
|
*/
|
|
@media screen\0 {
|
|
/* Conditional IE styles */
|
|
}
|