66 lines
1.1 KiB
SCSS
66 lines
1.1 KiB
SCSS
/* Split */
|
|
|
|
.split {
|
|
@include vendor('display', 'flex');
|
|
@include vendor('flex-wrap', 'wrap');
|
|
|
|
> * {
|
|
@include padding(4.5em, 2.5em);
|
|
margin-bottom: 0;
|
|
width: 50%;
|
|
|
|
&:nth-child(odd) {
|
|
border-right: solid _size(border-width);
|
|
}
|
|
|
|
&:nth-child(n+3) {
|
|
// Add top border only on the third element and after
|
|
border-top: solid _size(border-width);
|
|
}
|
|
|
|
> header.major {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
@include breakpoint('<=medium') {
|
|
> * {
|
|
@include padding(4em, 2em);
|
|
}
|
|
}
|
|
|
|
@include breakpoint('<=small') {
|
|
> * {
|
|
@include padding(2.5em, 2em);
|
|
width: 100%;
|
|
|
|
&:nth-child(2) {
|
|
// Show the top border on the second element too
|
|
border-top: solid _size(border-width);
|
|
}
|
|
}
|
|
}
|
|
|
|
@include breakpoint('<=xsmall') {
|
|
> * {
|
|
@include padding(2.5em, 1.5em);
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin color-split($p: null) {
|
|
.split {
|
|
> * {
|
|
&:nth-child(odd) {
|
|
border-right-color: _palette($p, border-bg);
|
|
}
|
|
|
|
&:nth-child(n+2) {
|
|
border-top-color: _palette($p, border-bg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include color-split;
|