vft 0.0.322 → 0.0.324

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 (14) hide show
  1. package/dist/index.css +1 -1
  2. package/es/package.json.d.ts +1 -1
  3. package/es/package.json.js +1 -1
  4. package/lib/package.json.cjs +1 -1
  5. package/lib/package.json.d.ts +1 -1
  6. package/package.json +5 -5
  7. package/theme-style/index.css +1 -1
  8. package/theme-style/src/form.scss +63 -28
  9. package/theme-style/src/input.scss +63 -0
  10. package/theme-style/src/upload.scss +4 -0
  11. package/theme-style/vft-form.css +1 -1
  12. package/theme-style/vft-input.css +1 -1
  13. package/theme-style/vft-upload.css +1 -1
  14. package/web-types.json +1 -1
package/theme-style/src/form.scss CHANGED
@@ -104,19 +104,27 @@ $form-item-label-top-margin-bottom: map.merge(
104
104
  }
105
105
 
106
106
  @include b(form-item) {
107
+ display: flex;
108
+
107
109
  --font-size: #{map.get($input-font-size, 'default')};
108
110
 
109
- display: flex;
110
111
  margin-bottom: #{map.get($form-item-margin-bottom, 'default')};
111
112
 
113
+ .#{$namespace}-form-item {
114
+ margin-bottom: 0;
115
+ }
116
+
117
+ .#{$namespace}-input__validateIcon {
118
+ display: none;
119
+ }
120
+
112
121
  @each $size in (large, default, small) {
113
122
  @include m($size) {
114
123
  --font-size: #{map.get($input-font-size, $size)};
124
+ @include set-css-var-value(('form', 'label-font-size'), var(--font-size));
115
125
 
116
126
  margin-bottom: #{map.get($form-item-margin-bottom, $size)};
117
127
 
118
- @include set-css-var-value(('form', 'label-font-size'), var(--font-size));
119
-
120
128
  @include e(label) {
121
129
  height: #{map.get($form-item-line-height, $size)};
122
130
  line-height: #{map.get($form-item-line-height, $size)};
@@ -132,6 +140,33 @@ $form-item-label-top-margin-bottom: map.merge(
132
140
  }
133
141
  }
134
142
 
143
+ @include m(label-left) {
144
+ .#{$namespace}-form-item__label {
145
+ justify-content: flex-start;
146
+ text-align: left;
147
+ }
148
+ }
149
+
150
+ @include m(label-right) {
151
+ .#{$namespace}-form-item__label {
152
+ justify-content: flex-end;
153
+ text-align: right;
154
+ }
155
+ }
156
+
157
+ @include m(label-top) {
158
+ display: block;
159
+
160
+ .#{$namespace}-form-item__label {
161
+ display: block;
162
+ width: fit-content;
163
+ height: auto;
164
+ margin-bottom: #{map.get($form-item-label-top-margin-bottom, 'default')};
165
+ line-height: #{map.get($form-item-label-top-line-height, 'default')};
166
+ text-align: left;
167
+ }
168
+ }
169
+
135
170
  @include e(label-wrap) {
136
171
  display: flex;
137
172
  }
@@ -141,7 +176,6 @@ $form-item-label-top-margin-bottom: map.merge(
141
176
  box-sizing: border-box;
142
177
  flex: 0 0 auto;
143
178
  align-items: flex-start;
144
- justify-content: flex-end;
145
179
  height: #{map.get($form-item-line-height, 'default')};
146
180
  padding: 0 12px 0 0;
147
181
  color: getCssVar('text', 'regular-color');
@@ -207,24 +241,33 @@ $form-item-label-top-margin-bottom: map.merge(
207
241
  }
208
242
 
209
243
  @include when(error) {
210
- .#{$namespace}-select__wrapper,
211
- .#{$namespace}-textarea__inner {
212
- &,
213
- &:focus {
214
- border: 1px solid getCssVar('danger-color');
244
+ @include e(content) {
245
+ .#{$namespace}-input__wrapper,
246
+ .#{$namespace}-textarea__inner,
247
+ .#{$namespace}-select__wrapper,
248
+ .#{$namespace}-input-tag__wrapper {
249
+ &,
250
+ &:hover,
251
+ &:focus,
252
+ &.is-focus {
253
+ box-shadow: 0 0 0 1px getCssVar('danger-color') inset;
254
+ }
215
255
  }
216
- }
217
- .#{$namespace}-input__wrapper {
218
- border: 1px solid getCssVar('danger-color');
219
- }
220
- .#{$namespace}-input-group__append,
221
- .#{$namespace}-input-group__prepend {
222
- .#{$namespace}-input__wrapper {
223
- border: 1px solid transparent;
256
+
257
+ .#{$namespace}-input-group__append,
258
+ .#{$namespace}-input-group__prepend {
259
+ .#{$namespace}-input__wrapper {
260
+ box-shadow: 0 0 0 1px transparent inset;
261
+ }
262
+
263
+ .#{$namespace}-input__validateIcon {
264
+ display: none;
265
+ }
266
+ }
267
+
268
+ .#{$namespace}-input__validateIcon {
269
+ color: getCssVar('danger-color');
224
270
  }
225
- }
226
- .#{$namespace}-input__validateIcon {
227
- color: getCssVar('danger-color');
228
271
  }
229
272
  }
230
273
 
@@ -233,12 +276,4 @@ $form-item-label-top-margin-bottom: map.merge(
233
276
  display: inline-flex;
234
277
  }
235
278
  }
236
-
237
- .#{$namespace}-form-item {
238
- margin-bottom: 0;
239
- }
240
-
241
- .#{$namespace}-input__validateIcon {
242
- display: none;
243
- }
244
279
  }
package/theme-style/src/input.scss CHANGED
@@ -506,3 +506,66 @@ $name: input;
506
506
  line-height: 14px;
507
507
  }
508
508
  }
