vft 0.0.46 → 0.0.48

package/theme-style/src/common/var.scss

@@ -311,7 +311,7 @@ $header-layout: map-merge(
   (
     height: 64px,
     top-height: 40px,
-    bg-color: white,
+    bg-color: $primary-color,
     color: black,
     z-index: 2001,
     border-bottom: 1px solid rgb(231, 231, 231),
@@ -409,8 +409,8 @@ $tabs: map-merge(
     "item-padding": 0 20px,
     "item-max-width": 100%,
     "item-bg-color": white,
-    "item-bg-color-active": #15b4f1,
-    "item-bg-color-hover": #15b4f1,
+    "item-bg-color-active": $primary-color,
+    "item-bg-color-hover": $primary-color,
     "item-color": black,
     "item-color-active": white,
     "item-color-hover": white,
@@ -443,8 +443,8 @@ $multiple-tabs: map-merge(
 $menu: () !default;
 $menu: map-merge(
   (
-    "bg-color": getCssVar("theme-color"),
-    "sub-menu-bg-color": getCssVar("theme-color"),
+    "bg-color": getCssVar('fill-color', 'blank'),
+    "sub-menu-bg-color": getCssVar('fill-color', 'blank'),
     "active-color": getCssVar("primary-color"),
     "text-color": getCssVar("text-primary-color"),
     "hover-text-color": getCssVar("primary-color"),
@@ -456,7 +456,6 @@ $menu: map-merge(
     "horizontal-sub-item-height": 36px,
     "item-font-size": getCssVar("font-size-base"),
     "item-hover-fill": getCssVar("primary-color-light-9"),
-    "border-color": #dcdfe6,
     "border-bottom": getCssVar("border"),
     "base-level-padding": 20px,
     "level-padding": 20px,
@@ -489,7 +488,7 @@ $loading: map-merge(
     "spinner-size": 20px,
     "fullscreen-spinner-size": 50px,
     "rotate-animation": loading-rotate 2s linear infinite,
-    "color": #409eff,
+    "color": $primary-color,
     "text-size": 14px,
     "margin": 3px 0,
   ),
@@ -499,8 +498,8 @@ $loading: map-merge(
 $full-screen: () !default;
 $full-screen: map-merge(
   (
-    "color": #434343,
-    "hover-color": #0171f6,
+    "color": getCssVar('text-primary-color'),
+    "hover-color": $primary-color,
     "font-size": 12px,
   ),
   $full-screen
@@ -870,3 +869,11 @@ $clamp-toggle: map-merge((
   'color': #111,
   'size': 12px,
 ), $clamp-toggle);
+
+$form: () !default;
+$form: map.merge(
+    (
+      'label-font-size': getCssVar('font-size-base'),
+    ),
+    $form
+);

package/theme-style/src/dark/css-vars.scss

@@ -20,7 +20,7 @@ html.dark {
   // Background --el-bg-color-#{$type}
   @include set-component-css-var('bg-color', $bg-color);
   // --el-text-color-#{$type}
-  @include set-component-css-var('text-color', $text-color);
+  @include set-component-css-var('text', $text-color);
   // --el-border-color-#{$type}
   @include set-component-css-var('border-color', $border-color);
   // Fill --el-fill-color-#{$type}

package/theme-style/src/dark/var.scss

@@ -103,17 +103,17 @@ $box-shadow: () !default;
 $box-shadow: map.merge(
   (
     '': (
-      0px 12px 32px 4px rgba(0, 0, 0, 0.36),
-      0px 8px 20px rgba(0, 0, 0, 0.72),
+      0px 12px 32px 4px rgba(255, 255, 255, 0.36),
+      0px 8px 20px rgba(255, 255, 255, 0.72),
     ),
     'light': (
-      0px 0px 12px rgba(0, 0, 0, 0.72),
+      0px 0px 12px rgba(255, 255, 255, 0.72),
     ),
     'lighter': (
-      0px 0px 6px rgba(0, 0, 0, 0.72),
+      0px 0px 6px rgba(255, 255, 255, 0.72),
     ),
     'dark': (
-      0px 16px 48px 16px rgba(0, 0, 0, 0.72),
+      0px 16px 48px 16px rgba(255, 255, 255, 0.72),
       0px 12px 32px #000000,
       0px 8px 16px -8px #000000,
     ),
@@ -154,14 +154,15 @@ $text-color-base: #f0f5ff;
 $text-color: () !default;
 $text-color: map.merge(
   (
-    'primary': rgba($text-color-base, 0.95),
-    'regular': rgba($text-color-base, 0.85),
-    'secondary': rgba($text-color-base, 0.65),
-    'placeholder': rgba($text-color-base, 0.55),
-    'disabled': rgba($text-color-base, 0.4),
+    'primary-color': rgba($text-color-base, 0.95),
+    'regular-color': rgba($text-color-base, 0.85),
+    'secondary-color': rgba($text-color-base, 0.65),
+    'placeholder-color': rgba($text-color-base, 0.55),
+    'disabled-color': rgba($text-color-base, 0.4),
   ),
   $text-color
 );
+
 // mix to hex to avoid overlay issues
 @each $key, $val in $text-color {
   $text-color: map.merge(
@@ -176,8 +177,8 @@ $text-color: map.merge(
 $mask-color: () !default;
 $mask-color: map.merge(
   (
-    '': rgba(0, 0, 0, 0.8),
-    'extra-light': rgba(0, 0, 0, 0.3),
+    '': rgba(255, 255, 255, 0.8),
+    'extra-light': rgba(255, 255, 255, 0.3),
   ),
   $mask-color
 );

package/theme-style/src/form.scss

@@ -0,0 +1,241 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+$form-item-margin-bottom: () !default;
+$form-item-margin-bottom: map.merge(
+  (
+    'large': 22px,
+    'default': 18px,
+    'small': 18px
+  ),
+  $form-item-margin-bottom
+);
+
+$form-item-line-height: () !default;
+$form-item-line-height: map.merge(
+  (
+    'large': 40px,
+    'default': 32px,
+    'small': 24px
+  ),
+  $form-item-line-height
+);
+
+$form-item-error-padding-top: () !default;
+$form-item-error-padding-top: map.merge(
+  (
+    'large': 4px,
+    'default': 2px,
+    'small': 2px
+  ),
+  $form-item-error-padding-top
+);
+
+$form-item-label-top-line-height: () !default;
+$form-item-label-top-line-height: map.merge(
+  (
+    'large': 22px,
+    'default': 22px,
+    'small': 20px
+  ),
+  $form-item-label-top-line-height
+);
+
+$form-item-label-top-margin-bottom: () !default;
+$form-item-label-top-margin-bottom: map.merge(
+  (
+    'large': 12px,
+    'default': 8px,
+    'small': 4px
+  ),
+  $form-item-label-top-margin-bottom
+);
+
+@include b(form) {
+  @include set-component-css-var('form', $form);
+
+  @include m(label-left) {
+    .#{$namespace}-form-item__label {
+      justify-content: flex-start;
+    }
+  }
+  @include m(label-top) {
+    .#{$namespace}-form-item {
+      display: block;
+
+      .#{$namespace}-form-item__label {
+        display: block;
+        height: auto;
+        text-align: left;
+        margin-bottom: #{map.get($form-item-label-top-margin-bottom, 'default')};
+        line-height: #{map.get($form-item-label-top-line-height, 'default')};
+      }
+    }
+  }
+  @include m(inline) {
+    .#{$namespace}-form-item {
+      display: inline-flex;
+      vertical-align: middle;
+      margin-right: 32px;
+    }
+
+    &.#{$namespace}-form--label-top {
+      display: flex;
+      flex-wrap: wrap;
+
+      .#{$namespace}-form-item {
+        display: block;
+      }
+    }
+  }
+
+  @each $size in (large, default, small) {
+    @include m($size) {
+      &.#{$namespace}-form--label-top {
+        .#{$namespace}-form-item {
+          .#{$namespace}-form-item__label {
+            margin-bottom: #{map.get($form-item-label-top-margin-bottom, $size)};
+            line-height: #{map.get($form-item-label-top-line-height, $size)};
+          }
+        }
+      }
+    }
+  }
+}
+
+@include b(form-item) {
+  display: flex;
+  --font-size: #{map.get($input-font-size, 'default')};
+  margin-bottom: #{map.get($form-item-margin-bottom, 'default')};
+
+  .#{$namespace}-form-item {
+    margin-bottom: 0;
+  }
+
+  .#{$namespace}-input__validateIcon {
+    display: none;
+  }
+
+  @each $size in (large, default, small) {
+    @include m($size) {
+      --font-size: #{map.get($input-font-size, $size)};
+      @include set-css-var-value(('form', 'label-font-size'), var(--font-size));
+
+      margin-bottom: #{map.get($form-item-margin-bottom, $size)};
+
+      @include e(label) {
+        height: #{map.get($form-item-line-height, $size)};
+        line-height: #{map.get($form-item-line-height, $size)};
+      }
+      @include e(content) {
+        line-height: #{map.get($form-item-line-height, $size)};
+      }
+      @include e(error) {
+        padding-top: #{map.get($form-item-error-padding-top, $size)};
+      }
+    }
+  }
+
+  @include e(label-wrap) {
+    display: flex;
+  }
+
+  @include e(label) {
+    display: inline-flex;
+    justify-content: flex-end;
+    align-items: flex-start;
+
+    flex: 0 0 auto;
+    font-size: getCssVar('form-label-font-size');
+    color: getCssVar('text', 'regular-color');
+
+    height: #{map.get($form-item-line-height, 'default')};
+    line-height: #{map.get($form-item-line-height, 'default')};
+
+    padding: 0 12px 0 0;
+    box-sizing: border-box;
+  }
+  @include e(content) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    flex: 1;
+    line-height: #{map.get($form-item-line-height, 'default')};
+    position: relative;
+    font-size: var(--font-size);
+    min-width: 0;
+
+    .#{$namespace}-input-group {
+      vertical-align: top;
+    }
+  }
+  @include e(error) {
+    color: getCssVar('danger-color');
+    font-size: 12px;
+    line-height: 1;
+    padding-top: #{map.get($form-item-error-padding-top, 'default')};
+    position: absolute;
+    top: 100%;
+    left: 0;
+
+    @include m(inline) {
+      position: relative;
+      top: auto;
+      left: auto;
+      display: inline-block;
+      margin-left: 10px;
+    }
+  }
+
+  @include when(required) {
+    @include pseudo('not(.is-no-asterisk)') {
+      &.asterisk-left {
+        > .#{$namespace}-form-item__label:before,
+        > .#{$namespace}-form-item__label-wrap > .#{$namespace}-form-item__label:before {
+          content: '*';
+          color: getCssVar('danger-color');
+          margin-right: 4px;
+        }
+      }
+      &.asterisk-right {
+        > .#{$namespace}-form-item__label:after,
+        > .#{$namespace}-form-item__label-wrap > .#{$namespace}-form-item__label:after {
+          content: '*';
+          color: getCssVar('danger-color');
+          margin-left: 4px;
+        }
+      }
+    }
+  }
+
+  @include when(error) {
+    .#{$namespace}-select-v2__wrapper,
+    .#{$namespace}-textarea__inner {
+      &,
+      &:focus {
+        box-shadow: 0 0 0 1px getCssVar('danger-color') inset;
+      }
+    }
+    .#{$namespace}-input__wrapper {
+      box-shadow: 0 0 0 1px getCssVar('danger-color') inset;
+    }
+    .#{$namespace}-input-group__append,
+    .#{$namespace}-input-group__prepend {
+      .#{$namespace}-input__wrapper {
+        box-shadow: 0 0 0 1px transparent inset;
+      }
+    }
+    .#{$namespace}-input__validateIcon {
+      color: getCssVar('danger-color');
+    }
+  }
+
+  @include m(feedback) {
+    .#{$namespace}-input__validateIcon {
+      display: inline-flex;
+    }
+  }
+}

