summaryrefslogtreecommitdiffstats
path: root/src/layouts/_card-list.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/layouts/_card-list.scss')
-rw-r--r--src/layouts/_card-list.scss20
1 files changed, 16 insertions, 4 deletions
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index abb0277..8774b5a 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -17,21 +17,33 @@
17 17
18 @include bem.modifier('merge') { 18 @include bem.modifier('merge') {
19 position: relative; 19 position: relative;
20 gap: props.get(vars.$border-width); 20 gap: calc(2 * props.get(vars.$merge-padding) + props.get(vars.$border-width));
21 background-color: props.get(vars.$border-color); 21 padding: props.get(vars.$merge-padding);
22 background-color: props.get(vars.$card-bg-color);
22 border: props.get(vars.$border-width) solid props.get(vars.$border-color); 23 border: props.get(vars.$border-width) solid props.get(vars.$border-color);
23 border-radius: props.get(vars.$rounding); 24 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$merge-padding));
24 25
25 @include bem.elem('card') { 26 @include bem.elem('card') {
26 &:not(:last-child) { 27 &:not(:last-child) {
27 border-end-start-radius: 0; 28 border-end-start-radius: 0;
28 border-end-end-radius: 0; 29 border-end-end-radius: 0;
30
31 &::after {
32 content: '';
33 display: block;
34 inline-size: calc(100% + 2 * props.get(vars.$merge-padding) + 2 * props.get(vars.$border-width));
35 margin:
36 calc(props.get(vars.$merge-padding) + 2 * props.get(vars.$border-width))
37 calc(-1 * props.get(vars.$merge-padding) - props.get(vars.$border-width))
38 calc(-1 * props.get(vars.$merge-padding) - 2 * props.get(vars.$border-width));
39 block-size: props.get(vars.$border-width);
40 background-color: props.get(vars.$border-color);
41 }
29 } 42 }
30 43
31 &:hover, 44 &:hover,
32 &:active, 45 &:active,
33 &:focus-visible { 46 &:focus-visible {
34 z-index: 10;
35 transform: none; 47 transform: none;
36 } 48 }
37 49