open-nomad/ui/app/styles/components/page-layout.scss

61 lines
1.2 KiB
SCSS
Raw Normal View History

2017-09-19 14:47:10 +00:00
.page-layout {
min-height: 100%;
2017-09-19 14:47:10 +00:00
display: flex;
flex-direction: column;
.page-header {
position: fixed;
width: 100%;
z-index: $z-header;
// Defensive styles in case header height goes over 100px, causing
// the left gutter menu to be on top of the header.
height: $header-height;
overflow: hidden;
}
.page-body {
display: flex;
flex: 1;
flex-direction: row;
justify-content: space-between;
margin-top: $header-height;
.page-column {
flex: 1;
&.is-left {
min-width: $gutter-width;
max-width: $gutter-width;
position: fixed;
bottom: 0;
top: $header-height;
z-index: $z-gutter;
background: $white;
2017-09-19 14:47:10 +00:00
}
&.is-right {
margin-left: $gutter-width;
width: calc(100% - #{$gutter-width});
}
@media #{$mq-hidden-gutter} {
&.is-left {
top: 0;
transform: translateX(-$gutter-width);
transition: transform ease-in-out 0.2s;
&.is-open {
transform: translateX(0);
}
}
&.is-right {
margin-left: 0;
width: 100%;
}
2017-09-19 14:47:10 +00:00
}
}
}
}