diff options
| author | Volpeon <git@volpeon.ink> | 2026-03-05 10:22:52 +0100 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2026-03-05 10:22:52 +0100 |
| commit | 641d6fb012768dea37a2f5e25ff608aaa9ca8f83 (patch) | |
| tree | 76910eed712587d67b98f35060b4cbe059b6f8c8 /src | |
| parent | card-list: Add interactive mod (diff) | |
| download | iro-design-641d6fb012768dea37a2f5e25ff608aaa9ca8f83.tar.gz iro-design-641d6fb012768dea37a2f5e25ff608aaa9ca8f83.tar.bz2 iro-design-641d6fb012768dea37a2f5e25ff608aaa9ca8f83.zip | |
Diffstat (limited to 'src')
| -rw-r--r-- | src/layouts/_card-list.scss | 21 |
1 files changed, 11 insertions, 10 deletions
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss index 62131f7..8f96ce0 100644 --- a/src/layouts/_card-list.scss +++ b/src/layouts/_card-list.scss | |||
| @@ -22,16 +22,6 @@ | |||
| 22 | gap: 0; | 22 | gap: 0; |
| 23 | border-radius: props.get(card.$rounding); | 23 | border-radius: props.get(card.$rounding); |
| 24 | 24 | ||
| 25 | @include bem.modifier('interactive') { | ||
| 26 | transition: transform .2s; | ||
| 27 | |||
| 28 | &:hover, | ||
| 29 | &:active, | ||
| 30 | &:focus-within { | ||
| 31 | transform: translateY(props.get(card.$hover--offset-b)); | ||
| 32 | } | ||
| 33 | } | ||
| 34 | |||
| 35 | @include bem.elem('card') { | 25 | @include bem.elem('card') { |
| 36 | border-color: props.get(card.$border-color) props.get(card.$border-color) props.get(vars.$border-color); | 26 | border-color: props.get(card.$border-color) props.get(card.$border-color) props.get(vars.$border-color); |
| 37 | background-clip: content-box; | 27 | background-clip: content-box; |
| @@ -126,6 +116,17 @@ | |||
| 126 | props.get(vars.$shadow-grow) | 116 | props.get(vars.$shadow-grow) |
| 127 | props.get(card.$shadow-color); | 117 | props.get(card.$shadow-color); |
| 128 | } | 118 | } |
| 119 | |||
| 120 | @include bem.modifier('interactive') { | ||
| 121 | transition: transform .2s, box-shadow .2s; | ||
| 122 | |||
| 123 | &:hover, | ||
| 124 | &:active, | ||
| 125 | &:focus-within { | ||
| 126 | box-shadow: none; | ||
| 127 | transform: translateY(props.get(card.$hover--offset-b)); | ||
| 128 | } | ||
| 129 | } | ||
| 129 | } | 130 | } |
| 130 | 131 | ||
| 131 | @include bem.modifier('quiet') { | 132 | @include bem.modifier('quiet') { |
