Improved card

author: Volpeon <git@volpeon.ink> 2025-07-21 22:14:31 +0200
committer: Volpeon <git@volpeon.ink> 2025-07-21 22:14:31 +0200
commit: d61c6362949ecb49d81e608af698a5e0fa4643fe (patch)
tree: 9ac3c062c717e3b2ca1c972b7ede4695ce9ae115 /src/objects/_card.scss
parent: Improved card and card list (diff)
download: iro-design-d61c6362949ecb49d81e608af698a5e0fa4643fe.tar.gz
iro-design-d61c6362949ecb49d81e608af698a5e0fa4643fe.tar.bz2
iro-design-d61c6362949ecb49d81e608af698a5e0fa4643fe.zip
1 files changed, 54 insertions, 52 deletions
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index aaf46b6..d5d300d 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -15,28 +15,18 @@
        display:          flex;
        flex-direction:   column;
        background-color: props.get(vars.$bg-color);
-        background-clip:  content-box;
        border:           props.get(vars.$border-width) solid transparent;
        border-color:     props.get(vars.$border-color);
        border-radius:    props.get(vars.$rounding);
-        transition:       transform .2s, border-color .2s;
+        transition:       transform .2s, background-color .2s, border-color .2s;
        @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
            &:hover,
            &:active,
            &:focus-visible {
-                transform:    translateY(props.get(vars.$hover--offset-b));
+                transform:        translateY(props.get(vars.$hover--offset-b));
-                border-color: props.get(vars.$hover--border-color);
+                background-color: props.get(vars.$hover--bg-color);
+                border-color:     props.get(vars.$hover--border-color);
-                @include bem.elem('body') {
-                    @include bem.modifier('hidden') {
-                        visibility: visible;
-                        opacity:    1;
-                        transition:
-                            opacity .2s ease,
-                            visibility .2s linear;
-                    }
-                }
            }
            &:focus-visible {
@@ -60,20 +50,19 @@
            position:    relative;
            display:     block;
            flex:        0 0 auto;
-            inline-size: calc(100% + 2 * props.get(vars.$border-width));
+            inline-size: 100%;
-            margin:      calc(-1 * props.get(vars.$border-width));
            overflow:    hidden;
            object-fit:  cover;
            transition:  background-color .2s, transform .2s, opacity .2s;
            &:first-child {
-                border-start-start-radius: props.get(vars.$rounding);
+                border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
-                border-start-end-radius:   props.get(vars.$rounding);
+                border-start-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
            }
            &:last-child {
-                border-end-start-radius: props.get(vars.$rounding);
+                border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
-                border-end-end-radius:   props.get(vars.$rounding);
+                border-end-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
            }
            @include bem.next-elem('avatar') {
@@ -106,26 +95,6 @@
                margin-block:  -100em 100em;
                content:       '';
            }
-            @include bem.modifier('hidden') {
-                position:                absolute;
-                inset-block-end:         calc(-1 * props.get(vars.$border-width));
-                inset-inline:            calc(-1 * props.get(vars.$border-width));
-                z-index:                 10;
-                visibility:              hidden;
-                background-color:        props.get(vars.$bg-color);
-                border-end-start-radius: props.get(vars.$rounding);
-                border-end-end-radius:   props.get(vars.$rounding);
-                opacity:                 0;
-                transition:
-                    opacity .2s ease,
-                    visibility 0s .2s linear;
-                @include bem.next-elem('image') {
-                    border-start-start-radius: props.get(vars.$rounding);
-                    border-start-end-radius:   props.get(vars.$rounding);
-                }
-            }
        }
        @include bem.elem('content') {
@@ -157,19 +126,14 @@
                &:hover,
                &:active,
                &:focus-visible {
-                    transform: none;
+                    transform:        none;
+                    background-color: transparent;
                    @include bem.elem('image') {
                        background-color: props.get(vars.$quiet--hover--image-color);
                        opacity:          .75;
                        transform:        translateY(props.get(vars.$hover--offset-b));
                    }
-                    @include bem.elem('body') {
-                        @include bem.modifier('hidden') {
-                            transform: translateY(props.get(vars.$hover--offset-b));
-                        }
-                    }
                }
                &:focus-visible {
@@ -205,11 +169,6 @@
            @include bem.elem('body') {
                padding:             0;
                padding-block-start: props.get(vars.$spacing);
-                @include bem.modifier('hidden') {
-                    padding-block:  props.get(vars.$pad-b);
-                    padding-inline: props.get(vars.$pad-i);
-                }
            }
            @include bem.elem('footer') {
@@ -217,6 +176,49 @@
            }
        }
+        @include bem.modifier('thumbnail') {
+            @include bem.elem('image') {
+                inline-size:   calc(100% + 2 * props.get(vars.$border-width));
+                margin:        calc(-1 * props.get(vars.$border-width));
+                border-radius: props.get(vars.$rounding);
+            }
+            @include bem.elem('body') {
+                position:                absolute;
+                inset-block-end:         calc(-1 * props.get(vars.$border-width));
+                inset-inline:            calc(-1 * props.get(vars.$border-width));
+                z-index:                 10;
+                visibility:              hidden;
+                background-color:        props.get(vars.$bg-color);
+                border-width:            0 props.get(vars.$border-width) props.get(vars.$border-width);
+                border-color:            transparent;
+                border-style:            solid;
+                border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                border-end-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                opacity:                 0;
+                transition:
+                    border-color .2s ease,
+                    opacity .2s ease,
+                    visibility 0s .2s linear;
+            }
+            @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+                &:hover,
+                &:active,
+                &:focus-visible {
+                    @include bem.elem('body') {
+                        border-color: props.get(vars.$hover--border-color);
+                        visibility:   visible;
+                        opacity:      1;
+                        transition:
+                            border-color .2s ease,
+                            opacity .2s ease,
+                            visibility .2s linear;
+                    }
+                }
+            }
+        }
        @include bem.modifier('horizontal') {
            flex-direction: row;
            align-items:    center;
author	Volpeon <git@volpeon.ink>	2025-07-21 22:14:31 +0200
committer	Volpeon <git@volpeon.ink>	2025-07-21 22:14:31 +0200
commit	d61c6362949ecb49d81e608af698a5e0fa4643fe (patch)
tree	9ac3c062c717e3b2ca1c972b7ede4695ce9ae115 /src/objects/_card.scss
parent	Improved card and card list (diff)
download	iro-design-d61c6362949ecb49d81e608af698a5e0fa4643fe.tar.gz iro-design-d61c6362949ecb49d81e608af698a5e0fa4643fe.tar.bz2 iro-design-d61c6362949ecb49d81e608af698a5e0fa4643fe.zip

diff --git a/src/objects/_card.scss b/src/objects/_card.scss index aaf46b6..d5d300d 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss
@@ -15,28 +15,18 @@
15	display: flex;	15	display: flex;
16	flex-direction: column;	16	flex-direction: column;
17	background-color: props.get(vars.$bg-color);	17	background-color: props.get(vars.$bg-color);
18	background-clip: content-box;
19	border: props.get(vars.$border-width) solid transparent;	18	border: props.get(vars.$border-width) solid transparent;
20	border-color: props.get(vars.$border-color);	19	border-color: props.get(vars.$border-color);
21	border-radius: props.get(vars.$rounding);	20	border-radius: props.get(vars.$rounding);
22	transition: transform .2s, border-color .2s;	21	transition: transform .2s, background-color .2s, border-color .2s;
23		22
24	@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {	23	@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
25	&:hover,	24	&:hover,
26	&:active,	25	&:active,
27	&:focus-visible {	26	&:focus-visible {
28	transform: translateY(props.get(vars.$hover--offset-b));	27	transform: translateY(props.get(vars.$hover--offset-b));
29	border-color: props.get(vars.$hover--border-color);	28	background-color: props.get(vars.$hover--bg-color);
30		29	border-color: props.get(vars.$hover--border-color);
31	@include bem.elem('body') {
32	@include bem.modifier('hidden') {
33	visibility: visible;
34	opacity: 1;
35	transition:
36	opacity .2s ease,
37	visibility .2s linear;
38	}
39	}
40	}	30	}
41		31
42	&:focus-visible {	32	&:focus-visible {
@@ -60,20 +50,19 @@
60	position: relative;	50	position: relative;
61	display: block;	51	display: block;
62	flex: 0 0 auto;	52	flex: 0 0 auto;
63	inline-size: calc(100% + 2 * props.get(vars.$border-width));	53	inline-size: 100%;
64	margin: calc(-1 * props.get(vars.$border-width));
65	overflow: hidden;	54	overflow: hidden;
66	object-fit: cover;	55	object-fit: cover;
67	transition: background-color .2s, transform .2s, opacity .2s;	56	transition: background-color .2s, transform .2s, opacity .2s;
68		57
69	&:first-child {	58	&:first-child {
70	border-start-start-radius: props.get(vars.$rounding);	59	border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
71	border-start-end-radius: props.get(vars.$rounding);	60	border-start-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
72	}	61	}
73		62
74	&:last-child {	63	&:last-child {
75	border-end-start-radius: props.get(vars.$rounding);	64	border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
76	border-end-end-radius: props.get(vars.$rounding);	65	border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
77	}	66	}
78		67
79	@include bem.next-elem('avatar') {	68	@include bem.next-elem('avatar') {
@@ -106,26 +95,6 @@
106	margin-block: -100em 100em;	95	margin-block: -100em 100em;
107	content: '';	96	content: '';
108	}	97	}
109
110	@include bem.modifier('hidden') {
111	position: absolute;
112	inset-block-end: calc(-1 * props.get(vars.$border-width));
113	inset-inline: calc(-1 * props.get(vars.$border-width));
114	z-index: 10;
115	visibility: hidden;
116	background-color: props.get(vars.$bg-color);
117	border-end-start-radius: props.get(vars.$rounding);
118	border-end-end-radius: props.get(vars.$rounding);
119	opacity: 0;
120	transition:
121	opacity .2s ease,
122	visibility 0s .2s linear;
123
124	@include bem.next-elem('image') {
125	border-start-start-radius: props.get(vars.$rounding);
126	border-start-end-radius: props.get(vars.$rounding);
127	}
128	}
129	}	98	}
130		99
131	@include bem.elem('content') {	100	@include bem.elem('content') {
@@ -157,19 +126,14 @@
157	&:hover,	126	&:hover,
158	&:active,	127	&:active,
159	&:focus-visible {	128	&:focus-visible {
160	transform: none;	129	transform: none;
		130	background-color: transparent;
161		131
162	@include bem.elem('image') {	132	@include bem.elem('image') {
163	background-color: props.get(vars.$quiet--hover--image-color);	133	background-color: props.get(vars.$quiet--hover--image-color);
164	opacity: .75;	134	opacity: .75;
165	transform: translateY(props.get(vars.$hover--offset-b));	135	transform: translateY(props.get(vars.$hover--offset-b));
166	}	136	}
167
168	@include bem.elem('body') {
169	@include bem.modifier('hidden') {
170	transform: translateY(props.get(vars.$hover--offset-b));
171	}
172	}
173	}	137	}
174		138
175	&:focus-visible {	139	&:focus-visible {
@@ -205,11 +169,6 @@
205	@include bem.elem('body') {	169	@include bem.elem('body') {
206	padding: 0;	170	padding: 0;
207	padding-block-start: props.get(vars.$spacing);	171	padding-block-start: props.get(vars.$spacing);
208
209	@include bem.modifier('hidden') {
210	padding-block: props.get(vars.$pad-b);
211	padding-inline: props.get(vars.$pad-i);
212	}
213	}	172	}
214		173
215	@include bem.elem('footer') {	174	@include bem.elem('footer') {
@@ -217,6 +176,49 @@
217	}	176	}
218	}	177	}
219		178
		179	@include bem.modifier('thumbnail') {
		180	@include bem.elem('image') {
		181	inline-size: calc(100% + 2 * props.get(vars.$border-width));
		182	margin: calc(-1 * props.get(vars.$border-width));
		183	border-radius: props.get(vars.$rounding);
		184	}
		185
		186	@include bem.elem('body') {
		187	position: absolute;
		188	inset-block-end: calc(-1 * props.get(vars.$border-width));
		189	inset-inline: calc(-1 * props.get(vars.$border-width));
		190	z-index: 10;
		191	visibility: hidden;
		192	background-color: props.get(vars.$bg-color);
		193	border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width);
		194	border-color: transparent;
		195	border-style: solid;
		196	border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
		197	border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
		198	opacity: 0;
		199	transition:
		200	border-color .2s ease,
		201	opacity .2s ease,
		202	visibility 0s .2s linear;
		203	}
		204
		205	@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
		206	&:hover,
		207	&:active,
		208	&:focus-visible {
		209	@include bem.elem('body') {
		210	border-color: props.get(vars.$hover--border-color);
		211	visibility: visible;
		212	opacity: 1;
		213	transition:
		214	border-color .2s ease,
		215	opacity .2s ease,
		216	visibility .2s linear;
		217	}
		218	}
		219	}
		220	}
		221
220	@include bem.modifier('horizontal') {	222	@include bem.modifier('horizontal') {
221	flex-direction: row;	223	flex-direction: row;
222	align-items: center;	224	align-items: center;