summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/layouts/_card-list.scss23
-rw-r--r--src/layouts/_card-list.vars.scss5
2 files changed, 18 insertions, 10 deletions
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index 8bec6f8..ef99a92 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -18,11 +18,14 @@
18 gap: props.get(vars.$row-gap); 18 gap: props.get(vars.$row-gap);
19 19
20 @include bem.modifier('merge') { 20 @include bem.modifier('merge') {
21 position: relative; 21 position: relative;
22 gap: 0; 22 gap: 0;
23 border-radius: props.get(vars.$rounding);
23 24
24 @include bem.elem('card') { 25 @include bem.elem('card') {
26 border-color: props.get(card.$border-color) props.get(card.$border-color) props.get(vars.$border-color);
25 background-clip: content-box; 27 background-clip: content-box;
28 box-shadow: none;
26 29
27 &:not(:last-child) { 30 &:not(:last-child) {
28 position: relative; 31 position: relative;
@@ -53,6 +56,15 @@
53 } 56 }
54 } 57 }
55 58
59 &:last-child {
60 border-block-end-color: props.get(card.$border-color);
61 }
62
63 &:hover,
64 &:active {
65 border-color: props.get(card.$hover--border-color);
66 }
67
56 &:focus-visible { 68 &:focus-visible {
57 border-color: props.get(card.$hover--bg-color); 69 border-color: props.get(card.$hover--bg-color);
58 } 70 }
@@ -60,15 +72,14 @@
60 72
61 @include bem.modifier('borderless') { 73 @include bem.modifier('borderless') {
62 @include bem.elem('card') { 74 @include bem.elem('card') {
63 border-inline-color: props.get(vars.$card-bg-color); 75 border-color: props.get(card.$bg-color) props.get(card.$bg-color) props.get(vars.$border-color);
64 border-block-color: props.get(vars.$card-bg-color) props.get(card.$border-color);
65 76
66 @include bem.next-twin-elem { 77 @include bem.next-twin-elem {
67 border-block-start-color: transparent; 78 border-block-start-color: transparent;
68 } 79 }
69 80
70 &:last-child { 81 &:last-child {
71 border-block-end-color: props.get(vars.$card-bg-color); 82 border-block-end-color: props.get(card.$bg-color);
72 } 83 }
73 84
74 &:hover, 85 &:hover,
@@ -88,7 +99,7 @@
88 props.get(vars.$shadow-y) 99 props.get(vars.$shadow-y)
89 props.get(vars.$shadow-blur) 100 props.get(vars.$shadow-blur)
90 props.get(vars.$shadow-grow) 101 props.get(vars.$shadow-grow)
91 props.get(vars.$shadow-color); 102 props.get(card.$shadow-color);
92 } 103 }
93 } 104 }
94 105
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
index e5fa731..b33776c 100644
--- a/src/layouts/_card-list.vars.scss
+++ b/src/layouts/_card-list.vars.scss
@@ -45,8 +45,5 @@ $shadow-y: props.def(--l-card-list--shadow-y, props.get(card.$shadow-y)) !def
45$shadow-blur: props.def(--l-card-list--shadow-blur, props.get(card.$shadow-blur)) !default; 45$shadow-blur: props.def(--l-card-list--shadow-blur, props.get(card.$shadow-blur)) !default;
46$shadow-grow: props.def(--l-card-list--shadow-grow, props.get(card.$shadow-grow)) !default; 46$shadow-grow: props.def(--l-card-list--shadow-grow, props.get(card.$shadow-grow)) !default;
47 47
48$card-bg-color: props.def(--l-card-list--bg-color, props.get(card.$bg-color), 'color') !default;
49$border-color: props.def(--l-card-list--border-color, props.get(card.$border-color), 'color') !default; 48$border-color: props.def(--l-card-list--border-color, props.get(card.$border-color), 'color') !default;
50$shadow-color: props.def(--l-card-list--shadow-color, props.get(card.$shadow-color), 'color') !default; 49$border-color-dark: props.def(--l-card-list--border-color, props.get(core.$theme, --border-mute), 'dark') !default;
51
52$border-color-dark: props.def(--l-card-list--border-color, props.get(core.$theme, --bg-l1), 'dark') !default;