PathsHEAD master

author: Volpeon <git@volpeon.ink> 2026-07-22 12:27:09 +0200
committer: Volpeon <git@volpeon.ink> 2026-07-22 12:27:09 +0200
commit: cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 (patch)
tree: d16dea8f0a5edca2b610ecabeac5e93a4d98be2f /src/objects/_thumbnail.scss
parent: Update _index.scss (diff)
download: iro-design-master.tar.gz
iro-design-master.tar.bz2
iro-design-master.zip
1 files changed, 48 insertions, 47 deletions
diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss
index 9925dd0..c7a9791 100644
--- a/src/objects/_thumbnail.scss
+++ b/src/objects/_thumbnail.scss
@@ -1,65 +1,66 @@
-@use 'sass:map';
+@use "sass:map";
-@use 'sass:meta';
+@use "sass:meta";
-@use 'sass:string';
+@use "sass:string";
-@use 'pkg:iro-sass/src/bem';
+@use "pkg:iro-sass/bem";
-@use 'pkg:iro-sass/src/props';
+@use "pkg:iro-sass/props";
-@use '../props' as *;
+@use "../props" as *;
-@forward 'thumbnail.vars';
+@forward "thumbnail.vars";
-@use 'thumbnail.vars' as vars;
+@use "thumbnail.vars" as vars;
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
-        @include bem.object('thumbnail') {
+        @include bem.object("thumbnail") {
-                position:       relative;
+                position: relative;
-                display:        block;
+                display: block;
-                flex:           0 0 auto;
+                flex: 0 0 auto;
-                inline-size:    props.get(vars.$size);
+                inline-size: props.get(vars.$size);
-                block-size:     props.get(vars.$size);
+                block-size: props.get(vars.$size);
-                overflow:       hidden;
+                overflow: hidden;
-                outline:        props.get(vars.$border-color) solid props.get(vars.$border-width);
+                outline: props.get(vars.$border-color) solid props.get(vars.$border-width);
                outline-offset: calc(-1 * props.get(vars.$border-width));
-                border-radius:  props.get(vars.$rounding);
+                border-radius: props.get(vars.$rounding);
                &:hover,
                &:active,
                &:focus-visible {
                        outline-color: props.get(vars.$hover--border-color);
-                        opacity:       1;
+                        opacity: 1;
                }
-                @include bem.elem('image') {
+                @include bem.elem("image") {
-                        position:           absolute;
+                        position: absolute;
-                        inset-block-start:  0;
+                        inset-block-start: 0;
                        inset-inline-start: 0;
-                        display:            block;
+                        display: block;
-                        inline-size:        100%;
+                        inline-size: 100%;
-                        block-size:         100%;
+                        block-size: 100%;
-                        object-fit:         cover;
+                        object-fit: cover;
-                        object-position:    center center;
+                        object-position: center center;
                }
-                @include bem.elem('icon') {
+                @include bem.elem("icon") {
-                        position:           absolute;
+                        position: absolute;
-                        inset-block-start:  50%;
+                        inset-block-start: 50%;
                        inset-inline-start: 50%;
-                        transform:          translate(-50%, -50%);
+                        transform: translate(-50%, -50%);
                }
                &:focus-visible {
                        $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset));
-                        margin:         $focus-border-offset;
+                        margin: $focus-border-offset;
-                        outline:        props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                        outline: props.get(vars.$key-focus--border-color) solid
+                                props.get(vars.$key-focus--border-width);
                        outline-offset: 0;
-                        border:         props.get(vars.$key-focus--border-offset) solid transparent;
+                        border: props.get(vars.$key-focus--border-offset) solid transparent;
-                        border-radius:  calc(props.get(vars.$rounding) - $focus-border-offset);
+                        border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
-                        box-shadow:
+                        box-shadow: 0 0 0
-                                0
+                                calc(
-                                0
+                                        props.get(vars.$key-focus--outline-width) +
-                                0
+                                                props.get(vars.$key-focus--border-width)
-                                calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width))
+                                )
                                props.get(vars.$key-focus--outline-color);
                }
@@ -73,18 +74,18 @@
                                        outline-color: props.get(vars.$static-themes, $theme, --hover, --border);
                                }
-                                @include bem.is('selected') {
+                                @include bem.is("selected") {
                                        border-color: props.get(vars.$static-themes, $theme, --selected, --border);
                                }
                                &:focus-visible {
                                        outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border);
-                                        border-color:  transparent;
+                                        border-color: transparent;
-                                        box-shadow:
+                                        box-shadow: 0 0 0
-                                                0
+                                                calc(
-                                                0
+                                                        props.get(vars.$key-focus--outline-width) +
-                                                0
+                                                                props.get(vars.$key-focus--border-width)
-                                                calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width))
+                                                )
                                                props.get(vars.$static-themes, $theme, --key-focus, --outline);
                                }
                        }
author	Volpeon <git@volpeon.ink>	2026-07-22 12:27:09 +0200
committer	Volpeon <git@volpeon.ink>	2026-07-22 12:27:09 +0200
commit	cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 (patch)
tree	d16dea8f0a5edca2b610ecabeac5e93a4d98be2f /src/objects/_thumbnail.scss
parent	Update _index.scss (diff)
download	iro-design-master.tar.gz iro-design-master.tar.bz2 iro-design-master.zip

diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss index 9925dd0..c7a9791 100644 --- a/src/objects/_thumbnail.scss +++ b/src/objects/_thumbnail.scss
@@ -1,65 +1,66 @@
1	@use 'sass:map';	1	@use "sass:map";
2	@use 'sass:meta';	2	@use "sass:meta";
3	@use 'sass:string';	3	@use "sass:string";
4	@use 'pkg:iro-sass/src/bem';	4	@use "pkg:iro-sass/bem";
5	@use 'pkg:iro-sass/src/props';	5	@use "pkg:iro-sass/props";
6	@use '../props' as *;	6	@use "../props" as *;
7		7
8	@forward 'thumbnail.vars';	8	@forward "thumbnail.vars";
9	@use 'thumbnail.vars' as vars;	9	@use "thumbnail.vars" as vars;
10		10
11	@mixin styles {	11	@mixin styles {
12	@include materialize-at-root(meta.module-variables('vars'));	12	@include materialize-at-root(meta.module-variables("vars"));
13		13
14	@include bem.object('thumbnail') {	14	@include bem.object("thumbnail") {
15	position: relative;	15	position: relative;
16	display: block;	16	display: block;
17	flex: 0 0 auto;	17	flex: 0 0 auto;
18	inline-size: props.get(vars.$size);	18	inline-size: props.get(vars.$size);
19	block-size: props.get(vars.$size);	19	block-size: props.get(vars.$size);
20	overflow: hidden;	20	overflow: hidden;
21	outline: props.get(vars.$border-color) solid props.get(vars.$border-width);	21	outline: props.get(vars.$border-color) solid props.get(vars.$border-width);
22	outline-offset: calc(-1 * props.get(vars.$border-width));	22	outline-offset: calc(-1 * props.get(vars.$border-width));
23	border-radius: props.get(vars.$rounding);	23	border-radius: props.get(vars.$rounding);
24		24
25	&:hover,	25	&:hover,
26	&:active,	26	&:active,
27	&:focus-visible {	27	&:focus-visible {
28	outline-color: props.get(vars.$hover--border-color);	28	outline-color: props.get(vars.$hover--border-color);
29	opacity: 1;	29	opacity: 1;
30	}	30	}
31		31
32	@include bem.elem('image') {	32	@include bem.elem("image") {
33	position: absolute;	33	position: absolute;
34	inset-block-start: 0;	34	inset-block-start: 0;
35	inset-inline-start: 0;	35	inset-inline-start: 0;
36	display: block;	36	display: block;
37	inline-size: 100%;	37	inline-size: 100%;
38	block-size: 100%;	38	block-size: 100%;
39	object-fit: cover;	39	object-fit: cover;
40	object-position: center center;	40	object-position: center center;
41	}	41	}
42		42
43	@include bem.elem('icon') {	43	@include bem.elem("icon") {
44	position: absolute;	44	position: absolute;
45	inset-block-start: 50%;	45	inset-block-start: 50%;
46	inset-inline-start: 50%;	46	inset-inline-start: 50%;
47	transform: translate(-50%, -50%);	47	transform: translate(-50%, -50%);
48	}	48	}
49		49
50	&:focus-visible {	50	&:focus-visible {
51	$focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset));	51	$focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset));
52		52
53	margin: $focus-border-offset;	53	margin: $focus-border-offset;
54	outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);	54	outline: props.get(vars.$key-focus--border-color) solid
		55	props.get(vars.$key-focus--border-width);
55	outline-offset: 0;	56	outline-offset: 0;
56	border: props.get(vars.$key-focus--border-offset) solid transparent;	57	border: props.get(vars.$key-focus--border-offset) solid transparent;
57	border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);	58	border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
58	box-shadow:	59	box-shadow: 0 0 0
59	0	60	calc(
60	0	61	props.get(vars.$key-focus--outline-width) +
61	0	62	props.get(vars.$key-focus--border-width)
62	calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width))	63	)
63	props.get(vars.$key-focus--outline-color);	64	props.get(vars.$key-focus--outline-color);
64	}	65	}
65		66
@@ -73,18 +74,18 @@
73	outline-color: props.get(vars.$static-themes, $theme, --hover, --border);	74	outline-color: props.get(vars.$static-themes, $theme, --hover, --border);
74	}	75	}
75		76
76	@include bem.is('selected') {	77	@include bem.is("selected") {
77	border-color: props.get(vars.$static-themes, $theme, --selected, --border);	78	border-color: props.get(vars.$static-themes, $theme, --selected, --border);
78	}	79	}
79		80
80	&:focus-visible {	81	&:focus-visible {
81	outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border);	82	outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border);
82	border-color: transparent;	83	border-color: transparent;
83	box-shadow:	84	box-shadow: 0 0 0
84	0	85	calc(
85	0	86	props.get(vars.$key-focus--outline-width) +
86	0	87	props.get(vars.$key-focus--border-width)
87	calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width))	88	)
88	props.get(vars.$static-themes, $theme, --key-focus, --outline);	89	props.get(vars.$static-themes, $theme, --key-focus, --outline);
89	}	90	}
90	}	91	}