vft 0.0.142 → 0.0.144

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

@@ -6,13 +6,14 @@
 @use '../mixins/mixins.scss' as *;
 
 html.dark {
-  color-scheme: dark;
 
   // hex colors
   @each $type in (primary, success, warning, danger, error, info) {
     @include set-css-color-type($colors, $type);
   }
 
+  color-scheme: dark;
+
   // --el-box-shadow-#{$type}
   @include set-component-css-var('box-shadow', $box-shadow);
 
@@ -20,7 +21,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', $text-color);
+  @include set-component-css-var('text', $text);
   // --el-border-color-#{$type}
   @include set-component-css-var('border-color', $border-color);
   // Fill --el-fill-color-#{$type}
@@ -64,5 +65,3 @@ html.dark {
 @include dark(context-menu) {
   background-color: black;
 }
-
-

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

@@ -1,11 +1,11 @@
 @use 'sass:map';
 @use 'sass:math';
-
 @use '../common/var.scss' as common;
 @use '../mixins/mixins.scss' as *;
 @use '../color/index.scss' as *;
 
 $colors: () !default;
+
 @each $type in common.$types {
   $colors: map.deep-merge(
     (
@@ -69,6 +69,7 @@ $bg-color: map.merge(
     @include set-color-mix-level($type, $i, 'light', map.get($bg-color, ''));
   }
 }
+
 @each $type in common.$types {
   @include set-color-mix-level($type, 2, 'dark', common.$color-white);
 }
@@ -101,24 +102,24 @@ $border-color: map.merge(
 // Box-shadow
 $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),
-      ),
-      'light': (
-        0px 0px 12px rgba(0, 0, 0, 0.72),
-      ),
-      'lighter': (
-        0px 0px 6px rgba(0, 0, 0, 0.72),
-      ),
-      'dark': (
-        0px 16px 48px 16px rgba(0, 0, 0, 0.72),
-        0px 12px 32px #000,
-        0px 8px 16px -8px #000,
-      ),
+  (
+    '': (
+      0 12px 32px 4px rgba(0, 0, 0, 0.36),
+      0 8px 20px rgba(0, 0, 0, 0.72),
+    ),
+    'light': (
+      0 0 12px rgba(0, 0, 0, 0.72),
     ),
-    $box-shadow
+    'lighter': (
+      0 0 6px rgba(0, 0, 0, 0.72),
+    ),
+    'dark': (
+      0 16px 48px 16px rgba(0, 0, 0, 0.72),
+      0 12px 32px #000,
+      0 8px 16px -8px #000,
+    ),
+  ),
+  $box-shadow
 );
 
 // fill
@@ -139,7 +140,7 @@ $fill-color: map.merge(
 
 // mix to hex to avoid overlay issues
 @each $key, $val in $fill-color {
-  @if ($key != 'blank') {
+  @if  $key != 'blank' {
     $fill-color: map.merge(
       $fill-color,
       (
@@ -150,23 +151,23 @@ $fill-color: map.merge(
 }
 
 // text
-$text-color-base: #fff;
-$text-color: () !default;
-$text-color: map.merge(
+$text-base: #fff;
+$text: () !default;
+$text: map.merge(
   (
-    'primary-color': rgba($text-color-base, 0.96),
-    '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),
+    'primary-color': rgba($text-base, 0.96),
+    'regular-color': rgba($text-base, 0.85),
+    'secondary-color': rgba($text-base, 0.65),
+    'placeholder-color': rgba($text-base, 0.55),
+    'disabled-color': rgba($text-base, 0.4),
   ),
-  $text-color
+  $text
 );
 
 // mix to hex to avoid overlay issues
-@each $key, $val in $text-color {
-  $text-color: map.merge(
-    $text-color,
+@each $key, $val in $text {
+  $text: map.merge(
+    $text,
     (
       $key: mix-overlay-color($val, map.get($bg-color, '')),
     )
@@ -220,47 +221,42 @@ $empty: map.merge(
   ),
   $empty
 );
-
 $header-layout: () !default;
 $header-layout: map-merge(
-    (
-      bg-color: #21263e,
-    ),
-    $header-layout
+  (
+    bg-color: #21263e,
+  ),
+  $header-layout
 );
-
 $multiple-tabs: () !default;
 $multiple-tabs: map-merge(
-    (
-      bg-color: #21263e,
-    ),
-    $multiple-tabs
+  (
+    bg-color: #21263e,
+  ),
+  $multiple-tabs
 );
-
 $footer-layout: () !default;
 $footer-layout: map-merge(
-    (
-      bg-color: #21263e,
-    ),
-    $footer-layout
+  (
+    bg-color: #21263e,
+  ),
+  $footer-layout
 );
-
 $tabs: () !default;
 $tabs: map-merge(
-    (
-      "item-color": #dbe1f0,
-      "item-color-active": #262626,
-      "item-color-hover": #262626
-    ),
-    $tabs
+  (
+    'item-color': #dbe1f0,
+    'item-color-active': #262626,
+    'item-color-hover': #262626,
+  ),
+  $tabs
 );
-
 $menu: () !default;
 $menu: map-merge(
-    (
-      "hover-bg-color": getCssVar("primary-color-light-7"),
-      "focus-bg-color": getCssVar("primary-color-light-7"),
-      "item-hover-fill": getCssVar("primary-color-light-7"),
-    ),
-    $menu
+  (
+    'hover-bg-color': getCssVar('primary-color-light-7'),
+    'focus-bg-color': getCssVar('primary-color-light-7'),
+    'item-hover-fill': getCssVar('primary-color-light-7'),
+  ),
+  $menu
 );

package/theme-style/src/date-picker/date-picker.scss

@@ -10,27 +10,6 @@
 @include b(date-picker) {
   width: 322px;
 
-  &.has-sidebar.has-time {
-    width: 434px;
-  }
-
-  &.has-sidebar {
-    width: 438px;
-  }
-
-  &.has-time .#{$namespace}-picker-panel__body-wrapper {
-    position: relative;
-  }
-
-  .#{$namespace}-picker-panel__content {
-    width: 292px;
-  }
-
-  table {
-    table-layout: fixed;
-    width: 100%;
-  }
-
   @include e(editor-wrap) {
     position: relative;
     display: table-cell;
@@ -74,6 +53,7 @@
     &:hover {
       color: getCssVar('datepicker-hover-text-color');
     }
+
     &:focus-visible {
       outline: none;
       color: getCssVar('datepicker-hover-text-color');
@@ -104,21 +84,44 @@
     margin-left: 10px;
   }
 
+  &.has-sidebar.has-time {
+    width: 434px;
+  }
+
+  &.has-sidebar {
+    width: 438px;
+  }
+
+  &.has-time .#{$namespace}-picker-panel__body-wrapper {
+    position: relative;
+  }
+
+  .#{$namespace}-picker-panel__content {
+    width: 292px;
+  }
+
+  table {
+    table-layout: fixed;
+    width: 100%;
+  }
+
   .#{$namespace}-time-panel {
     position: absolute;
   }
 
-
   .icon-d-arrow-left {
-    @include icon-common($icon-d-arrow-left)
+    @include icon-common($icon-d-arrow-left);
   }
+
   .icon-arrow-left {
-    @include icon-common($icon-arrow-left)
+    @include icon-common($icon-arrow-left);
   }
+
   .icon-arrow-right {
-    @include icon-common($icon-arrow-right)
+    @include icon-common($icon-arrow-right);
   }
+
   .icon-d-arrow-right {
-    @include icon-common($icon-d-arrow-right)
+    @include icon-common($icon-d-arrow-right);
   }
 }

package/theme-style/src/date-picker/time-spinner.scss

@@ -2,12 +2,6 @@
 @use '../common/var' as *;
 
 @include b(time-spinner) {
-  &.has-seconds {
-    .#{$namespace}-time-spinner__wrapper {
-      width: 33.3%;
-    }
-  }
-
   @include e(wrapper) {
     max-height: 192px;
     overflow: auto;
@@ -16,10 +10,6 @@
     vertical-align: top;
     position: relative;
 
-    &.#{$namespace}-scrollbar__wrap:not(.#{$namespace}-scrollbar__wrap--hidden-default) {
-      padding-bottom: 15px;
-    }
-
     @include when(arrow) {
       box-sizing: border-box;
       text-align: center;
@@ -29,11 +19,19 @@
         transform: translateY(-32px);
       }
 
-      .#{$namespace}-time-spinner__item:hover:not(.is-disabled):not(.is-active) {
+      .#{$namespace}-time-spinner__item:hover:not(.is-disabled):not(
+          .is-active
+        ) {
         background: getCssVar('fill-color', 'light');
         cursor: default;
       }
     }
+
+    &.#{$namespace}-scrollbar__wrap:not(
+        .#{$namespace}-scrollbar__wrap--hidden-default
+      ) {
+      padding-bottom: 15px;
+    }
   }
 
   @include e(arrow) {
@@ -91,7 +89,7 @@
     font-size: 12px;
     color: getCssVar('text-regular-color');
 
-    &:hover:not(.is-disabled):not(.is-active) {
+    &:hover:not(.is-disabled, .is-active) {
       background: getCssVar('fill-color', 'light');
       cursor: pointer;
     }
@@ -106,4 +104,10 @@
       cursor: not-allowed;
     }
   }
+
+  &.has-seconds {
+    .#{$namespace}-time-spinner__wrapper {
+      width: 33.3%;
+    }
+  }
 }

package/theme-style/src/date-picker.scss

@@ -7,4 +7,3 @@
 @forward './date-picker/date-range-picker.scss';
 @forward './date-picker/time-range-picker.scss';
 @forward './date-picker/time-picker.scss';
-

package/theme-style/src/descriptions-item.scss

@@ -10,7 +10,6 @@ $descriptions-item-label-margin-right: map-merge(
   ),
   $descriptions-item-label-margin-right
 );
-
 $descriptions-item-vertical-label-padding-bottom: () !default;
 $descriptions-item-vertical-label-padding-bottom: map-merge(
   (
@@ -22,6 +21,25 @@ $descriptions-item-vertical-label-padding-bottom: map-merge(
 );
 
 @include b(descriptions) {
+  @each $size in (large, small) {
+    @include m($size) {
+      @include e(label) {
+        &:not(.is-bordered-label) {
+          margin-right: map-get($descriptions-item-label-margin-right, $size);
+        }
+
+        &.#{$namespace}-descriptions__cell:not(
+            .is-bordered-label
+          ).is-vertical-label {
+          padding-bottom: map-get(
+            $descriptions-item-vertical-label-padding-bottom,
+            $size
+          );
+        }
+      }
+    }
+  }
+
   @include e(label) {
     &.#{$namespace}-descriptions__cell.is-bordered-label {
       font-weight: bold;
@@ -34,7 +52,9 @@ $descriptions-item-vertical-label-padding-bottom: map-merge(
       margin-right: map-get($descriptions-item-label-margin-right, 'default');
     }
 
-    &.#{$namespace}-descriptions__cell:not(.is-bordered-label).is-vertical-label {
+    &.#{$namespace}-descriptions__cell:not(
+        .is-bordered-label
+      ).is-vertical-label {
       padding-bottom: map-get(
         $descriptions-item-vertical-label-padding-bottom,
         'default'
@@ -51,21 +71,4 @@ $descriptions-item-vertical-label-padding-bottom: map-merge(
       color: getCssVar('text-regular-color');
     }
   }
-
-  @each $size in (large, small) {
-    @include m($size) {
-      @include e(label) {
-        &:not(.is-bordered-label) {
-          margin-right: map-get($descriptions-item-label-margin-right, $size);
-        }
-
-        &.#{$namespace}-descriptions__cell:not(.is-bordered-label).is-vertical-label {
-          padding-bottom: map-get(
-            $descriptions-item-vertical-label-padding-bottom,
-            $size
-          );
-        }
-      }
-    }
-  }
 }

package/theme-style/src/descriptions.scss

@@ -11,7 +11,6 @@ $descriptions-header-margin-bottom: map-merge(
   ),
   $descriptions-header-margin-bottom
 );
-
 $descriptions-title-font-size: () !default;
 $descriptions-title-font-size: map-merge(
   (
@@ -21,7 +20,6 @@ $descriptions-title-font-size: map-merge(
   ),
   $descriptions-title-font-size
 );
-
 $descriptions-cell-padding-bottom: () !default;
 $descriptions-cell-padding-bottom: map-merge(
   (
@@ -31,7 +29,6 @@ $descriptions-cell-padding-bottom: map-merge(
   ),
   $descriptions-cell-padding-bottom
 );
-
 $descriptions-bordered-cell-padding: () !default;
 $descriptions-bordered-cell-padding: map-merge(
   (
@@ -41,7 +38,6 @@ $descriptions-bordered-cell-padding: map-merge(
   ),
   $descriptions-bordered-cell-padding
 );
-
 $descriptions-cell-font-size: () !default;
 $descriptions-cell-font-size: map-merge(
   (
@@ -53,12 +49,46 @@ $descriptions-cell-font-size: map-merge(
 );
 
 @include b(descriptions) {
-  @include set-component-css-var('descriptions', $descriptions);
+  @each $size in (large, small) {
+    @include m($size) {
+      font-size: map-get($input-font-size, $size);
+
+      @include e(header) {
+        margin-bottom: map-get($descriptions-header-margin-bottom, $size);
+
+        @include e(title) {
+          font-size: map-get($descriptions-title-font-size, $size);
+        }
+      }
+
+      @include e(body) {
+        .#{$namespace}-descriptions__table {
+          .#{$namespace}-descriptions__cell {
+            font-size: map-get($descriptions-cell-font-size, $size);
+          }
+
+          &.is-bordered {
+            .#{$namespace}-descriptions__cell {
+              padding: map-get($descriptions-bordered-cell-padding, $size);
+            }
+          }
+
+          &:not(.is-bordered) {
+            .#{$namespace}-descriptions__cell {
+              padding-bottom: map-get($descriptions-cell-padding-bottom, $size);
+            }
+          }
+        }
+      }
+    }
+  }
 
   box-sizing: border-box;
   font-size: getCssVar('font-size', 'base');
   color: getCssVar('text-primary-color');
 
+  @include set-component-css-var('descriptions', $descriptions);
+
   @include e(header) {
     display: flex;
     justify-content: space-between;
@@ -72,8 +102,6 @@ $descriptions-cell-font-size: map-merge(
     }
   }
 
-
-
   @include e(body) {
     background-color: getCssVar('fill-color', 'blank');
 
@@ -120,38 +148,4 @@ $descriptions-cell-font-size: map-merge(
       }
     }
   }
-
-  @each $size in (large, small) {
-    @include m($size) {
-      font-size: map-get($input-font-size, $size);
-
-      @include e(header) {
-        margin-bottom: map-get($descriptions-header-margin-bottom, $size);
-
-        @include e(title) {
-          font-size: map-get($descriptions-title-font-size, $size);
-        }
-      }
-
-      @include e(body) {
-        .#{$namespace}-descriptions__table {
-          .#{$namespace}-descriptions__cell {
-            font-size: map-get($descriptions-cell-font-size, $size);
-          }
-
-          &.is-bordered {
-            .#{$namespace}-descriptions__cell {
-              padding: map-get($descriptions-bordered-cell-padding, $size);
-            }
-          }
-
-          &:not(.is-bordered) {
-            .#{$namespace}-descriptions__cell {
-              padding-bottom: map-get($descriptions-cell-padding-bottom, $size);
-            }
-          }
-        }
-      }
-    }
-  }
 }

