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