vft 0.0.183 → 0.0.185

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/index.css +1 -1
  2. package/es/app-components/form/types.d.ts +30 -2
  3. package/es/app-components/row/types.d.ts +10 -0
  4. package/es/app-components/super-form/component-map.d.ts +2 -1
  5. package/es/app-components/super-form/types.d.ts +2 -2
  6. package/es/components/button/use-button.js +3 -3
  7. package/es/components/index.js +113 -113
  8. package/es/index.js +113 -113
  9. package/es/package.json.d.ts +1 -1
  10. package/es/package.json.js +1 -1
  11. package/lib/app-components/form/types.d.ts +30 -2
  12. package/lib/app-components/row/types.d.ts +10 -0
  13. package/lib/app-components/super-form/component-map.d.ts +2 -1
  14. package/lib/app-components/super-form/types.d.ts +2 -2
  15. package/lib/components/button/use-button.cjs +1 -1
  16. package/lib/components/index.cjs +1 -1
  17. package/lib/index.cjs +1 -1
  18. package/lib/package.json.cjs +1 -1
  19. package/lib/package.json.d.ts +1 -1
  20. package/package.json +4 -4
  21. package/theme-style/index.css +1 -1
  22. package/theme-style/src/input.scss +67 -66
  23. package/theme-style/vft-input.css +1 -1
  24. package/web-types.json +1 -1
package/theme-style/src/input.scss CHANGED
@@ -14,16 +14,16 @@ $name: input;
14
14
  @each $slot in (prefix, suffix) {
15
15
  @include e($slot) {
16
16
  display: inline-flex;
17
- white-space: nowrap;
18
17
  flex-shrink: 0;
19
18
  flex-wrap: nowrap;
20
19
  height: 100%;
21
- text-align: center;
20
+ transition: all getCssVar('transition-duration');
22
21
  color: var(
23
22
  #{getCssVarName('input-icon-color')},
24
23
  map-get($input, 'icon-color')
25
24
  );
26
- transition: all getCssVar('transition-duration');
25
+ text-align: center;
26
+ white-space: nowrap;
27
27
  pointer-events: none;
28
28
  }
29
29
 
@@ -45,10 +45,10 @@ $name: input;
45
45
  }
46
46
  }
47
47
 
48
- pointer-events: all;
49
48
  display: inline-flex;
50
49
  align-items: center;
51
50
  justify-content: center;
51
+ pointer-events: all;
52
52
  }
53
53
  }
54
54
 
@@ -76,14 +76,14 @@ $name: input;
76
76
  }
77
77
  }
78
78
 
79
- position: relative;
80
- font-size: getCssVar('font-size', 'base');
81
79
  display: inline-flex;
80
+ position: relative;
81
+ box-sizing: border-box;
82
82
  width: getCompCssVar('width');
83
+ transition: width 0.2s ease;
84
+ font-size: getCssVar('font-size', 'base');
83
85
  line-height: getCssVar('input-height');
84
- box-sizing: border-box;
85
86
  vertical-align: middle;
86
- transition: width 0.2s ease;
87
87
 
88
88
  @include css-var-from-global('input-height', 'component-size');
89
89
  @include scroll-bar;
@@ -94,43 +94,44 @@ $name: input;
94
94
  align-items: center;
95
95
  justify-content: center;
96
96
  padding: $border-width map-get($input-padding-horizontal, 'default')-$border-width;
97
+ transition: getCssVar('transition-all');
98
+ border: 1px solid getCompCssVar('border-color');
99
+ border-radius: getCssVarWithDefault(
100
+ 'input-border-radius',
101
+ map-get($input, 'border-radius')
102
+ );
97
103
  background-color: var(
98
104
  #{getCssVarName('input-bg-color')},
99
105
  map-get($input, 'bg-color')
100
106
  );
101
107
  background-image: none;
102
- border-radius: getCssVarWithDefault(
103
- 'input-border-radius',
104
- map-get($input, 'border-radius')
105
- );
106
- border: 1px solid getCompCssVar('border-color');
107
- transition: getCssVar('transition-all');
108
-
109
- @include when(focus) {
110
- border: 1px solid getCompCssVar('focus-border-color');
111
- }
112
108
 
113
109
  &:hover {
114
110
  border: 1px solid getCompCssVar('hover-border-color');
115
111
  }
112
+
113
+ /* stylelint-disable-next-line */
114
+ @include when(focus) {
115
+ border: 1px solid getCompCssVar('focus-border-color');
116
+ }
116
117
  }
117
118
 
118
119
  @include e(inner) {
119
- width: 100%;
120
+ box-sizing: border-box;
120
121
  flex-grow: 1;
121
- -webkit-appearance: none;
122
+ width: 100%;
123
+ height: getCssVar('input-inner-height');
124
+ padding: 0;
125
+ border: none;
126
+ outline: none;
127
+ background: none;
122
128
  color: var(
123
129
  #{getCssVarName('input-text-color')},
124
130
  map-get($input, 'text-color')
125
131
  );
126
132
  font-size: inherit;
127
- height: getCssVar('input-inner-height');
128
133
  line-height: getCssVar('input-inner-height');
129
- padding: 0;
130
- outline: none;
131
- border: none;
132
- background: none;
133
- box-sizing: border-box;
134
+ -webkit-appearance: none;
134
135
  // use map-get as default value for date picker range
135
136
  @include set-css-var-value(
136
137
  'input-inner-height',
@@ -178,8 +179,8 @@ $name: input;
178
179
  cursor: not-allowed;
179
180
 
180
181
  .#{$namespace}-input__wrapper {
181
- background-color: map-get($input-disabled, 'fill');
182
182
  border: 1px solid getCompCssVar('disable-color');
183
+ background-color: map-get($input-disabled, 'fill');
183
184
  }
184
185
 
185
186
  .#{$namespace}-input__inner {
@@ -213,10 +214,10 @@ $name: input;
213
214
 
214
215
  & .#{$namespace}-input__clear,
215
216
  & .#{$namespace}-input__password {
217
+ z-index: 1;
216
218
  color: getCssVar('input-icon-color');
217
219
  font-size: map-get($input-font-size, 'default');
218
220
  cursor: pointer;
219
- z-index: 1;
220
221
 
221
222
  &:hover {
222
223
  color: getCssVar('input-clear-hover-color');
@@ -224,23 +225,23 @@ $name: input;
224
225
  }
225
226
 
226
227
  & .#{$namespace}-input__count {
227
- height: 100%;
228
228
  display: inline-flex;
229
229
  align-items: center;
230
+ height: 100%;
230
231
  color: getCssVar('info-color');
231
232
  font-size: 12px;
232
233
 
233
234
  .#{$namespace}-input__count-inner {
234
- background: getCssVar('fill-color', 'blank');
235
- line-height: initial;
236
235
  display: inline-block;
237
236
  padding-left: 8px;
237
+ background: getCssVar('fill-color', 'blank');
238
+ line-height: initial;
238
239
  }
