summaryrefslogtreecommitdiffstats
path: root/src/objects/_card.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2025-07-21 21:25:30 +0200
committerVolpeon <git@volpeon.ink>2025-07-21 21:25:30 +0200
commit3b90048ff3592e2a5630a97f611106aa06be1cb6 (patch)
tree3d24739d690b3d411a3c504845d0c42d6849fc4f /src/objects/_card.scss
parentAction button: add static mod (diff)
downloadiro-design-3b90048ff3592e2a5630a97f611106aa06be1cb6.tar.gz
iro-design-3b90048ff3592e2a5630a97f611106aa06be1cb6.tar.bz2
iro-design-3b90048ff3592e2a5630a97f611106aa06be1cb6.zip
Improved card and card list
Diffstat (limited to 'src/objects/_card.scss')
-rw-r--r--src/objects/_card.scss40
1 files changed, 21 insertions, 19 deletions
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 4f8c7fb..aaf46b6 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -16,16 +16,17 @@
16 flex-direction: column; 16 flex-direction: column;
17 background-color: props.get(vars.$bg-color); 17 background-color: props.get(vars.$bg-color);
18 background-clip: content-box; 18 background-clip: content-box;
19 border: 1px solid transparent; 19 border: props.get(vars.$border-width) solid transparent;
20 border-color: props.get(vars.$border-color); 20 border-color: props.get(vars.$border-color);
21 border-radius: props.get(vars.$rounding); 21 border-radius: props.get(vars.$rounding);
22 transition: transform .2s; 22 transition: transform .2s, border-color .2s;
23 23
24 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 24 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
25 &:hover, 25 &:hover,
26 &:active, 26 &:active,
27 &:focus-visible { 27 &:focus-visible {
28 transform: translateY(props.get(vars.$hover--offset-b)); 28 transform: translateY(props.get(vars.$hover--offset-b));
29 border-color: props.get(vars.$hover--border-color);
29 30
30 @include bem.elem('body') { 31 @include bem.elem('body') {
31 @include bem.modifier('hidden') { 32 @include bem.modifier('hidden') {
@@ -39,9 +40,9 @@
39 } 40 }
40 41
41 &:focus-visible { 42 &:focus-visible {
42 margin: calc(-1 * props.get(vars.$key-focus--border-width) + 1px); 43 margin: calc(-1 * props.get(vars.$key-focus--border-width));
43 border: props.get(vars.$key-focus--border-offset) solid transparent; 44 border: calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent;
44 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset) - 1px); 45 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
45 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 46 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
46 box-shadow: 47 box-shadow:
47 0 0 0 48 0 0 0
@@ -59,19 +60,20 @@
59 position: relative; 60 position: relative;
60 display: block; 61 display: block;
61 flex: 0 0 auto; 62 flex: 0 0 auto;
62 inline-size: 100%; 63 inline-size: calc(100% + 2 * props.get(vars.$border-width));
64 margin: calc(-1 * props.get(vars.$border-width));
63 overflow: hidden; 65 overflow: hidden;
64 object-fit: cover; 66 object-fit: cover;
65 transition: background-color .2s, transform .2s, opacity .2s; 67 transition: background-color .2s, transform .2s, opacity .2s;
66 68
67 &:first-child { 69 &:first-child {
68 border-start-start-radius: calc(props.get(vars.$rounding) - 1px); 70 border-start-start-radius: props.get(vars.$rounding);
69 border-start-end-radius: calc(props.get(vars.$rounding) - 1px); 71 border-start-end-radius: props.get(vars.$rounding);
70 } 72 }
71 73
72 &:last-child { 74 &:last-child {
73 border-end-start-radius: calc(props.get(vars.$rounding) - 1px); 75 border-end-start-radius: props.get(vars.$rounding);
74 border-end-end-radius: calc(props.get(vars.$rounding) - 1px); 76 border-end-end-radius: props.get(vars.$rounding);
75 } 77 }
76 78
77 @include bem.next-elem('avatar') { 79 @include bem.next-elem('avatar') {
@@ -107,21 +109,21 @@
107 109
108 @include bem.modifier('hidden') { 110 @include bem.modifier('hidden') {
109 position: absolute; 111 position: absolute;
110 inset-block-end: 0; 112 inset-block-end: calc(-1 * props.get(vars.$border-width));
111 inset-inline: 0; 113 inset-inline: calc(-1 * props.get(vars.$border-width));
112 z-index: 10; 114 z-index: 10;
113 visibility: hidden; 115 visibility: hidden;
114 background-color: props.get(vars.$bg-color); 116 background-color: props.get(vars.$bg-color);
115 //border-end-start-radius: props.get(vars.$rounding); 117 border-end-start-radius: props.get(vars.$rounding);
116 //border-end-end-radius: props.get(vars.$rounding); 118 border-end-end-radius: props.get(vars.$rounding);
117 opacity: 0; 119 opacity: 0;
118 transition: 120 transition:
119 opacity .2s ease, 121 opacity .2s ease,
120 visibility 0s .2s linear; 122 visibility 0s .2s linear;
121 123
122 @include bem.next-elem('image') { 124 @include bem.next-elem('image') {
123 border-start-start-radius: calc(props.get(vars.$rounding) - 1px); 125 border-start-start-radius: props.get(vars.$rounding);
124 border-start-end-radius: calc(props.get(vars.$rounding) - 1px); 126 border-start-end-radius: props.get(vars.$rounding);
125 } 127 }
126 } 128 }
127 } 129 }
@@ -225,11 +227,11 @@
225 227
226 &:first-child { 228 &:first-child {
227 border-start-end-radius: 0; 229 border-start-end-radius: 0;
228 border-end-start-radius: calc(props.get(vars.$rounding) - 1px); 230 border-end-start-radius: props.get(vars.$rounding);
229 } 231 }
230 232
231 &:last-child { 233 &:last-child {
232 border-start-end-radius: calc(props.get(vars.$rounding) - 1px); 234 border-start-end-radius: props.get(vars.$rounding);
233 border-end-start-radius: 0; 235 border-end-start-radius: 0;
234 } 236 }
235 } 237 }