package/theme-style/src/header-layout.scss

@@ -11,7 +11,6 @@ $name: header-layout;
 
 @include b($name) {
   height: getCompCssVar('height');
-  color: getCompCssVar('color');
   background-color: getCompCssVar('bg-color');
   border-bottom: getCompCssVar('border-bottom');
   box-sizing: border-box;
@@ -31,8 +30,5 @@ $name: header-layout;
       height: 100%;
       align-items: center;
     }
-
-    //@include e(right) {
-    //}
   }
 }

package/theme-style/src/index.scss

@@ -40,6 +40,8 @@
 @use './router-view-content.scss';
 @use './context-menu.scss';
 @use './search.scss';
+@use './form.scss';
+@use './form-item.scss';
 // md comp
 @use './md-comment.scss';
 @use './md-tabs.scss';

package/theme-style/src/md-container.scss

@@ -1,8 +1,7 @@
 @use 'mixins/mixins' as *;
 @use 'common/var' as *;
 @use 'common/transition';
-
-
+@use 'md/pswp' as *;
 
 $name: md-container;
 
@@ -37,7 +36,6 @@ $name: md-container;
   // 任务列表
   @import 'md/tasklist';
   @import 'md/figure';
-  @import 'md/pswp';
 
   -webkit-font-smoothing: antialiased;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", STHeiti, "Microsoft YaHei", SimSun, sans-serif;