239
240
  }
240
241
 
241
242
  & .#{$namespace}-input__icon {
242
- transition: all getCssVar('transition-duration');
243
243
  margin-left: 8px;
244
+ transition: all getCssVar('transition-duration');
244
245
  }
245
246
 
246
247
  .icon-search {
@@ -270,19 +271,19 @@ $name: input;
270
271
 
271
272
  @include b(input-group) {
272
273
  display: inline-flex;
273
- width: 100%;
274
274
  align-items: stretch;
275
+ width: 100%;
275
276
 
276
277
  @include e((append, prepend)) {
277
- background-color: getCssVar('fill-color', 'light');
278
- color: getCssVar('info-color');
279
- position: relative;
280
278
  display: inline-flex;
279
+ position: relative;
281
280
  align-items: center;
282
281
  justify-content: center;
283
282
  min-height: 100%;
284
- border-radius: getCssVar('input-border-radius');
285
283
  padding: 0 20px;
284
+ border-radius: getCssVar('input-border-radius');
285
+ background-color: getCssVar('fill-color', 'light');
286
+ color: getCssVar('info-color');
286
287
  white-space: nowrap;
287
288
 
288
289
  &:focus {
@@ -311,17 +312,17 @@ $name: input;
311
312
  }
312
313
 
313
314
  @include e(prepend) {
314
- border-top-right-radius: 0;
315
- border-bottom-right-radius: 0;
316
315
  border: 1px solid getCompCssVar('border-color');
317
316
  border-right: 0;
317
+ border-top-right-radius: 0;
318
+ border-bottom-right-radius: 0;
318
319
  }
319
320
 
320
321
  @include e(append) {
321
- border-top-left-radius: 0;
322
- border-bottom-left-radius: 0;
323
322
  border: 1px solid getCompCssVar('border-color');
324
323
  border-left: 0;
324
+ border-top-left-radius: 0;
325
+ border-bottom-left-radius: 0;
325
326
  }
326
327
 
327
328
  @include m(prepend) {
@@ -333,9 +334,9 @@ $name: input;
333
334
  }
334
335
 
335
336
  .#{$namespace}-input__wrapper {
337
+ border: 1px solid getCompCssVar('border-color');
336
338
  border-top-right-radius: 0;
337
339
  border-bottom-right-radius: 0;
338
- border: 1px solid getCompCssVar('border-color');
339
340
  }
340
341
 
341
342
  &.is-focus {
@@ -344,13 +345,13 @@ $name: input;
344
345
  }
345
346
 
346
347
  .#{$namespace}-input__wrapper {
347
- border: 1px solid getCompCssVar('focus-border-color');
348
348
  z-index: 2;
349
+ border: 1px solid getCompCssVar('focus-border-color');
349
350
 
350
351
  &:focus {
351
- outline: none;
352
352
  z-index: 2;
353
353
  border: 1px solid getCompCssVar('focus-border-color');
354
+ outline: none;
354
355
  }
355
356
  }
356
357
  }
@@ -383,9 +384,9 @@ $name: input;
383
384
  }
384
385
 
385
386
  .#{$namespace}-input__wrapper {
387
+ border: 1px solid getCompCssVar('border-color');
386
388
  border-top-left-radius: 0;
387
389
  border-bottom-left-radius: 0;
388
- border: 1px solid getCompCssVar('border-color');
389
390
  }
390
391
 
391
392
  &.is-focus {
@@ -420,36 +421,36 @@ $name: input;
420
421
  }
421
422
 
