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.scss213
1 files changed, 0 insertions, 213 deletions
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
deleted file mode 100644
index 6611ea6..0000000
--- a/src/objects/_text-field.scss
+++ /dev/null
@@ -1,213 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@mixin invalid {
5 $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border));
6
7 @include iro.bem-sibling-elem('bg') {
8 inset-block: $focus-border-offset;
9 inset-inline: $focus-border-offset;
10 border: fn.dim(--focus --border) solid fn.color(--error --border);
11 border-radius: calc(fn.dim(--rounding) - $focus-border-offset);
12 }
13
14 &:hover {
15 @include iro.bem-sibling-elem('bg') {
16 border-color: fn.color(--error --hover --border);
17 }
18 }
19
20 &:focus {
21 @include iro.bem-sibling-elem('bg') {
22 border-color: fn.color(--error --focus --border);
23 }
24 }
25}
26
27@mixin keyboard-focus {
28 @include iro.bem-sibling-elem('bg') {
29 border-color: fn.color(--key-focus --border);
30 outline: fn.color(--key-focus --outline) solid fn.dim(--key-focus --border);
31 //outline-offset: fn.dim(--focus --border);
32 }
33}
34
35@include iro.props-namespace('text-field') {
36 @include iro.props-store((
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
91 @include iro.bem-object(iro.props-namespace()) {
92 $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border));
93
94 position: relative;
95 min-inline-size: 0;
96 border-radius: fn.dim(--rounding);
97 background-color: fn.color(--bg);
98
99 @include iro.bem-elem('bg') {
100 display: block;
101 position: absolute;
102 inset-block: 0;
103 inset-inline: 0;
104 border: fn.dim(--border) solid fn.color(--border);
105 border-radius: fn.dim(--rounding);
106 pointer-events: none;
107 }
108
109 @include iro.bem-elem('native') {
110 box-sizing: border-box;
111 inline-size: 100%;
112 padding-block: calc(fn.dim(--pad-b) - .5em * (fn.dim(--line-height) - 1));
113 padding-inline: fn.dim(--pad-i);
114 border: 1px solid transparent;
115 background-color: transparent;
116 color: fn.color(--text);
117 font: inherit;
118 line-height: fn.dim(--line-height);
119 resize: none;
120 appearance: none;
121
122 &::placeholder {
123 opacity: 1;
124 color: fn.color(--placeholder);
125 font-style: italic;
126 }
127
128 &:hover {
129 @include iro.bem-sibling-elem('bg') {
130 border-color: fn.color(--hover --border);
131 }
132 }
133
134 &:focus {
135 outline: 0;
136
137 @include iro.bem-sibling-elem('bg') {
138 inset-block: $focus-border-offset;
139 inset-inline: $focus-border-offset;
140 border: fn.dim(--focus --border) solid fn.color(--focus --border);
141 border-radius: calc(fn.dim(--rounding) - $focus-border-offset);
142 }
143 }
144
145 &:invalid {
146 @include invalid;
147 }
148
149 &:focus-visible,
150 &:invalid:focus-visible {
151 @include keyboard-focus;
152 }
153 }
154
155 @include iro.bem-modifier('extended') {
156 padding: fn.dim(--extended --pad);
157
158 @include iro.bem-multi('&', 'elem' 'bg') {
159 border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad));
160 }
161
162 @include iro.bem-elem('native') {
163 &:focus {
164 @include iro.bem-sibling-elem('bg') {
165 border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad) - $focus-border-offset);
166 }
167 }
168 }
169 }
170
171 @include iro.bem-is('invalid') {
172 @include iro.bem-elem('native') {
173 @include invalid;
174
175 &:focus-visible {
176 @include keyboard-focus;
177 }
178 }
179 }
180
181 @include iro.bem-is('disabled') {
182 background-color: fn.color(--disabled --bg);
183
184 @include iro.bem-elem('native') {
185 color: fn.color(--disabled --text);
186
187 &::placeholder {
188 color: fn.color(--disabled --placeholder);
189 }
190 }
191
192 @include iro.bem-elem('bg') {
193 border-color: fn.color(--disabled --border);
194 }
195
196 @include iro.bem-is('invalid') {
197 @include iro.bem-elem('native') {
198 @include iro.bem-sibling-elem('bg') {
199 border-color: fn.color(--disabled --border);
200 }
201 }
202 }
203
204 @include iro.bem-elem('native') {
205 &:invalid {
206 @include iro.bem-sibling-elem('bg') {
207 border-color: fn.color(--disabled --border);
208 }
209 }
210 }
211 }
212 }
213}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-06 07:24:40 +0000