diff options
author | Volpeon <git@volpeon.ink> | 2025-07-22 19:03:17 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2025-07-22 19:03:17 +0200 |
commit | 6bb2f84c7a4809e62edbb426919737e8656bcbab (patch) | |
tree | 6b146fe0393828b29b839fd95a3f1426ebaa0e5c /src | |
parent | Various fixes (diff) | |
download | iro-design-6bb2f84c7a4809e62edbb426919737e8656bcbab.tar.gz iro-design-6bb2f84c7a4809e62edbb426919737e8656bcbab.tar.bz2 iro-design-6bb2f84c7a4809e62edbb426919737e8656bcbab.zip |
Card list: Improved merge layout
Diffstat (limited to 'src')
-rw-r--r-- | src/layouts/_card-list.scss | 20 | ||||
-rw-r--r-- | src/layouts/_card-list.vars.scss | 6 | ||||
-rw-r--r-- | src/objects/_card.scss | 7 |
3 files changed, 20 insertions, 13 deletions
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss index abb0277..8774b5a 100644 --- a/src/layouts/_card-list.scss +++ b/src/layouts/_card-list.scss | |||
@@ -17,21 +17,33 @@ | |||
17 | 17 | ||
18 | @include bem.modifier('merge') { | 18 | @include bem.modifier('merge') { |
19 | position: relative; | 19 | position: relative; |
20 | gap: props.get(vars.$border-width); | 20 | gap: calc(2 * props.get(vars.$merge-padding) + props.get(vars.$border-width)); |
21 | background-color: props.get(vars.$border-color); | 21 | padding: props.get(vars.$merge-padding); |
22 | background-color: props.get(vars.$card-bg-color); | ||
22 | border: props.get(vars.$border-width) solid props.get(vars.$border-color); | 23 | border: props.get(vars.$border-width) solid props.get(vars.$border-color); |
23 | border-radius: props.get(vars.$rounding); | 24 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$merge-padding)); |
24 | 25 | ||
25 | @include bem.elem('card') { | 26 | @include bem.elem('card') { |
26 | &:not(:last-child) { | 27 | &:not(:last-child) { |
27 | border-end-start-radius: 0; | 28 | border-end-start-radius: 0; |
28 | border-end-end-radius: 0; | 29 | border-end-end-radius: 0; |
30 | |||
31 | &::after { | ||
32 | content: ''; | ||
33 | display: block; | ||
34 | inline-size: calc(100% + 2 * props.get(vars.$merge-padding) + 2 * props.get(vars.$border-width)); | ||
35 | margin: | ||
36 | calc(props.get(vars.$merge-padding) + 2 * props.get(vars.$border-width)) | ||
37 | calc(-1 * props.get(vars.$merge-padding) - props.get(vars.$border-width)) | ||
38 | calc(-1 * props.get(vars.$merge-padding) - 2 * props.get(vars.$border-width)); | ||
39 | block-size: props.get(vars.$border-width); | ||
40 | background-color: props.get(vars.$border-color); | ||
41 | } | ||
29 | } | 42 | } |
30 | 43 | ||
31 | &:hover, | 44 | &:hover, |
32 | &:active, | 45 | &:active, |
33 | &:focus-visible { | 46 | &:focus-visible { |
34 | z-index: 10; | ||
35 | transform: none; | 47 | transform: none; |
36 | } | 48 | } |
37 | 49 | ||
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss index 0c8d702..b4f30d9 100644 --- a/src/layouts/_card-list.vars.scss +++ b/src/layouts/_card-list.vars.scss | |||
@@ -3,6 +3,7 @@ | |||
3 | @use '../objects/card' as card; | 3 | @use '../objects/card' as card; |
4 | 4 | ||
5 | $border-width: props.def(--l-card-list--border-width, props.get(card.$border-width)) !default; | 5 | $border-width: props.def(--l-card-list--border-width, props.get(card.$border-width)) !default; |
6 | $merge-padding: props.def(--l-card-list--merge-padding, props.get(core.$border-width--thick)) !default; | ||
6 | $rounding: props.def(--l-card-list--rounding, props.get(card.$rounding)) !default; | 7 | $rounding: props.def(--l-card-list--rounding, props.get(card.$rounding)) !default; |
7 | 8 | ||
8 | $row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--100)) !default; | 9 | $row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--100)) !default; |
@@ -28,5 +29,6 @@ $masonry-h--col-gap: props.def(--l-card-list--masonry-h--col-gap, props.g | |||
28 | $masonry-h--row-height: props.def(--l-card-list--masonry-h--row-height, props.get(core.$size--3200)) !default; | 29 | $masonry-h--row-height: props.def(--l-card-list--masonry-h--row-height, props.get(core.$size--3200)) !default; |
29 | $masonry-h--quiet--row-gap: props.def(--l-card-list--masonry-h--quiet--row-gap, props.get(core.$size--800)) !default; | 30 | $masonry-h--quiet--row-gap: props.def(--l-card-list--masonry-h--quiet--row-gap, props.get(core.$size--800)) !default; |
30 | 31 | ||
31 | $card-bg-color: props.def(--l-card-list--bg-color, props.get(card.$bg-color), 'color') !default; | 32 | $card-bg-color: props.def(--l-card-list--bg-color, props.get(card.$bg-color), 'color') !default; |
32 | $border-color: props.def(--l-card-list--border-color, props.get(card.$border-color), 'color') !default; | 33 | $border-color: props.def(--l-card-list--border-color, props.get(card.$border-color), 'color') !default; |
34 | $border-color-dark: props.def(--l-card-list--border-color, props.get(core.$theme, --bg-l1), 'dark') !default; | ||
diff --git a/src/objects/_card.scss b/src/objects/_card.scss index 966bcd0..932007e 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss | |||
@@ -43,13 +43,6 @@ | |||
43 | 43 | ||
44 | @include bem.modifier('borderless') { | 44 | @include bem.modifier('borderless') { |
45 | border-color: props.get(vars.$bg-color); | 45 | border-color: props.get(vars.$bg-color); |
46 | |||
47 | @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { | ||
48 | &:hover, | ||
49 | &:active { | ||
50 | border-color: props.get(vars.$hover--bg-color); | ||
51 | } | ||
52 | } | ||
53 | } | 46 | } |
54 | 47 | ||
55 | @include bem.elem('avatar') { | 48 | @include bem.elem('avatar') { |