package/theme-style/src/dialog.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-
 @use 'mixins/mixins' as *;
 @use 'mixins/var' as *;
 @use 'common/var' as *;
@@ -7,8 +6,6 @@
 $name: dialog;
 
 @include b($name) {
-  @include set-component-css-var('dialog', $dialog);
-
   position: relative;
   margin: var(#{getCssVarName('dialog-margin-top')}, 15vh) auto 50px;
   background: getCssVar('dialog', 'bg-color');
@@ -17,21 +14,19 @@ $name: dialog;
   box-sizing: border-box;
   width: var(#{getCssVarName('dialog-width')}, 50%);
 
-  &:focus {
-    outline: none !important;
-  }
+  @include set-component-css-var('dialog', $dialog);
 
   @include when(align-center) {
     margin: auto;
   }
 
   @include when(fullscreen) {
-    @include set-css-var-value('dialog-width', 100%);
-    @include set-css-var-value('dialog-margin-top', 0);
-
     margin-bottom: 0;
     height: 100%;
     overflow: auto;
+
+    @include set-css-var-value('dialog-width', 100%);
+    @include set-css-var-value('dialog-margin-top', 0);
   }
 
   @include e(wrapper) {
@@ -52,7 +47,8 @@ $name: dialog;
   }
 
   @include e(header) {
-    padding: getCssVar('dialog', 'padding-primary') getCssVar('dialog', 'padding-primary') 10px;
+    padding: getCssVar('dialog', 'padding-primary')
+      getCssVar('dialog', 'padding-primary') 10px;
     margin-right: 16px;
   }
 
@@ -96,7 +92,8 @@ $name: dialog;
   }
 
   @include e(footer) {
-    padding: 10px getCssVar('dialog-padding-primary') getCssVar('dialog-padding-primary');
+    padding: 10px getCssVar('dialog-padding-primary')
+      getCssVar('dialog-padding-primary');
     text-align: right;
     box-sizing: border-box;
   }
@@ -116,6 +113,10 @@ $name: dialog;
   }
 
   @include icon-close;
+
+  &:focus {
+    outline: none !important;
+  }
 }
 
 .#{$namespace}-overlay-dialog {
