sass-site/source/assets/css/layout/_holy-grail.scss
2018-10-26 23:37:10 -07:00

41 lines
631 B
SCSS

.sl-l-holy-grail {
&,
&__body {
display: flex;
flex-direction: column;
}
height: 100%;
&__header,
&__footer { flex: none; }
&__body { flex: 1 0 auto; }
&__navigation { order: -1; }
@include sl-breakpoint--medium {
&__body {
flex-direction: row;
margin: {
right: -2rem;
left: -2rem;
};
}
&__main,
&__navigation,
&__complementary {
padding: {
right: 2rem;
left: 2rem;
};
}
&__main { flex: 1; }
&__navigation { flex: 0 0 20rem; }
&__complementary { flex: 0 0 30rem; }
}
}