Switch to tab indentationHEAD master

author: Volpeon <git@volpeon.ink> 2025-08-06 16:40:56 +0200
committer: Volpeon <git@volpeon.ink> 2025-08-06 16:40:56 +0200
commit: 41b0d0497988274057fc2512c822a6bc9d2d3ebd (patch)
tree: 015a95ede42b799ac1fd049baa8b0a853b6d3bb3 /src/objects/_avatar.scss
parent: Fix button font size (diff)
download: iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.gz
iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.bz2
iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.zip
1 files changed, 97 insertions, 97 deletions
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 81396e3..9d51ffb 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -7,120 +7,120 @@
 @use 'avatar.vars' as vars;
 @mixin status($indicator-size) {
-    @include bem.elem('status') {
+        @include bem.elem('status') {
-        inline-size: props.get($indicator-size);
+                inline-size: props.get($indicator-size);
-        block-size:  props.get($indicator-size);
+                block-size:  props.get($indicator-size);
-        @include bem.sibling-elem('content') {
+                @include bem.sibling-elem('content') {
-            mask-image: radial-gradient(circle calc(.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) at
+                        mask-image: radial-gradient(circle calc(.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) at
-            calc(100% - .5 * props.get($indicator-size))
+                        calc(100% - .5 * props.get($indicator-size))
-            calc(100% - .5 * props.get($indicator-size)),
+                        calc(100% - .5 * props.get($indicator-size)),
-            transparent 95%,
+                        transparent 95%,
-            #fff);
+                        #fff);
-        }
+                }
-    }
+        }
 }
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('avatar') {
+        @include bem.object('avatar') {
-        position:       relative;
+                position:       relative;
-        display:        inline-block;
+                display:        inline-block;
-        font-size:      props.get(vars.$font-size);
+                font-size:      props.get(vars.$font-size);
-        font-style:     normal;
+                font-style:     normal;
-        vertical-align: .05em;
+                vertical-align: .05em;
-        border-radius:  props.get(vars.$rounding);
+                border-radius:  props.get(vars.$rounding);
-        &::after {
+                &::after {
-            position:       absolute;
+                        position:       absolute;
-            inset:          calc(-1 * props.get(vars.$key-focus--border-offset));
+                        inset:          calc(-1 * props.get(vars.$key-focus--border-offset));
-            z-index:        1;
+                        z-index:        1;
-            display:        none;
+                        display:        none;
-            pointer-events: none;
+                        pointer-events: none;
-            content:        '';
+                        outline:        props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
-            border:         props.get(vars.$key-focus--border-offset) solid transparent;
+                        content:        '';
-            border-radius:  props.get(vars.$rounding);
+                        border:         props.get(vars.$key-focus--border-offset) solid transparent;
-            outline:        props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                        border-radius:  props.get(vars.$rounding);
-            box-shadow:
+                        box-shadow:
-                0
+                                0
-                0
+                                0
-                0
+                                0
-                calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-                props.get(vars.$key-focus--outline-color);
+                                props.get(vars.$key-focus--outline-color);
-        }
+                }
-        @include bem.elem('status') {
+                @include bem.elem('status') {
-            position:         absolute;
+                        position:         absolute;
-            inset-block-end:  0;
+                        inset-block-end:  0;
-            inset-inline-end: 0;
+                        inset-inline-end: 0;
-        }
+                }
-        @include status(vars.$indicator-size);
+                @include status(vars.$indicator-size);
-        @include bem.elem('content') {
+                @include bem.elem('content') {
-            display:          block;
+                        display:          block;
-            inline-size:      props.get(vars.$size);
+                        inline-size:      props.get(vars.$size);
-            block-size:       props.get(vars.$size);
+                        block-size:       props.get(vars.$size);
-            line-height:      props.get(vars.$size);
+                        line-height:      props.get(vars.$size);
-            text-align:       center;
+                        text-align:       center;
-            object-fit:       cover;
+                        object-fit:       cover;
-            object-position:  center center;
+                        object-position:  center center;
-            border-radius:    props.get(vars.$rounding);
+                        border-radius:    props.get(vars.$rounding);
-        }
+                }
-        @include bem.modifier('circle') {
+                @include bem.modifier('circle') {
-            border-radius: 100%;
+                        border-radius: 100%;
-            &::after {
+                        &::after {
-                border-radius: 100%;
+                                border-radius: 100%;
-            }
+                        }
-            @include bem.elem('content') {
+                        @include bem.elem('content') {
-                border-radius: 100%;
+                                border-radius: 100%;
-            }
+                        }
-        }
+                }
-        @include bem.modifier('placeholder') {
+                @include bem.modifier('placeholder') {
-            @include bem.elem('content') {
+                        @include bem.elem('content') {
-                background-color: hsl(0, 0%, props.get(vars.$bg-color--l));
+                                background-color: hsl(0, 0%, props.get(vars.$bg-color--l));
-            }
+                        }
-        }
+                }
-        @include bem.modifier('colored') {
+                @include bem.modifier('colored') {
-            @include bem.elem('content') {
+                        @include bem.elem('content') {
-                color:            #fff;
+                                color:            #fff;
-                background-color: hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l));
+                                background-color: hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l));
-            }
+                        }
-        }
+                }
-        @include bem.modifier('colored-gradient') {
+                @include bem.modifier('colored-gradient') {
-            @include bem.elem('content') {
+                        @include bem.elem('content') {
-                color:      #fff;
+                                color:      #fff;
-                background: linear-gradient(props.get(vars.$bg-angle),
+                                background: linear-gradient(props.get(vars.$bg-angle),
-                hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)),
+                                hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)),
-                hsl(props.get(vars.$bg-color-2--h), props.get(vars.$bg-color-2--s), props.get(vars.$bg-color-2--l)));
+                                hsl(props.get(vars.$bg-color-2--h), props.get(vars.$bg-color-2--s), props.get(vars.$bg-color-2--l)));
-            }
+                        }
-        }
+                }
-        @each $mod, $size, $font-size, $indicator-size in vars.$sizes {
+                @each $mod, $size, $font-size, $indicator-size in vars.$sizes {
-            @include bem.modifier($mod) {
+                        @include bem.modifier($mod) {
-                font-size: props.get($font-size);
+                                font-size: props.get($font-size);
    
-                @include status($indicator-size);
+                                @include status($indicator-size);
    
-                @include bem.elem('content') {
+                                @include bem.elem('content') {
-                    inline-size: props.get($size);
+                                        inline-size: props.get($size);
-                    block-size:  props.get($size);
+                                        block-size:  props.get($size);
-                    line-height: props.get($size);
+                                        line-height: props.get($size);
-                }
+                                }
-            }
+                        }
-        }
+                }
    
