sass-site/source/assets/sass/layout/_holy-grail.scss

61 lines
1.1 KiB
SCSS
Raw Normal View History

2023-01-12 19:19:42 +01:00
@use "../breakpoints";
@use "../functions";
@each $breakpoint, $size in breakpoints.$sl-breakpoints {
2023-01-06 22:40:29 +01:00
$prefix: if(($breakpoint == 'none'), '', '#{$breakpoint}-');
2023-01-12 19:19:42 +01:00
@include breakpoints.sl-breakpoint-set($breakpoint, $size) {
2023-01-06 22:40:29 +01:00
.sl-l-#{$prefix}holy-grail {
&,
2023-01-09 20:10:02 +01:00
&__body {
display: flex;
}
2023-01-06 22:40:29 +01:00
flex-direction: column;
height: 100%;
&__header,
2023-01-09 20:10:02 +01:00
&__footer {
flex: none;
}
2023-01-06 22:40:29 +01:00
&__body {
flex: 1 0 auto;
flex-direction: row;
margin: {
right: -2rem;
left: -2rem;
2023-01-09 20:10:02 +01:00
}
2023-01-06 22:40:29 +01:00
}
&__main,
&__navigation,
&__complementary {
padding: {
2023-01-12 19:19:42 +01:00
right: functions.sl-px-to-rem(32px);
left: functions.sl-px-to-rem(32px);
2023-01-09 20:10:02 +01:00
}
2023-01-06 22:40:29 +01:00
}
2023-01-09 20:10:02 +01:00
&__main {
flex: 1;
}
2023-01-06 22:40:29 +01:00
&__navigation {
2023-01-12 19:19:42 +01:00
flex: 0 0 functions.sl-px-to-rem(240px);
2023-01-06 22:40:29 +01:00
order: -1;
}
&__complementary {
order: 1;
2023-01-12 19:19:42 +01:00
flex: 0 0 functions.sl-px-to-rem(480px);
2023-01-06 22:40:29 +01:00
&--contents {
2023-01-12 19:19:42 +01:00
flex: 0 0 functions.sl-px-to-rem(240px);
2023-01-06 22:40:29 +01:00
order: -1;
}
}
}
}
}