summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2025-07-22 19:03:17 +0200
committerVolpeon <git@volpeon.ink>2025-07-22 19:03:17 +0200
commit6bb2f84c7a4809e62edbb426919737e8656bcbab (patch)
tree6b146fe0393828b29b839fd95a3f1426ebaa0e5c /src
parentVarious fixes (diff)
downloadiro-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.scss20
-rw-r--r--src/layouts/_card-list.vars.scss6
-rw-r--r--src/objects/_card.scss7
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') {