@@ -148,6 +149,7 @@ $name: dialog;
     transform: translate3d(0, -20px, 0);
     opacity: 0;
   }
+
   100% {
     transform: translate3d(0, 0, 0);
     opacity: 1;
@@ -159,6 +161,7 @@ $name: dialog;
     transform: translate3d(0, 0, 0);
     opacity: 1;
   }
+
   100% {
     transform: translate3d(0, -20px, 0);
     opacity: 0;
@@ -169,6 +172,7 @@ $name: dialog;
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
@@ -178,6 +182,7 @@ $name: dialog;
   0% {
     opacity: 1;
   }
+
   100% {
     opacity: 0;
   }

package/theme-style/src/empty.scss

@@ -10,6 +10,15 @@ $name: empty;
 }
 
 @include b($name) {
+  @each $size in (large, small) {
+    @include m($size) {
+      @include e(image) {
+        width: getCompCssVar('img-size', $size);
+        height: getCompCssVar('img-size', $size);
+      }
+    }
+  }
+
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -28,16 +37,6 @@ $name: empty;
     }
   }
 
-  @each $size in (large, small) {
-    @include m($size) {
-      @include e(image) {
-
-        width: getCompCssVar('img-size', $size);
-        height: getCompCssVar('img-size', $size);
-      }
-    }
-  }
-
   @include e(desc) {
     margin-top: getCompCssVar('desc-top');
     color: getCompCssVar('desc-color');