-        &:focus-visible {
+                &:focus-visible {
-            &::after {
+                        &::after {
-                display: block;
+                                display: block;
-            }
+                        }
-        }
+                }
-    }
+        }
 }
author	Volpeon <git@volpeon.ink>	2025-08-06 16:40:56 +0200
committer	Volpeon <git@volpeon.ink>	2025-08-06 16:40:56 +0200
commit	41b0d0497988274057fc2512c822a6bc9d2d3ebd (patch)
tree	015a95ede42b799ac1fd049baa8b0a853b6d3bb3 /src/objects/_avatar.scss
parent	Fix button font size (diff)
download	iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.gz iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.bz2 iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.zip

diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss index 81396e3..9d51ffb 100644 --- a/src/objects/_avatar.scss +++ b/src/objects/_avatar.scss
@@ -7,120 +7,120 @@
7	@use 'avatar.vars' as vars;	7	@use 'avatar.vars' as vars;
8		8
9	@mixin status($indicator-size) {	9	@mixin status($indicator-size) {
10	@include bem.elem('status') {	10	@include bem.elem('status') {
11	inline-size: props.get($indicator-size);	11	inline-size: props.get($indicator-size);
12	block-size: props.get($indicator-size);	12	block-size: props.get($indicator-size);
13		13
14	@include bem.sibling-elem('content') {	14	@include bem.sibling-elem('content') {
15	mask-image: radial-gradient(circle calc(.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) at	15	mask-image: radial-gradient(circle calc(.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) at
16	calc(100% - .5 * props.get($indicator-size))	16	calc(100% - .5 * props.get($indicator-size))
17	calc(100% - .5 * props.get($indicator-size)),	17	calc(100% - .5 * props.get($indicator-size)),
18	transparent 95%,	18	transparent 95%,
19	#fff);	19	#fff);
20	}	20	}
21	}	21	}
22	}	22	}
23		23
24	@mixin styles {	24	@mixin styles {
25	@include materialize-at-root(meta.module-variables('vars'));	25	@include materialize-at-root(meta.module-variables('vars'));
26		26
27	@include bem.object('avatar') {	27	@include bem.object('avatar') {
28	position: relative;	28	position: relative;
29	display: inline-block;	29	display: inline-block;
30	font-size: props.get(vars.$font-size);	30	font-size: props.get(vars.$font-size);
31	font-style: normal;	31	font-style: normal;
32	vertical-align: .05em;	32	vertical-align: .05em;
33	border-radius: props.get(vars.$rounding);	33	border-radius: props.get(vars.$rounding);
34		34
35	&::after {	35	&::after {
36	position: absolute;	36	position: absolute;
37	inset: calc(-1 * props.get(vars.$key-focus--border-offset));	37	inset: calc(-1 * props.get(vars.$key-focus--border-offset));
38	z-index: 1;	38	z-index: 1;
39	display: none;	39	display: none;
40	pointer-events: none;	40	pointer-events: none;
41	content: '';	41	outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
42	border: props.get(vars.$key-focus--border-offset) solid transparent;	42	content: '';
43	border-radius: props.get(vars.$rounding);	43	border: props.get(vars.$key-focus--border-offset) solid transparent;
44	outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);	44	border-radius: props.get(vars.$rounding);
45	box-shadow:	45	box-shadow:
46	0	46	0
47	0	47	0
48	0	48	0
49	calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))	49	calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
50	props.get(vars.$key-focus--outline-color);	50	props.get(vars.$key-focus--outline-color);
51	}	51	}
52		52
53	@include bem.elem('status') {	53	@include bem.elem('status') {
54	position: absolute;	54	position: absolute;
55	inset-block-end: 0;	55	inset-block-end: 0;
56	inset-inline-end: 0;	56	inset-inline-end: 0;
57	}	57	}
58		58
59	@include status(vars.$indicator-size);	59	@include status(vars.$indicator-size);
60		60
61	@include bem.elem('content') {	61	@include bem.elem('content') {
62	display: block;	62	display: block;
63	inline-size: props.get(vars.$size);	63	inline-size: props.get(vars.$size);
64	block-size: props.get(vars.$size);	64	block-size: props.get(vars.$size);
65	line-height: props.get(vars.$size);	65	line-height: props.get(vars.$size);
66	text-align: center;	66	text-align: center;
67	object-fit: cover;	67	object-fit: cover;
68	object-position: center center;	68	object-position: center center;
69	border-radius: props.get(vars.$rounding);	69	border-radius: props.get(vars.$rounding);
70	}	70	}
71		71
72	@include bem.modifier('circle') {	72	@include bem.modifier('circle') {
73	border-radius: 100%;	73	border-radius: 100%;
74		74
75	&::after {	75	&::after {
76	border-radius: 100%;	76	border-radius: 100%;
77	}	77	}
78		78
79	@include bem.elem('content') {	79	@include bem.elem('content') {
80	border-radius: 100%;	80	border-radius: 100%;
81	}	81	}
82	}	82	}
83		83
84	@include bem.modifier('placeholder') {	84	@include bem.modifier('placeholder') {
85	@include bem.elem('content') {	85	@include bem.elem('content') {
86	background-color: hsl(0, 0%, props.get(vars.$bg-color--l));	86	background-color: hsl(0, 0%, props.get(vars.$bg-color--l));
87	}	87	}
88	}	88	}
89		89
90	@include bem.modifier('colored') {	90	@include bem.modifier('colored') {
91	@include bem.elem('content') {	91	@include bem.elem('content') {
92	color: #fff;	92	color: #fff;
93	background-color: hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l));	93	background-color: hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l));
94	}	94	}
95	}	95	}
96		96
97	@include bem.modifier('colored-gradient') {	97	@include bem.modifier('colored-gradient') {
98	@include bem.elem('content') {	98	@include bem.elem('content') {
99	color: #fff;	99	color: #fff;
100	background: linear-gradient(props.get(vars.$bg-angle),	100	background: linear-gradient(props.get(vars.$bg-angle),
101	hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)),	101	hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)),
102	hsl(props.get(vars.$bg-color-2--h), props.get(vars.$bg-color-2--s), props.get(vars.$bg-color-2--l)));	102	hsl(props.get(vars.$bg-color-2--h), props.get(vars.$bg-color-2--s), props.get(vars.$bg-color-2--l)));
103	}	103	}
104	}	104	}
105		105
106	@each $mod, $size, $font-size, $indicator-size in vars.$sizes {	106	@each $mod, $size, $font-size, $indicator-size in vars.$sizes {
107	@include bem.modifier($mod) {	107	@include bem.modifier($mod) {
108	font-size: props.get($font-size);	108	font-size: props.get($font-size);
109		109
110	@include status($indicator-size);	110	@include status($indicator-size);
111		111
112	@include bem.elem('content') {	112	@include bem.elem('content') {
113	inline-size: props.get($size);	113	inline-size: props.get($size);
114	block-size: props.get($size);	114	block-size: props.get($size);
115	line-height: props.get($size);	115	line-height: props.get($size);
116	}	116	}
117	}	117	}
118	}	118	}
119		119
120	&:focus-visible {	120	&:focus-visible {
121	&::after {	121	&::after {
122	display: block;	122	display: block;
123	}	123	}
124	}	124	}
125	}	125	}
126	}	126	}