package/theme-style/src/menu.scss

@@ -33,6 +33,7 @@ $name: menu;
   }
 
   i {
+    flex-shrink: 0;
     margin-right: getCompCssVar('icon-mr');;
   }
 
@@ -58,7 +59,8 @@ $name: menu;
 }
 
 @include b(menu) {
-  border-right: solid 1px getCompCssVar('border-color');
+  border: getCompCssVar('border');
+  border-right: getCompCssVar('border-right');
   list-style: none;
   position: relative;
   margin: 0;

package/theme-style/src/side-menu.scss

@@ -34,17 +34,15 @@ $name: side-menu;
     position: absolute;
     bottom: 0;
     width: 100%;
-    background-color: white;
   }
 
   @include e(collapse) {
     cursor: pointer;
     height: 40px;
-    background-color: white;
     padding: 0 16px;
     display: flex;
     align-items: center;
-    border-right: solid 1px var(--vft-menu-border-color);
+    border-right: getCssVar('menu-border-right');
     .vft-icon {
       position: absolute;
       right: 20px;

package/theme-style/vft-form.css

@@ -0,0 +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}

package/theme-style/vft-full-screen.css

@@ -1 +1 @@
-:root{--vft-full-screen-color:#434343;--vft-full-screen-hover-color:#0171f6;--vft-full-screen-font-size:12px}.vft-full-screen{color:var(--vft-full-screen-color);font-size:var(--vft-full-screen-font-size);transition:var(--vft-transition-color);display:flex;align-items:center}.vft-full-screen i{color:inherit!important;font-size:inherit!important;margin-right:2px}.vft-full-screen:hover{color:var(--vft-full-screen-hover-color)}.vft-full-screen:hover i{color:var(--vft-full-screen-hover-color)}
+:root{--vft-full-screen-color:var(--vft-text-primary-color);--vft-full-screen-hover-color:var(--vft-primary-color);--vft-full-screen-font-size:12px}.vft-full-screen{color:var(--vft-full-screen-color);font-size:var(--vft-full-screen-font-size);transition:var(--vft-transition-color);display:flex;align-items:center}.vft-full-screen i{color:inherit!important;font-size:inherit!important;margin-right:2px}.vft-full-screen:hover{color:var(--vft-full-screen-hover-color)}.vft-full-screen:hover i{color:var(--vft-full-screen-hover-color)}

package/theme-style/vft-header-layout.css

@@ -1 +1 @@
-:root{--vft-header-layout-height:64px;--vft-header-layout-top-height:40px;--vft-header-layout-bg-color:white;--vft-header-layout-color:black;--vft-header-layout-z-index:2001;--vft-header-layout-border-bottom:1px solid rgb(231, 231, 231)}.vft-header-layout{height:var(--vft-header-layout-height);color:var(--vft-header-layout-color);background-color:var(--vft-header-layout-bg-color);border-bottom:var(--vft-header-layout-border-bottom);box-sizing:border-box}.vft-header-layout--fixed{z-index:var(--vft-header-layout-z-index);width:100%}.vft-header-layout__top{height:var(--vft-header-layout-top-height);display:flex;align-items:center;justify-content:space-between}.vft-header-layout__left{display:flex;height:100%;align-items:center}
+:root{--vft-header-layout-height:64px;--vft-header-layout-top-height:40px;--vft-header-layout-bg-color:var(--vft-primary-color);--vft-header-layout-color:black;--vft-header-layout-z-index:2001;--vft-header-layout-border-bottom:1px solid rgb(231, 231, 231)}.vft-header-layout{height:var(--vft-header-layout-height);background-color:var(--vft-header-layout-bg-color);border-bottom:var(--vft-header-layout-border-bottom);box-sizing:border-box}.vft-header-layout--fixed{z-index:var(--vft-header-layout-z-index);width:100%}.vft-header-layout__top{height:var(--vft-header-layout-top-height);display:flex;align-items:center;justify-content:space-between}.vft-header-layout__left{display:flex;height:100%;align-items:center}

package/theme-style/vft-loading.css

@@ -1 +1 @@
-:root{--vft-loading-mask-color:rgba(255, 255, 255, 0.9);--vft-loading-spinner-size:20px;--vft-loading-fullscreen-spinner-size:50px;--vft-loading-rotate-animation:loading-rotate 2s linear infinite;--vft-loading-color:#409eff;--vft-loading-text-size:14px;--vft-loading-margin:3px 0}.vft-loading-parent--relative{position:relative!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vft-loading-parent--hidden{overflow:hidden!important}.vft-loading-mask{position:absolute;z-index:2000;background-color:var(--vft-loading-mask-color);margin:0;top:0;right:0;bottom:0;left:0;transition:opacity var(--vft-transition-duration)}.vft-loading-mask.is-fullscreen{position:fixed}.vft-loading-mask.is-fullscreen .vft-loading-spinner{margin-top:calc((0px - var(--vft-loading-fullscreen-spinner-size))/ 2)}.vft-loading-mask.is-fullscreen .vft-loading-spinner .circular{height:var(--vft-loading-fullscreen-spinner-size);width:var(--vft-loading-fullscreen-spinner-size)}.vft-loading-spinner{top:50%;margin-top:calc((0px - var(--vft-loading-spinner-size))/ 2);width:100%;text-align:center;position:absolute}.vft-loading-spinner .vft-loading-text{color:var(--vft-loading-color);margin:var(--vft-loading-margin);font-size:var(--vft-loading-text-size)}.vft-loading-spinner .circular{display:inline;height:var(--vft-loading-spinner-size);width:var(--vft-loading-spinner-size);animation:var(--vft-loading-rotate-animation)}.vft-loading-spinner .circular-no-rotate{animation:none}.vft-loading-spinner .path{animation:loading-dash 1.5s ease-in-out infinite;stroke-dasharray:90,150;stroke-dashoffset:0;stroke-width:2;stroke:var(--vft-primary-color);stroke-linecap:round}.vft-loading-spinner i{color:var(--vft-primary-color)}.vft-loading-fade-enter-from,.vft-loading-fade-leave-to{opacity:0}@keyframes loading-rotate{100%{transform:rotate(360deg)}}@keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}100%{stroke-dasharray:90,150;stroke-dashoffset:-120px}}
+:root{--vft-loading-mask-color:rgba(255, 255, 255, 0.9);--vft-loading-spinner-size:20px;--vft-loading-fullscreen-spinner-size:50px;--vft-loading-rotate-animation:loading-rotate 2s linear infinite;--vft-loading-color:var(--vft-primary-color);--vft-loading-text-size:14px;--vft-loading-margin:3px 0}.vft-loading-parent--relative{position:relative!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vft-loading-parent--hidden{overflow:hidden!important}.vft-loading-mask{position:absolute;z-index:2000;background-color:var(--vft-loading-mask-color);margin:0;top:0;right:0;bottom:0;left:0;transition:opacity var(--vft-transition-duration)}.vft-loading-mask.is-fullscreen{position:fixed}.vft-loading-mask.is-fullscreen .vft-loading-spinner{margin-top:calc((0px - var(--vft-loading-fullscreen-spinner-size))/ 2)}.vft-loading-mask.is-fullscreen .vft-loading-spinner .circular{height:var(--vft-loading-fullscreen-spinner-size);width:var(--vft-loading-fullscreen-spinner-size)}.vft-loading-spinner{top:50%;margin-top:calc((0px - var(--vft-loading-spinner-size))/ 2);width:100%;text-align:center;position:absolute}.vft-loading-spinner .vft-loading-text{color:var(--vft-loading-color);margin:var(--vft-loading-margin);font-size:var(--vft-loading-text-size)}.vft-loading-spinner .circular{display:inline;height:var(--vft-loading-spinner-size);width:var(--vft-loading-spinner-size);animation:var(--vft-loading-rotate-animation)}.vft-loading-spinner .circular-no-rotate{animation:none}.vft-loading-spinner .path{animation:loading-dash 1.5s ease-in-out infinite;stroke-dasharray:90,150;stroke-dashoffset:0;stroke-width:2;stroke:var(--vft-primary-color);stroke-linecap:round}.vft-loading-spinner i{color:var(--vft-primary-color)}.vft-loading-fade-enter-from,.vft-loading-fade-leave-to{opacity:0}@keyframes loading-rotate{100%{transform:rotate(360deg)}}@keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}100%{stroke-dasharray:90,150;stroke-dashoffset:-120px}}