422
423
  @include b(textarea) {
423
- position: relative;
424
424
  display: inline-block;
425
+ position: relative;
425
426
  width: 100%;
426
- vertical-align: bottom;
427
427
  font-size: getCssVar('font-size', 'base');
428
+ vertical-align: bottom;
428
429
 
429
430
  @include e(inner) {
430
- position: relative;
431
431
  display: block;
432
- resize: vertical;
433
- padding: 5px map-get($input-padding-horizontal, 'default')-$border-width;
434
- line-height: 1.5;
432
+ position: relative;
435
433
  box-sizing: border-box;
436
434
  width: 100%;
437
- color: var(
438
- #{getCssVarName('input-text-color')},
439
- map-get($input, 'text-color')
435
+ padding: 5px map-get($input-padding-horizontal, 'default')-$border-width;
436
+ transition: getCssVar('transition-box-shadow');
437
+ border: 1px solid getCompCssVar('border-color');
438
+ border-radius: getCssVarWithDefault(
439
+ 'input-border-radius',
440
+ map-get($input, 'border-radius')
440
441
  );
441
442
  background-color: var(
442
443
  #{getCssVarName('input-bg-color')},
443
444
  map-get($input, 'bg-color')
444
445
  );
445
446
  background-image: none;
446
- -webkit-appearance: none;
447
- border-radius: getCssVarWithDefault(
448
- 'input-border-radius',
449
- map-get($input, 'border-radius')
447
+ color: var(
448
+ #{getCssVarName('input-text-color')},
449
+ map-get($input, 'text-color')
450
450
  );
451
- transition: getCssVar('transition-box-shadow');
452
- border: 1px solid getCompCssVar('border-color');
451
+ line-height: 1.5;
452
+ resize: vertical;
453
+ -webkit-appearance: none;
453
454
 
454
455
  &::placeholder {
455
456
  color: getCssVarWithDefault(
@@ -463,15 +464,15 @@ $name: input;
463
464
  }
464
465
 
465
466
  &:focus {
466
- outline: none;
467
467
  border: 1px solid getCompCssVar('focus-border-color');
468
+ outline: none;
468
469
  }
469
470
  }
470
471
 
471
472
  @include when(disabled) {
472
473
  .#{$namespace}-textarea__inner {
473
- background-color: map-get($input-disabled, 'fill');
474
474
  border-color: map-get($input-disabled, 'border');
475
+ background-color: map-get($input-disabled, 'fill');
475
476
  color: map-get($input-disabled, 'text-color');
476
477
  cursor: not-allowed;
477
478
 
@@ -492,12 +493,12 @@ $name: input;
492
493
  }
493
494
 
494
495
  & .#{$namespace}-input__count {
495
- color: getCssVar('info-color');
496
- background: getCssVar('fill-color', 'blank');
497
496
  position: absolute;
497
+ right: 10px;
498
+ bottom: 5px;
499
+ background: getCssVar('fill-color', 'blank');
500
+ color: getCssVar('info-color');
498
501
  font-size: 12px;
499
502
  line-height: 14px;
500
- bottom: 5px;
501
- right: 10px;
502
503
  }
503
504
  }
package/theme-style/vft-input.css CHANGED
@@ -1 +1 @@
1
- :root{--vft-input-width:100%;--vft-input-text-color:var(--vft-text-regular-color);--vft-input-border:var(--vft-border);--vft-input-hover-border:var(--vft-border-color-hover);--vft-input-focus-border:var(--vft-primary-color);--vft-input-transparent-border:0 0 0 1px transparent inset;--vft-input-border-color:var(--vft-border-color);--vft-input-border-radius:var(--vft-border-radius-base);--vft-input-bg-color:var(--vft-fill-color-blank);--vft-input-icon-color:var(--vft-text-placeholder-color);--vft-input-placeholder-color:var(--vft-text-placeholder-color);--vft-input-hover-border-color:var(--vft-border-color-hover);--vft-input-clear-hover-color:var(--vft-text-secondary-color);--vft-input-focus-border-color:var(--vft-primary-color)}.vft-input{position:relative;font-size:var(--vft-font-size-base);display:inline-flex;width:var(--vft-input-width);line-height:var(--vft-input-height);box-sizing:border-box;vertical-align:middle;transition:width .2s ease;--vft-input-height:var(--vft-component-size)}.vft-input__prefix{display:inline-flex;white-space:nowrap;flex-shrink:0;flex-wrap:nowrap;height:100%;text-align:center;color:var(--vft-input-icon-color,var(--vft-text-placeholder-color));transition:all var(--vft-transition-duration);pointer-events:none}.vft-input__prefix-inner{pointer-events:all;display:inline-flex;align-items:center;justify-content:center}.vft-input__prefix-inner>:last-child{margin-right:8px}.vft-input__prefix-inner>:first-child,.vft-input__prefix-inner>:first-child.vft-input__icon{margin-left:0}.vft-input__suffix{display:inline-flex;white-space:nowrap;flex-shrink:0;flex-wrap:nowrap;height:100%;text-align:center;color:var(--vft-input-icon-color,var(--vft-text-placeholder-color));transition:all var(--vft-transition-duration);pointer-events:none}.vft-input__suffix-inner{pointer-events:all;display:inline-flex;align-items:center;justify-content:center}.vft-input__suffix-inner>:first-child{margin-left:8px}.vft-input--large{font-size:14px;--vft-input-height:var(--vft-component-size-large)}.vft-input--large .vft-input__wrapper{padding:1px 15px}.vft-input--large .vft-input__inner{--vft-input-inner-height:calc(var(--vft-input-height, 40px) - 2px)}.vft-input--small{font-size:12px;--vft-input-height:var(--vft-component-size-small)}.vft-input--small .vft-input__wrapper{padding:1px 7px}.vft-input--small .vft-input__inner{--vft-input-inner-height:calc(var(--vft-input-height, 24px) - 2px)}.vft-input::-webkit-scrollbar{z-index:11;width:6px}.vft-input::-webkit-scrollbar:horizontal{height:6px}.vft-input::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:#c0c4cc;border:0 solid transparent}.vft-input::-webkit-scrollbar-thumb:hover{background:#c0c4cc}.vft-input::-webkit-scrollbar-corner{background:0 0}.vft-input::-webkit-scrollbar-track{background:0 0}.vft-input::-webkit-scrollbar-track-piece{background:0 0;width:6px}.vft-input__wrapper{display:inline-flex;flex-grow:1;align-items:center;justify-content:center;padding:1px 11px;background-color:var(--vft-input-bg-color,var(--vft-fill-color-blank));background-image:none;border-radius:var(--vft-input-border-radius,var(--vft-border-radius-base));border:1px solid var(--vft-input-border-color);transition:var(--vft-transition-all)}.vft-input__wrapper.is-focus{border:1px solid var(--vft-input-focus-border-color)}.vft-input__wrapper:hover{border:1px solid var(--vft-input-hover-border-color)}.vft-input__inner{width:100%;flex-grow:1;-webkit-appearance:none;color:var(--vft-input-text-color,var(--vft-text-regular-color));font-size:inherit;height:var(--vft-input-inner-height);line-height:var(--vft-input-inner-height);padding:0;outline:0;border:none;background:0 0;box-sizing:border-box;--vft-input-inner-height:calc(var(--vft-input-height, 32px) - 2px)}.vft-input__inner:focus{outline:0}.vft-input__inner::-moz-placeholder{color:var(--vft-input-placeholder-color,var(--vft-text-placeholder-color))}.vft-input__inner::placeholder{color:var(--vft-input-placeholder-color,var(--vft-text-placeholder-color))}.vft-input__inner[type=password]::-ms-reveal{display:none}.vft-input__inner[type=number]{line-height:1px}.vft-input__validateIcon{pointer-events:none}.vft-input.is-active .vft-input__wrapper{border:1px solid var(--vft-input-focus-color)}.vft-input.is-disabled{cursor:not-allowed}.vft-input.is-disabled .vft-input__wrapper{background-color:var(--vft-disabled-bg-color);border:1px solid var(--vft-input-disable-color)}.vft-input.is-disabled .vft-input__inner{color:var(--vft-disabled-text-color);-webkit-text-fill-color:var(--vft-disabled-text-color);cursor:not-allowed}.vft-input.is-disabled .vft-input__inner::-moz-placeholder{color:var(--vft-text-placeholder-color)}.vft-input.is-disabled .vft-input__inner::placeholder{color:var(--vft-text-placeholder-color)}.vft-input.is-disabled .vft-input__icon{cursor:not-allowed}.vft-input.is-exceed .vft-input__wrapper{border:1px solid var(--vft-input-danger-color)}.vft-input.is-exceed .vft-input__suffix .vft-input__count{color:var(--vft-danger-color)}.vft-input .icon-close{-webkit-mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="M764.288 214.592L512 466.88L259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512L214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"%2F%3E%3C%2Fsvg%3E') no-repeat;mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="M764.288 214.592L512 466.88L259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512L214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentcolor;color:inherit;width:1em;height:1em}.vft-input .vft-input__clear,.vft-input .vft-input__password{color:var(--vft-input-icon-color);font-size:14px;cursor:pointer;z-index:1}.vft-input .vft-input__clear:hover,.vft-input .vft-input__password:hover{color:var(--vft-input-clear-hover-color)}.vft-input .vft-input__count{height:100%;display:inline-flex;align-items:center;color:var(--vft-info-color);font-size:12px}.vft-input .vft-input__count .vft-input__count-inner{background:var(--vft-fill-color-blank);line-height:initial;display:inline-block;padding-left:8px}.vft-input .vft-input__icon{transition:all var(--vft-transition-duration);margin-left:8px}.vft-input .icon-search{-webkit-mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="m795.904 750.72l124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704a352 352 0 0 0 0 704z"%2F%3E%3C%2Fsvg%3E') no-repeat;mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="m795.904 750.72l124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704a352 352 0 0 0 0 704z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentcolor;color:inherit;width:1em;height:1em}.vft-input .icon-hide{-webkit-mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="M876.8 156.8c0-9.6-3.2-16-9.6-22.4c-6.4-6.4-12.8-9.6-22.4-9.6c-9.6 0-16 3.2-22.4 9.6L736 220.8c-64-32-137.6-51.2-224-60.8c-160 16-288 73.6-377.6 176C44.8 438.4 0 496 0 512s48 73.6 134.4 176c22.4 25.6 44.8 48 73.6 67.2l-86.4 89.6c-6.4 6.4-9.6 12.8-9.6 22.4c0 9.6 3.2 16 9.6 22.4c6.4 6.4 12.8 9.6 22.4 9.6c9.6 0 16-3.2 22.4-9.6l704-710.4c3.2-6.4 6.4-12.8 6.4-22.4Zm-646.4 528c-76.8-70.4-128-128-153.6-172.8c28.8-48 80-105.6 153.6-172.8C304 272 400 230.4 512 224c64 3.2 124.8 19.2 176 44.8l-54.4 54.4C598.4 300.8 560 288 512 288c-64 0-115.2 22.4-160 64s-64 96-64 160c0 48 12.8 89.6 35.2 124.8L256 707.2c-9.6-6.4-19.2-16-25.6-22.4Zm140.8-96c-12.8-22.4-19.2-48-19.2-76.8c0-44.8 16-83.2 48-112c32-28.8 67.2-48 112-48c28.8 0 54.4 6.4 73.6 19.2L371.2 588.8ZM889.599 336c-12.8-16-28.8-28.8-41.6-41.6l-48 48c73.6 67.2 124.8 124.8 150.4 169.6c-28.8 48-80 105.6-153.6 172.8c-73.6 67.2-172.8 108.8-284.8 115.2c-51.2-3.2-99.2-12.8-140.8-28.8l-48 48c57.6 22.4 118.4 38.4 188.8 44.8c160-16 288-73.6 377.6-176C979.199 585.6 1024 528 1024 512s-48.001-73.6-134.401-176Z"%2F%3E%3Cpath fill="currentColor" d="M511.998 672c-12.8 0-25.6-3.2-38.4-6.4l-51.2 51.2c28.8 12.8 57.6 19.2 89.6 19.2c64 0 115.2-22.4 160-64c41.6-41.6 64-96 64-160c0-32-6.4-64-19.2-89.6l-51.2 51.2c3.2 12.8 6.4 25.6 6.4 38.4c0 44.8-16 83.2-48 112c-32 28.8-67.2 48-112 48Z"%2F%3E%3C%2Fsvg%3E') no-repeat;mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="M876.8 156.8c0-9.6-3.2-16-9.6-22.4c-6.4-6.4-12.8-9.6-22.4-9.6c-9.6 0-16 3.2-22.4 9.6L736 220.8c-64-32-137.6-51.2-224-60.8c-160 16-288 73.6-377.6 176C44.8 438.4 0 496 0 512s48 73.6 134.4 176c22.4 25.6 44.8 48 73.6 67.2l-86.4 89.6c-6.4 6.4-9.6 12.8-9.6 22.4c0 9.6 3.2 16 9.6 22.4c6.4 6.4 12.8 9.6 22.4 9.6c9.6 0 16-3.2 22.4-9.6l704-710.4c3.2-6.4 6.4-12.8 6.4-22.4Zm-646.4 528c-76.8-70.4-128-128-153.6-172.8c28.8-48 80-105.6 153.6-172.8C304 272 400 230.4 512 224c64 3.2 124.8 19.2 176 44.8l-54.4 54.4C598.4 300.8 560 288 512 288c-64 0-115.2 22.4-160 64s-64 96-64 160c0 48 12.8 89.6 35.2 124.8L256 707.2c-9.6-6.4-19.2-16-25.6-22.4Zm140.8-96c-12.8-22.4-19.2-48-19.2-76.8c0-44.8 16-83.2 48-112c32-28.8 67.2-48 112-48c28.8 0 54.4 6.4 73.6 19.2L371.2 588.8ZM889.599 336c-12.8-16-28.8-28.8-41.6-41.6l-48 48c73.6 67.2 124.8 124.8 150.4 169.6c-28.8 48-80 105.6-153.6 172.8c-73.6 67.2-172.8 108.8-284.8 115.2c-51.2-3.2-99.2-12.8-140.8-28.8l-48 48c57.6 22.4 118.4 38.4 188.8 44.8c160-16 288-73.6 377.6-176C979.199 585.6 1024 528 1024 512s-48.001-73.6-134.401-176Z"%2F%3E%3Cpath fill="currentColor" d="M511.998 672c-12.8 0-25.6-3.2-38.4-6.4l-51.2 51.2c28.8 12.8 57.6 19.2 89.6 19.2c64 0 115.2-22.4 160-64c41.6-41.6 64-96 64-160c0-32-6.4-64-19.2-89.6l-51.2 51.2c3.2 12.8 6.4 25.6 6.4 38.4c0 44.8-16 83.2-48 112c-32 28.8-67.2 48-112 48Z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentcolor;color:inherit;width:1em;height:1em}.vft-input .icon-view{-webkit-mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="M512 160c320 0 512 352 512 352S832 864 512 864S0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288c52.608 79.872 211.456 288 436.8 288c225.28 0 384.128-208.064 436.8-288c-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448a224 224 0 0 1 0-448zm0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160s-71.744-160-160-160z"%2F%3E%3C%2Fsvg%3E') no-repeat;mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="M512 160c320 0 512 352 512 352S832 864 512 864S0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288c52.608 79.872 211.456 288 436.8 288c225.28 0 384.128-208.064 436.8-288c-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448a224 224 0 0 1 0-448zm0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160s-71.744-160-160-160z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentcolor;color:inherit;width:1em;height:1em}.vft-input .icon-loading{-webkit-mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"%2F%3E%3C%2Fsvg%3E') no-repeat;mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentcolor;color:inherit;width:1em;height:1em}.vft-input .icon-circle-check{-webkit-mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="M512 896a384 384 0 1 0 0-768a384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896a448 448 0 0 1 0 896z"%2F%3E%3Cpath fill="currentColor" d="M745.344 361.344a32 32 0 0 1 45.312 45.312l-288 288a32 32 0 0 1-45.312 0l-160-160a32 32 0 1 1 45.312-45.312L480 626.752l265.344-265.408z"%2F%3E%3C%2Fsvg%3E') no-repeat;mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="M512 896a384 384 0 1 0 0-768a384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896a448 448 0 0 1 0 896z"%2F%3E%3Cpath fill="currentColor" d="M745.344 361.344a32 32 0 0 1 45.312 45.312l-288 288a32 32 0 0 1-45.312 0l-160-160a32 32 0 1 1 45.312-45.312L480 626.752l265.344-265.408z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentcolor;color:inherit;width:1em;height:1em}.vft-input .icon-circle-close{-webkit-mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="m466.752 512l-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248L466.752 512z"%2F%3E%3Cpath fill="currentColor" d="M512 896a384 384 0 1 0 0-768a384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896a448 448 0 0 1 0 896z"%2F%3E%3C%2Fsvg%3E') no-repeat;mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="m466.752 512l-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248L466.752 512z"%2F%3E%3Cpath fill="currentColor" d="M512 896a384 384 0 1 0 0-768a384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896a448 448 0 0 1 0 896z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentcolor;color:inherit;width:1em;height:1em}.vft-input-group{display:inline-flex;width:100%;align-items:stretch}.vft-input-group__append,.vft-input-group__prepend{background-color:var(--vft-fill-color-light);color:var(--vft-info-color);position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:100%;border-radius:var(--vft-input-border-radius);padding:0 20px;white-space:nowrap}.vft-input-group__append:focus,.vft-input-group__prepend:focus{outline:0}.vft-input-group__append .vft-button,.vft-input-group__append .vft-select,.vft-input-group__prepend .vft-button,.vft-input-group__prepend .vft-select{display:inline-block;margin:0 -20px}.vft-input-group__append button.vft-button,.vft-input-group__append button.vft-button:hover,.vft-input-group__append div.vft-select .vft-input__wrapper,.vft-input-group__append div.vft-select:hover .vft-input__wrapper,.vft-input-group__prepend button.vft-button,.vft-input-group__prepend button.vft-button:hover,.vft-input-group__prepend div.vft-select .vft-input__wrapper,.vft-input-group__prepend div.vft-select:hover .vft-input__wrapper{border-color:transparent;background-color:transparent;color:inherit}.vft-input-group__append .vft-button,.vft-input-group__append .vft-input,.vft-input-group__prepend .vft-button,.vft-input-group__prepend .vft-input{font-size:inherit}.vft-input-group__prepend{border-top-right-radius:0;border-bottom-right-radius:0;border:1px solid var(--vft-input-border-color);border-right:0}.vft-input-group__append{border-top-left-radius:0;border-bottom-left-radius:0;border:1px solid var(--vft-input-border-color);border-left:0}.vft-input-group--prepend .vft-input-group__prepend .vft-select .vft-input .vft-input__inner{box-shadow:none!important}.vft-input-group--prepend .vft-input-group__prepend .vft-select .vft-input .vft-input__wrapper{border-top-right-radius:0;border-bottom-right-radius:0;border:1px solid var(--vft-input-border-color)}.vft-input-group--prepend .vft-input-group__prepend .vft-select .vft-input.is-focus .vft-input__inner{box-shadow:none!important}.vft-input-group--prepend .vft-input-group__prepend .vft-select .vft-input.is-focus .vft-input__wrapper{border:1px solid var(--vft-input-focus-border-color);z-index:2}.vft-input-group--prepend .vft-input-group__prepend .vft-select .vft-input.is-focus .vft-input__wrapper:focus{outline:0;z-index:2;border:1px solid var(--vft-input-focus-border-color)}.vft-input-group--prepend .vft-input-group__prepend .vft-select:hover .vft-input__inner{box-shadow:none!important}.vft-input-group--prepend .vft-input-group__prepend .vft-select:hover .vft-input__wrapper{z-index:1;border:1px solid var(--vft-input-hover-border-color)}.vft-input-group--prepend>.vft-input__wrapper{border-top-left-radius:0;border-bottom-left-radius:0}.vft-input-group--append .vft-input-group__append .vft-select .vft-input .vft-input__inner{box-shadow:none!important}.vft-input-group--append .vft-input-group__append .vft-select .vft-input .vft-input__wrapper{border-top-left-radius:0;border-bottom-left-radius:0;border:1px solid var(--vft-input-border-color)}.vft-input-group--append .vft-input-group__append .vft-select .vft-input.is-focus .vft-input__inner{box-shadow:none!important}.vft-input-group--append .vft-input-group__append .vft-select .vft-input.is-focus .vft-input__wrapper{z-index:2;border:1px solid var(--vft-input-focus-border-color)}.vft-input-group--append .vft-input-group__append .vft-select:hover .vft-input__inner{box-shadow:none!important}.vft-input-group--append .vft-input-group__append .vft-select:hover .vft-input__wrapper{z-index:1;border:1px solid var(--vft-input-hover-border-color)}.vft-input-group--append>.vft-input__wrapper{border-top-right-radius:0;border-bottom-right-radius:0}.vft-textarea{position:relative;display:inline-block;width:100%;vertical-align:bottom;font-size:var(--vft-font-size-base)}.vft-textarea__inner{position:relative;display:block;resize:vertical;padding:5px 11px;line-height:1.5;box-sizing:border-box;width:100%;color:var(--vft-input-text-color,var(--vft-text-regular-color));background-color:var(--vft-input-bg-color,var(--vft-fill-color-blank));background-image:none;-webkit-appearance:none;border-radius:var(--vft-input-border-radius,var(--vft-border-radius-base));transition:var(--vft-transition-box-shadow);border:1px solid var(--vft-input-border-color)}.vft-textarea__inner::-moz-placeholder{color:var(--vft-input-placeholder-color,var(--vft-text-placeholder-color))}.vft-textarea__inner::placeholder{color:var(--vft-input-placeholder-color,var(--vft-text-placeholder-color))}.vft-textarea__inner:hover{border:1px solid var(--vft-input-hover-border-color)}.vft-textarea__inner:focus{outline:0;border:1px solid var(--vft-input-focus-border-color)}.vft-textarea.is-disabled .vft-textarea__inner{background-color:var(--vft-disabled-bg-color);border-color:var(--vft-disabled-border-color);color:var(--vft-disabled-text-color);cursor:not-allowed}.vft-textarea.is-disabled .vft-textarea__inner::-moz-placeholder{color:var(--vft-text-placeholder-color)}.vft-textarea.is-disabled .vft-textarea__inner::placeholder{color:var(--vft-text-placeholder-color)}.vft-textarea.is-exceed .vft-textarea__inner{border-color:var(--vft-danger-color)}.vft-textarea.is-exceed .vft-input__count{color:var(--vft-danger-color)}.vft-textarea .vft-input__count{color:var(--vft-info-color);background:var(--vft-fill-color-blank);position:absolute;font-size:12px;line-height:14px;bottom:5px;right:10px}
1
+ :root{--vft-input-width:100%;--vft-input-text-color:var(--vft-text-regular-color);--vft-input-border:var(--vft-border);--vft-input-hover-border:var(--vft-border-color-hover);--vft-input-focus-border:var(--vft-primary-color);--vft-input-transparent-border:0 0 0 1px transparent inset;--vft-input-border-color:var(--vft-border-color);--vft-input-border-radius:var(--vft-border-radius-base);--vft-input-bg-color:var(--vft-fill-color-blank);--vft-input-icon-color:var(--vft-text-placeholder-color);--vft-input-placeholder-color:var(--vft-text-placeholder-color);--vft-input-hover-border-color:var(--vft-border-color-hover);--vft-input-clear-hover-color:var(--vft-text-secondary-color);--vft-input-focus-border-color:var(--vft-primary-color)}.vft-input{display:inline-flex;position:relative;box-sizing:border-box;width:var(--vft-input-width);transition:width .2s ease;font-size:var(--vft-font-size-base);line-height:var(--vft-input-height);vertical-align:middle;--vft-input-height:var(--vft-component-size)}.vft-input__prefix{display:inline-flex;flex-shrink:0;flex-wrap:nowrap;height:100%;transition:all var(--vft-transition-duration);color:var(--vft-input-icon-color,var(--vft-text-placeholder-color));text-align:center;white-space:nowrap;pointer-events:none}.vft-input__prefix-inner{display:inline-flex;align-items:center;justify-content:center;pointer-events:all}.vft-input__prefix-inner>:last-child{margin-right:8px}.vft-input__prefix-inner>:first-child,.vft-input__prefix-inner>:first-child.vft-input__icon{margin-left:0}.vft-input__suffix{display:inline-flex;flex-shrink:0;flex-wrap:nowrap;height:100%;transition:all var(--vft-transition-duration);color:var(--vft-input-icon-color,var(--vft-text-placeholder-color));text-align:center;white-space:nowrap;pointer-events:none}.vft-input__suffix-inner{display:inline-flex;align-items:center;justify-content:center;pointer-events:all}.vft-input__suffix-inner>:first-child{margin-left:8px}.vft-input--large{font-size:14px;--vft-input-height:var(--vft-component-size-large)}.vft-input--large .vft-input__wrapper{padding:1px 15px}.vft-input--large .vft-input__inner{--vft-input-inner-height:calc(var(--vft-input-height, 40px) - 2px)}.vft-input--small{font-size:12px;--vft-input-height:var(--vft-component-size-small)}.vft-input--small .vft-input__wrapper{padding:1px 7px}.vft-input--small .vft-input__inner{--vft-input-inner-height:calc(var(--vft-input-height, 24px) - 2px)}.vft-input::-webkit-scrollbar{z-index:11;width:6px}.vft-input::-webkit-scrollbar:horizontal{height:6px}.vft-input::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:#c0c4cc;border:0 solid transparent}.vft-input::-webkit-scrollbar-thumb:hover{background:#c0c4cc}.vft-input::-webkit-scrollbar-corner{background:0 0}.vft-input::-webkit-scrollbar-track{background:0 0}.vft-input::-webkit-scrollbar-track-piece{background:0 0;width:6px}.vft-input__wrapper{display:inline-flex;flex-grow:1;align-items:center;justify-content:center;padding:1px 11px;transition:var(--vft-transition-all);border:1px solid var(--vft-input-border-color);border-radius:var(--vft-input-border-radius,var(--vft-border-radius-base));background-color:var(--vft-input-bg-color,var(--vft-fill-color-blank));background-image:none}.vft-input__wrapper:hover{border:1px solid var(--vft-input-hover-border-color)}.vft-input__wrapper.is-focus{border:1px solid var(--vft-input-focus-border-color)}.vft-input__inner{box-sizing:border-box;flex-grow:1;width:100%;height:var(--vft-input-inner-height);padding:0;border:none;outline:0;background:0 0;color:var(--vft-input-text-color,var(--vft-text-regular-color));font-size:inherit;line-height:var(--vft-input-inner-height);-webkit-appearance:none;--vft-input-inner-height:calc(var(--vft-input-height, 32px) - 2px)}.vft-input__inner:focus{outline:0}.vft-input__inner::-moz-placeholder{color:var(--vft-input-placeholder-color,var(--vft-text-placeholder-color))}.vft-input__inner::placeholder{color:var(--vft-input-placeholder-color,var(--vft-text-placeholder-color))}.vft-input__inner[type=password]::-ms-reveal{display:none}.vft-input__inner[type=number]{line-height:1px}.vft-input__validateIcon{pointer-events:none}.vft-input.is-active .vft-input__wrapper{border:1px solid var(--vft-input-focus-color)}.vft-input.is-disabled{cursor:not-allowed}.vft-input.is-disabled .vft-input__wrapper{border:1px solid var(--vft-input-disable-color);background-color:var(--vft-disabled-bg-color)}.vft-input.is-disabled .vft-input__inner{color:var(--vft-disabled-text-color);-webkit-text-fill-color:var(--vft-disabled-text-color);cursor:not-allowed}.vft-input.is-disabled .vft-input__inner::-moz-placeholder{color:var(--vft-text-placeholder-color)}.vft-input.is-disabled .vft-input__inner::placeholder{color:var(--vft-text-placeholder-color)}.vft-input.is-disabled .vft-input__icon{cursor:not-allowed}.vft-input.is-exceed .vft-input__wrapper{border:1px solid var(--vft-input-danger-color)}.vft-input.is-exceed .vft-input__suffix .vft-input__count{color:var(--vft-danger-color)}.vft-input .icon-close{-webkit-mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="M764.288 214.592L512 466.88L259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512L214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"%2F%3E%3C%2Fsvg%3E') no-repeat;mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="M764.288 214.592L512 466.88L259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512L214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentcolor;color:inherit;width:1em;height:1em}.vft-input .vft-input__clear,.vft-input .vft-input__password{z-index:1;color:var(--vft-input-icon-color);font-size:14px;cursor:pointer}.vft-input .vft-input__clear:hover,.vft-input .vft-input__password:hover{color:var(--vft-input-clear-hover-color)}.vft-input .vft-input__count{display:inline-flex;align-items:center;height:100%;color:var(--vft-info-color);font-size:12px}.vft-input .vft-input__count .vft-input__count-inner{display:inline-block;padding-left:8px;background:var(--vft-fill-color-blank);line-height:initial}.vft-input .vft-input__icon{margin-left:8px;transition:all var(--vft-transition-duration)}.vft-input .icon-search{-webkit-mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="m795.904 750.72l124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704a352 352 0 0 0 0 704z"%2F%3E%3C%2Fsvg%3E') no-repeat;mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="m795.904 750.72l124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704a352 352 0 0 0 0 704z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentcolor;color:inherit;width:1em;height:1em}.vft-input .icon-hide{-webkit-mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="M876.8 156.8c0-9.6-3.2-16-9.6-22.4c-6.4-6.4-12.8-9.6-22.4-9.6c-9.6 0-16 3.2-22.4 9.6L736 220.8c-64-32-137.6-51.2-224-60.8c-160 16-288 73.6-377.6 176C44.8 438.4 0 496 0 512s48 73.6 134.4 176c22.4 25.6 44.8 48 73.6 67.2l-86.4 89.6c-6.4 6.4-9.6 12.8-9.6 22.4c0 9.6 3.2 16 9.6 22.4c6.4 6.4 12.8 9.6 22.4 9.6c9.6 0 16-3.2 22.4-9.6l704-710.4c3.2-6.4 6.4-12.8 6.4-22.4Zm-646.4 528c-76.8-70.4-128-128-153.6-172.8c28.8-48 80-105.6 153.6-172.8C304 272 400 230.4 512 224c64 3.2 124.8 19.2 176 44.8l-54.4 54.4C598.4 300.8 560 288 512 288c-64 0-115.2 22.4-160 64s-64 96-64 160c0 48 12.8 89.6 35.2 124.8L256 707.2c-9.6-6.4-19.2-16-25.6-22.4Zm140.8-96c-12.8-22.4-19.2-48-19.2-76.8c0-44.8 16-83.2 48-112c32-28.8 67.2-48 112-48c28.8 0 54.4 6.4 73.6 19.2L371.2 588.8ZM889.599 336c-12.8-16-28.8-28.8-41.6-41.6l-48 48c73.6 67.2 124.8 124.8 150.4 169.6c-28.8 48-80 105.6-153.6 172.8c-73.6 67.2-172.8 108.8-284.8 115.2c-51.2-3.2-99.2-12.8-140.8-28.8l-48 48c57.6 22.4 118.4 38.4 188.8 44.8c160-16 288-73.6 377.6-176C979.199 585.6 1024 528 1024 512s-48.001-73.6-134.401-176Z"%2F%3E%3Cpath fill="currentColor" d="M511.998 672c-12.8 0-25.6-3.2-38.4-6.4l-51.2 51.2c28.8 12.8 57.6 19.2 89.6 19.2c64 0 115.2-22.4 160-64c41.6-41.6 64-96 64-160c0-32-6.4-64-19.2-89.6l-51.2 51.2c3.2 12.8 6.4 25.6 6.4 38.4c0 44.8-16 83.2-48 112c-32 28.8-67.2 48-112 48Z"%2F%3E%3C%2Fsvg%3E') no-repeat;mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="M876.8 156.8c0-9.6-3.2-16-9.6-22.4c-6.4-6.4-12.8-9.6-22.4-9.6c-9.6 0-16 3.2-22.4 9.6L736 220.8c-64-32-137.6-51.2-224-60.8c-160 16-288 73.6-377.6 176C44.8 438.4 0 496 0 512s48 73.6 134.4 176c22.4 25.6 44.8 48 73.6 67.2l-86.4 89.6c-6.4 6.4-9.6 12.8-9.6 22.4c0 9.6 3.2 16 9.6 22.4c6.4 6.4 12.8 9.6 22.4 9.6c9.6 0 16-3.2 22.4-9.6l704-710.4c3.2-6.4 6.4-12.8 6.4-22.4Zm-646.4 528c-76.8-70.4-128-128-153.6-172.8c28.8-48 80-105.6 153.6-172.8C304 272 400 230.4 512 224c64 3.2 124.8 19.2 176 44.8l-54.4 54.4C598.4 300.8 560 288 512 288c-64 0-115.2 22.4-160 64s-64 96-64 160c0 48 12.8 89.6 35.2 124.8L256 707.2c-9.6-6.4-19.2-16-25.6-22.4Zm140.8-96c-12.8-22.4-19.2-48-19.2-76.8c0-44.8 16-83.2 48-112c32-28.8 67.2-48 112-48c28.8 0 54.4 6.4 73.6 19.2L371.2 588.8ZM889.599 336c-12.8-16-28.8-28.8-41.6-41.6l-48 48c73.6 67.2 124.8 124.8 150.4 169.6c-28.8 48-80 105.6-153.6 172.8c-73.6 67.2-172.8 108.8-284.8 115.2c-51.2-3.2-99.2-12.8-140.8-28.8l-48 48c57.6 22.4 118.4 38.4 188.8 44.8c160-16 288-73.6 377.6-176C979.199 585.6 1024 528 1024 512s-48.001-73.6-134.401-176Z"%2F%3E%3Cpath fill="currentColor" d="M511.998 672c-12.8 0-25.6-3.2-38.4-6.4l-51.2 51.2c28.8 12.8 57.6 19.2 89.6 19.2c64 0 115.2-22.4 160-64c41.6-41.6 64-96 64-160c0-32-6.4-64-19.2-89.6l-51.2 51.2c3.2 12.8 6.4 25.6 6.4 38.4c0 44.8-16 83.2-48 112c-32 28.8-67.2 48-112 48Z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentcolor;color:inherit;width:1em;height:1em}.vft-input .icon-view{-webkit-mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="M512 160c320 0 512 352 512 352S832 864 512 864S0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288c52.608 79.872 211.456 288 436.8 288c225.28 0 384.128-208.064 436.8-288c-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448a224 224 0 0 1 0-448zm0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160s-71.744-160-160-160z"%2F%3E%3C%2Fsvg%3E') no-repeat;mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="M512 160c320 0 512 352 512 352S832 864 512 864S0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288c52.608 79.872 211.456 288 436.8 288c225.28 0 384.128-208.064 436.8-288c-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448a224 224 0 0 1 0-448zm0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160s-71.744-160-160-160z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentcolor;color:inherit;width:1em;height:1em}.vft-input .icon-loading{-webkit-mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"%2F%3E%3C%2Fsvg%3E') no-repeat;mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentcolor;color:inherit;width:1em;height:1em}.vft-input .icon-circle-check{-webkit-mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="M512 896a384 384 0 1 0 0-768a384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896a448 448 0 0 1 0 896z"%2F%3E%3Cpath fill="currentColor" d="M745.344 361.344a32 32 0 0 1 45.312 45.312l-288 288a32 32 0 0 1-45.312 0l-160-160a32 32 0 1 1 45.312-45.312L480 626.752l265.344-265.408z"%2F%3E%3C%2Fsvg%3E') no-repeat;mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="M512 896a384 384 0 1 0 0-768a384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896a448 448 0 0 1 0 896z"%2F%3E%3Cpath fill="currentColor" d="M745.344 361.344a32 32 0 0 1 45.312 45.312l-288 288a32 32 0 0 1-45.312 0l-160-160a32 32 0 1 1 45.312-45.312L480 626.752l265.344-265.408z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentcolor;color:inherit;width:1em;height:1em}.vft-input .icon-circle-close{-webkit-mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="m466.752 512l-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248L466.752 512z"%2F%3E%3Cpath fill="currentColor" d="M512 896a384 384 0 1 0 0-768a384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896a448 448 0 0 1 0 896z"%2F%3E%3C%2Fsvg%3E') no-repeat;mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="m466.752 512l-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248L466.752 512z"%2F%3E%3Cpath fill="currentColor" d="M512 896a384 384 0 1 0 0-768a384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896a448 448 0 0 1 0 896z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentcolor;color:inherit;width:1em;height:1em}.vft-input-group{display:inline-flex;align-items:stretch;width:100%}.vft-input-group__append,.vft-input-group__prepend{display:inline-flex;position:relative;align-items:center;justify-content:center;min-height:100%;padding:0 20px;border-radius:var(--vft-input-border-radius);background-color:var(--vft-fill-color-light);color:var(--vft-info-color);white-space:nowrap}.vft-input-group__append:focus,.vft-input-group__prepend:focus{outline:0}.vft-input-group__append .vft-button,.vft-input-group__append .vft-select,.vft-input-group__prepend .vft-button,.vft-input-group__prepend .vft-select{display:inline-block;margin:0 -20px}.vft-input-group__append button.vft-button,.vft-input-group__append button.vft-button:hover,.vft-input-group__append div.vft-select .vft-input__wrapper,.vft-input-group__append div.vft-select:hover .vft-input__wrapper,.vft-input-group__prepend button.vft-button,.vft-input-group__prepend button.vft-button:hover,.vft-input-group__prepend div.vft-select .vft-input__wrapper,.vft-input-group__prepend div.vft-select:hover .vft-input__wrapper{border-color:transparent;background-color:transparent;color:inherit}.vft-input-group__append .vft-button,.vft-input-group__append .vft-input,.vft-input-group__prepend .vft-button,.vft-input-group__prepend .vft-input{font-size:inherit}.vft-input-group__prepend{border:1px solid var(--vft-input-border-color);border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.vft-input-group__append{border:1px solid var(--vft-input-border-color);border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.vft-input-group--prepend .vft-input-group__prepend .vft-select .vft-input .vft-input__inner{box-shadow:none!important}.vft-input-group--prepend .vft-input-group__prepend .vft-select .vft-input .vft-input__wrapper{border:1px solid var(--vft-input-border-color);border-top-right-radius:0;border-bottom-right-radius:0}.vft-input-group--prepend .vft-input-group__prepend .vft-select .vft-input.is-focus .vft-input__inner{box-shadow:none!important}.vft-input-group--prepend .vft-input-group__prepend .vft-select .vft-input.is-focus .vft-input__wrapper{z-index:2;border:1px solid var(--vft-input-focus-border-color)}.vft-input-group--prepend .vft-input-group__prepend .vft-select .vft-input.is-focus .vft-input__wrapper:focus{z-index:2;border:1px solid var(--vft-input-focus-border-color);outline:0}.vft-input-group--prepend .vft-input-group__prepend .vft-select:hover .vft-input__inner{box-shadow:none!important}.vft-input-group--prepend .vft-input-group__prepend .vft-select:hover .vft-input__wrapper{z-index:1;border:1px solid var(--vft-input-hover-border-color)}.vft-input-group--prepend>.vft-input__wrapper{border-top-left-radius:0;border-bottom-left-radius:0}.vft-input-group--append .vft-input-group__append .vft-select .vft-input .vft-input__inner{box-shadow:none!important}.vft-input-group--append .vft-input-group__append .vft-select .vft-input .vft-input__wrapper{border:1px solid var(--vft-input-border-color);border-top-left-radius:0;border-bottom-left-radius:0}.vft-input-group--append .vft-input-group__append .vft-select .vft-input.is-focus .vft-input__inner{box-shadow:none!important}.vft-input-group--append .vft-input-group__append .vft-select .vft-input.is-focus .vft-input__wrapper{z-index:2;border:1px solid var(--vft-input-focus-border-color)}.vft-input-group--append .vft-input-group__append .vft-select:hover .vft-input__inner{box-shadow:none!important}.vft-input-group--append .vft-input-group__append .vft-select:hover .vft-input__wrapper{z-index:1;border:1px solid var(--vft-input-hover-border-color)}.vft-input-group--append>.vft-input__wrapper{border-top-right-radius:0;border-bottom-right-radius:0}.vft-textarea{display:inline-block;position:relative;width:100%;font-size:var(--vft-font-size-base);vertical-align:bottom}.vft-textarea__inner{display:block;position:relative;box-sizing:border-box;width:100%;padding:5px 11px;transition:var(--vft-transition-box-shadow);border:1px solid var(--vft-input-border-color);border-radius:var(--vft-input-border-radius,var(--vft-border-radius-base));background-color:var(--vft-input-bg-color,var(--vft-fill-color-blank));background-image:none;color:var(--vft-input-text-color,var(--vft-text-regular-color));line-height:1.5;resize:vertical;-webkit-appearance:none}.vft-textarea__inner::-moz-placeholder{color:var(--vft-input-placeholder-color,var(--vft-text-placeholder-color))}.vft-textarea__inner::placeholder{color:var(--vft-input-placeholder-color,var(--vft-text-placeholder-color))}.vft-textarea__inner:hover{border:1px solid var(--vft-input-hover-border-color)}.vft-textarea__inner:focus{border:1px solid var(--vft-input-focus-border-color);outline:0}.vft-textarea.is-disabled .vft-textarea__inner{border-color:var(--vft-disabled-border-color);background-color:var(--vft-disabled-bg-color);color:var(--vft-disabled-text-color);cursor:not-allowed}.vft-textarea.is-disabled .vft-textarea__inner::-moz-placeholder{color:var(--vft-text-placeholder-color)}.vft-textarea.is-disabled .vft-textarea__inner::placeholder{color:var(--vft-text-placeholder-color)}.vft-textarea.is-exceed .vft-textarea__inner{border-color:var(--vft-danger-color)}.vft-textarea.is-exceed .vft-input__count{color:var(--vft-danger-color)}.vft-textarea .vft-input__count{position:absolute;right:10px;bottom:5px;background:var(--vft-fill-color-blank);color:var(--vft-info-color);font-size:12px;line-height:14px}