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