2023-01-12 20:54:24 +01:00
|
|
|
@use '../breakpoints';
|
|
|
|
@use '../functions';
|
2023-01-12 19:19:42 +01:00
|
|
|
|
|
|
|
@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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|