vft 0.0.48 → 0.0.50

package/theme-style/src/switch.scss

@@ -0,0 +1,299 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+$switch-height: () !default;
+$switch-height: map.merge(
+  (
+    'large': 40px,
+    'default': 32px,
+    'small': 24px,
+  ),
+  $switch-height
+);
+
+$switch-font-size: () !default;
+$switch-font-size: map.merge(
+  (
+    'large': 14px,
+    'default': 14px,
+    'small': 12px,
+  ),
+  $switch-font-size
+);
+
+$switch-core-border-radius: () !default;
+$switch-core-border-radius: map.merge(
+  (
+    'large': 12px,
+    'default': 10px,
+    'small': 8px,
+  ),
+  $switch-core-border-radius
+);
+
+$switch-core-width: () !default;
+$switch-core-width: map.merge(
+  (
+    'large': 50px,
+    'default': 40px,
+    'small': 30px,
+  ),
+  $switch-core-width
+);
+
+$switch-core-height: () !default;
+$switch-core-height: map.merge(
+  (
+    'large': 24px,
+    'default': 20px,
+    'small': 16px,
+  ),
+  $switch-core-height
+);
+
+$switch-button-size: () !default;
+$switch-button-size: map.merge(
+  (
+    'large': 20px,
+    'default': 16px,
+    'small': 12px,
+  ),
+  $switch-button-size
+);
+
+$switch-content-padding: () !default;
+$switch-content-padding: map.merge(
+  (
+    'large': 6px,
+    'default': 4px,
+    'small': 2px,
+  ),
+  $switch-content-padding
+);
+
+@include b(switch) {
+  @include set-component-css-var('switch', $switch);
+}
+
+@include b(switch) {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  font-size: map.get($switch-font-size, 'default');
+  line-height: map.get($switch-core-height, 'default');
+  height: map.get($switch-height, 'default');
+  vertical-align: middle;
+
+  @include when(disabled) {
+    & .#{$namespace}-switch__core,
+    & .#{$namespace}-switch__label {
+      cursor: not-allowed;
+    }
+  }
+
+  @include e(label) {
+    transition: getCssVar('transition-duration-fast');
+    height: map.get($switch-core-height, 'default');
+    display: inline-block;
+    font-size: map.get($switch-font-size, 'default');
+    font-weight: 500;
+    cursor: pointer;
+    vertical-align: middle;
+    color: getCssVar('text', 'primary-color');
+
+    @include when(active) {
+      color: getCssVar('primary-color');
+    }
+
+    @include m(left) {
+      margin-right: 10px;
+    }
+    @include m(right) {
+      margin-left: 10px;
+    }
+    & * {
+      line-height: 1;
+      font-size: map.get($switch-font-size, 'default');
+      display: inline-block;
+    }
+    .#{$namespace}-icon {
+      height: inherit;
+
+      svg {
+        vertical-align: middle;
+      }
+    }
+  }
+
+  @include e(input) {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    margin: 0;
+
+    &:focus-visible {
+      & ~ .#{$namespace}-switch__core {
+        outline: 2px solid getCssVar('switch-on-color');
+        outline-offset: 1px;
+      }
+    }
+  }
+
+  @include e(core) {
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+    min-width: map.get($switch-core-width, 'default');
+    height: map.get($switch-core-height, 'default');
+    border: 1px solid
+      var(
+        #{getCssVarName('switch-border-color')},
+        #{getCssVar('switch-off-color')}
+      );
+    outline: none;
+    border-radius: map.get($switch-core-border-radius, 'default');
+    box-sizing: border-box;
+    background: getCssVar('switch-off-color');
+    cursor: pointer;
+    transition: border-color getCssVar('transition-duration'),
+      background-color getCssVar('transition-duration');
+
+    .#{$namespace}-switch__inner {
+      width: 100%;
+      transition: all getCssVar('transition-duration');
+      height: map.get($switch-button-size, 'default');
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      overflow: hidden;
+
+      i,
+      .is-text {
+        font-size: 12px;
+        color: getCssVar('color-white');
+        user-select: none;
+        @include line-clamp;
+      }
+      padding: 0 #{map.get($switch-content-padding, 'default')} 0 calc(#{map.get(
+              $switch-button-size,
+              'default'
+            )} + 2px);
+    }
+
+    .#{$namespace}-switch__action {
+      position: absolute;
+      left: 1px;
+      border-radius: getCssVar('border-radius-circle');
+      transition: all getCssVar('transition-duration');
+      width: map.get($switch-button-size, 'default');
+      height: map.get($switch-button-size, 'default');
+      background-color: getCssVar('color-white');
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: getCssVar('switch-off-color');
+    }
+  }
+
+  @include when(checked) {
+    .#{$namespace}-switch__core {
+      border-color: var(
+        #{getCssVarName('switch-border-color')},
+        #{getCssVar('switch-on-color')}
+      );
+      background-color: getCssVar('switch-on-color');
+
+      .#{$namespace}-switch__action {
+        left: calc(100% - #{map.get($switch-button-size, 'default') + 1px});
+        color: getCssVar('switch-on-color');
+      }
+
+      .#{$namespace}-switch__inner {
+        padding: 0 calc(#{map.get($switch-button-size, 'default')} + 2px) 0 #{map.get(
+            $switch-content-padding,
+            'default'
+          )};
+      }
+    }
+  }
+
+  @include when(disabled) {
+    opacity: 0.6;
+  }
+
+  @include m(wide) {
+    .#{$namespace}-switch__label {
+      &.#{$namespace}-switch__label--left {
+        span {
+          left: 10px;
+        }
+      }
+
+      &.#{$namespace}-switch__label--right {
+        span {
+          right: 10px;
+        }
+      }
+    }
+  }
+
+  & .label-fade-enter-from,
+  & .label-fade-leave-active {
+    opacity: 0;
+  }
+
+  @each $size in (large, small) {
+    @include m($size) {
+      font-size: map.get($switch-font-size, $size);
+      line-height: map.get($switch-core-height, $size);
+      height: map.get($switch-height, $size);
+
+      @include e(label) {
+        height: map.get($switch-core-height, $size);
+        font-size: map.get($switch-font-size, $size);
+
+        & * {
+          font-size: map.get($switch-font-size, $size);
+        }
+      }
+
+      @include e(core) {
+        min-width: map.get($switch-core-width, $size);
+        height: map.get($switch-core-height, $size);
+        border-radius: map.get($switch-core-border-radius, $size);
+
+        .#{$namespace}-switch__inner {
+          height: map.get($switch-button-size, $size);
+          padding: 0 #{map.get($switch-content-padding, $size)} 0 calc(#{map.get(
+                  $switch-button-size,
+                  $size
+                )} + 2px);
+        }
+
+        .#{$namespace}-switch__action {
+          width: map.get($switch-button-size, $size);
+          height: map.get($switch-button-size, $size);
+        }
+      }
+
+      @include when(checked) {
+        .#{$namespace}-switch__core {
+          .#{$namespace}-switch__action {
+            left: calc(100% - #{map.get($switch-button-size, $size) + 1px});
+          }
+
+          .#{$namespace}-switch__inner {
+            padding: 0 calc(#{map.get($switch-button-size, $size)} + 2px) 0 #{map.get(
+                $switch-content-padding,
+                $size
+              )};
+          }
+        }
+      }
+    }
+  }
+}

package/theme-style/src/table.scss

