diff options
| author | Volpeon <git@volpeon.ink> | 2026-03-05 10:20:28 +0100 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2026-03-05 10:20:28 +0100 |
| commit | c32d123e08d4c8674b9e64d072c6c838804772eb (patch) | |
| tree | c929cb922898724b343d0f9fa8be63ace5d77373 /src/layouts | |
| parent | Card list: Clean up vars (diff) | |
| download | iro-design-c32d123e08d4c8674b9e64d072c6c838804772eb.tar.gz iro-design-c32d123e08d4c8674b9e64d072c6c838804772eb.tar.bz2 iro-design-c32d123e08d4c8674b9e64d072c6c838804772eb.zip | |
card-list: Add interactive mod
Diffstat (limited to 'src/layouts')
| -rw-r--r-- | src/layouts/_card-list.scss | 76 |
1 files changed, 47 insertions, 29 deletions
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss index 5babc64..62131f7 100644 --- a/src/layouts/_card-list.scss +++ b/src/layouts/_card-list.scss | |||
| @@ -22,6 +22,16 @@ | |||
| 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 | |||
| 25 | @include bem.elem('card') { | 35 | @include bem.elem('card') { |
| 26 | border-color: props.get(card.$border-color) props.get(card.$border-color) props.get(vars.$border-color); | 36 | border-color: props.get(card.$border-color) props.get(card.$border-color) props.get(vars.$border-color); |
| 27 | background-clip: content-box; | 37 | background-clip: content-box; |
| @@ -33,14 +43,16 @@ | |||
| 33 | border-end-end-radius: 0; | 43 | border-end-end-radius: 0; |
| 34 | } | 44 | } |
| 35 | 45 | ||
| 36 | &:hover, | 46 | @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') { |
| 37 | &:active, | 47 | &:hover, |
| 38 | &:focus-visible { | 48 | &:active, |
| 39 | transform: none; | 49 | &:focus-visible { |
| 40 | } | 50 | transform: none; |
| 51 | } | ||
| 41 | 52 | ||
| 42 | &:focus-visible { | 53 | &:focus-visible { |
| 43 | z-index: 10; | 54 | z-index: 10; |
| 55 | } | ||
| 44 | } | 56 | } |
| 45 | 57 | ||
| 46 | @include bem.next-twin-elem { | 58 | @include bem.next-twin-elem { |
| @@ -49,13 +61,15 @@ | |||
| 49 | border-start-start-radius: 0; | 61 | border-start-start-radius: 0; |
| 50 | border-start-end-radius: 0; | 62 | border-start-end-radius: 0; |
| 51 | 63 | ||
| 52 | &:hover, | 64 | @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') { |
| 53 | &:active { | 65 | &:hover, |
| 54 | border-block-start-color: props.get(card.$hover--border-color); | 66 | &:active { |
| 55 | } | 67 | border-block-start-color: props.get(card.$hover--border-color); |
| 68 | } | ||
| 56 | 69 | ||
| 57 | &:focus-visible { | 70 | &:focus-visible { |
| 58 | margin-block-start: calc(-1 * props.get(card.$border-width) - props.get(card.$key-focus--border-width)); | 71 | margin-block-start: calc(-1 * props.get(card.$border-width) - props.get(card.$key-focus--border-width)); |
| 72 | } | ||
| 59 | } | 73 | } |
| 60 | } | 74 | } |
| 61 | 75 | ||
| @@ -63,17 +77,19 @@ | |||
| 63 | border-block-end-color: props.get(card.$border-color); | 77 | border-block-end-color: props.get(card.$border-color); |
| 64 | } | 78 | } |
| 65 | 79 | ||
| 66 | &:hover, | 80 | @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') { |
| 67 | &:active { | 81 | &:hover, |
| 68 | border-color: props.get(card.$hover--border-color); | 82 | &:active { |
| 69 | } | 83 | border-color: props.get(card.$hover--border-color); |
| 84 | } | ||
| 70 | 85 | ||
| 71 | &:focus-visible { | 86 | &:focus-visible { |
| 72 | border-color: props.get(card.$hover--bg-color); | 87 | border-color: props.get(card.$hover--bg-color); |
| 73 | box-shadow: | 88 | box-shadow: |
| 74 | 0 0 0 | 89 | 0 0 0 |
| 75 | calc(props.get(card.$key-focus--border-width) + props.get(card.$key-focus--outline-width)) | 90 | calc(props.get(card.$key-focus--border-width) + props.get(card.$key-focus--outline-width)) |
| 76 | props.get(card.$key-focus--outline-color); | 91 | props.get(card.$key-focus--outline-color); |
| 92 | } | ||
| 77 | } | 93 | } |
| 78 | } | 94 | } |
| 79 | 95 | ||
| @@ -89,13 +105,15 @@ | |||
| 89 | border-block-end-color: props.get(card.$bg-color); | 105 | border-block-end-color: props.get(card.$bg-color); |
| 90 | } | 106 | } |
| 91 | 107 | ||
| 92 | &:hover, | 108 | @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') { |
| 93 | &:active { | 109 | &:hover, |
| 94 | border-color: props.get(card.$hover--border-color); | 110 | &:active { |
| 95 | } | 111 | border-color: props.get(card.$hover--border-color); |
| 112 | } | ||
| 96 | 113 | ||
| 97 | &:focus-visible { | 114 | &:focus-visible { |
| 98 | border-color: props.get(card.$hover--bg-color); | 115 | border-color: props.get(card.$hover--bg-color); |
| 116 | } | ||
| 99 | } | 117 | } |
| 100 | } | 118 | } |
| 101 | } | 119 | } |