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