File: D:/HostingSpaces/blijegasten/blijegasten.be/resources/sass/site/6-Organisms/_organisms.booth.scss
/*
* The booth organism
*/
$o-booth-bp1: 900;
$o-booth-bp2: 1250;
$o-booth-gap: space(6);
$o-booth-item-border: 2px solid palette(neutral, 100);
.o-booth {
@include vspacing(
'padding-top' 0.25,
'margin-bottom' 1
);
}
.o-booth__list {
display: flex;
flex-direction: column;
align-items: center;
max-width: 556px;
margin: 0 auto;
list-style: none;
@include mq($o-booth-bp1) {
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
min-width: 100%;
max-width: none;
}
}
.o-booth__item {
width: 100%;
margin-bottom: $o-booth-gap;
@include mq($max: $o-booth-bp1) {
margin-bottom: space(3);
& + & {
padding-top: space(3);
border-top: $o-booth-item-border;
}
}
@include mq($o-booth-bp1) {
display: flex;
align-items: flex-end;
}
@include mq($o-booth-bp1, $o-booth-bp2){
flex: 0 0 calc(#{column(1,2)});
width: calc((100% / 2) - 1px); // -1px for rounding in IE
// All items from the second last, but exclude every second child
&:nth-last-child(n+2):not(:nth-child(2n)) {
border-right: $o-booth-item-border;
}
}
@include mq($o-booth-bp2){
flex: 0 0 calc(#{column(1,3)});
width: calc((100% / 3) - 1px); // -1px for rounding in IE
// All items from the second last, but exclude every third child
&:nth-last-child(n+2):not(:nth-child(3n)) {
border-right: $o-booth-item-border;
}
}
}