euv_ui/style/class/forms/
fn.rs1use super::*;
2
3class! {
4 pub c_form_switch {
5 display: "inline-flex";
6 align-items: "center";
7 gap: var!(space-sm);
8 cursor: "pointer";
9 touch-action: "manipulation";
10 user-select: "none";
11 -webkit-user-select: "none";
12 }
13
14 pub c_form_switch_row {
15 display: "flex";
16 align-items: "center";
17 justify-content: "space-between";
18 gap: var!(gap-component);
19 min-height: var!(min-height-base);
20 padding: format!("{} 0px", var!(space-sm));
21 border-bottom: format!("1px dashed {}", var!(border));
22 }
23
24 pub c_form_switch_on {
25 display: "inline-flex";
26 align-items: "center";
27 gap: var!(space-sm);
28 cursor: "pointer";
29 touch-action: "manipulation";
30 user-select: "none";
31 -webkit-user-select: "none";
32 }
33
34 pub c_form_switch_off {
35 display: "inline-flex";
36 align-items: "center";
37 gap: var!(space-sm);
38 cursor: "pointer";
39 touch-action: "manipulation";
40 user-select: "none";
41 -webkit-user-select: "none";
42 }
43
44 pub c_form_switch_track {
45 position: "relative";
46 width: "44px";
47 height: "24px";
48 flex-shrink: "0";
49 box-sizing: "border-box";
50 border: format!("1px solid {}", var!(border));
51 border-radius: "0px";
52 background: var!(background);
53 transition: format!("{} {}", var!(duration-fast), var!(ease-out));
54 }
55
56 pub c_form_switch_thumb {
57 position: "absolute";
58 top: "3px";
59 left: "3px";
60 width: "16px";
61 height: "16px";
62 box-sizing: "border-box";
63 border-radius: "50%";
64 background: var!(foreground);
65 transition: format!("{} {}", var!(duration-fast), var!(ease-out));
66 }
67
68 pub c_form_switch_label {
69 font-size: var!(font-base);
70 font-weight: "500";
71 color: var!(foreground);
72 }
73
74 pub c_euv_slider_input {
75 flex: "1";
76 width: "100%";
77 height: "24px";
78 padding: "0px";
79 background: "transparent";
80 cursor: "pointer";
81 touch-action: "manipulation";
82 -webkit-appearance: "none";
83 appearance: "none";
84 border: "none";
85 outline: "none";
86 ::-webkit-slider-runnable-track {
87 height: "6px";
88 background: format!("linear-gradient(to right, {} 0%, {} var(--value,50%), {} var(--value,50%), {} 100%)", var!(foreground), var!(foreground), var!(border), var!(border));
89 border: format!("1px solid {}", var!(border));
90 border-radius: "0px";
91 }
92 ::-webkit-slider-thumb {
93 width: "16px";
94 height: "16px";
95 background: var!(background);
96 border: format!("2px solid {}", var!(accent));
97 border-radius: "50%";
98 cursor: "pointer";
99 -webkit-appearance: "none";
100 margin-top: "-6px";
101 }
102 :active::-webkit-slider-thumb {
103 transform: "scale(0.92)";
104 }
105 ::-moz-range-track {
106 height: "6px";
107 background: format!("linear-gradient(to right, {} 0%, {} var(--value,50%), {} var(--value,50%), {} 100%)", var!(foreground), var!(foreground), var!(border), var!(border));
108 border: format!("1px solid {}", var!(border));
109 border-radius: "0px";
110 }
111 ::-moz-range-thumb {
112 width: "16px";
113 height: "16px";
114 background: var!(background);
115 border: format!("2px solid {}", var!(accent));
116 border-radius: "50%";
117 cursor: "pointer";
118 }
119 :focus {
120 outline: "none";
121 }
122 }
123
124 pub c_euv_slider_row {
125 display: "flex";
126 align-items: "center";
127 gap: var!(space-md);
128 margin-bottom: var!(space-sm);
129 }
130
131 pub c_euv_slider_header {
132 display: "flex";
133 align-items: "baseline";
134 justify-content: "space-between";
135 gap: var!(space-sm);
136 margin-bottom: var!(space-xs);
137 }
138
139 pub c_euv_radio_group {
140 display: "flex";
141 flex-direction: "column";
142 gap: var!(space-sm);
143 border: "none";
144 margin: "0px";
145 padding: "0px";
146 }
147
148 pub c_euv_radio_item {
149 display: "flex";
150 align-items: "center";
151 gap: var!(space-sm);
152 min-height: var!(min-height-base);
153 padding: format!("{} 0px", var!(space-xs));
154 cursor: "pointer";
155 touch-action: "manipulation";
156 user-select: "none";
157 -webkit-user-select: "none";
158 font-size: var!(font-base);
159 color: var!(foreground);
160 :hover {
161 background: var!(accent-muted);
162 color: var!(accent);
163 }
164 }
165
166 pub c_euv_radio_item_checked {
167 display: "flex";
168 align-items: "center";
169 justify-content: "center";
170 width: "16px";
171 height: "16px";
172 flex-shrink: "0";
173 box-sizing: "border-box";
174 border: format!("2px solid {}", var!(accent));
175 border-radius: "0px";
176 background: var!(accent);
177 color: var!(text-on-accent);
178 font-size: var!(font-xs);
179 font-weight: "700";
180 line-height: "1";
181 }
182
183 pub c_euv_radio_item_unchecked {
184 display: "flex";
185 align-items: "center";
186 justify-content: "center";
187 width: "16px";
188 height: "16px";
189 flex-shrink: "0";
190 box-sizing: "border-box";
191 border: format!("1px dashed {}", var!(border));
192 border-radius: "0px";
193 background: var!(background);
194 color: var!(muted-foreground);
195 font-size: var!(font-xs);
196 font-weight: "700";
197 line-height: "1";
198 }
199
200 pub c_euv_radio_input {
201 position: "absolute";
202 width: "1px";
203 height: "1px";
204 opacity: "0";
205 pointer-events: "none";
206 margin: "0px";
207 padding: "0px";
208 border: "none";
209 outline: "none";
210 }
211
212 pub c_progress_bar_fill {
213 height: "100%";
214 width: "0%";
215 background: var!(accent);
216 transition: format!("width {} {}", var!(duration-normal), var!(ease-out));
217 }
218
219 pub c_euv_input_wrapper {
224 width: "100%";
225 margin: format!("{} 0px", var!(gap-element));
226 }
227
228 pub c_form_label {
229 display: "block";
230 margin-bottom: var!(space-sm);
231 color: "inherit";
232 font-weight: "500";
233 font-size: var!(font-base);
234 }
235
236 pub c_inline_input_row {
237 display: "flex";
238 align-items: "center";
239 gap: var!(gap-component);
240 }
241
242 pub c_euv_input {
243 width: "100%";
244 min-height: var!(min-height-base);
245 padding: format!("0px {}", var!(space-lg));
246 border: format!("1px solid {}", var!(border));
247 font-size: var!(font-base);
248 line-height: "normal";
249 box-sizing: "border-box";
250 outline: "none";
251 color: var!(foreground);
252 appearance: "none";
253 -webkit-appearance: "none";
254 -moz-appearance: "none";
255 vertical-align: "middle";
256 :hover {
257 border-color: var!(accent);
258 background: var!(accent-muted);
259 }
260 :focus {
261 outline: "none";
262 border-color: var!(accent);
263 background: var!(accent-muted);
264 }
265 }
266
267 pub c_euv_input_no_transition {
268 width: "100%";
269 min-height: var!(min-height-base);
270 padding: format!("0px {}", var!(space-lg));
271 border: format!("1px solid {}", var!(border));
272 font-size: var!(font-base);
273 line-height: "normal";
274 box-sizing: "border-box";
275 outline: "none";
276 color: var!(foreground);
277 appearance: "none";
278 -webkit-appearance: "none";
279 -moz-appearance: "none";
280 vertical-align: "middle";
281 }
282
283 pub c_euv_input_error {
284 width: "100%";
285 min-height: var!(min-height-base);
286 padding: format!("0px {}", var!(space-lg));
287 border: format!("1px solid {}", var!(foreground));
288 font-size: var!(font-base);
289 line-height: "normal";
290 box-sizing: "border-box";
291 outline: "none";
292 color: var!(foreground);
293 appearance: "none";
294 -webkit-appearance: "none";
295 -moz-appearance: "none";
296 vertical-align: "middle";
297 :focus {
298 outline: "none";
299 border-color: var!(foreground);
300 }
301 }
302
303 pub c_form_checkbox {
304 cursor: "pointer";
305 width: var!(space-lg);
306 height: var!(space-lg);
307 }
308
309 pub c_form_checkbox_label {
310 font-size: var!(font-base);
311 color: "inherit";
312 cursor: "pointer";
313 }
314
315 pub c_form_checkbox_row {
316 margin: format!("{} 0px", var!(gap-component));
317 display: "flex";
318 align-items: "center";
319 gap: var!(gap-element);
320 }
321
322 pub c_select_input {
323 width: "100%";
324 min-height: var!(min-height-base);
325 padding: format!("0px {}", var!(space-lg));
326 border: format!("1px solid {}", var!(border));
327 font-size: var!(font-base);
328 line-height: "normal";
329 box-sizing: "border-box";
330 outline: "none";
331 cursor: "pointer";
332 appearance: "none";
333 -webkit-appearance: "none";
334 -moz-appearance: "none";
335 color: var!(foreground);
336 vertical-align: "middle";
337 background-image: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='currentColor' d='M6 8L1 3h10z'/%3E%3C/svg%3E\")";
338 background-repeat: "no-repeat";
339 background-position: "right 14px center";
340 :focus {
341 outline: "none";
342 border-color: var!(accent);
343 background: var!(accent-muted);
344 }
345 }
346
347 pub c_textarea_input {
348 width: "100%";
349 max-width: "100%";
350 padding: format!("{} {}", var!(space-md), var!(space-lg));
351 border: format!("1px solid {}", var!(border));
352 font-size: var!(font-base);
353 line-height: "normal";
354 box-sizing: "border-box";
355 outline: "none";
356 resize: "vertical";
357 overflow-x: "hidden";
358 word-wrap: "break-word";
359 font-family: "inherit";
360 color: var!(foreground);
361 appearance: "none";
362 -webkit-appearance: "none";
363 -moz-appearance: "none";
364 :hover {
365 border-color: var!(accent);
366 background: var!(accent-muted);
367 }
368 :focus {
369 outline: "none";
370 border-color: var!(accent);
371 background: var!(accent-muted);
372 }
373 }
374
375 pub c_textarea_input_error {
376 width: "100%";
377 max-width: "100%";
378 padding: format!("{} {}", var!(space-md), var!(space-lg));
379 border: format!("1px solid {}", var!(foreground));
380 font-size: var!(font-base);
381 line-height: "normal";
382 box-sizing: "border-box";
383 outline: "none";
384 resize: "vertical";
385 overflow-x: "hidden";
386 word-wrap: "break-word";
387 font-family: "inherit";
388 color: var!(foreground);
389 appearance: "none";
390 -webkit-appearance: "none";
391 -moz-appearance: "none";
392 :focus {
393 outline: "none";
394 border-color: var!(foreground);
395 }
396 }
397
398 pub c_textarea_counter {
399 text-align: "right";
400 margin-top: var!(space-xs);
401 margin-bottom: var!(gap-component);
402 }
403
404 pub c_textarea_counter_text {
405 font-size: var!(font-sm);
406 color: "inherit";
407 opacity: "1";
408 }
409
410 pub c_field_error_text {
411 color: var!(foreground);
412 font-size: var!(font-base);
413 margin-top: var!(space-xs);
414 margin-bottom: var!(space-sm);
415 }
416}