2 files changed, 48 insertions, 31 deletions
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index f7f7261..1645b49 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -4,6 +4,8 @@
 @use 'iro-sass/src/props';
 @use '../props' as *;
+@use '../objects/card.vars' as card;
 @forward 'card-list.vars';
 @use 'card-list.vars' as vars;
@@ -16,52 +18,67 @@
                gap:            props.get(vars.$row-gap);
                @include bem.modifier('merge') {
-                        position:         relative;
+                        position:      relative;
-                        gap:              calc(2 * props.get(vars.$merge-padding) + props.get(vars.$border-width));
+                        gap:           0;
-                        padding:          props.get(vars.$merge-padding);
+                        border-radius: props.get(vars.$rounding);
-                        background-color: props.get(vars.$card-bg-color);
-                        border:           props.get(vars.$border-width) solid props.get(vars.$border-color);
-                        border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$merge-padding));
                        @include bem.elem('card') {
-                                box-shadow: none;
+                                background-clip: content-box;
                                &:not(:last-child) {
                                        position:                relative;
                                        border-end-start-radius: 0;
                                        border-end-end-radius:   0;
-                                        &::after {
-                                                position:          absolute;
-                                                inset-block-start: calc(100% + props.get(vars.$merge-padding) + props.get(vars.$border-width));
-                                                inset-inline:      calc(-1 * props.get(vars.$merge-padding) - props.get(vars.$border-width));
-                                                display:           block;
-                                                block-size:        props.get(vars.$border-width);
-                                                content:           '';
-                                                background-color:  props.get(vars.$border-color);
-                                        }
                                }
                                &:hover,
                                &:active,
                                &:focus-visible {
-                                        transform:  none;
+                                        transform: none;
+                                        z-index:   10;
                                }
                                @include bem.next-twin-elem {
+                                        margin-block-start:        calc(-1 * props.get(card.$border-width));
+                                        border-block-start-color:  transparent;
                                        border-start-start-radius: 0;
                                        border-start-end-radius:   0;
+                                        &:hover,
+                                        &:active {
+                                                border-block-start-color: props.get(card.$hover--border-color);
+                                        }
+                                        &:focus-visible {
+                                                margin-block-start: calc(-1 * props.get(card.$border-width) - props.get(card.$key-focus--border-width));
+                                        }
+                                }
+                                &:focus-visible {
+                                        border-color: props.get(card.$hover--bg-color);
                                }
                        }
                        @include bem.modifier('borderless') {
-                                border-color: props.get(vars.$card-bg-color);
                                @include bem.elem('card') {
-                                        &:not(:last-child) {
+                                        border-inline-color: props.get(vars.$card-bg-color);
-                                                &::after {
+                                        border-block-color:  props.get(vars.$card-bg-color) props.get(card.$border-color);
-                                                        inset-inline: calc(-1 * props.get(vars.$merge-padding) - 2 * props.get(vars.$border-width));
-                                                }
+                                        @include bem.next-twin-elem {
+                                                border-block-start-color: transparent;
+                                        }
+                                        &:last-child {
+                                                border-block-end-color: props.get(vars.$card-bg-color);
+                                        }
+                                        &:hover,
+                                        &:active {
+                                                border-color: props.get(card.$hover--border-color);
+                                        }
+                                        &:focus-visible {
+                                                border-color: props.get(card.$hover--bg-color);
                                        }
                                }
                        }
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index e982925..e802aab 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -1,4 +1,4 @@
-mixin view-card 
+mixin view-card
    +view('card', 'Card')(wide=true)
        .l-card-list
            +card(href='#' class='l-card-list__card')
@@ -21,15 +21,15 @@ mixin view-card
        +divider('faint')(class='u-mb-700')
        .l-card-list.l-card-list--merge
-            +card(href='#' class='l-card-list__card' borderless=true)
+            +card(href='#' class='l-card-list__card')
                +card-body
                    strong= 'Lorem ipsum dolor'
                    = 'sit amet'
-            +card(href='#' class='l-card-list__card' borderless=true)
+            +card(href='#' class='l-card-list__card')
                +card-body
                    strong= 'Lorem ipsum dolor'
                    = 'sit amet'
-            +card(href='#' class='l-card-list__card' borderless=true)
+            +card(href='#' class='l-card-list__card')
                +card-body
                    strong= 'Lorem ipsum dolor'
                    = 'sit amet'
@@ -37,15 +37,15 @@ mixin view-card
        +divider('faint')(class='u-mb-700')
        .l-card-list.l-card-list--merge.l-card-list--borderless.l-card-list--shadow
-            +card(href='#' class='l-card-list__card' borderless=true)
+            +card(href='#' class='l-card-list__card')
                +card-body
                    strong= 'Lorem ipsum dolor'
                    = 'sit amet'
-            +card(href='#' class='l-card-list__card' borderless=true)
+            +card(href='#' class='l-card-list__card')
                +card-body
                    strong= 'Lorem ipsum dolor'
                    = 'sit amet'
-            +card(href='#' class='l-card-list__card' borderless=true)
+            +card(href='#' class='l-card-list__card')
                +card-body
                    strong= 'Lorem ipsum dolor'
                    = 'sit amet'

diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss index f7f7261..1645b49 100644 --- a/src/layouts/_card-list.scss +++ b/src/layouts/_card-list.scss
@@ -4,6 +4,8 @@
4	@use 'iro-sass/src/props';	4	@use 'iro-sass/src/props';
5	@use '../props' as *;	5	@use '../props' as *;
6		6
		7	@use '../objects/card.vars' as card;
		8
7	@forward 'card-list.vars';	9	@forward 'card-list.vars';
8	@use 'card-list.vars' as vars;	10	@use 'card-list.vars' as vars;
9		11
@@ -16,52 +18,67 @@
16	gap: props.get(vars.$row-gap);	18	gap: props.get(vars.$row-gap);
17		19
18	@include bem.modifier('merge') {	20	@include bem.modifier('merge') {
19	position: relative;	21	position: relative;
20	gap: calc(2 * props.get(vars.$merge-padding) + props.get(vars.$border-width));	22	gap: 0;
21	padding: props.get(vars.$merge-padding);	23	border-radius: props.get(vars.$rounding);
22	background-color: props.get(vars.$card-bg-color);
23	border: props.get(vars.$border-width) solid props.get(vars.$border-color);
24	border-radius: calc(props.get(vars.$rounding) + props.get(vars.$merge-padding));
25		24
26	@include bem.elem('card') {	25	@include bem.elem('card') {
27	box-shadow: none;	26	background-clip: content-box;
28		27
29	&:not(:last-child) {	28	&:not(:last-child) {
30	position: relative;	29	position: relative;
31	border-end-start-radius: 0;	30	border-end-start-radius: 0;
32	border-end-end-radius: 0;	31	border-end-end-radius: 0;
33
34	&::after {
35	position: absolute;
36	inset-block-start: calc(100% + props.get(vars.$merge-padding) + props.get(vars.$border-width));
37	inset-inline: calc(-1 * props.get(vars.$merge-padding) - props.get(vars.$border-width));
38	display: block;
39	block-size: props.get(vars.$border-width);
40	content: '';
41	background-color: props.get(vars.$border-color);
42	}
43	}	32	}
44		33
45	&:hover,	34	&:hover,
46	&:active,	35	&:active,
47	&:focus-visible {	36	&:focus-visible {
48	transform: none;	37	transform: none;
		38	z-index: 10;
49	}	39	}
50		40
51	@include bem.next-twin-elem {	41	@include bem.next-twin-elem {
		42	margin-block-start: calc(-1 * props.get(card.$border-width));
		43	border-block-start-color: transparent;
52	border-start-start-radius: 0;	44	border-start-start-radius: 0;
53	border-start-end-radius: 0;	45	border-start-end-radius: 0;
		46
		47	&:hover,
		48	&:active {
		49	border-block-start-color: props.get(card.$hover--border-color);
		50	}
		51
		52	&:focus-visible {
		53	margin-block-start: calc(-1 * props.get(card.$border-width) - props.get(card.$key-focus--border-width));
		54	}
		55	}
		56
		57	&:focus-visible {
		58	border-color: props.get(card.$hover--bg-color);
54	}	59	}
55	}	60	}
56		61
57	@include bem.modifier('borderless') {	62	@include bem.modifier('borderless') {
58	border-color: props.get(vars.$card-bg-color);
59
60	@include bem.elem('card') {	63	@include bem.elem('card') {
61	&:not(:last-child) {	64	border-inline-color: props.get(vars.$card-bg-color);
62	&::after {	65	border-block-color: props.get(vars.$card-bg-color) props.get(card.$border-color);
63	inset-inline: calc(-1 * props.get(vars.$merge-padding) - 2 * props.get(vars.$border-width));	66
64	}	67	@include bem.next-twin-elem {
		68	border-block-start-color: transparent;
		69	}
		70
		71	&:last-child {
		72	border-block-end-color: props.get(vars.$card-bg-color);
		73	}
		74
		75	&:hover,
		76	&:active {
		77	border-color: props.get(card.$hover--border-color);
		78	}
		79
		80	&:focus-visible {
		81	border-color: props.get(card.$hover--bg-color);
65	}	82	}
66	}	83	}
67	}	84	}


diff --git a/tpl/views/card.pug b/tpl/views/card.pug index e982925..e802aab 100644 --- a/tpl/views/card.pug +++ b/tpl/views/card.pug
@@ -1,4 +1,4 @@
1	mixin view-card	1	mixin view-card
2	+view('card', 'Card')(wide=true)	2	+view('card', 'Card')(wide=true)
3	.l-card-list	3	.l-card-list
4	+card(href='#' class='l-card-list__card')	4	+card(href='#' class='l-card-list__card')
@@ -21,15 +21,15 @@ mixin view-card
21	+divider('faint')(class='u-mb-700')	21	+divider('faint')(class='u-mb-700')
22		22
23	.l-card-list.l-card-list--merge	23	.l-card-list.l-card-list--merge
24	+card(href='#' class='l-card-list__card' borderless=true)	24	+card(href='#' class='l-card-list__card')
25	+card-body	25	+card-body
26	strong= 'Lorem ipsum dolor'	26	strong= 'Lorem ipsum dolor'
27	= 'sit amet'	27	= 'sit amet'
28	+card(href='#' class='l-card-list__card' borderless=true)	28	+card(href='#' class='l-card-list__card')
29	+card-body	29	+card-body
30	strong= 'Lorem ipsum dolor'	30	strong= 'Lorem ipsum dolor'
31	= 'sit amet'	31	= 'sit amet'
32	+card(href='#' class='l-card-list__card' borderless=true)	32	+card(href='#' class='l-card-list__card')
33	+card-body	33	+card-body
34	strong= 'Lorem ipsum dolor'	34	strong= 'Lorem ipsum dolor'
35	= 'sit amet'	35	= 'sit amet'
@@ -37,15 +37,15 @@ mixin view-card
37	+divider('faint')(class='u-mb-700')	37	+divider('faint')(class='u-mb-700')
38		38
39	.l-card-list.l-card-list--merge.l-card-list--borderless.l-card-list--shadow	39	.l-card-list.l-card-list--merge.l-card-list--borderless.l-card-list--shadow
40	+card(href='#' class='l-card-list__card' borderless=true)	40	+card(href='#' class='l-card-list__card')
41	+card-body	41	+card-body
42	strong= 'Lorem ipsum dolor'	42	strong= 'Lorem ipsum dolor'
43	= 'sit amet'	43	= 'sit amet'
44	+card(href='#' class='l-card-list__card' borderless=true)	44	+card(href='#' class='l-card-list__card')
45	+card-body	45	+card-body
46	strong= 'Lorem ipsum dolor'	46	strong= 'Lorem ipsum dolor'
47	= 'sit amet'	47	= 'sit amet'
48	+card(href='#' class='l-card-list__card' borderless=true)	48	+card(href='#' class='l-card-list__card')
49	+card-body	49	+card-body
50	strong= 'Lorem ipsum dolor'	50	strong= 'Lorem ipsum dolor'
51	= 'sit amet'	51	= 'sit amet'