509
+
510
+ // 渐变边框样式
511
+ @include b(input) {
512
+ @include m(gradient-border) {
513
+ position: relative;
514
+
515
+ // 虚线外边框
516
+ &::before {
517
+ content: '';
518
+ position: absolute;
519
+ top: -4px;
520
+ right: -4px;
521
+ bottom: -4px;
522
+ left: -4px;
523
+ z-index: 1;
524
+ border: 2px dashed #4a9eff;
525
+ border-radius: 12px;
526
+ pointer-events: none;
527
+ }
528
+
529
+ // 渐变边框效果
530
+ &::after {
531
+ content: '';
532
+ position: absolute;
533
+ top: -2px;
534
+ right: -2px;
535
+ bottom: -2px;
536
+ left: -2px;
537
+ z-index: 0;
538
+ border-radius: 10px;
539
+ background: linear-gradient(90deg, #4ade80, #60a5fa);
540
+ }
541
+
542
+ .#{$namespace}-input__wrapper {
543
+ position: relative;
544
+ z-index: 2;
545
+ background-color: #3a3a3a;
546
+ border: none;
547
+ border-radius: 8px;
548
+ }
549
+
550
+ .#{$namespace}-input__inner {
551
+ background-color: transparent;
552
+ color: #ffffff;
553
+ caret-color: #4ade80;
554
+
555
+ &::placeholder {
556
+ color: #9ca3af;
557
+ }
558
+
559
+ &:focus {
560
+ box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.3);
561
+ }
562
+ }
563
+
564
+ // 聚焦时的效果
565
+ &:focus-within {
566
+ .#{$namespace}-input__wrapper {
567
+ box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.3);
568
+ }
569
+ }
570
+ }
571
+ }
package/theme-style/src/upload.scss CHANGED
@@ -158,6 +158,10 @@
158
158
  &:hover {
159
159
  border-color: getCssVar('primary-color');
160
160
  }
161
+
162
+ .icon-arrow-upload {
163
+ @include icon-common($icon-upload);
164
+ }
161
165
  }
162
166
 