@@ -0,0 +1,167 @@
+@use 'common/var' as *;
+@use 'mixins/mixins' as *;
+
+$name: table;
+
+@function getCompCssVar($value) {
+  @return getCssVar($name, $value);
+}
+
+@include b($name) {
+  .vxe-table {
+    .vxe-table--fixed-left-wrapper {
+      z-index: 10;
+      overflow: unset;
+
+      .vxe-table--body-wrapper {
+        width: 100%;
+        overflow-y: hidden;
+      }
+    }
+
+    .vxe-table--header-wrapper {
+      background-color: #f3fbfe;
+      // background-color: rgb(248, 250, 255);
+
+      position: sticky !important;
+      top: 0px;
+      z-index: 10;
+      overflow: hidden;
+    }
+
+    .vxe-header--column {
+      background-color: #f3fbfe;
+      color: rgba(0, 0, 0, 0.85);
+      user-select: none;
+      font-weight: 500;
+      line-height: 17px;
+      font-size: 12px;
+      padding: 8px 0;
+
+      &.is--sortable {
+        cursor: pointer;
+      }
+    }
+
+    .vxe-table--render-default .vxe-body--column.col--ellipsis:not(.col--actived) > .vxe-cell,
+    .vxe-table--render-default .vxe-footer--column.col--ellipsis:not(.col--actived) > .vxe-cell,
+    .vxe-table--render-default .vxe-header--column.col--ellipsis:not(.col--actived) > .vxe-cell {
+      white-space: normal;
+      max-height: inherit;
+    }
+
+    .vxe-cell {
+      white-space: normal;
+    }
+
+    .vxe-table--render-default .vxe-body--column.cellClass {
+      padding: 0;
+      height: 44px;
+      font-size: 13px;
+      line-height: 20px;
+      color: #111;
+      font-weight: 400;
+
+      .vxe-cell--label {
+        @include line-clamp(2);
+      }
+
+      .vxe-cell {
+        @include line-clamp(2);
+      }
+
+      .line-clamp {
+        @include line-clamp(2);
+      }
+
+      a {
+        color: getCssVar('primary-color');
+        font-size: 13px;
+        cursor: pointer;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+
+      em {
+        color: #fe3a2f;
+        font-style: normal;
+      }
+    }
+
+    .vxe-sort--asc-btn,
+    .vxe-sort--desc-btn {
+      pointer-events: none;
+    }
+
+    .remark {
+      color: #111;
+      position: relative;
+      cursor: pointer;
+
+      &::after {
+        content: '*';
+        color: #f64c4c;
+        position: absolute;
+        font-size: 18px;
+        right: -8px;
+        top: 0;
+      }
+    }
+  }
+
+  .vxe-grid--bottom-wrapper {
+    position: sticky;
+    bottom: 0;
+    z-index: 3000;
+  }
+
+  @include e(sticky-scroll-warpper) {
+    height: 10px;
+    width: 100%;
+    overflow-x: auto;
+    border-radius: 4px;
+    background-color: transparent;
+    border-right: 1px solid #ebeef5;
+    box-sizing: content-box;
+    z-index: 9;
+    display: block;
+  }
+
+  @include e(sticky-scroll-bar) {
+    height: 1px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  @include m(pager-bottom-right) {
+    margin-top: 10px;
+    justify-content: flex-end;
+    .btn-next {
+      margin-right: 0!important;
+    }
+  }
+
+  @include m(pager-bottom-left) {
+    margin-top: 10px;
+    justify-content: flex-start;
+    .btn-prev {
+      margin-left: 0 !important;
+    }
+  }
+  @include m(pager-top-right) {
+    margin-bottom: 10px;
+    justify-content: flex-end;
+    .btn-next {
+      margin-right: 0 !important;
+    }
+  }
+  @include m(pager-top-left) {
+    margin-bottom: 10px;
+    justify-content: flex-start;
+    .btn-prev {
+      margin-left: 0 !important;
+    }
+  }
+}

package/theme-style/src/virtual-list.scss

@@ -0,0 +1,40 @@
+@use 'mixins/mixins' as *;
+@use 'common/var' as *;
+
+@mixin showScrollbar {
+  @include b(virtual-scrollbar) {
+    opacity: 1;
+  }
+}
+
+@include b(vl) {
+  @include e(wrapper) {
+    position: relative;
+    &:hover {
+      @include showScrollbar();
+    }
+    &.always-on {
+      @include showScrollbar();
+    }
+  }
+}
+
+.#{$namespace}-vl__window {
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+@include b(virtual-scrollbar) {
+  opacity: 0;
+  transition: opacity 340ms ease-out;
+  &.always-on {
+    opacity: 1;
+  }
+}
+
+@include b(vg) {
+  @include e(wrapper) {
+    position: relative;
+  }
+}

package/theme-style/vft-button-group.css

@@ -0,0 +1 @@
+.vft-button-group{display:inline-block;vertical-align:middle}.vft-button-group::after,.vft-button-group::before{display:table;content:""}.vft-button-group::after{clear:both}.vft-button-group>.vft-button{float:left;position:relative}.vft-button-group>.vft-button+.vft-button{margin-left:0}.vft-button-group>.vft-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.vft-button-group>.vft-button:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.vft-button-group>.vft-button:first-child:last-child{border-top-right-radius:var(--vft-border-radius-base);border-bottom-right-radius:var(--vft-border-radius-base);border-top-left-radius:var(--vft-border-radius-base);border-bottom-left-radius:var(--vft-border-radius-base)}.vft-button-group>.vft-button:first-child:last-child.is-round{border-radius:var(--vft-border-radius-round)}.vft-button-group>.vft-button:first-child:last-child.is-circle{border-radius:50%}.vft-button-group>.vft-button:not(:first-child):not(:last-child){border-radius:0}.vft-button-group>.vft-button:not(:last-child){margin-right:-1px}.vft-button-group>.vft-button:active,.vft-button-group>.vft-button:focus,.vft-button-group>.vft-button:hover{z-index:1}.vft-button-group>.vft-button.is-active{z-index:1}.vft-button-group>.vft-dropdown>.vft-button{border-top-left-radius:0;border-bottom-left-radius:0;border-left-color:var(--vft-button-divide-border-color)}.vft-button-group .vft-button--primary:first-child{border-right-color:var(--vft-button-divide-border-color)}.vft-button-group .vft-button--primary:last-child{border-left-color:var(--vft-button-divide-border-color)}.vft-button-group .vft-button--primary:not(:first-child):not(:last-child){border-left-color:var(--vft-button-divide-border-color);border-right-color:var(--vft-button-divide-border-color)}.vft-button-group .vft-button--success:first-child{border-right-color:var(--vft-button-divide-border-color)}.vft-button-group .vft-button--success:last-child{border-left-color:var(--vft-button-divide-border-color)}.vft-button-group .vft-button--success:not(:first-child):not(:last-child){border-left-color:var(--vft-button-divide-border-color);border-right-color:var(--vft-button-divide-border-color)}.vft-button-group .vft-button--warning:first-child{border-right-color:var(--vft-button-divide-border-color)}.vft-button-group .vft-button--warning:last-child{border-left-color:var(--vft-button-divide-border-color)}.vft-button-group .vft-button--warning:not(:first-child):not(:last-child){border-left-color:var(--vft-button-divide-border-color);border-right-color:var(--vft-button-divide-border-color)}.vft-button-group .vft-button--danger:first-child{border-right-color:var(--vft-button-divide-border-color)}.vft-button-group .vft-button--danger:last-child{border-left-color:var(--vft-button-divide-border-color)}.vft-button-group .vft-button--danger:not(:first-child):not(:last-child){border-left-color:var(--vft-button-divide-border-color);border-right-color:var(--vft-button-divide-border-color)}.vft-button-group .vft-button--info:first-child{border-right-color:var(--vft-button-divide-border-color)}.vft-button-group .vft-button--info:last-child{border-left-color:var(--vft-button-divide-border-color)}.vft-button-group .vft-button--info:not(:first-child):not(:last-child){border-left-color:var(--vft-button-divide-border-color);border-right-color:var(--vft-button-divide-border-color)}

package/theme-style/vft-button.css

@@ -0,0 +1 @@
+.vft-button{--vft-button-font-weight:var(--vft-font-weight-primary);--vft-button-border-color:var(--vft-border-color);--vft-button-bg-color:var(--vft-fill-color-blank);--vft-button-text-color:var(--vft-text-regular-color);--vft-button-disabled-text-color:var(--vft-text-disabled-color);--vft-button-disabled-bg-color:var(--vft-fill-color-blank);--vft-button-disabled-border-color:var(--vft-border-color-light);--vft-button-divide-border-color:rgba(255, 255, 255, 0.5);--vft-button-hover-text-color:var(--vft-primary-color);--vft-button-hover-bg-color:var(--vft-primary-color-light-9);--vft-button-hover-border-color:var(--vft-primary-color-light-7);--vft-button-active-text-color:var(--vft-button-hover-text-color);--vft-button-active-border-color:var(--vft-primary-color);--vft-button-active-bg-color:var(--vft-button-hover-bg-color);--vft-button-outline-color:var(--vft-primary-color-light-5);--vft-button-hover-link-text-color:var(--vft-info-color);--vft-button-active-color:var(--vft-text-primary-color)}.vft-button{display:inline-flex;justify-content:center;align-items:center;line-height:1;height:32px;white-space:nowrap;cursor:pointer;color:var(--vft-button-text-color);text-align:center;box-sizing:border-box;outline:0;transition:.1s;font-weight:var(--vft-button-font-weight);-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;-webkit-appearance:none;background-color:var(--vft-button-bg-color);border:var(--vft-border);border-color:var(--vft-button-border-color);padding:8px 15px;font-size:var(--vft-font-size-base);border-radius:var(--vft-border-radius-base)}.vft-button:focus,.vft-button:hover{color:var(--vft-button-hover-text-color);border-color:var(--vft-button-hover-border-color);background-color:var(--vft-button-hover-bg-color);outline:0}.vft-button:active{color:var(--vft-button-active-text-color);border-color:var(--vft-button-active-border-color);background-color:var(--vft-button-active-bg-color);outline:0}.vft-button:focus-visible{outline:2px solid var(--vft-button-outline-color);outline-offset:1px}.vft-button>span{display:inline-flex;align-items:center}.vft-button+.vft-button{margin-left:12px}.vft-button.is-round{padding:8px 15px}.vft-button::-moz-focus-inner{border:0}.vft-button [class*=vft-icon]+span{margin-left:6px}.vft-button [class*=vft-icon] svg{vertical-align:bottom}.vft-button.is-block{width:100%}.vft-button.is-plain{--vft-button-hover-text-color:var(--vft-primary-color);--vft-button-hover-bg-color:var(--vft-fill-color-blank);--vft-button-hover-border-color:var(--vft-primary-color)}.vft-button.is-active{color:var(--vft-button-active-text-color);border-color:var(--vft-button-active-border-color);background-color:var(--vft-button-active-bg-color);outline:0}.vft-button.is-disabled,.vft-button.is-disabled:focus,.vft-button.is-disabled:hover{color:var(--vft-button-disabled-text-color);cursor:not-allowed;background-image:none;background-color:var(--vft-button-disabled-bg-color);border-color:var(--vft-button-disabled-border-color)}.vft-button.is-loading{position:relative;pointer-events:none}.vft-button.is-loading:before{z-index:1;pointer-events:none;content:"";position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;border-radius:inherit;background-color:var(--vft-mask-color-extra-light)}.vft-button.is-loading i{margin-right:2px}.vft-button.is-round{border-radius:var(--vft-border-radius-round)}.vft-button.is-circle{border-radius:50%;padding:8px}.vft-button.is-text{color:var(--vft-button-text-color);border:0 solid transparent;background-color:transparent}.vft-button.is-text.is-disabled{color:var(--vft-button-text-disabled-color);background-color:transparent!important}.vft-button.is-text:not(.is-disabled):focus,.vft-button.is-text:not(.is-disabled):hover{background-color:var(--vft-fill-color-light)}.vft-button.is-text:not(.is-disabled):focus-visible{outline:2px solid var(--vft-button-outline-color);outline-offset:1px}.vft-button.is-text:not(.is-disabled):active{background-color:var(--vft-fill-color)}.vft-button.is-text:not(.is-disabled).is-has-bg{background-color:var(--vft-fill-color-light)}.vft-button.is-text:not(.is-disabled).is-has-bg:focus,.vft-button.is-text:not(.is-disabled).is-has-bg:hover{background-color:var(--vft-fill-color)}.vft-button.is-text:not(.is-disabled).is-has-bg:active{background-color:var(--vft-fill-color-dark)}.vft-button__text--expand{letter-spacing:.3em;margin-right:-.3em}.vft-button.is-link{border-color:transparent;color:var(--vft-button-text-color);background:0 0;padding:2px;height:auto}.vft-button.is-link:focus,.vft-button.is-link:hover{color:var(--vft-button-hover-link-text-color)}.vft-button.is-link.is-disabled{color:var(--vft-button-disabled-text-color);background-color:transparent!important;border-color:transparent!important}.vft-button.is-link:not(.is-disabled):focus,.vft-button.is-link:not(.is-disabled):hover{border-color:transparent;background-color:transparent}.vft-button.is-link:not(.is-disabled):active{color:var(--vft-button-active-color);border-color:transparent;background-color:transparent}.vft-button--text{border-color:transparent;background:0 0;color:var(--vft-primary-color);padding-left:0;padding-right:0}.vft-button--text.is-disabled{color:var(--vft-button-disabled-text-color);background-color:transparent!important;border-color:transparent!important}.vft-button--text:not(.is-disabled):focus,.vft-button--text:not(.is-disabled):hover{color:var(--vft-primary-color-light-3);border-color:transparent;background-color:transparent}.vft-button--text:not(.is-disabled):active{color:var(--vft-primary-color-dark-2);border-color:transparent;background-color:transparent}.vft-button__link--expand{letter-spacing:.3em;margin-right:-.3em}.vft-button--primary{--vft-button-text-color:var(--vft-color-white);--vft-button-bg-color:var(--vft-primary-color);--vft-button-border-color:var(--vft-primary-color);--vft-button-outline-color:var(--vft-primary-color-light-5);--vft-button-active-color:var(--vft-primary-color-dark-2);--vft-button-hover-text-color:var(--vft-color-white);--vft-button-hover-link-text-color:var(--vft-primary-color-light-5);--vft-button-hover-bg-color:var(--vft-primary-color-light-3);--vft-button-hover-border-color:var(--vft-primary-color-light-3);--vft-button-active-bg-color:var(--vft-primary-color-dark-2);--vft-button-active-border-color:var(--vft-primary-color-dark-2);--vft-button-disabled-text-color:var(--vft-color-white);--vft-button-disabled-bg-color:var(--vft-primary-color-light-5);--vft-button-disabled-border-color:var(--vft-primary-color-light-5)}.vft-button--primary.is-link,.vft-button--primary.is-plain,.vft-button--primary.is-text{--vft-button-text-color:var(--vft-primary-color);--vft-button-bg-color:var(--vft-primary-color-light-9);--vft-button-border-color:var(--vft-primary-color-light-5);--vft-button-hover-text-color:var(--vft-color-white);--vft-button-hover-bg-color:var(--vft-primary-color);--vft-button-hover-border-color:var(--vft-primary-color);--vft-button-active-text-color:var(--vft-color-white)}.vft-button--primary.is-link.is-disabled,.vft-button--primary.is-link.is-disabled:active,.vft-button--primary.is-link.is-disabled:focus,.vft-button--primary.is-link.is-disabled:hover,.vft-button--primary.is-plain.is-disabled,.vft-button--primary.is-plain.is-disabled:active,.vft-button--primary.is-plain.is-disabled:focus,.vft-button--primary.is-plain.is-disabled:hover,.vft-button--primary.is-text.is-disabled,.vft-button--primary.is-text.is-disabled:active,.vft-button--primary.is-text.is-disabled:focus,.vft-button--primary.is-text.is-disabled:hover{color:var(--vft-primary-color-light-5);background-color:var(--vft-primary-color-light-9);border-color:var(--vft-primary-color-light-8)}.vft-button--success{--vft-button-text-color:var(--vft-color-white);--vft-button-bg-color:var(--vft-success-color);--vft-button-border-color:var(--vft-success-color);--vft-button-outline-color:var(--vft-success-color-light-5);--vft-button-active-color:var(--vft-success-color-dark-2);--vft-button-hover-text-color:var(--vft-color-white);--vft-button-hover-link-text-color:var(--vft-success-color-light-5);--vft-button-hover-bg-color:var(--vft-success-color-light-3);--vft-button-hover-border-color:var(--vft-success-color-light-3);--vft-button-active-bg-color:var(--vft-success-color-dark-2);--vft-button-active-border-color:var(--vft-success-color-dark-2);--vft-button-disabled-text-color:var(--vft-color-white);--vft-button-disabled-bg-color:var(--vft-success-color-light-5);--vft-button-disabled-border-color:var(--vft-success-color-light-5)}.vft-button--success.is-link,.vft-button--success.is-plain,.vft-button--success.is-text{--vft-button-text-color:var(--vft-success-color);--vft-button-bg-color:var(--vft-success-color-light-9);--vft-button-border-color:var(--vft-success-color-light-5);--vft-button-hover-text-color:var(--vft-color-white);--vft-button-hover-bg-color:var(--vft-success-color);--vft-button-hover-border-color:var(--vft-success-color);--vft-button-active-text-color:var(--vft-color-white)}.vft-button--success.is-link.is-disabled,.vft-button--success.is-link.is-disabled:active,.vft-button--success.is-link.is-disabled:focus,.vft-button--success.is-link.is-disabled:hover,.vft-button--success.is-plain.is-disabled,.vft-button--success.is-plain.is-disabled:active,.vft-button--success.is-plain.is-disabled:focus,.vft-button--success.is-plain.is-disabled:hover,.vft-button--success.is-text.is-disabled,.vft-button--success.is-text.is-disabled:active,.vft-button--success.is-text.is-disabled:focus,.vft-button--success.is-text.is-disabled:hover{color:var(--vft-success-color-light-5);background-color:var(--vft-success-color-light-9);border-color:var(--vft-success-color-light-8)}.vft-button--warning{--vft-button-text-color:var(--vft-color-white);--vft-button-bg-color:var(--vft-warning-color);--vft-button-border-color:var(--vft-warning-color);--vft-button-outline-color:var(--vft-warning-color-light-5);--vft-button-active-color:var(--vft-warning-color-dark-2);--vft-button-hover-text-color:var(--vft-color-white);--vft-button-hover-link-text-color:var(--vft-warning-color-light-5);--vft-button-hover-bg-color:var(--vft-warning-color-light-3);--vft-button-hover-border-color:var(--vft-warning-color-light-3);--vft-button-active-bg-color:var(--vft-warning-color-dark-2);--vft-button-active-border-color:var(--vft-warning-color-dark-2);--vft-button-disabled-text-color:var(--vft-color-white);--vft-button-disabled-bg-color:var(--vft-warning-color-light-5);--vft-button-disabled-border-color:var(--vft-warning-color-light-5)}.vft-button--warning.is-link,.vft-button--warning.is-plain,.vft-button--warning.is-text{--vft-button-text-color:var(--vft-warning-color);--vft-button-bg-color:var(--vft-warning-color-light-9);--vft-button-border-color:var(--vft-warning-color-light-5);--vft-button-hover-text-color:var(--vft-color-white);--vft-button-hover-bg-color:var(--vft-warning-color);--vft-button-hover-border-color:var(--vft-warning-color);--vft-button-active-text-color:var(--vft-color-white)}.vft-button--warning.is-link.is-disabled,.vft-button--warning.is-link.is-disabled:active,.vft-button--warning.is-link.is-disabled:focus,.vft-button--warning.is-link.is-disabled:hover,.vft-button--warning.is-plain.is-disabled,.vft-button--warning.is-plain.is-disabled:active,.vft-button--warning.is-plain.is-disabled:focus,.vft-button--warning.is-plain.is-disabled:hover,.vft-button--warning.is-text.is-disabled,.vft-button--warning.is-text.is-disabled:active,.vft-button--warning.is-text.is-disabled:focus,.vft-button--warning.is-text.is-disabled:hover{color:var(--vft-warning-color-light-5);background-color:var(--vft-warning-color-light-9);border-color:var(--vft-warning-color-light-8)}.vft-button--danger{--vft-button-text-color:var(--vft-color-white);--vft-button-bg-color:var(--vft-danger-color);--vft-button-border-color:var(--vft-danger-color);--vft-button-outline-color:var(--vft-danger-color-light-5);--vft-button-active-color:var(--vft-danger-color-dark-2);--vft-button-hover-text-color:var(--vft-color-white);--vft-button-hover-link-text-color:var(--vft-danger-color-light-5);--vft-button-hover-bg-color:var(--vft-danger-color-light-3);--vft-button-hover-border-color:var(--vft-danger-color-light-3);--vft-button-active-bg-color:var(--vft-danger-color-dark-2);--vft-button-active-border-color:var(--vft-danger-color-dark-2);--vft-button-disabled-text-color:var(--vft-color-white);--vft-button-disabled-bg-color:var(--vft-danger-color-light-5);--vft-button-disabled-border-color:var(--vft-danger-color-light-5)}.vft-button--danger.is-link,.vft-button--danger.is-plain,.vft-button--danger.is-text{--vft-button-text-color:var(--vft-danger-color);--vft-button-bg-color:var(--vft-danger-color-light-9);--vft-button-border-color:var(--vft-danger-color-light-5);--vft-button-hover-text-color:var(--vft-color-white);--vft-button-hover-bg-color:var(--vft-danger-color);--vft-button-hover-border-color:var(--vft-danger-color);--vft-button-active-text-color:var(--vft-color-white)}.vft-button--danger.is-link.is-disabled,.vft-button--danger.is-link.is-disabled:active,.vft-button--danger.is-link.is-disabled:focus,.vft-button--danger.is-link.is-disabled:hover,.vft-button--danger.is-plain.is-disabled,.vft-button--danger.is-plain.is-disabled:active,.vft-button--danger.is-plain.is-disabled:focus,.vft-button--danger.is-plain.is-disabled:hover,.vft-button--danger.is-text.is-disabled,.vft-button--danger.is-text.is-disabled:active,.vft-button--danger.is-text.is-disabled:focus,.vft-button--danger.is-text.is-disabled:hover{color:var(--vft-danger-color-light-5);background-color:var(--vft-danger-color-light-9);border-color:var(--vft-danger-color-light-8)}.vft-button--info{--vft-button-text-color:var(--vft-color-white);--vft-button-bg-color:var(--vft-info-color);--vft-button-border-color:var(--vft-info-color);--vft-button-outline-color:var(--vft-info-color-light-5);--vft-button-active-color:var(--vft-info-color-dark-2);--vft-button-hover-text-color:var(--vft-color-white);--vft-button-hover-link-text-color:var(--vft-info-color-light-5);--vft-button-hover-bg-color:var(--vft-info-color-light-3);--vft-button-hover-border-color:var(--vft-info-color-light-3);--vft-button-active-bg-color:var(--vft-info-color-dark-2);--vft-button-active-border-color:var(--vft-info-color-dark-2);--vft-button-disabled-text-color:var(--vft-color-white);--vft-button-disabled-bg-color:var(--vft-info-color-light-5);--vft-button-disabled-border-color:var(--vft-info-color-light-5)}.vft-button--info.is-link,.vft-button--info.is-plain,.vft-button--info.is-text{--vft-button-text-color:var(--vft-info-color);--vft-button-bg-color:var(--vft-info-color-light-9);--vft-button-border-color:var(--vft-info-color-light-5);--vft-button-hover-text-color:var(--vft-color-white);--vft-button-hover-bg-color:var(--vft-info-color);--vft-button-hover-border-color:var(--vft-info-color);--vft-button-active-text-color:var(--vft-color-white)}.vft-button--info.is-link.is-disabled,.vft-button--info.is-link.is-disabled:active,.vft-button--info.is-link.is-disabled:focus,.vft-button--info.is-link.is-disabled:hover,.vft-button--info.is-plain.is-disabled,.vft-button--info.is-plain.is-disabled:active,.vft-button--info.is-plain.is-disabled:focus,.vft-button--info.is-plain.is-disabled:hover,.vft-button--info.is-text.is-disabled,.vft-button--info.is-text.is-disabled:active,.vft-button--info.is-text.is-disabled:focus,.vft-button--info.is-text.is-disabled:hover{color:var(--vft-info-color-light-5);background-color:var(--vft-info-color-light-9);border-color:var(--vft-info-color-light-8)}.vft-button--large{--vft-button-size:40px;height:var(--vft-button-size);padding:12px 19px;font-size:var(--vft-font-size-base);border-radius:var(--vft-border-radius-base)}.vft-button--large [class*=vft-icon]+span{margin-left:8px}.vft-button--large.is-round{padding:12px 19px}.vft-button--large.is-circle{width:var(--vft-button-size);padding:12px}.vft-button--small{--vft-button-size:24px;height:var(--vft-button-size);padding:5px 11px;font-size:12px;border-radius:calc(var(--vft-border-radius-base) - 1px)}.vft-button--small [class*=vft-icon]+span{margin-left:4px}.vft-button--small.is-round{padding:5px 11px}.vft-button--small.is-circle{width:var(--vft-button-size);padding:5px}

package/theme-style/vft-checkbox-button.css

@@ -0,0 +1 @@
+.vft-checkbox-button{--vft-checkbox-button-checked-bg-color:var(--vft-primary-color);--vft-checkbox-button-checked-text-color:var(--vft-color-white);--vft-checkbox-button-checked-border-color:var(--vft-primary-color)}.vft-checkbox-button{position:relative;display:inline-block}.vft-checkbox-button__inner{display:inline-block;line-height:1;font-weight:var(--vft-checkbox-font-weight);white-space:nowrap;vertical-align:middle;cursor:pointer;background:var(--vft-button-bg-color,var(--vft-fill-color-blank));border:var(--vft-border);border-left:0;color:var(--vft-button-text-color,var(--vft-text-regular-color));-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:0;margin:0;position:relative;transition:var(--vft-transition-all);-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:8px 15px;font-size:var(--vft-font-size-base);border-radius:0}.vft-checkbox-button__inner.is-round{padding:8px 15px}.vft-checkbox-button__inner:hover{color:var(--vft-primary-color)}.vft-checkbox-button__inner [class*=vft-icon-]{line-height:.9}.vft-checkbox-button__inner [class*=vft-icon-]+span{margin-left:5px}.vft-checkbox-button__original{opacity:0;outline:0;position:absolute;margin:0;z-index:-1}.vft-checkbox-button.is-checked .vft-checkbox-button__inner{color:var(--vft-checkbox-button-checked-text-color);background-color:var(--vft-checkbox-button-checked-bg-color);border-color:var(--vft-checkbox-button-checked-border-color);box-shadow:-1px 0 0 0 var(--vft-primary-color-light-7)}.vft-checkbox-button.is-checked:first-child .vft-checkbox-button__inner{border-left-color:var(--vft-checkbox-button-checked-border-color)}.vft-checkbox-button.is-disabled .vft-checkbox-button__inner{color:var(--vft-text-disabled-color);cursor:not-allowed;background-image:none;background-color:var(--vft-button-disabled-bg-color,var(--vft-fill-color-blank));border-color:var(--vft-button-disabled-border-color,var(--vft-border-color-light));box-shadow:none}.vft-checkbox-button.is-disabled:first-child .vft-checkbox-button__inner{border-left-color:var(--vft-button-disabled-border-color,var(--vft-border-color-light))}.vft-checkbox-button:first-child .vft-checkbox-button__inner{border-left:var(--vft-border);border-top-left-radius:var(--vft-border-radius-base);border-bottom-left-radius:var(--vft-border-radius-base);box-shadow:none!important}.vft-checkbox-button.is-focus .vft-checkbox-button__inner{border-color:var(--vft-checkbox-button-checked-border-color)}.vft-checkbox-button:last-child .vft-checkbox-button__inner{border-top-right-radius:var(--vft-border-radius-base);border-bottom-right-radius:var(--vft-border-radius-base)}.vft-checkbox-button--large .vft-checkbox-button__inner{padding:12px 19px;font-size:var(--vft-font-size-base);border-radius:0}.vft-checkbox-button--large .vft-checkbox-button__inner.is-round{padding:12px 19px}.vft-checkbox-button--small .vft-checkbox-button__inner{padding:5px 11px;font-size:12px;border-radius:0}.vft-checkbox-button--small .vft-checkbox-button__inner.is-round{padding:5px 11px}

package/theme-style/vft-checkbox-group.css

@@ -0,0 +1 @@
+.vft-checkbox-group{font-size:0;line-height:0}

package/theme-style/vft-checkbox.css

@@ -0,0 +1 @@
+.vft-checkbox{--vft-checkbox-font-size:14px;--vft-checkbox-font-weight:var(--vft-font-weight-primary);--vft-checkbox-text-color:var(--vft-text-regular-color);--vft-checkbox-input-height:14px;--vft-checkbox-input-width:14px;--vft-checkbox-border-radius:var(--vft-border-radius-small);--vft-checkbox-bg-color:var(--vft-fill-color-blank);--vft-checkbox-input-border:var(--vft-border);--vft-checkbox-disabled-border-color:var(--vft-border-color);--vft-checkbox-disabled-input-fill:var(--vft-fill-color-light);--vft-checkbox-disabled-icon-color:var(--vft-text-placeholder-color);--vft-checkbox-disabled-checked-input-fill:var(--vft-border-color-extra-light);--vft-checkbox-disabled-checked-input-border-color:var(--vft-border-color);--vft-checkbox-disabled-checked-icon-color:var(--vft-text-placeholder-color);--vft-checkbox-checked-text-color:var(--vft-primary-color);--vft-checkbox-checked-input-border-color:var(--vft-primary-color);--vft-checkbox-checked-bg-color:var(--vft-primary-color);--vft-checkbox-checked-icon-color:var(--vft-color-white);--vft-checkbox-input-border-color-hover:var(--vft-primary-color)}.vft-checkbox{color:var(--vft-checkbox-text-color);font-weight:var(--vft-checkbox-font-weight);font-size:var(--vft-font-size-base);position:relative;cursor:pointer;display:inline-flex;align-items:center;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-right:30px;height:32px}.vft-checkbox.is-disabled{cursor:not-allowed}.vft-checkbox.is-bordered{padding:0 15px 0 9px;border-radius:var(--vft-border-radius-base);border:var(--vft-border);box-sizing:border-box}.vft-checkbox.is-bordered.is-checked{border-color:var(--vft-primary-color)}.vft-checkbox.is-bordered.is-disabled{border-color:var(--vft-border-color-lighter)}.vft-checkbox.is-bordered.vft-checkbox--large{padding:0 19px 0 11px;border-radius:var(--vft-border-radius-base)}.vft-checkbox.is-bordered.vft-checkbox--large .vft-checkbox__label{font-size:var(--vft-font-size-base)}.vft-checkbox.is-bordered.vft-checkbox--large .vft-checkbox__inner{height:14px;width:14px}.vft-checkbox.is-bordered.vft-checkbox--small{padding:0 11px 0 7px;border-radius:calc(var(--vft-border-radius-base) - 1px)}.vft-checkbox.is-bordered.vft-checkbox--small .vft-checkbox__label{font-size:12px}.vft-checkbox.is-bordered.vft-checkbox--small .vft-checkbox__inner{height:12px;width:12px}.vft-checkbox.is-bordered.vft-checkbox--small .vft-checkbox__inner::after{height:6px;width:2px}.vft-checkbox input:focus-visible+.vft-checkbox__inner{outline:2px solid var(--vft-checkbox-input-border-color-hover);outline-offset:1px;border-radius:var(--vft-checkbox-border-radius)}.vft-checkbox__input{white-space:nowrap;cursor:pointer;outline:0;display:inline-flex;position:relative}.vft-checkbox__input.is-disabled .vft-checkbox__inner{background-color:var(--vft-checkbox-disabled-input-fill);border-color:var(--vft-checkbox-disabled-border-color);cursor:not-allowed}.vft-checkbox__input.is-disabled .vft-checkbox__inner::after{cursor:not-allowed;border-color:var(--vft-checkbox-disabled-icon-color)}.vft-checkbox__input.is-disabled.is-checked .vft-checkbox__inner{background-color:var(--vft-checkbox-disabled-checked-input-fill);border-color:var(--vft-checkbox-disabled-checked-input-border-color)}.vft-checkbox__input.is-disabled.is-checked .vft-checkbox__inner::after{border-color:var(--vft-checkbox-disabled-checked-icon-color)}.vft-checkbox__input.is-disabled.is-indeterminate .vft-checkbox__inner{background-color:var(--vft-checkbox-disabled-checked-input-fill);border-color:var(--vft-checkbox-disabled-checked-input-border-color)}.vft-checkbox__input.is-disabled.is-indeterminate .vft-checkbox__inner::before{background-color:var(--vft-checkbox-disabled-checked-icon-color);border-color:var(--vft-checkbox-disabled-checked-icon-color)}.vft-checkbox__input.is-disabled+span.vft-checkbox__label{color:var(--vft-disabled-text-color);cursor:not-allowed}.vft-checkbox__input.is-checked .vft-checkbox__inner{background-color:var(--vft-checkbox-checked-bg-color);border-color:var(--vft-checkbox-checked-input-border-color)}.vft-checkbox__input.is-checked .vft-checkbox__inner::after{transform:rotate(45deg) scaleY(1)}.vft-checkbox__input.is-checked+.vft-checkbox__label{color:var(--vft-checkbox-checked-text-color)}.vft-checkbox__input.is-focus:not(.is-checked) .vft-checkbox__original:not(:focus-visible){border-color:var(--vft-checkbox-input-border-color-hover)}.vft-checkbox__input.is-indeterminate .vft-checkbox__inner{background-color:var(--vft-checkbox-checked-bg-color);border-color:var(--vft-checkbox-checked-input-border-color)}.vft-checkbox__input.is-indeterminate .vft-checkbox__inner::before{content:"";position:absolute;display:block;background-color:var(--vft-checkbox-checked-icon-color);height:2px;transform:scale(.5);left:0;right:0;top:5px}.vft-checkbox__input.is-indeterminate .vft-checkbox__inner::after{display:none}.vft-checkbox__inner{display:inline-block;position:relative;border:var(--vft-checkbox-input-border);border-radius:var(--vft-checkbox-border-radius);box-sizing:border-box;width:var(--vft-checkbox-input-width);height:var(--vft-checkbox-input-height);background-color:var(--vft-checkbox-bg-color);z-index:var(--vft-index-normal);transition:border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46),outline .25s cubic-bezier(.71,-.46,.29,1.46)}.vft-checkbox__inner:hover{border-color:var(--vft-checkbox-input-border-color-hover)}.vft-checkbox__inner::after{box-sizing:content-box;content:"";border:1px solid var(--vft-checkbox-checked-icon-color);border-left:0;border-top:0;height:7px;left:4px;position:absolute;top:1px;transform:rotate(45deg) scaleY(0);width:3px;transition:transform .15s ease-in 50ms;transform-origin:center}.vft-checkbox__original{opacity:0;outline:0;position:absolute;margin:0;width:0;height:0;z-index:-1}.vft-checkbox__label{display:inline-block;padding-left:8px;line-height:1;font-size:var(--vft-checkbox-font-size)}.vft-checkbox.vft-checkbox--large{height:40px}.vft-checkbox.vft-checkbox--large .vft-checkbox__label{font-size:14px}.vft-checkbox.vft-checkbox--large .vft-checkbox__inner{width:14px;height:14px}.vft-checkbox.vft-checkbox--small{height:24px}.vft-checkbox.vft-checkbox--small .vft-checkbox__label{font-size:12px}.vft-checkbox.vft-checkbox--small .vft-checkbox__inner{width:12px;height:12px}.vft-checkbox.vft-checkbox--small .vft-checkbox__input.is-indeterminate .vft-checkbox__inner::before{top:4px}.vft-checkbox.vft-checkbox--small .vft-checkbox__inner::after{width:2px;height:6px}.vft-checkbox:last-of-type{margin-right:0}

package/theme-style/vft-color-picker.css

@@ -0,0 +1 @@
+.vft-color-predefine{display:flex;font-size:12px;margin-top:8px;width:280px}.vft-color-predefine__colors{display:flex;flex:1;flex-wrap:wrap}.vft-color-predefine__color-selector{margin:0 0 8px 8px;width:20px;height:20px;border-radius:4px;cursor:pointer}.vft-color-predefine__color-selector:nth-child(10n+1){margin-left:0}.vft-color-predefine__color-selector.selected{box-shadow:0 0 3px 2px var(--vft-color-primary)}.vft-color-predefine__color-selector>div{display:flex;height:100%;border-radius:3px}.vft-color-predefine__color-selector.is-alpha{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.vft-color-hue-slider{position:relative;box-sizing:border-box;width:280px;height:12px;background-color:red;padding:0 2px;float:right}.vft-color-hue-slider__bar{position:relative;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);height:100%}.vft-color-hue-slider__thumb{position:absolute;cursor:pointer;box-sizing:border-box;left:0;top:0;width:4px;height:100%;border-radius:1px;background:#fff;border:1px solid var(--vft-border-color-lighter);box-shadow:0 0 2px rgba(0,0,0,.6);z-index:1}.vft-color-hue-slider.is-vertical{width:12px;height:180px;padding:2px 0}.vft-color-hue-slider.is-vertical .vft-color-hue-slider__bar{background:linear-gradient(to bottom,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.vft-color-hue-slider.is-vertical .vft-color-hue-slider__thumb{left:0;top:0;width:100%;height:4px}.vft-color-svpanel{position:relative;width:280px;height:180px}.vft-color-svpanel__black,.vft-color-svpanel__white{position:absolute;top:0;left:0;right:0;bottom:0}.vft-color-svpanel__white{background:linear-gradient(to right,#fff,rgba(255,255,255,0))}.vft-color-svpanel__black{background:linear-gradient(to top,#000,rgba(0,0,0,0))}.vft-color-svpanel__cursor{position:absolute}.vft-color-svpanel__cursor>div{cursor:head;width:4px;height:4px;box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 2px rgba(0,0,0,.4);border-radius:50%;transform:translate(-2px,-2px)}.vft-color-alpha-slider{position:relative;box-sizing:border-box;width:280px;height:12px;background-image:linear-gradient(45deg,var(--vft-color-picker-alpha-bg-a) 25%,var(--vft-color-picker-alpha-bg-b) 25%),linear-gradient(135deg,var(--vft-color-picker-alpha-bg-a) 25%,var(--vft-color-picker-alpha-bg-b) 25%),linear-gradient(45deg,var(--vft-color-picker-alpha-bg-b) 75%,var(--vft-color-picker-alpha-bg-a) 75%),linear-gradient(135deg,var(--vft-color-picker-alpha-bg-b) 75%,var(--vft-color-picker-alpha-bg-a) 75%);background-size:12px 12px;background-position:0 0,6px 0,6px -6px,0 6px}.vft-color-alpha-slider__bar{position:relative;background:linear-gradient(to right,rgba(255,255,255,0) 0,var(--vft-bg-color) 100%);height:100%}.vft-color-alpha-slider__thumb{position:absolute;cursor:pointer;box-sizing:border-box;left:0;top:0;width:4px;height:100%;border-radius:1px;background:#fff;border:1px solid var(--vft-border-color-lighter);box-shadow:0 0 2px rgba(0,0,0,.6);z-index:1}.vft-color-alpha-slider.is-vertical{width:20px;height:180px}.vft-color-alpha-slider.is-vertical .vft-color-alpha-slider__bar{background:linear-gradient(to bottom,rgba(255,255,255,0) 0,#fff 100%)}.vft-color-alpha-slider.is-vertical .vft-color-alpha-slider__thumb{left:0;top:0;width:100%;height:4px}.vft-color-dropdown{width:300px}.vft-color-dropdown__main-wrapper{margin-bottom:6px}.vft-color-dropdown__main-wrapper::after{content:"";display:table;clear:both}.vft-color-dropdown__btns{margin-top:12px;text-align:right}.vft-color-dropdown__value{float:left;line-height:26px;font-size:12px;color:#000;width:160px}.vft-color-picker{display:inline-block;position:relative;line-height:normal;outline:0}.vft-color-picker:hover:not(.is-disabled) .vft-color-picker__trigger{border:1px solid var(--vft-border-color-hover)}.vft-color-picker:focus-visible:not(.is-disabled) .vft-color-picker__trigger{outline:2px solid var(--vft-color-primary);outline-offset:1px}.vft-color-picker.is-disabled .vft-color-picker__trigger{cursor:not-allowed}.vft-color-picker--large{height:40px}.vft-color-picker--large .vft-color-picker__trigger{height:40px;width:40px}.vft-color-picker--large .vft-color-picker__mask{height:38px;width:38px}.vft-color-picker--small{height:24px}.vft-color-picker--small .vft-color-picker__trigger{height:24px;width:24px}.vft-color-picker--small .vft-color-picker__mask{height:22px;width:22px}.vft-color-picker--small .vft-color-picker__empty,.vft-color-picker--small .vft-color-picker__icon{transform:scale(.8)}.vft-color-picker__mask{height:30px;width:30px;border-radius:4px;position:absolute;top:1px;left:1px;z-index:1;cursor:not-allowed;background-color:rgba(255,255,255,.7)}.vft-color-picker__trigger{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;height:32px;width:32px;padding:4px;border:1px solid var(--vft-border-color);border-radius:4px;font-size:0;position:relative;cursor:pointer}.vft-color-picker__color{position:relative;display:block;box-sizing:border-box;border:1px solid var(--vft-text-color-secondary);border-radius:var(--vft-border-radius-small);width:100%;height:100%;text-align:center}.vft-color-picker__color.is-alpha{background-image:linear-gradient(45deg,var(--vft-color-picker-alpha-bg-a) 25%,var(--vft-color-picker-alpha-bg-b) 25%),linear-gradient(135deg,var(--vft-color-picker-alpha-bg-a) 25%,var(--vft-color-picker-alpha-bg-b) 25%),linear-gradient(45deg,var(--vft-color-picker-alpha-bg-b) 75%,var(--vft-color-picker-alpha-bg-a) 75%),linear-gradient(135deg,var(--vft-color-picker-alpha-bg-b) 75%,var(--vft-color-picker-alpha-bg-a) 75%);background-size:12px 12px;background-position:0 0,6px 0,6px -6px,0 6px}.vft-color-picker__color-inner{display:inline-flex;justify-content:center;align-items:center;width:100%;height:100%}.vft-color-picker .vft-color-picker__empty{font-size:12px;color:var(--vft-text-color-secondary)}.vft-color-picker .vft-color-picker__icon{display:inline-flex;justify-content:center;align-items:center;color:#fff;font-size:12px}.vft-color-picker__panel{position:absolute;z-index:10;padding:6px;box-sizing:content-box;background-color:#fff;border-radius:var(--vft-border-radius-base);box-shadow:var(--vft-box-shadow-light)}.vft-color-picker__panel.vft-popper{border:1px solid var(--vft-border-color-lighter)}.vft-color-picker,.vft-color-picker__panel{--vft-color-picker-alpha-bg-a:#ccc;--vft-color-picker-alpha-bg-b:transparent}.dark .vft-color-picker,.dark .vft-color-picker__panel{--vft-color-picker-alpha-bg-a:#333333}

package/theme-style/vft-dropdown.css

@@ -0,0 +1 @@
+.vft-dropdown{--vft-dropdown-menu-box-shadow:var(--vft-box-shadow-light);--vft-dropdown-menuItem-hover-fill:var(--vft-primary-color-light-9);--vft-dropdown-menuItem-hover-color:var(--vft-primary-color);--vft-dropdown-menu-index:10;display:inline-flex;position:relative;color:var(--vft-text-regular-color);font-size:var(--vft-font-size-base);line-height:1;vertical-align:top}.vft-dropdown.is-disabled{color:var(--vft-text-placeholder-color);cursor:not-allowed}.vft-dropdown__popper{--vft-dropdown-menu-box-shadow:var(--vft-box-shadow-light);--vft-dropdown-menuItem-hover-fill:var(--vft-primary-color-light-9);--vft-dropdown-menuItem-hover-color:var(--vft-primary-color);--vft-dropdown-menu-index:10}.vft-dropdown__popper.vft-popper{background:var(--vft-bg-color-overlay);border:1px solid var(--vft-border-color-light);box-shadow:var(--vft-dropdown-menu-box-shadow)}.vft-dropdown__popper.vft-popper .vft-popper__arrow::before{border:1px solid var(--vft-border-color-light)}.vft-dropdown__popper.vft-popper[data-popper-placement^=top] .vft-popper__arrow::before{border-top-color:transparent;border-left-color:transparent}.vft-dropdown__popper.vft-popper[data-popper-placement^=bottom] .vft-popper__arrow::before{border-bottom-color:transparent;border-right-color:transparent}.vft-dropdown__popper.vft-popper[data-popper-placement^=left] .vft-popper__arrow::before{border-left-color:transparent;border-bottom-color:transparent}.vft-dropdown__popper.vft-popper[data-popper-placement^=right] .vft-popper__arrow::before{border-right-color:transparent;border-top-color:transparent}.vft-dropdown__popper .vft-dropdown-menu{border:none}.vft-dropdown__popper .vft-dropdown__popper-selfdefine{outline:0}.vft-dropdown__popper .vft-scrollbar__bar{z-index:calc(var(--vft-dropdown-menu-index) + 1)}.vft-dropdown__popper .vft-dropdown__list{list-style:none;padding:0;margin:0;box-sizing:border-box}.vft-dropdown .vft-dropdown__caret-button{padding-left:0;padding-right:0;display:inline-flex;justify-content:center;align-items:center;width:32px;border-left:none}.vft-dropdown .vft-dropdown__caret-button>span{display:inline-flex}.vft-dropdown .vft-dropdown__caret-button::before{content:"";position:absolute;display:block;width:1px;top:-1px;bottom:-1px;left:0;background:var(--vft-overlay-color-lighter)}.vft-dropdown .vft-dropdown__caret-button.vft-button::before{background:var(--vft-border-color);opacity:.5}.vft-dropdown .vft-dropdown__caret-button .vft-dropdown__icon{font-size:inherit;padding-left:0}.vft-dropdown .vft-dropdown-selfdefine{outline:0}.vft-dropdown--large .vft-dropdown__caret-button{width:40px}.vft-dropdown--small .vft-dropdown__caret-button{width:24px}.vft-dropdown-menu{position:relative;top:0;left:0;z-index:var(--vft-dropdown-menu-index);padding:5px 0;margin:0;background-color:var(--vft-bg-color-overlay);border:none;border-radius:var(--vft-border-radius-base);box-shadow:none;list-style:none}.vft-dropdown-menu__item{display:flex;align-items:center;white-space:nowrap;list-style:none;line-height:22px;padding:5px 16px;margin:0;font-size:var(--vft-font-size-base);color:var(--vft-text-regular-color);cursor:pointer;outline:0}.vft-dropdown-menu__item:not(.is-disabled):focus{background-color:var(--vft-dropdown-menuItem-hover-fill);color:var(--vft-dropdown-menuItem-hover-color)}.vft-dropdown-menu__item i{margin-right:5px}.vft-dropdown-menu__item--divided{margin:6px 0;border-top:1px solid var(--vft-border-color-lighter)}.vft-dropdown-menu__item.is-disabled{cursor:not-allowed;color:var(--vft-text-disabled-color)}.vft-dropdown-menu--large{padding:7px 0}.vft-dropdown-menu--large .vft-dropdown-menu__item{padding:7px 20px;line-height:22px;font-size:14px}.vft-dropdown-menu--large .vft-dropdown-menu__item--divided{margin:8px 0}.vft-dropdown-menu--small{padding:3px 0}.vft-dropdown-menu--small .vft-dropdown-menu__item{padding:2px 12px;line-height:20px;font-size:12px}.vft-dropdown-menu--small .vft-dropdown-menu__item--divided{margin:4px 0}

package/theme-style/vft-form.css

@@ -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;text-align:left;margin-bottom:8px;line-height:22px}.vft-form--inline .vft-form-item{display:inline-flex;vertical-align:middle;margin-right:32px}.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-wrap{display:flex}.vft-form-item__label{display:inline-flex;justify-content:flex-end;align-items:flex-start;flex:0 0 auto;font-size:var(--vft-form-label-font-size);color:var(--vft-text-regular-color);height:32px;line-height:32px;padding:0 12px 0 0;box-sizing:border-box}.vft-form-item__content{display:flex;flex-wrap:wrap;align-items:center;flex:1;line-height:32px;position:relative;font-size:var(--font-size);min-width:0}.vft-form-item__content .vft-input-group{vertical-align:top}.vft-form-item__error{color:var(--vft-danger-color);font-size:12px;line-height:1;padding-top:2px;position:absolute;top:100%;left:0}.vft-form-item__error--inline{position:relative;top:auto;left:auto;display:inline-block;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:"*";color:var(--vft-danger-color);margin-right:4px}.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:"*";color:var(--vft-danger-color);margin-left:4px}.vft-form-item.is-error .vft-select-v2__wrapper,.vft-form-item.is-error .vft-select-v2__wrapper:focus,.vft-form-item.is-error .vft-textarea__inner,.vft-form-item.is-error .vft-textarea__inner:focus{box-shadow:0 0 0 1px var(--vft-danger-color) inset}.vft-form-item.is-error .vft-input__wrapper{box-shadow:0 0 0 1px var(--vft-danger-color) inset}.vft-form-item.is-error .vft-input-group__append .vft-input__wrapper,.vft-form-item.is-error .vft-input-group__prepend .vft-input__wrapper{box-shadow:0 0 0 1px transparent inset}.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{--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;text-align:left;margin-bottom:8px;line-height:22px}.vft-form--inline .vft-form-item{display:inline-flex;vertical-align:middle;margin-right:32px}.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-wrap{display:flex}.vft-form-item__label{display:inline-flex;justify-content:flex-end;align-items:flex-start;flex:0 0 auto;font-size:var(--vft-form-label-font-size);color:var(--vft-text-regular-color);height:32px;line-height:32px;padding:0 12px 0 0;box-sizing:border-box}.vft-form-item__content{display:flex;flex-wrap:wrap;align-items:center;flex:1;line-height:32px;position:relative;font-size:var(--font-size);min-width:0}.vft-form-item__content .vft-input-group{vertical-align:top}.vft-form-item__error{color:var(--vft-danger-color);font-size:12px;line-height:1;padding-top:2px;position:absolute;top:100%;left:0}.vft-form-item__error--inline{position:relative;top:auto;left:auto;display:inline-block;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:"*";color:var(--vft-danger-color);margin-right:4px}.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:"*";color:var(--vft-danger-color);margin-left:4px}.vft-form-item.is-error .vft-select-v2__wrapper,.vft-form-item.is-error .vft-select-v2__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}