summaryrefslogtreecommitdiffstats
path: root/src/objects/_text-field.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-21 23:07:50 +0200
committerVolpeon <git@volpeon.ink>2024-06-21 23:07:50 +0200
commit48cb00040763459fc46d4aa108bf72c12f48f422 (patch)
tree9609470d56bb31d55697ef0c42f1c908804dd3f1 /src/objects/_text-field.scss
parentUpdate (diff)
downloadiro-design-48cb00040763459fc46d4aa108bf72c12f48f422.tar.gz
iro-design-48cb00040763459fc46d4aa108bf72c12f48f422.tar.bz2
iro-design-48cb00040763459fc46d4aa108bf72c12f48f422.zip
WIP: Refactoring
Diffstat (limited to 'src/objects/_text-field.scss')
-rw-r--r--src/objects/_text-field.scss232
1 files changed, 0 insertions, 232 deletions
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
deleted file mode 100644
index 88c4535..0000000
--- a/src/objects/_text-field.scss
+++ /dev/null
@@ -1,232 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@mixin invalid {
5 @include iro.bem-sibling-elem('bg') {
6 border-color: fn.color(--error --border);
7 box-shadow: fn.color(--error --shadow);
8 }
9
10 &:hover {
11 @include iro.bem-sibling-elem('bg') {
12 border-color: fn.color(--error --hover --border);
13 box-shadow: fn.color(--error --hover --shadow);
14 }
15 }
16
17 &:focus {
18 @include iro.bem-sibling-elem('bg') {
19 border-color: fn.color(--error --focus --border);
20 box-shadow: fn.color(--error --focus --shadow);
21 }
22 }
23}
24
25@mixin keyboard-focus {
26 @include iro.bem-sibling-elem('bg') {
27 border-color: fn.color(--key-focus --border);
28 box-shadow: fn.color(--key-focus --shadow);
29 }
30}
31
32@include iro.props-namespace('text-field') {
33 @include iro.props-store((
34 --dims: (
35 --pad-x: fn.global-dim(--size --125),
36 --pad-y: fn.global-dim(--size --125),
37 --border: fn.global-dim(--border --thin),
38 --rounding: 2px,
39
40 --extended: (
41 --pad: fn.global-dim(--size --50),
42 --rounding: 6px,
43 ),
44
45 --focus: (
46 --border: fn.global-dim(--border --medium),
47 )
48 ),
49 ), 'dims');
50
51 @include iro.props-store((
52 --colors: (
53 --bg: fn.global-color(--bg-hi2),
54 --placeholder: fn.global-color(--fg-hi2),
55 --text: fn.global-color(--fg),
56 --border: fn.global-color(--obj-lo),
57 --shadow: 0 0 0 0 transparent,
58
59 --hover: (
60 --border: fn.global-color(--fg-hi2),
61 --shadow: 0 0 0 0 transparent,
62 ),
63 --focus: (
64 --border: fn.global-color(--accent --primary --solid --bg),
65 --shadow: 0 0 0 0 transparent,
66 ),
67 --key-focus: (
68 --border: fn.global-color(--focus --fill),
69 --shadow: fn.global-color(--focus --shadow),
70 ),
71 --error: (
72 --border: fn.global-color(--accent --error --solid --bg-hi),
73 --shadow: 0 0 0 0 transparent,
74
75 --hover: (
76 --border: fn.global-color(--accent --error --solid --bg),
77 --shadow: 0 0 0 0 transparent,
78 ),
79 --focus: (
80 --border: fn.global-color(--accent --error --solid --bg),
81 --shadow: 0 0 0 0 transparent,
82 ),
83 ),
84 --disabled: (
85 --bg: fn.global-color(--obj-hi),
86 --placeholder: fn.global-color(--fg-hi3),
87 --text: fn.global-color(--fg-hi3),
88 --border: fn.global-color(--obj-hi),
89 --shadow: 0 0 0 0 transparent,
90 ),
91 ),
92 ), 'colors');
93
94 @include iro.bem-object(iro.props-namespace()) {
95 $line-height: 1.4;
96 $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border));
97
98 position: relative;
99 min-width: 0;
100 border-radius: fn.dim(--rounding);
101 background-color: fn.color(--bg);
102
103 @include iro.bem-elem('bg') {
104 display: block;
105 position: absolute;
106 top: 0;
107 right: 0;
108 bottom: 0;
109 left: 0;
110 border: fn.dim(--border) solid fn.color(--border);
111 border-radius: fn.dim(--rounding);
112 box-shadow: fn.color(--shadow);
113 pointer-events: none;
114 }
115
116 @include iro.bem-elem('native') {
117 box-sizing: border-box;
118 width: 100%;
119 padding: calc(fn.dim(--pad-y) - .5em * ($line-height - 1)) fn.dim(--pad-x);
120 border: 1px solid transparent;
121 background-color: transparent;
122 color: fn.color(--text);
123 font: inherit;
124 line-height: $line-height;
125 resize: none;
126 appearance: none;
127
128 &::placeholder {
129 opacity: 1;
130 color: fn.color(--placeholder);
131 font-style: italic;
132 }
133
134 &:hover {
135 @include iro.bem-sibling-elem('bg') {
136 border-color: fn.color(--hover --border);
137 box-shadow: fn.color(--hover --shadow);
138 }
139 }
140
141 &:focus {
142 outline: 0;
143
144 @include iro.bem-sibling-elem('bg') {
145 top: $focus-border-offset;
146 right: $focus-border-offset;
147 bottom: $focus-border-offset;
148 left: $focus-border-offset;
149 border: fn.dim(--focus --border) solid fn.color(--focus --border);
150 border-radius: calc(fn.dim(--rounding) - $focus-border-offset);
151 box-shadow: fn.color(--focus --shadow);
152 }
153 }
154
155 &:invalid {
156 @include invalid;
157 }
158 }
159
160 @include iro.bem-modifier('extended') {
161 padding: fn.dim(--extended --pad);
162
163 @include iro.bem-multi('&', 'elem' 'bg') {
164 border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad));
165 }
166
167 @include iro.bem-elem('native') {
168 &:focus {
169 @include iro.bem-sibling-elem('bg') {
170 border-radius: calc(fn.dim(--extended --rounding) - $focus-border-offset);
171 }
172 }
173 }
174 }
175
176 @include iro.bem-is('invalid') {
177 @include iro.bem-elem('native') {
178 @include invalid;
179 }
180 }
181
182 @include iro.bem-at-theme('keyboard') {
183 @include iro.bem-elem('native') {
184 &:focus,
185 &:invalid:focus {
186 @include keyboard-focus;
187 }
188 }
189
190 @include iro.bem-is('invalid') {
191 @include iro.bem-elem('native') {
192 &:focus {
193 @include keyboard-focus;
194 }
195 }
196 }
197 }
198
199 @include iro.bem-is('disabled') {
200 background-color: fn.color(--disabled --bg);
201 box-shadow: fn.color(--disabled --shadow);
202
203 @include iro.bem-elem('native') {
204 color: fn.color(--disabled --text);
205
206 &::placeholder {
207 color: fn.color(--disabled --placeholder);
208 }
209 }
210
211 @include iro.bem-elem('bg') {
212 border-color: fn.color(--disabled --border);
213 }
214
215 @include iro.bem-is('invalid') {
216 @include iro.bem-elem('native') {
217 @include iro.bem-sibling-elem('bg') {
218 border-color: fn.color(--disabled --border);
219 }
220 }
221 }
222
223 @include iro.bem-elem('native') {
224 &:invalid {
225 @include iro.bem-sibling-elem('bg') {
226 border-color: fn.color(--disabled --border);
227 }
228 }
229 }
230 }
231 }
232}
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-09-21 11:34:40 +0000