163
167
  @include b(upload-list) {
package/theme-style/vft-form.css CHANGED
@@ -1 +1 @@
1
- .vft-form{--vft-form-label-font-size:var(--vft-font-size-base)}.vft-form--label-left .vft-form-item__label{justify-content:flex-start}.vft-form--label-top .vft-form-item{display:block}.vft-form--label-top .vft-form-item .vft-form-item__label{display:block;height:auto;margin-bottom:8px;line-height:22px;text-align:left}.vft-form--inline .vft-form-item{display:inline-flex;margin-right:32px;vertical-align:middle}.vft-form--inline.vft-form--label-top{display:flex;flex-wrap:wrap}.vft-form--inline.vft-form--label-top .vft-form-item{display:block}.vft-form--large.vft-form--label-top .vft-form-item .vft-form-item__label{margin-bottom:12px;line-height:22px}.vft-form--default.vft-form--label-top .vft-form-item .vft-form-item__label{margin-bottom:8px;line-height:22px}.vft-form--small.vft-form--label-top .vft-form-item .vft-form-item__label{margin-bottom:4px;line-height:20px}.vft-form-item{--font-size:14px;display:flex;margin-bottom:18px}.vft-form-item--large{--font-size:14px;margin-bottom:22px;--vft-form-label-font-size:var(--font-size)}.vft-form-item--large .vft-form-item__label{height:40px;line-height:40px}.vft-form-item--large .vft-form-item__content{line-height:40px}.vft-form-item--large .vft-form-item__error{padding-top:4px}.vft-form-item--default{--font-size:14px;margin-bottom:18px;--vft-form-label-font-size:var(--font-size)}.vft-form-item--default .vft-form-item__label{height:32px;line-height:32px}.vft-form-item--default .vft-form-item__content{line-height:32px}.vft-form-item--default .vft-form-item__error{padding-top:2px}.vft-form-item--small{--font-size:12px;margin-bottom:18px;--vft-form-label-font-size:var(--font-size)}.vft-form-item--small .vft-form-item__label{height:24px;line-height:24px}.vft-form-item--small .vft-form-item__content{line-height:24px}.vft-form-item--small .vft-form-item__error{padding-top:2px}.vft-form-item__label-wrap{display:flex}.vft-form-item__label{display:inline-flex;box-sizing:border-box;flex:0 0 auto;align-items:flex-start;justify-content:flex-end;height:32px;padding:0 12px 0 0;color:var(--vft-text-regular-color);font-size:var(--vft-form-label-font-size);line-height:32px}.vft-form-item__content{display:flex;position:relative;flex:1;flex-wrap:wrap;align-items:center;min-width:0;font-size:var(--font-size);line-height:32px}.vft-form-item__content .vft-input-group{vertical-align:top}.vft-form-item__error{position:absolute;top:100%;left:0;padding-top:2px;color:var(--vft-danger-color);font-size:12px;line-height:1}.vft-form-item__error--inline{display:inline-block;position:relative;top:auto;left:auto;margin-left:10px}.vft-form-item.is-required:not(.is-no-asterisk).asterisk-left>.vft-form-item__label-wrap>.vft-form-item__label:before,.vft-form-item.is-required:not(.is-no-asterisk).asterisk-left>.vft-form-item__label:before{content:"*";margin-right:4px;color:var(--vft-danger-color)}.vft-form-item.is-required:not(.is-no-asterisk).asterisk-right>.vft-form-item__label-wrap>.vft-form-item__label:after,.vft-form-item.is-required:not(.is-no-asterisk).asterisk-right>.vft-form-item__label:after{content:"*";margin-left:4px;color:var(--vft-danger-color)}.vft-form-item.is-error .vft-select__wrapper,.vft-form-item.is-error .vft-select__wrapper:focus,.vft-form-item.is-error .vft-textarea__inner,.vft-form-item.is-error .vft-textarea__inner:focus{border:1px solid var(--vft-danger-color)}.vft-form-item.is-error .vft-input__wrapper{border:1px solid var(--vft-danger-color)}.vft-form-item.is-error .vft-input-group__append .vft-input__wrapper,.vft-form-item.is-error .vft-input-group__prepend .vft-input__wrapper{border:1px solid transparent}.vft-form-item.is-error .vft-input__validateIcon{color:var(--vft-danger-color)}.vft-form-item--feedback .vft-input__validateIcon{display:inline-flex}.vft-form-item .vft-form-item{margin-bottom:0}.vft-form-item .vft-input__validateIcon{display:none}
1
+ .vft-form{--vft-form-label-font-size:var(--vft-font-size-base)}.vft-form--label-left .vft-form-item__label{justify-content:flex-start}.vft-form--label-top .vft-form-item{display:block}.vft-form--label-top .vft-form-item .vft-form-item__label{display:block;height:auto;margin-bottom:8px;line-height:22px;text-align:left}.vft-form--inline .vft-form-item{display:inline-flex;margin-right:32px;vertical-align:middle}.vft-form--inline.vft-form--label-top{display:flex;flex-wrap:wrap}.vft-form--inline.vft-form--label-top .vft-form-item{display:block}.vft-form--large.vft-form--label-top .vft-form-item .vft-form-item__label{margin-bottom:12px;line-height:22px}.vft-form--default.vft-form--label-top .vft-form-item .vft-form-item__label{margin-bottom:8px;line-height:22px}.vft-form--small.vft-form--label-top .vft-form-item .vft-form-item__label{margin-bottom:4px;line-height:20px}.vft-form-item{display:flex;--font-size:14px;margin-bottom:18px}.vft-form-item .vft-form-item{margin-bottom:0}.vft-form-item .vft-input__validateIcon{display:none}.vft-form-item--large{--font-size:14px;--vft-form-label-font-size:var(--font-size);margin-bottom:22px}.vft-form-item--large .vft-form-item__label{height:40px;line-height:40px}.vft-form-item--large .vft-form-item__content{line-height:40px}.vft-form-item--large .vft-form-item__error{padding-top:4px}.vft-form-item--default{--font-size:14px;--vft-form-label-font-size:var(--font-size);margin-bottom:18px}.vft-form-item--default .vft-form-item__label{height:32px;line-height:32px}.vft-form-item--default .vft-form-item__content{line-height:32px}.vft-form-item--default .vft-form-item__error{padding-top:2px}.vft-form-item--small{--font-size:12px;--vft-form-label-font-size:var(--font-size);margin-bottom:18px}.vft-form-item--small .vft-form-item__label{height:24px;line-height:24px}.vft-form-item--small .vft-form-item__content{line-height:24px}.vft-form-item--small .vft-form-item__error{padding-top:2px}.vft-form-item--label-left .vft-form-item__label{justify-content:flex-start;text-align:left}.vft-form-item--label-right .vft-form-item__label{justify-content:flex-end;text-align:right}.vft-form-item--label-top{display:block}.vft-form-item--label-top .vft-form-item__label{display:block;width:-moz-fit-content;width:fit-content;height:auto;margin-bottom:8px;line-height:22px;text-align:left}.vft-form-item__label-wrap{display:flex}.vft-form-item__label{display:inline-flex;box-sizing:border-box;flex:0 0 auto;align-items:flex-start;height:32px;padding:0 12px 0 0;color:var(--vft-text-regular-color);font-size:var(--vft-form-label-font-size);line-height:32px}.vft-form-item__content{display:flex;position:relative;flex:1;flex-wrap:wrap;align-items:center;min-width:0;font-size:var(--font-size);line-height:32px}.vft-form-item__content .vft-input-group{vertical-align:top}.vft-form-item__error{position:absolute;top:100%;left:0;padding-top:2px;color:var(--vft-danger-color);font-size:12px;line-height:1}.vft-form-item__error--inline{display:inline-block;position:relative;top:auto;left:auto;margin-left:10px}.vft-form-item.is-required:not(.is-no-asterisk).asterisk-left>.vft-form-item__label-wrap>.vft-form-item__label:before,.vft-form-item.is-required:not(.is-no-asterisk).asterisk-left>.vft-form-item__label:before{content:"*";margin-right:4px;color:var(--vft-danger-color)}.vft-form-item.is-required:not(.is-no-asterisk).asterisk-right>.vft-form-item__label-wrap>.vft-form-item__label:after,.vft-form-item.is-required:not(.is-no-asterisk).asterisk-right>.vft-form-item__label:after{content:"*";margin-left:4px;color:var(--vft-danger-color)}.vft-form-item.is-error .vft-form-item__content .vft-input-tag__wrapper,.vft-form-item.is-error .vft-form-item__content .vft-input-tag__wrapper.is-focus,.vft-form-item.is-error .vft-form-item__content .vft-input-tag__wrapper:focus,.vft-form-item.is-error .vft-form-item__content .vft-input-tag__wrapper:hover,.vft-form-item.is-error .vft-form-item__content .vft-input__wrapper,.vft-form-item.is-error .vft-form-item__content .vft-input__wrapper.is-focus,.vft-form-item.is-error .vft-form-item__content .vft-input__wrapper:focus,.vft-form-item.is-error .vft-form-item__content .vft-input__wrapper:hover,.vft-form-item.is-error .vft-form-item__content .vft-select__wrapper,.vft-form-item.is-error .vft-form-item__content .vft-select__wrapper.is-focus,.vft-form-item.is-error .vft-form-item__content .vft-select__wrapper:focus,.vft-form-item.is-error .vft-form-item__content .vft-select__wrapper:hover,.vft-form-item.is-error .vft-form-item__content .vft-textarea__inner,.vft-form-item.is-error .vft-form-item__content .vft-textarea__inner.is-focus,.vft-form-item.is-error .vft-form-item__content .vft-textarea__inner:focus,.vft-form-item.is-error .vft-form-item__content .vft-textarea__inner:hover{box-shadow:0 0 0 1px var(--vft-danger-color) inset}.vft-form-item.is-error .vft-form-item__content .vft-input-group__append .vft-input__wrapper,.vft-form-item.is-error .vft-form-item__content .vft-input-group__prepend .vft-input__wrapper{box-shadow:0 0 0 1px transparent inset}.vft-form-item.is-error .vft-form-item__content .vft-input-group__append .vft-input__validateIcon,.vft-form-item.is-error .vft-form-item__content .vft-input-group__prepend .vft-input__validateIcon{display:none}.vft-form-item.is-error .vft-form-item__content .vft-input__validateIcon{color:var(--vft-danger-color)}.vft-form-item--feedback .vft-input__validateIcon{display:inline-flex}
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{--vft-input-height:var(--vft-component-size);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::-webkit-scrollbar{z-index:11;width:6px}.vft-input::-webkit-scrollbar:horizontal{height:6px}.vft-input::-webkit-scrollbar-thumb{width:6px;border:0 solid transparent;border-radius:5px;background:#c0c4cc}.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{width:6px;background:0 0}.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__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{width:1em;height:1em;background-color:currentcolor;-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%}.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{width:1em;height:1em;background-color:currentcolor;-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%}.vft-input .icon-hide{width:1em;height:1em;background-color:currentcolor;-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%}.vft-input .icon-view{width:1em;height:1em;background-color:currentcolor;-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%}.vft-input .icon-loading{width:1em;height:1em;background-color:currentcolor;-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%}.vft-input .icon-circle-check{width:1em;height:1em;background-color:currentcolor;-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%}.vft-input .icon-circle-close{width:1em;height:1em;background-color:currentcolor;-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%}.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}
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{--vft-input-height:var(--vft-component-size);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::-webkit-scrollbar{z-index:11;width:6px}.vft-input::-webkit-scrollbar:horizontal{height:6px}.vft-input::-webkit-scrollbar-thumb{width:6px;border:0 solid transparent;border-radius:5px;background:#c0c4cc}.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{width:6px;background:0 0}.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__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{width:1em;height:1em;background-color:currentcolor;-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%}.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{width:1em;height:1em;background-color:currentcolor;-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%}.vft-input .icon-hide{width:1em;height:1em;background-color:currentcolor;-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%}.vft-input .icon-view{width:1em;height:1em;background-color:currentcolor;-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%}.vft-input .icon-loading{width:1em;height:1em;background-color:currentcolor;-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%}.vft-input .icon-circle-check{width:1em;height:1em;background-color:currentcolor;-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%}.vft-input .icon-circle-close{width:1em;height:1em;background-color:currentcolor;-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%}.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}.vft-input--gradient-border{position:relative}.vft-input--gradient-border::before{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;z-index:1;border:2px dashed #4a9eff;border-radius:12px;pointer-events:none}.vft-input--gradient-border::after{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;z-index:0;border-radius:10px;background:linear-gradient(90deg,#4ade80,#60a5fa)}.vft-input--gradient-border .vft-input__wrapper{position:relative;z-index:2;background-color:#3a3a3a;border:none;border-radius:8px}.vft-input--gradient-border .vft-input__inner{background-color:transparent;color:#fff;caret-color:#4ade80}.vft-input--gradient-border .vft-input__inner::-moz-placeholder{color:#9ca3af}.vft-input--gradient-border .vft-input__inner::placeholder{color:#9ca3af}.vft-input--gradient-border .vft-input__inner:focus{box-shadow:0 0 0 2px rgba(74,222,128,.3)}.vft-input--gradient-border:focus-within .vft-input__wrapper{box-shadow:0 0 0 2px rgba(74,222,128,.3)}
package/theme-style/vft-upload.css CHANGED
@@ -1 +1 @@
1
- @charset "UTF-8";.vft-upload{--vft-upload-dragger-padding-horizontal:40px;--vft-upload-dragger-padding-vertical:10px}.vft-upload{outline:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.vft-upload__input{display:none}.vft-upload__tip{margin-top:7px;color:var(--vft-text-regular-color);font-size:12px}.vft-upload--picture-card{box-sizing:border-box;width:var(--vft-upload-picture-card-size);height:var(--vft-upload-picture-card-size);border:1px dashed var(--vft-border-color-darker);border-radius:6px;background-color:var(--vft-fill-color-lighter);vertical-align:top;cursor:pointer;--vft-upload-picture-card-size:148px;display:inline-flex;align-items:center;justify-content:center}.vft-upload--picture-card i{color:var(--vft-text-secondary-color);font-size:28px}.vft-upload--picture-card:hover{border-color:var(--vft-primary-color);color:var(--vft-primary-color)}.vft-upload.is-drag{display:block}.vft-upload iframe{position:absolute;z-index:-1;top:0;left:0;opacity:0}.vft-upload:focus{border-color:var(--vft-primary-color);color:var(--vft-primary-color)}.vft-upload:focus .vft-upload-dragger{border-color:var(--vft-primary-color)}.vft-upload .icon-close{width:1em;height:1em;background-color:currentcolor;-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%}.vft-upload .icon-document{width:1em;height:1em;background-color:currentcolor;-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="M832 384H576V128H192v768h640V384zm-26.496-64L640 154.496V320h165.504zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32zm160 448h384v64H320v-64zm0-192h160v64H320v-64zm0 384h384v64H320v-64z"%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="M832 384H576V128H192v768h640V384zm-26.496-64L640 154.496V320h165.504zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32zm160 448h384v64H320v-64zm0-192h160v64H320v-64zm0 384h384v64H320v-64z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.vft-upload .icon-circle-check{width:1em;height:1em;background-color:currentcolor;-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%}.vft-upload .icon-check{width:1em;height:1em;background-color:currentcolor;-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="M406.656 706.944L195.84 496.256a32 32 0 1 0-45.248 45.248l256 256l512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z"%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="M406.656 706.944L195.84 496.256a32 32 0 1 0-45.248 45.248l256 256l512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.vft-upload .icon-zoom-in{width:1em;height:1em;background-color:currentcolor;-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 704zm-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96z"%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 704zm-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.vft-upload .icon-delete{width:1em;height:1em;background-color:currentcolor;-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="M160 256H96a32 32 0 0 1 0-64h256V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64h-64v672a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32zm192 0a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32z"%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="M160 256H96a32 32 0 0 1 0-64h256V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64h-64v672a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32zm192 0a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.vft-upload-dragger{position:relative;box-sizing:border-box;padding:var(--vft-upload-dragger-padding-horizontal) var(--vft-upload-dragger-padding-vertical);overflow:hidden;border:1px dashed var(--vft-border-color);border-radius:6px;background-color:var(--vft-fill-color-blank);text-align:center;cursor:pointer}.vft-upload-dragger.is-dragover{padding:calc(var(--vft-upload-dragger-padding-horizontal) - 1px) calc(var(--vft-upload-dragger-padding-vertical) - 1px);border:2px dashed var(--vft-primary-color);background-color:var(--vft-primary-color-light-9)}.vft-upload-dragger .vft-icon--upload{margin-bottom:16px;color:var(--vft-text-placeholder-color);font-size:67px;line-height:50px}.vft-upload-dragger+.vft-upload__tip{text-align:center}.vft-upload-dragger~.vft-upload__files{margin-top:7px;padding-top:5px;border-top:var(--vft-border)}.vft-upload-dragger .vft-upload__text{color:var(--vft-text-regular-color);font-size:14px;text-align:center}.vft-upload-dragger .vft-upload__text em{color:var(--vft-primary-color);font-style:normal}.vft-upload-dragger:hover{border-color:var(--vft-primary-color)}.vft-upload-list{position:relative;margin:10px 0 0;padding:0;list-style:none}.vft-upload-list__item{position:relative;box-sizing:border-box;width:100%;margin-bottom:5px;transition:all .5s cubic-bezier(.55,0,.1,1);border-radius:4px;color:var(--vft-text-regular-color);font-size:14px}.vft-upload-list__item.is-success .vft-upload-list__item-status-label{display:inline-flex}.vft-upload-list__item.is-success .vft-upload-list__item-name:focus,.vft-upload-list__item.is-success .vft-upload-list__item-name:hover{color:var(--vft-primary-color);cursor:pointer}.vft-upload-list__item.is-success:focus:not(:hover) .vft-icon--close-tip{display:inline-block}.vft-upload-list__item.is-success:active,.vft-upload-list__item.is-success:not(.focusing):focus{outline-width:0}.vft-upload-list__item.is-success:active .vft-icon--close-tip,.vft-upload-list__item.is-success:not(.focusing):focus .vft-icon--close-tip{display:none}.vft-upload-list__item.is-success:focus .vft-upload-list__item-status-label,.vft-upload-list__item.is-success:hover .vft-upload-list__item-status-label{display:none;opacity:0}.vft-upload-list__item .vft-progress{position:absolute;top:20px;width:100%}.vft-upload-list__item .vft-progress__text{position:absolute;top:-13px;right:0}.vft-upload-list__item .vft-progress-bar{margin-right:0;padding-right:0}.vft-upload-list__item .vft-icon--upload-success{color:var(--vft-success-color)}.vft-upload-list__item .vft-icon--close{display:none;position:absolute;top:50%;right:5px;transform:translateY(-50%);transition:opacity var(--vft-transition-duration);opacity:.75;color:var(--vft-text-regular-color);cursor:pointer}.vft-upload-list__item .vft-icon--close:hover{opacity:1;color:var(--vft-primary-color)}.vft-upload-list__item .vft-icon--close-tip{display:none;position:absolute;top:1px;right:5px;opacity:1;color:var(--vft-primary-color);font-size:12px;font-style:normal;cursor:pointer}.vft-upload-list__item:hover{background-color:var(--vft-fill-color-light)}.vft-upload-list__item:hover .vft-icon--close{display:inline-flex}.vft-upload-list__item:hover .vft-progress__text{display:none}.vft-upload-list__item .vft-upload-list__item-info{display:inline-flex;flex-direction:column;justify-content:center;width:calc(100% - 30px);margin-left:4px;line-height:normal}.vft-upload-list__item-name{display:inline-flex;align-items:center;padding:0 4px;transition:color var(--vft-transition-duration);color:var(--vft-text-regular-color);font-size:var(--vft-font-size-base);text-align:center}.vft-upload-list__item-name .vft-icon{margin-right:6px;color:var(--vft-text-secondary-color)}.vft-upload-list__item-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vft-upload-list__item-status-label{display:none;position:absolute;top:0;right:5px;align-items:center;justify-content:center;height:100%;transition:opacity var(--vft-transition-duration);line-height:inherit}.vft-upload-list__item-delete{display:none;position:absolute;top:0;right:10px;color:var(--vft-text-regular-color);font-size:12px}.vft-upload-list__item-delete:hover{color:var(--vft-primary-color)}.vft-upload-list--picture-card{display:inline-flex;flex-wrap:wrap;margin:0;--vft-upload-list-picture-card-size:148px}.vft-upload-list--picture-card .vft-upload-list__item{display:inline-flex;box-sizing:border-box;width:var(--vft-upload-list-picture-card-size);height:var(--vft-upload-list-picture-card-size);margin:0 8px 8px 0;padding:0;overflow:hidden;border:1px solid var(--vft-border-color);border-radius:6px;background-color:var(--vft-fill-color-blank)}.vft-upload-list--picture-card .vft-upload-list__item .vft-icon--check,.vft-upload-list--picture-card .vft-upload-list__item .vft-icon--circle-check{color:#fff}.vft-upload-list--picture-card .vft-upload-list__item .vft-icon--close{display:none}.vft-upload-list--picture-card .vft-upload-list__item:hover .vft-upload-list__item-status-label{display:block;opacity:0}.vft-upload-list--picture-card .vft-upload-list__item:hover .vft-progress__text{display:block}.vft-upload-list--picture-card .vft-upload-list__item .vft-upload-list__item-name{display:none}.vft-upload-list--picture-card .vft-upload-list__item-thumbnail{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.vft-upload-list--picture-card .vft-upload-list__item-status-label{top:-6px;right:-15px;width:40px;height:24px;transform:rotate(45deg);background:var(--vft-success-color);text-align:center}.vft-upload-list--picture-card .vft-upload-list__item-status-label i{margin-top:11px;transform:rotate(-45deg);font-size:12px}.vft-upload-list--picture-card .vft-upload-list__item-actions{display:inline-flex;position:absolute;top:0;left:0;align-items:center;justify-content:center;width:100%;height:100%;transition:opacity var(--vft-transition-duration);opacity:0;background-color:var(--vft-overlay-color-lighter);color:#fff;font-size:20px;cursor:default}.vft-upload-list--picture-card .vft-upload-list__item-actions span{display:none;cursor:pointer}.vft-upload-list--picture-card .vft-upload-list__item-actions span+span{margin-left:1rem}.vft-upload-list--picture-card .vft-upload-list__item-actions .vft-upload-list__item-delete{position:static;color:inherit;font-size:inherit}.vft-upload-list--picture-card .vft-upload-list__item-actions:hover{opacity:1}.vft-upload-list--picture-card .vft-upload-list__item-actions:hover span{display:inline-flex}.vft-upload-list--picture-card .vft-progress{top:50%;bottom:auto;left:50%;width:126px;transform:translate(-50%,-50%)}.vft-upload-list--picture-card .vft-progress .vft-progress__text{top:50%}.vft-upload-list--picture .vft-upload-list__item{display:flex;z-index:0;box-sizing:border-box;align-items:center;margin-top:10px;padding:10px;overflow:hidden;border:1px solid var(--vft-border-color);border-radius:6px;background-color:var(--vft-fill-color-blank)}.vft-upload-list--picture .vft-upload-list__item .vft-icon--check,.vft-upload-list--picture .vft-upload-list__item .vft-icon--circle-check{color:#fff}.vft-upload-list--picture .vft-upload-list__item:hover .vft-upload-list__item-status-label{display:inline-flex;opacity:0}.vft-upload-list--picture .vft-upload-list__item:hover .vft-progress__text{display:block}.vft-upload-list--picture .vft-upload-list__item.is-success .vft-upload-list__item-name i{display:none}.vft-upload-list--picture .vft-upload-list__item .vft-icon--close{top:5px;transform:translateY(0)}.vft-upload-list--picture .vft-upload-list__item-thumbnail{display:inline-flex;position:relative;z-index:1;align-items:center;justify-content:center;width:70px;height:70px;background-color:var(--vft-color-white);-o-object-fit:contain;object-fit:contain}.vft-upload-list--picture .vft-upload-list__item-status-label{position:absolute;top:-7px;right:-17px;width:46px;height:26px;transform:rotate(45deg);background:var(--vft-success-color);text-align:center}.vft-upload-list--picture .vft-upload-list__item-status-label i{margin-top:12px;transform:rotate(-45deg);font-size:12px}.vft-upload-list--picture .vft-progress{position:relative;top:-7px}.vft-upload-list .icon-close{width:1em;height:1em;background-color:currentcolor;-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%}.vft-upload-list .icon-document{width:1em;height:1em;background-color:currentcolor;-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="M832 384H576V128H192v768h640V384zm-26.496-64L640 154.496V320h165.504zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32zm160 448h384v64H320v-64zm0-192h160v64H320v-64zm0 384h384v64H320v-64z"%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="M832 384H576V128H192v768h640V384zm-26.496-64L640 154.496V320h165.504zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32zm160 448h384v64H320v-64zm0-192h160v64H320v-64zm0 384h384v64H320v-64z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.vft-upload-list .icon-circle-check{width:1em;height:1em;background-color:currentcolor;-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%}.vft-upload-list .icon-check{width:1em;height:1em;background-color:currentcolor;-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="M406.656 706.944L195.84 496.256a32 32 0 1 0-45.248 45.248l256 256l512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z"%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="M406.656 706.944L195.84 496.256a32 32 0 1 0-45.248 45.248l256 256l512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.vft-upload-list .icon-zoom-in{width:1em;height:1em;background-color:currentcolor;-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 704zm-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96z"%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 704zm-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.vft-upload-list .icon-delete{width:1em;height:1em;background-color:currentcolor;-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="M160 256H96a32 32 0 0 1 0-64h256V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64h-64v672a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32zm192 0a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32z"%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="M160 256H96a32 32 0 0 1 0-64h256V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64h-64v672a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32zm192 0a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.vft-upload-cover{position:absolute;z-index:10;top:0;left:0;width:100%;height:100%;overflow:hidden;cursor:default}.vft-upload-cover::after{content:"";display:inline-block;height:100%;vertical-align:middle}.vft-upload-cover__label{top:-6px;right:-15px;width:40px;height:24px;transform:rotate(45deg);background:var(--vft-success-color);text-align:center}.vft-upload-cover__label i{margin-top:11px;transform:rotate(-45deg);color:#fff;font-size:12px}.vft-upload-cover__progress{display:inline-block;position:static;width:243px;vertical-align:middle}.vft-upload-cover__progress+.vft-upload__inner{opacity:0}.vft-upload-cover__content{position:absolute;top:0;left:0;width:100%;height:100%}.vft-upload-cover__interact{position:absolute;bottom:0;left:0;width:100%;height:100%;background-color:var(--vft-overlay-color-light);text-align:center}.vft-upload-cover__interact .btn{display:inline-block;margin-top:60px;transition:var(--vft-transition-md-fade);color:#fff;font-size:14px;vertical-align:middle;cursor:pointer}.vft-upload-cover__interact .btn i{margin-top:0}.vft-upload-cover__interact .btn span{transition:opacity .15s linear;opacity:0}.vft-upload-cover__interact .btn:not(:first-child){margin-left:35px}.vft-upload-cover__interact .btn:hover{transform:translateY(-13px)}.vft-upload-cover__interact .btn:hover span{opacity:1}.vft-upload-cover__interact .btn i{display:block;margin:0 auto 5px;color:#fff;font-size:24px;line-height:inherit}.vft-upload-cover__title{position:absolute;bottom:0;left:0;width:100%;height:36px;margin:0;padding:0 10px;overflow:hidden;background-color:#fff;color:var(--vft-text-primary-color);font-size:14px;font-weight:400;line-height:36px;text-align:left;text-overflow:ellipsis;white-space:nowrap}.vft-upload-cover img{display:block;width:100%;height:100%}.vft-upload-cover+.vft-upload__inner{position:relative;z-index:1;opacity:0}
1
+ @charset "UTF-8";.vft-upload{--vft-upload-dragger-padding-horizontal:40px;--vft-upload-dragger-padding-vertical:10px}.vft-upload{outline:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.vft-upload__input{display:none}.vft-upload__tip{margin-top:7px;color:var(--vft-text-regular-color);font-size:12px}.vft-upload--picture-card{box-sizing:border-box;width:var(--vft-upload-picture-card-size);height:var(--vft-upload-picture-card-size);border:1px dashed var(--vft-border-color-darker);border-radius:6px;background-color:var(--vft-fill-color-lighter);vertical-align:top;cursor:pointer;--vft-upload-picture-card-size:148px;display:inline-flex;align-items:center;justify-content:center}.vft-upload--picture-card i{color:var(--vft-text-secondary-color);font-size:28px}.vft-upload--picture-card:hover{border-color:var(--vft-primary-color);color:var(--vft-primary-color)}.vft-upload.is-drag{display:block}.vft-upload iframe{position:absolute;z-index:-1;top:0;left:0;opacity:0}.vft-upload:focus{border-color:var(--vft-primary-color);color:var(--vft-primary-color)}.vft-upload:focus .vft-upload-dragger{border-color:var(--vft-primary-color)}.vft-upload .icon-close{width:1em;height:1em;background-color:currentcolor;-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%}.vft-upload .icon-document{width:1em;height:1em;background-color:currentcolor;-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="M832 384H576V128H192v768h640V384zm-26.496-64L640 154.496V320h165.504zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32zm160 448h384v64H320v-64zm0-192h160v64H320v-64zm0 384h384v64H320v-64z"%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="M832 384H576V128H192v768h640V384zm-26.496-64L640 154.496V320h165.504zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32zm160 448h384v64H320v-64zm0-192h160v64H320v-64zm0 384h384v64H320v-64z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.vft-upload .icon-circle-check{width:1em;height:1em;background-color:currentcolor;-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%}.vft-upload .icon-check{width:1em;height:1em;background-color:currentcolor;-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="M406.656 706.944L195.84 496.256a32 32 0 1 0-45.248 45.248l256 256l512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z"%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="M406.656 706.944L195.84 496.256a32 32 0 1 0-45.248 45.248l256 256l512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.vft-upload .icon-zoom-in{width:1em;height:1em;background-color:currentcolor;-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 704zm-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96z"%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 704zm-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.vft-upload .icon-delete{width:1em;height:1em;background-color:currentcolor;-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="M160 256H96a32 32 0 0 1 0-64h256V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64h-64v672a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32zm192 0a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32z"%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="M160 256H96a32 32 0 0 1 0-64h256V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64h-64v672a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32zm192 0a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.vft-upload-dragger{position:relative;box-sizing:border-box;padding:var(--vft-upload-dragger-padding-horizontal) var(--vft-upload-dragger-padding-vertical);overflow:hidden;border:1px dashed var(--vft-border-color);border-radius:6px;background-color:var(--vft-fill-color-blank);text-align:center;cursor:pointer}.vft-upload-dragger.is-dragover{padding:calc(var(--vft-upload-dragger-padding-horizontal) - 1px) calc(var(--vft-upload-dragger-padding-vertical) - 1px);border:2px dashed var(--vft-primary-color);background-color:var(--vft-primary-color-light-9)}.vft-upload-dragger .vft-icon--upload{margin-bottom:16px;color:var(--vft-text-placeholder-color);font-size:67px;line-height:50px}.vft-upload-dragger+.vft-upload__tip{text-align:center}.vft-upload-dragger~.vft-upload__files{margin-top:7px;padding-top:5px;border-top:var(--vft-border)}.vft-upload-dragger .vft-upload__text{color:var(--vft-text-regular-color);font-size:14px;text-align:center}.vft-upload-dragger .vft-upload__text em{color:var(--vft-primary-color);font-style:normal}.vft-upload-dragger:hover{border-color:var(--vft-primary-color)}.vft-upload-dragger .icon-arrow-upload{width:1em;height:1em;background-color:currentcolor;-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="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64zm384-578.304V704h-64V247.296L237.248 490.048L192 444.8L508.8 128l316.8 316.8l-45.312 45.248L544 253.696z"%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="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64zm384-578.304V704h-64V247.296L237.248 490.048L192 444.8L508.8 128l316.8 316.8l-45.312 45.248L544 253.696z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.vft-upload-list{position:relative;margin:10px 0 0;padding:0;list-style:none}.vft-upload-list__item{position:relative;box-sizing:border-box;width:100%;margin-bottom:5px;transition:all .5s cubic-bezier(.55,0,.1,1);border-radius:4px;color:var(--vft-text-regular-color);font-size:14px}.vft-upload-list__item.is-success .vft-upload-list__item-status-label{display:inline-flex}.vft-upload-list__item.is-success .vft-upload-list__item-name:focus,.vft-upload-list__item.is-success .vft-upload-list__item-name:hover{color:var(--vft-primary-color);cursor:pointer}.vft-upload-list__item.is-success:focus:not(:hover) .vft-icon--close-tip{display:inline-block}.vft-upload-list__item.is-success:active,.vft-upload-list__item.is-success:not(.focusing):focus{outline-width:0}.vft-upload-list__item.is-success:active .vft-icon--close-tip,.vft-upload-list__item.is-success:not(.focusing):focus .vft-icon--close-tip{display:none}.vft-upload-list__item.is-success:focus .vft-upload-list__item-status-label,.vft-upload-list__item.is-success:hover .vft-upload-list__item-status-label{display:none;opacity:0}.vft-upload-list__item .vft-progress{position:absolute;top:20px;width:100%}.vft-upload-list__item .vft-progress__text{position:absolute;top:-13px;right:0}.vft-upload-list__item .vft-progress-bar{margin-right:0;padding-right:0}.vft-upload-list__item .vft-icon--upload-success{color:var(--vft-success-color)}.vft-upload-list__item .vft-icon--close{display:none;position:absolute;top:50%;right:5px;transform:translateY(-50%);transition:opacity var(--vft-transition-duration);opacity:.75;color:var(--vft-text-regular-color);cursor:pointer}.vft-upload-list__item .vft-icon--close:hover{opacity:1;color:var(--vft-primary-color)}.vft-upload-list__item .vft-icon--close-tip{display:none;position:absolute;top:1px;right:5px;opacity:1;color:var(--vft-primary-color);font-size:12px;font-style:normal;cursor:pointer}.vft-upload-list__item:hover{background-color:var(--vft-fill-color-light)}.vft-upload-list__item:hover .vft-icon--close{display:inline-flex}.vft-upload-list__item:hover .vft-progress__text{display:none}.vft-upload-list__item .vft-upload-list__item-info{display:inline-flex;flex-direction:column;justify-content:center;width:calc(100% - 30px);margin-left:4px;line-height:normal}.vft-upload-list__item-name{display:inline-flex;align-items:center;padding:0 4px;transition:color var(--vft-transition-duration);color:var(--vft-text-regular-color);font-size:var(--vft-font-size-base);text-align:center}.vft-upload-list__item-name .vft-icon{margin-right:6px;color:var(--vft-text-secondary-color)}.vft-upload-list__item-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vft-upload-list__item-status-label{display:none;position:absolute;top:0;right:5px;align-items:center;justify-content:center;height:100%;transition:opacity var(--vft-transition-duration);line-height:inherit}.vft-upload-list__item-delete{display:none;position:absolute;top:0;right:10px;color:var(--vft-text-regular-color);font-size:12px}.vft-upload-list__item-delete:hover{color:var(--vft-primary-color)}.vft-upload-list--picture-card{display:inline-flex;flex-wrap:wrap;margin:0;--vft-upload-list-picture-card-size:148px}.vft-upload-list--picture-card .vft-upload-list__item{display:inline-flex;box-sizing:border-box;width:var(--vft-upload-list-picture-card-size);height:var(--vft-upload-list-picture-card-size);margin:0 8px 8px 0;padding:0;overflow:hidden;border:1px solid var(--vft-border-color);border-radius:6px;background-color:var(--vft-fill-color-blank)}.vft-upload-list--picture-card .vft-upload-list__item .vft-icon--check,.vft-upload-list--picture-card .vft-upload-list__item .vft-icon--circle-check{color:#fff}.vft-upload-list--picture-card .vft-upload-list__item .vft-icon--close{display:none}.vft-upload-list--picture-card .vft-upload-list__item:hover .vft-upload-list__item-status-label{display:block;opacity:0}.vft-upload-list--picture-card .vft-upload-list__item:hover .vft-progress__text{display:block}.vft-upload-list--picture-card .vft-upload-list__item .vft-upload-list__item-name{display:none}.vft-upload-list--picture-card .vft-upload-list__item-thumbnail{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.vft-upload-list--picture-card .vft-upload-list__item-status-label{top:-6px;right:-15px;width:40px;height:24px;transform:rotate(45deg);background:var(--vft-success-color);text-align:center}.vft-upload-list--picture-card .vft-upload-list__item-status-label i{margin-top:11px;transform:rotate(-45deg);font-size:12px}.vft-upload-list--picture-card .vft-upload-list__item-actions{display:inline-flex;position:absolute;top:0;left:0;align-items:center;justify-content:center;width:100%;height:100%;transition:opacity var(--vft-transition-duration);opacity:0;background-color:var(--vft-overlay-color-lighter);color:#fff;font-size:20px;cursor:default}.vft-upload-list--picture-card .vft-upload-list__item-actions span{display:none;cursor:pointer}.vft-upload-list--picture-card .vft-upload-list__item-actions span+span{margin-left:1rem}.vft-upload-list--picture-card .vft-upload-list__item-actions .vft-upload-list__item-delete{position:static;color:inherit;font-size:inherit}.vft-upload-list--picture-card .vft-upload-list__item-actions:hover{opacity:1}.vft-upload-list--picture-card .vft-upload-list__item-actions:hover span{display:inline-flex}.vft-upload-list--picture-card .vft-progress{top:50%;bottom:auto;left:50%;width:126px;transform:translate(-50%,-50%)}.vft-upload-list--picture-card .vft-progress .vft-progress__text{top:50%}.vft-upload-list--picture .vft-upload-list__item{display:flex;z-index:0;box-sizing:border-box;align-items:center;margin-top:10px;padding:10px;overflow:hidden;border:1px solid var(--vft-border-color);border-radius:6px;background-color:var(--vft-fill-color-blank)}.vft-upload-list--picture .vft-upload-list__item .vft-icon--check,.vft-upload-list--picture .vft-upload-list__item .vft-icon--circle-check{color:#fff}.vft-upload-list--picture .vft-upload-list__item:hover .vft-upload-list__item-status-label{display:inline-flex;opacity:0}.vft-upload-list--picture .vft-upload-list__item:hover .vft-progress__text{display:block}.vft-upload-list--picture .vft-upload-list__item.is-success .vft-upload-list__item-name i{display:none}.vft-upload-list--picture .vft-upload-list__item .vft-icon--close{top:5px;transform:translateY(0)}.vft-upload-list--picture .vft-upload-list__item-thumbnail{display:inline-flex;position:relative;z-index:1;align-items:center;justify-content:center;width:70px;height:70px;background-color:var(--vft-color-white);-o-object-fit:contain;object-fit:contain}.vft-upload-list--picture .vft-upload-list__item-status-label{position:absolute;top:-7px;right:-17px;width:46px;height:26px;transform:rotate(45deg);background:var(--vft-success-color);text-align:center}.vft-upload-list--picture .vft-upload-list__item-status-label i{margin-top:12px;transform:rotate(-45deg);font-size:12px}.vft-upload-list--picture .vft-progress{position:relative;top:-7px}.vft-upload-list .icon-close{width:1em;height:1em;background-color:currentcolor;-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%}.vft-upload-list .icon-document{width:1em;height:1em;background-color:currentcolor;-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="M832 384H576V128H192v768h640V384zm-26.496-64L640 154.496V320h165.504zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32zm160 448h384v64H320v-64zm0-192h160v64H320v-64zm0 384h384v64H320v-64z"%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="M832 384H576V128H192v768h640V384zm-26.496-64L640 154.496V320h165.504zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32zm160 448h384v64H320v-64zm0-192h160v64H320v-64zm0 384h384v64H320v-64z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.vft-upload-list .icon-circle-check{width:1em;height:1em;background-color:currentcolor;-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%}.vft-upload-list .icon-check{width:1em;height:1em;background-color:currentcolor;-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="M406.656 706.944L195.84 496.256a32 32 0 1 0-45.248 45.248l256 256l512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z"%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="M406.656 706.944L195.84 496.256a32 32 0 1 0-45.248 45.248l256 256l512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.vft-upload-list .icon-zoom-in{width:1em;height:1em;background-color:currentcolor;-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 704zm-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96z"%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 704zm-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.vft-upload-list .icon-delete{width:1em;height:1em;background-color:currentcolor;-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="M160 256H96a32 32 0 0 1 0-64h256V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64h-64v672a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32zm192 0a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32z"%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="M160 256H96a32 32 0 0 1 0-64h256V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64h-64v672a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32zm192 0a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.vft-upload-cover{position:absolute;z-index:10;top:0;left:0;width:100%;height:100%;overflow:hidden;cursor:default}.vft-upload-cover::after{content:"";display:inline-block;height:100%;vertical-align:middle}.vft-upload-cover__label{top:-6px;right:-15px;width:40px;height:24px;transform:rotate(45deg);background:var(--vft-success-color);text-align:center}.vft-upload-cover__label i{margin-top:11px;transform:rotate(-45deg);color:#fff;font-size:12px}.vft-upload-cover__progress{display:inline-block;position:static;width:243px;vertical-align:middle}.vft-upload-cover__progress+.vft-upload__inner{opacity:0}.vft-upload-cover__content{position:absolute;top:0;left:0;width:100%;height:100%}.vft-upload-cover__interact{position:absolute;bottom:0;left:0;width:100%;height:100%;background-color:var(--vft-overlay-color-light);text-align:center}.vft-upload-cover__interact .btn{display:inline-block;margin-top:60px;transition:var(--vft-transition-md-fade);color:#fff;font-size:14px;vertical-align:middle;cursor:pointer}.vft-upload-cover__interact .btn i{margin-top:0}.vft-upload-cover__interact .btn span{transition:opacity .15s linear;opacity:0}.vft-upload-cover__interact .btn:not(:first-child){margin-left:35px}.vft-upload-cover__interact .btn:hover{transform:translateY(-13px)}.vft-upload-cover__interact .btn:hover span{opacity:1}.vft-upload-cover__interact .btn i{display:block;margin:0 auto 5px;color:#fff;font-size:24px;line-height:inherit}.vft-upload-cover__title{position:absolute;bottom:0;left:0;width:100%;height:36px;margin:0;padding:0 10px;overflow:hidden;background-color:#fff;color:var(--vft-text-primary-color);font-size:14px;font-weight:400;line-height:36px;text-align:left;text-overflow:ellipsis;white-space:nowrap}.vft-upload-cover img{display:block;width:100%;height:100%}.vft-upload-cover+.vft-upload__inner{position:relative;z-index:1;opacity:0}
package/web-types.json CHANGED
@@ -1 +1 @@
1
- {"$schema":"http://json.schemastore.org/web-types","framework":"vue","name":"vft","version":"0.0.322","js-types-syntax":"typescript","description-markup":"markdown","contributions":{"html":{}}}
1
+ {"$schema":"http://json.schemastore.org/web-types","framework":"vue","name":"vft","version":"0.0.324","js-types-syntax":"typescript","description-markup":"markdown","contributions":{"html":{}}}