vft 0.0.322 → 0.0.323

package/theme-style/src/input.scss

@@ -506,3 +506,66 @@ $name: input;
     line-height: 14px;
   }
 }
+
+// 渐变边框样式
+@include b(input) {
+  @include m(gradient-border) {
+    position: relative;
+
+    // 虚线外边框
+    &::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;
+    }
+
+    // 渐变边框效果
+    &::after {
+      content: '';
+      position: absolute;
+      top: -2px;
+      right: -2px;
+      bottom: -2px;
+      left: -2px;
+      z-index: 0;
+      border-radius: 10px;
+      background: linear-gradient(90deg, #4ade80, #60a5fa);
+    }
+
+    .#{$namespace}-input__wrapper {
+      position: relative;
+      z-index: 2;
+      background-color: #3a3a3a;
+      border: none;
+      border-radius: 8px;
+    }
+
+    .#{$namespace}-input__inner {
+      background-color: transparent;
+      color: #ffffff;
+      caret-color: #4ade80;
+
+      &::placeholder {
+        color: #9ca3af;
+      }
+
+      &:focus {
+        box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.3);
+      }
+    }
+
+    // 聚焦时的效果
+    &:focus-within {
+      .#{$namespace}-input__wrapper {
+        box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.3);
+      }
+    }
+  }
+}

package/theme-style/vft-input.css

@@ -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}
+: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/web-types.json

@@ -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":{}}}
+{"$schema":"http://json.schemastore.org/web-types","framework":"vue","name":"vft","version":"0.0.323","js-types-syntax":"typescript","description-markup":"markdown","contributions":{"html":{}}}