95 lines
1.9 KiB
SCSS
95 lines
1.9 KiB
SCSS
$side-padding:3em;
|
|
|
|
body, html{
|
|
position: relative;
|
|
width: 100%;
|
|
height:100%;
|
|
font-family: sans-serif;
|
|
font-style: normal;
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
|
|
body{
|
|
overflow:hidden;
|
|
}
|
|
|
|
#root{
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100vw;
|
|
height:100vh;
|
|
%layout-element{
|
|
width:100vw;
|
|
box-sizing:border-box;
|
|
}
|
|
header[role="banner"]{
|
|
z-index:10;
|
|
flex: 0 0 auto;
|
|
@extend %layout-element;
|
|
padding:1em $side-padding 1em $side-padding;
|
|
@media only screen and (max-width: $small-bp) {
|
|
padding:1em $side-padding/2 0 $side-padding/2;
|
|
}
|
|
}
|
|
section[role="main-content"]{
|
|
display: flex;
|
|
flex:1 1 auto;
|
|
@extend %layout-element;
|
|
overflow: hidden;
|
|
position: relative;
|
|
>.wrapper{
|
|
position: relative;
|
|
padding:0 $side-padding 0 $side-padding;
|
|
// height:100%; max-height:100%;
|
|
display: flex;
|
|
flex: 1;
|
|
overflow-y: hidden;
|
|
overflow-x: hidden;
|
|
>*{
|
|
@include fade-transition;
|
|
}
|
|
@media only screen and (max-width: $small-bp) {
|
|
overflow-y: auto;
|
|
padding:0 $side-padding/2 0 $side-padding/2;
|
|
}
|
|
}
|
|
.main-content-layout{
|
|
position: relative;
|
|
// https://stackoverflow.com/a/33644245
|
|
display: flex;
|
|
flex: 1;
|
|
>section{
|
|
max-height: 100%;
|
|
}
|
|
>header,
|
|
>section>.wrapper,
|
|
>nav{
|
|
box-sizing: border-box;
|
|
max-height: 100%;
|
|
padding-top:1em;
|
|
}
|
|
>section>.wrapper,
|
|
>nav{
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
}
|
|
@media only screen and (max-width: $small-bp) {
|
|
.main-content-layout{
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
}
|
|
footer[role="tools"]{
|
|
flex:0 0 auto;
|
|
@extend %layout-element;
|
|
// padding-bottom: 1em;
|
|
// >*{
|
|
// padding:0.5em 1em;
|
|
// }
|
|
}
|
|
}
|