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/_text-field.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, 143 insertions, 143 deletions
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index a52050c..b89e148 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -7,181 +7,181 @@
 @use 'text-field.vars' as vars;
 @mixin -invalid {
-    $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
+        $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
    
-    @include bem.sibling-elem('bg') {
+        @include bem.sibling-elem('bg') {
-        inset-block:   $focus-border-offset;
+                inset-block:   $focus-border-offset;
-        inset-inline:  $focus-border-offset;
+                inset-inline:  $focus-border-offset;
-        border:        props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color);
+                border:        props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color);
-        border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
+                border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
-    }
+        }
-    &:hover {
+        &:hover {
-        @include bem.sibling-elem('bg') {
+                @include bem.sibling-elem('bg') {
-            border-color: props.get(vars.$error--hover--border-color);
+                        border-color: props.get(vars.$error--hover--border-color);
-        }
+                }
-    }
+        }
-    &:focus {
+        &:focus {
-        @include bem.sibling-elem('bg') {
+                @include bem.sibling-elem('bg') {
-            border-color: props.get(vars.$error--focus--border-color);
+                        border-color: props.get(vars.$error--focus--border-color);
-        }
+                }
-    }
+        }
 }
 @mixin -keyboard-focus {
-    @include bem.sibling-elem('bg') {
+        @include bem.sibling-elem('bg') {
-        border-color:   props.get(vars.$key-focus--border-color);
+                outline:        props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width);
-        outline:        props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width);
+                border-color:   props.get(vars.$key-focus--border-color);
-        //outline-offset: props.get(vars.$focus --border);
+                //outline-offset: props.get(vars.$focus --border);
-    }
+        }
 }
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('text-field') {
+        @include bem.object('text-field') {
-        $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
+                $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
        
-        position:         relative;
+                position:         relative;
-        min-inline-size:  0;
+                min-inline-size:  0;
-        background-color: props.get(vars.$bg-color);
+                background-color: props.get(vars.$bg-color);
-        border-radius:    props.get(vars.$rounding);
+                border-radius:    props.get(vars.$rounding);
-        @include bem.elem('bg') {
+                @include bem.elem('bg') {
-            position:       absolute;
+                        position:       absolute;
-            inset-block:    0;
+                        inset-block:    0;
-            inset-inline:   0;
+                        inset-inline:   0;
-            display:        block;
+                        display:        block;
-            pointer-events: none;
+                        pointer-events: none;
-            border:         props.get(vars.$border-width) solid props.get(vars.$border-color);
+                        border:         props.get(vars.$border-width) solid props.get(vars.$border-color);
-            border-radius:  props.get(vars.$rounding);
+                        border-radius:  props.get(vars.$rounding);
-        }
+                }
-        @include bem.elem('native') {
+                @include bem.elem('native') {
-            box-sizing:       border-box;
+                        box-sizing:       border-box;
-            inline-size:      100%;
+                        inline-size:      100%;
-            padding-block:    calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1));
+                        padding-block:    calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1));
-            padding-inline:   props.get(vars.$pad-i);
+                        padding-inline:   props.get(vars.$pad-i);
-            font:             inherit;
+                        font:             inherit;
-            line-height:      props.get(vars.$line-height);
+                        line-height:      props.get(vars.$line-height);
-            color:            props.get(vars.$text-color);
+                        color:            props.get(vars.$text-color);
-            appearance:       none;
+                        appearance:       none;
-            resize:           none;
+                        resize:           none;
-            background-color: transparent;
+                        background-color: transparent;
-            border:           1px solid transparent;
+                        border:           1px solid transparent;
-            &::placeholder {
+                        &::placeholder {
-                font-style: italic;
+                                font-style: italic;
-                color:      props.get(vars.$placeholder-color);
+                                color:      props.get(vars.$placeholder-color);
-                opacity:    1;
+                                opacity:    1;
-            }
+                        }
-            &:hover {
+                        &:hover {
-                @include bem.sibling-elem('bg') {
+                                @include bem.sibling-elem('bg') {
-                    border-color: props.get(vars.$hover--border-color);
+                                        border-color: props.get(vars.$hover--border-color);
-                }
+                                }
-            }
+                        }
-            &:focus {
+                        &:focus {
-                outline: 0;
+                                outline: 0;
-                @include bem.sibling-elem('bg') {
+                                @include bem.sibling-elem('bg') {
-                    inset-block:   $focus-border-offset;
+                                        inset-block:   $focus-border-offset;
-                    inset-inline:  $focus-border-offset;
+                                        inset-inline:  $focus-border-offset;
-                    border:        props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color);
+                                        border:        props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color);
-                    border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
+                                        border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
-                }
+                                }
-            }
+                        }
-            &:invalid {
+                        &:invalid {
-                @include -invalid;
+                                @include -invalid;
-            }
+                        }
-            &:focus-visible,
+                        &:focus-visible,
-            &:invalid:focus-visible {
+                        &:invalid:focus-visible {
-                @include -keyboard-focus;
+                                @include -keyboard-focus;
-            }
+                        }
-        }
+                }
-        @include bem.modifier('extended') {
+                @include bem.modifier('extended') {
-            padding: props.get(vars.$extended--pad);
+                        padding: props.get(vars.$extended--pad);
-            @include bem.multi('&', 'elem' 'bg') {
+                        @include bem.multi('&', 'elem' 'bg') {
-                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad));
+                                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad));
-            }
+                        }
-            @include bem.elem('native') {
+                        @include bem.elem('native') {
-                &:focus {
+                                &:focus {
-                    @include bem.sibling-elem('bg') {
+                                        @include bem.sibling-elem('bg') {
-                        border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset);
+                                                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset);
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
-        }
+                }
-        @include bem.modifier('pill') {
+                @include bem.modifier('pill') {
-            @include bem.multi('&', 'elem' 'bg') {
+                        @include bem.multi('&', 'elem' 'bg') {
-                border-radius: 100em;
+                                border-radius: 100em;
-            }
+                        }
-            @include bem.elem('native') {
+                        @include bem.elem('native') {
-                padding-inline: props.get(vars.$pad-i-pill);
+                                padding-inline: props.get(vars.$pad-i-pill);
-                &:focus {
+                                &:focus {
-                    @include bem.sibling-elem('bg') {
+                                        @include bem.sibling-elem('bg') {
-                        border-radius: 100em;
+                                                border-radius: 100em;
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
-            @include bem.modifier('extended') {
+                        @include bem.modifier('extended') {
-                @include bem.elem('native') {
+                                @include bem.elem('native') {
-                    padding-inline: props.get(vars.$pad-i);
+                                        padding-inline: props.get(vars.$pad-i);
-                }
+                                }
-            }
+                        }
-        }
+                }
-        @include bem.is('invalid') {
+                @include bem.is('invalid') {
-            @include bem.elem('native') {
+                        @include bem.elem('native') {
-                @include -invalid;
+                                @include -invalid;
-                &:focus-visible {
+                                &:focus-visible {
-                    @include -keyboard-focus;
+                                        @include -keyboard-focus;
-                }
+                                }
-            }
+                        }
-        }
+                }
-        @include bem.is('disabled') {
+                @include bem.is('disabled') {
-            background-color: props.get(vars.$disabled--bg-color);
+                        background-color: props.get(vars.$disabled--bg-color);
-            @include bem.elem('native') {
+                        @include bem.elem('native') {
-                color: props.get(vars.$disabled--text-color);
+                                color: props.get(vars.$disabled--text-color);
-                &::placeholder {
+                                &::placeholder {
-                    color: props.get(vars.$disabled--placeholder-color);
+                                        color: props.get(vars.$disabled--placeholder-color);
-                }
+                                }
-            }
+                        }
-            @include bem.elem('bg') {
+                        @include bem.elem('bg') {
-                border-color: props.get(vars.$disabled--border-color);
+                                border-color: props.get(vars.$disabled--border-color);
-            }
+                        }
-            @include bem.is('invalid') {
+                        @include bem.is('invalid') {
-                @include bem.elem('native') {
+                                @include bem.elem('native') {
-                    @include bem.sibling-elem('bg') {
+                                        @include bem.sibling-elem('bg') {
-                        border-color: props.get(vars.$disabled--border-color);
+                                                border-color: props.get(vars.$disabled--border-color);
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
-            @include bem.elem('native') {
+                        @include bem.elem('native') {
-                &:invalid {
+                                &:invalid {
-                    @include bem.sibling-elem('bg') {
+                                        @include bem.sibling-elem('bg') {
-                        border-color: props.get(vars.$disabled--border-color);
+                                                border-color: props.get(vars.$disabled--border-color);
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
-        }
+                }
-    }
+        }
 }
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/_text-field.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/_text-field.scss b/src/objects/_text-field.scss index a52050c..b89e148 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss
@@ -7,181 +7,181 @@
7	@use 'text-field.vars' as vars;	7	@use 'text-field.vars' as vars;
8		8
9	@mixin -invalid {	9	@mixin -invalid {
10	$focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));	10	$focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
11		11
12	@include bem.sibling-elem('bg') {	12	@include bem.sibling-elem('bg') {
13	inset-block: $focus-border-offset;	13	inset-block: $focus-border-offset;
14	inset-inline: $focus-border-offset;	14	inset-inline: $focus-border-offset;
15	border: props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color);	15	border: props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color);
16	border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);	16	border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
17	}	17	}
18		18
19	&:hover {	19	&:hover {
20	@include bem.sibling-elem('bg') {	20	@include bem.sibling-elem('bg') {
21	border-color: props.get(vars.$error--hover--border-color);	21	border-color: props.get(vars.$error--hover--border-color);
22	}	22	}
23	}	23	}
24		24
25	&:focus {	25	&:focus {
26	@include bem.sibling-elem('bg') {	26	@include bem.sibling-elem('bg') {
27	border-color: props.get(vars.$error--focus--border-color);	27	border-color: props.get(vars.$error--focus--border-color);
28	}	28	}
29	}	29	}
30	}	30	}
31		31
32	@mixin -keyboard-focus {	32	@mixin -keyboard-focus {
33	@include bem.sibling-elem('bg') {	33	@include bem.sibling-elem('bg') {
34	border-color: props.get(vars.$key-focus--border-color);	34	outline: props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width);
35	outline: props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width);	35	border-color: props.get(vars.$key-focus--border-color);
36	//outline-offset: props.get(vars.$focus --border);	36	//outline-offset: props.get(vars.$focus --border);
37	}	37	}
38	}	38	}
39		39
40	@mixin styles {	40	@mixin styles {
41	@include materialize-at-root(meta.module-variables('vars'));	41	@include materialize-at-root(meta.module-variables('vars'));
42		42
43	@include bem.object('text-field') {	43	@include bem.object('text-field') {
44	$focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));	44	$focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
45		45
46	position: relative;	46	position: relative;
47	min-inline-size: 0;	47	min-inline-size: 0;
48	background-color: props.get(vars.$bg-color);	48	background-color: props.get(vars.$bg-color);
49	border-radius: props.get(vars.$rounding);	49	border-radius: props.get(vars.$rounding);
50		50
51	@include bem.elem('bg') {	51	@include bem.elem('bg') {
52	position: absolute;	52	position: absolute;
53	inset-block: 0;	53	inset-block: 0;
54	inset-inline: 0;	54	inset-inline: 0;
55	display: block;	55	display: block;
56	pointer-events: none;	56	pointer-events: none;
57	border: props.get(vars.$border-width) solid props.get(vars.$border-color);	57	border: props.get(vars.$border-width) solid props.get(vars.$border-color);
58	border-radius: props.get(vars.$rounding);	58	border-radius: props.get(vars.$rounding);
59	}	59	}
60		60
61	@include bem.elem('native') {	61	@include bem.elem('native') {
62	box-sizing: border-box;	62	box-sizing: border-box;
63	inline-size: 100%;	63	inline-size: 100%;
64	padding-block: calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1));	64	padding-block: calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1));
65	padding-inline: props.get(vars.$pad-i);	65	padding-inline: props.get(vars.$pad-i);
66	font: inherit;	66	font: inherit;
67	line-height: props.get(vars.$line-height);	67	line-height: props.get(vars.$line-height);
68	color: props.get(vars.$text-color);	68	color: props.get(vars.$text-color);
69	appearance: none;	69	appearance: none;
70	resize: none;	70	resize: none;
71	background-color: transparent;	71	background-color: transparent;
72	border: 1px solid transparent;	72	border: 1px solid transparent;
73		73
74	&::placeholder {	74	&::placeholder {
75	font-style: italic;	75	font-style: italic;
76	color: props.get(vars.$placeholder-color);	76	color: props.get(vars.$placeholder-color);
77	opacity: 1;	77	opacity: 1;
78	}	78	}
79		79
80	&:hover {	80	&:hover {
81	@include bem.sibling-elem('bg') {	81	@include bem.sibling-elem('bg') {
82	border-color: props.get(vars.$hover--border-color);	82	border-color: props.get(vars.$hover--border-color);
83	}	83	}
84	}	84	}
85		85
86	&:focus {	86	&:focus {
87	outline: 0;	87	outline: 0;
88		88
89	@include bem.sibling-elem('bg') {	89	@include bem.sibling-elem('bg') {
90	inset-block: $focus-border-offset;	90	inset-block: $focus-border-offset;
91	inset-inline: $focus-border-offset;	91	inset-inline: $focus-border-offset;
92	border: props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color);	92	border: props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color);
93	border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);	93	border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
94	}	94	}
95	}	95	}
96		96
97	&:invalid {	97	&:invalid {
98	@include -invalid;	98	@include -invalid;
99	}	99	}
100		100
101	&:focus-visible,	101	&:focus-visible,
102	&:invalid:focus-visible {	102	&:invalid:focus-visible {
103	@include -keyboard-focus;	103	@include -keyboard-focus;
104	}	104	}
105	}	105	}
106		106
107	@include bem.modifier('extended') {	107	@include bem.modifier('extended') {
108	padding: props.get(vars.$extended--pad);	108	padding: props.get(vars.$extended--pad);
109		109
110	@include bem.multi('&', 'elem' 'bg') {	110	@include bem.multi('&', 'elem' 'bg') {
111	border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad));	111	border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad));
112	}	112	}
113		113
114	@include bem.elem('native') {	114	@include bem.elem('native') {
115	&:focus {	115	&:focus {
116	@include bem.sibling-elem('bg') {	116	@include bem.sibling-elem('bg') {
117	border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset);	117	border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset);
118	}	118	}
119	}	119	}
120	}	120	}
121	}	121	}
122		122
123	@include bem.modifier('pill') {	123	@include bem.modifier('pill') {
124	@include bem.multi('&', 'elem' 'bg') {	124	@include bem.multi('&', 'elem' 'bg') {
125	border-radius: 100em;	125	border-radius: 100em;
126	}	126	}
127		127
128	@include bem.elem('native') {	128	@include bem.elem('native') {
129	padding-inline: props.get(vars.$pad-i-pill);	129	padding-inline: props.get(vars.$pad-i-pill);
130		130
131	&:focus {	131	&:focus {
132	@include bem.sibling-elem('bg') {	132	@include bem.sibling-elem('bg') {
133	border-radius: 100em;	133	border-radius: 100em;
134	}	134	}
135	}	135	}
136	}	136	}
137		137
138	@include bem.modifier('extended') {	138	@include bem.modifier('extended') {
139	@include bem.elem('native') {	139	@include bem.elem('native') {
140	padding-inline: props.get(vars.$pad-i);	140	padding-inline: props.get(vars.$pad-i);
141	}	141	}
142	}	142	}
143	}	143	}
144		144
145	@include bem.is('invalid') {	145	@include bem.is('invalid') {
146	@include bem.elem('native') {	146	@include bem.elem('native') {
147	@include -invalid;	147	@include -invalid;
148		148
149	&:focus-visible {	149	&:focus-visible {
150	@include -keyboard-focus;	150	@include -keyboard-focus;
151	}	151	}
152	}	152	}
153	}	153	}
154		154
155	@include bem.is('disabled') {	155	@include bem.is('disabled') {
156	background-color: props.get(vars.$disabled--bg-color);	156	background-color: props.get(vars.$disabled--bg-color);
157		157
158	@include bem.elem('native') {	158	@include bem.elem('native') {
159	color: props.get(vars.$disabled--text-color);	159	color: props.get(vars.$disabled--text-color);
160		160
161	&::placeholder {	161	&::placeholder {
162	color: props.get(vars.$disabled--placeholder-color);	162	color: props.get(vars.$disabled--placeholder-color);
163	}	163	}
164	}	164	}
165		165
166	@include bem.elem('bg') {	166	@include bem.elem('bg') {
167	border-color: props.get(vars.$disabled--border-color);	167	border-color: props.get(vars.$disabled--border-color);
168	}	168	}
169		169
170	@include bem.is('invalid') {	170	@include bem.is('invalid') {
171	@include bem.elem('native') {	171	@include bem.elem('native') {
172	@include bem.sibling-elem('bg') {	172	@include bem.sibling-elem('bg') {
173	border-color: props.get(vars.$disabled--border-color);	173	border-color: props.get(vars.$disabled--border-color);
174	}	174	}
175	}	175	}
176	}	176	}
177		177
178	@include bem.elem('native') {	178	@include bem.elem('native') {
179	&:invalid {	179	&:invalid {
180	@include bem.sibling-elem('bg') {	180	@include bem.sibling-elem('bg') {
181	border-color: props.get(vars.$disabled--border-color);	181	border-color: props.get(vars.$disabled--border-color);
182	}	182	}
183	}	183	}
184	}	184	}
185	}	185	}
186	}	186	}
187	}	187	}