diff options
author | Volpeon <git@volpeon.ink> | 2025-07-21 21:25:30 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2025-07-21 21:25:30 +0200 |
commit | 3b90048ff3592e2a5630a97f611106aa06be1cb6 (patch) | |
tree | 3d24739d690b3d411a3c504845d0c42d6849fc4f /src/objects/_card.scss | |
parent | Action button: add static mod (diff) | |
download | iro-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.scss | 40 |
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 | } |