diff options
Diffstat (limited to 'src/layouts/_card-list.scss')
-rw-r--r-- | src/layouts/_card-list.scss | 20 |
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 | ||