diff options
Diffstat (limited to 'src/layouts/_card-list.scss')
-rw-r--r-- | src/layouts/_card-list.scss | 47 |
1 files changed, 39 insertions, 8 deletions
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss index c8c3d18..cca6e72 100644 --- a/src/layouts/_card-list.scss +++ b/src/layouts/_card-list.scss | |||
@@ -6,7 +6,6 @@ | |||
6 | 6 | ||
7 | @forward 'card-list.vars'; | 7 | @forward 'card-list.vars'; |
8 | @use 'card-list.vars' as vars; | 8 | @use 'card-list.vars' as vars; |
9 | @use '../objects/card.vars' as card; | ||
10 | 9 | ||
11 | @mixin styles { | 10 | @mixin styles { |
12 | @include materialize-at-root(meta.module-variables('vars')); | 11 | @include materialize-at-root(meta.module-variables('vars')); |
@@ -17,22 +16,33 @@ | |||
17 | gap: props.get(vars.$row-gap); | 16 | gap: props.get(vars.$row-gap); |
18 | 17 | ||
19 | @include bem.modifier('merge') { | 18 | @include bem.modifier('merge') { |
20 | position: relative; | 19 | position: relative; |
21 | gap: 0; | 20 | gap: calc(2 * props.get(vars.$merge-padding) + props.get(vars.$border-width)); |
21 | padding: props.get(vars.$merge-padding); | ||
22 | background-color: props.get(vars.$card-bg-color); | ||
23 | border: props.get(vars.$border-width) solid props.get(vars.$border-color); | ||
24 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$merge-padding)); | ||
22 | 25 | ||
23 | @include bem.elem('card') { | 26 | @include bem.elem('card') { |
24 | transition: none; | ||
25 | |||
26 | &:not(:last-child) { | 27 | &:not(:last-child) { |
27 | margin-bottom: calc(-1 * props.get(card.$border-width)); | 28 | position: relative; |
28 | border-end-start-radius: 0; | 29 | border-end-start-radius: 0; |
29 | border-end-end-radius: 0; | 30 | border-end-end-radius: 0; |
31 | |||
32 | &::after { | ||
33 | position: absolute; | ||
34 | inset-block-start: calc(100% + props.get(vars.$merge-padding) + props.get(vars.$border-width)); | ||
35 | inset-inline: calc(-1 * props.get(vars.$merge-padding) - props.get(vars.$border-width)); | ||
36 | content: ''; | ||
37 | display: block; | ||
38 | block-size: props.get(vars.$border-width); | ||
39 | background-color: props.get(vars.$border-color); | ||
40 | } | ||
30 | } | 41 | } |
31 | 42 | ||
32 | &:hover, | 43 | &:hover, |
33 | &:active, | 44 | &:active, |
34 | &:focus-visible { | 45 | &:focus-visible { |
35 | z-index: 10; | ||
36 | transform: none; | 46 | transform: none; |
37 | } | 47 | } |
38 | 48 | ||
@@ -41,6 +51,27 @@ | |||
41 | border-start-end-radius: 0; | 51 | border-start-end-radius: 0; |
42 | } | 52 | } |
43 | } | 53 | } |
54 | |||
55 | @include bem.modifier('borderless') { | ||
56 | border-color: props.get(vars.$card-bg-color); | ||
57 | |||
58 | @include bem.elem('card') { | ||
59 | &:not(:last-child) { | ||
60 | &::after { | ||
61 | inset-inline: calc(-1 * props.get(vars.$merge-padding) - 2 * props.get(vars.$border-width)); | ||
62 | } | ||
63 | } | ||
64 | } | ||
65 | } | ||
66 | |||
67 | @include bem.modifier('shadow') { | ||
68 | box-shadow: | ||
69 | props.get(vars.$shadow-x) | ||
70 | props.get(vars.$shadow-y) | ||
71 | props.get(vars.$shadow-blur) | ||
72 | props.get(vars.$shadow-grow) | ||
73 | props.get(vars.$shadow-color); | ||
74 | } | ||
44 | } | 75 | } |
45 | 76 | ||
46 | @include bem.modifier('quiet') { | 77 | @include bem.modifier('quiet') { |
@@ -63,7 +94,7 @@ | |||
63 | gap: props.get(vars.$grid-sm--row-gap) props.get(vars.$grid-sm--col-gap); | 94 | gap: props.get(vars.$grid-sm--row-gap) props.get(vars.$grid-sm--col-gap); |
64 | 95 | ||
65 | @include bem.modifier("grid-sm") { | 96 | @include bem.modifier("grid-sm") { |
66 | @include iro.media--media("<=md") { | 97 | @include media.media("<=md") { |
67 | display: flex; | 98 | display: flex; |
68 | gap: props.get(vars.$row-gap); | 99 | gap: props.get(vars.$row-gap); |
69 | } | 100 | } |