vft 0.0.142 → 0.0.144

package/theme-style/src/mixins/mixins.scss

@@ -1,5 +1,6 @@
 @use 'function' as *;
 @use '../common/var' as *;
+
 // forward mixins
 @forward 'config';
 @forward 'function';
@@ -8,10 +9,18 @@
 @use 'config' as *;
 
 // Scrollbar
-@mixin scroll-bar($color: #c0c4cc, $width: 6px, $track-bgColor: transparent, $borderSize: 0px, $hover-color: $color, $isRoot: false) {
+@mixin scroll-bar(
+  $color: #c0c4cc,
+  $width: 6px,
+  $track-bgColor: transparent,
+  $borderSize: 0,
+  $hover-color: $color,
+  $isRoot: false
+) {
   $selector: '&::-webkit-scrollbar';
+
   @if $isRoot {
-    $selector: '::-webkit-scrollbar'
+    $selector: '::-webkit-scrollbar';
   }
 
   #{$selector} {
@@ -72,15 +81,20 @@
   }
 }
 
-
 //@include e(header) {} ==> .vft-tabs__header {}
 //@include @include e((nav-next, nav-prev)) {} ==> ,vft-tabs__nav-prev .vft-tabs__nav-next {}
 @mixin e($element) {
   $E: $element !global;
   $selector: &;
   $currentSelector: '';
+
   @each $unit in $element {
-    $currentSelector: #{$currentSelector + '.' + $B + $element-separator + $unit + ','};
+    $currentSelector: #{$currentSelector +
+      '.' +
+      $B +
+      $element-separator +
+      $unit +
+      ','};
   }
 
   @if hitAllSpecialNestRule($selector) {
@@ -103,8 +117,13 @@
 @mixin m($modifier) {
   $selector: &;
   $currentSelector: '';
+
   @each $unit in $modifier {
-    $currentSelector: #{$currentSelector + $selector + $modifier-separator + $unit + ','};
+    $currentSelector: #{$currentSelector +
+      $selector +
+      $modifier-separator +
+      $unit +
+      ','};
   }
 
   @at-root {
@@ -131,7 +150,12 @@
   }
 }
 
-@mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B) {
+@mixin spec-selector(
+  $specSelector: '',
+  $element: $E,
+  $modifier: false,
+  $block: $B
+) {
   $modifierCombo: '';
 
   @if $modifier {
@@ -139,7 +163,10 @@
   }
 
   @at-root {
-    #{&}#{$specSelector}.#{$block + $element-separator + $element + $modifierCombo} {
+    #{&}#{$specSelector}.#{$block
+      + $element-separator
+      + $element
+      + $modifierCombo} {
       @content;
     }
   }
@@ -190,6 +217,18 @@
 
 @mixin picker-popper($background, $border, $box-shadow) {
   &.#{$namespace}-popper {
+    @each $placement,
+      $adjacency
+        in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top')
+    {
+      &[data-popper-placement^='#{$placement}'] {
+        .#{$namespace}-popper__arrow::before {
+          border-#{$placement}-color: transparent;
+          border-#{$adjacency}-color: transparent;
+        }
+      }
+    }
+
     background: $background;
     border: $border;
     box-shadow: $box-shadow;
@@ -199,15 +238,6 @@
         border: $border;
       }
     }
-
-    @each $placement, $adjacency in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top') {
-      &[data-popper-placement^='#{$placement}'] {
-        .#{$namespace}-popper__arrow::before {
-          border-#{$placement}-color: transparent;
-          border-#{$adjacency}-color: transparent;
-        }
-      }
-    }
   }
 }
 
@@ -219,7 +249,6 @@
   }
 }
 
-
 // dark
 @mixin dark($block) {
   html.dark {
@@ -230,13 +259,14 @@
 }
 
 @mixin line-clamp($number: 1, $inline: false) {
-  overflow: hidden;
   @if $inline {
     // noinspection CssInvalidPropertyValue
     display: -webkit-inline-box;
   } @else {
     display: -webkit-box;
   }
+
+  overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: $number;
   line-clamp: $number;
@@ -248,21 +278,25 @@
   } @else {
     display: flex;
   }
+
   align-items: center;
   justify-content: center;
 }
 
 @mixin overlay($x: true, $y: true) {
-  @if ($x and $y) {
+  @if $x and $y {
     overflow: auto;
+
     // noinspection CssInvalidPropertyValue
     overflow: overlay;
-  } @else if ($x) {
+  } @else if $x {
     overflow-x: auto;
+
     // noinspection CssInvalidPropertyValue
     overflow-x: overlay;
   } @else {
     overflow-y: auto;
+
     // noinspection CssInvalidPropertyValue
     overflow-y: overlay;
   }
@@ -270,11 +304,13 @@
 
 @mixin hover-text-cursor($underline: false, $color: $primary-color) {
   cursor: pointer;
+
   &:hover {
-    color: $color;
     @if $underline {
       text-decoration: underline;
     }
+
+    color: $color;
   }
 }
 

package/theme-style/src/multiple-tabs.scss

@@ -19,23 +19,29 @@ $name: multiple-tabs;
 }
 
 .icon-refresh-right {
-  @include icon-common($icon-refresh-right)
+  @include icon-common($icon-refresh-right);
 }
+
 .icon-new-tab {
-  @include icon-common($icon-new-tab)
+  @include icon-common($icon-new-tab);
 }
+
 .icon-close-tab {
-  @include icon-common($icon-close-tab)
+  @include icon-common($icon-close-tab);
 }
+
 .icon-arrow-close-left {
-  @include icon-common($icon-arrow-close-left)
+  @include icon-common($icon-arrow-close-left);
 }
+
 .icon-arrow-close-right {
-  @include icon-common($icon-arrow-close-right)
+  @include icon-common($icon-arrow-close-right);
 }
+
 .icon-close-box-multiple-outline {
-  @include icon-common($icon-close-box-multiple-outline)
+  @include icon-common($icon-close-box-multiple-outline);
 }
+
 .icon-vector-square-delete {
-  @include icon-common($icon-vector-square-delete)
+  @include icon-common($icon-vector-square-delete);
 }

package/theme-style/src/pagination.scss

@@ -69,43 +69,6 @@
   display: flex;
   align-items: center;
 
-  .#{$namespace}-input__inner {
-    text-align: center;
-    -moz-appearance: textfield;
-  }
-
-  .#{$namespace}-select .#{$namespace}-input {
-    width: 128px;
-  }
-
-  button {
-    @include pagination-button;
-  }
-
-  .btn-prev,
-  .btn-next {
-    .#{$namespace}-icon {
-      display: block;
-      font-weight: bold;
-    }
-  }
-
-  & > * {
-    @include when(first) {
-      margin-left: 0 !important;
-    }
-    @include when(last) {
-      margin-right: 0 !important;
-    }
-  }
-
-  .btn-prev {
-    margin-left: getCssVar('pagination-item-gap');
-    .ico-ep\:arrow-left {
-      @include icon-common($icon-arrow-left)
-    }
-  }
-
   @include e(sizes) {
     margin-left: getCssVar('pagination-item-gap');
     font-weight: normal;
@@ -133,10 +96,6 @@
     font-weight: normal;
     color: getCssVar('text', 'regular-color');
 
-    &[disabled='true'] {
-      color: getCssVar('text', 'placeholder-color');
-    }
-
     @include e(goto) {
       margin-right: 8px;
     }
@@ -160,6 +119,10 @@
     @include e(classifier) {
       margin-left: 8px;
     }
+
+    &[disabled='true'] {
+      color: getCssVar('text', 'placeholder-color');
+    }
   }
 
   @include e(rightwrapper) {
@@ -218,19 +181,61 @@
     }
   }
 
+  @include icon-arrow-down;
+  @include icon-arrow-right;
+  @include icon-arrow-left;
+  @include icon-arrow-up;
+
+  .#{$namespace}-input__inner {
+    text-align: center;
+    -moz-appearance: textfield;
+  }
+
+  .#{$namespace}-select .#{$namespace}-input {
+    width: 128px;
+  }
+
+  button {
+    @include pagination-button;
+  }
+
+  .btn-prev,
+  .btn-next {
+    .#{$namespace}-icon {
+      display: block;
+      font-weight: bold;
+    }
+  }
+
+  & > * {
+    @include when(first) {
+      margin-left: 0 !important;
+    }
+
+    @include when(last) {
+      margin-right: 0 !important;
+    }
+  }
+
+  .btn-prev {
+    margin-left: getCssVar('pagination-item-gap');
+
+    .ico-ep\:arrow-left {
+      @include icon-common($icon-arrow-left);
+    }
+  }
+
   .icon-d-arrow-left {
-    @include icon-common($icon-d-arrow-left)
+    @include icon-common($icon-d-arrow-left);
   }
+
   .icon-d-arrow-right {
-    @include icon-common($icon-d-arrow-right)
+    @include icon-common($icon-d-arrow-right);
   }
+
   .icon-more-filled {
-    @include icon-common($icon-more-filled)
+    @include icon-common($icon-more-filled);
   }
-  @include icon-arrow-down;
-  @include icon-arrow-right;
-  @include icon-arrow-left;
-  @include icon-arrow-up;
 }
 
 @include b(pager) {

package/theme-style/src/popconfirm.scss

@@ -6,15 +6,17 @@
     display: flex;
     align-items: center;
   }
+
   @include e(icon) {
     margin-right: 5px;
   }
+
   @include e(action) {
     text-align: right;
     margin-top: 8px;
   }
 
   .icon-question-filled {
-    @include icon-common($icon-question-filled)
+    @include icon-common($icon-question-filled);
   }
 }

package/theme-style/src/progress.scss

@@ -89,19 +89,23 @@
   }
 
   .icon-warning-filled {
-    @include icon-common($icon-warning-filled)
+    @include icon-common($icon-warning-filled);
   }
+
   .icon-circle-check {
-    @include icon-common($icon-circle-check)
+    @include icon-common($icon-circle-check);
   }
+
   .icon-circle-close {
-    @include icon-common($icon-circle-close)
+    @include icon-common($icon-circle-close);
   }
+
   .icon-check {
-    @include icon-common($icon-check)
+    @include icon-common($icon-check);
   }
+
   .icon-close {
-    @include icon-common($icon-close)
+    @include icon-common($icon-close);
   }
 }
 
@@ -117,6 +121,7 @@
     position: relative;
     vertical-align: middle;
   }
+
   @include e(inner) {
     position: absolute;
     left: 0;
@@ -137,7 +142,16 @@
     }
 
     @include m(striped) {
-      background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent);
+      background-image: linear-gradient(
+        45deg,
+        rgba(0, 0, 0, 0.1) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(0, 0, 0, 0.1) 50%,
+        rgba(0, 0, 0, 0.1) 75%,
+        transparent 75%,
+        transparent
+      );
       background-size: 1.25em 1.25em;
       &.#{$namespace}-progress-bar__inner--striped-flow {
         animation: striped-flow 3s linear infinite;

package/theme-style/src/select.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-
 @use 'mixins/mixins' as *;
 @use 'mixins/var' as *;
 @use 'common/var' as *;
@@ -13,11 +12,36 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
 @include set-root-css-vars('select', $select);
 
 @include b(select) {
+  $selector: &;
+
+  @each $size in (large, small) {
+    @include m($size) {
+      @include e(wrapper) {
+        #{$selector}__combobox-input {
+          height: map.get($input-height, $size) - 8px;
+        }
+      }
+
+      @include e(caret) {
+        height: map.get($input-height, $size);
+      }
+
+      @include e(suffix) {
+        height: map.get($input-height, $size);
+      }
+
+      @include e(placeholder) {
+        font-size: map.get($input-font-size, $size);
+        line-height: map.get($input-line-height, $size);
+      }
+    }
+  }
+
   display: inline-block;
   position: relative;
   vertical-align: middle;
   font-size: map.get($input-font-size, 'default');
-  $selector: &;
+
   @include e(wrapper) {
     display: flex;
     align-items: center;
@@ -31,10 +55,6 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
     background-color: getCssVar('fill-color', 'blank');
     transition: getCssVar('transition', 'duration');
 
-    &:hover {
-      border-color: getCssVar('text', 'placeholder-color');
-    }
-
     @include when(filterable) {
       cursor: text;
     }
@@ -51,7 +71,6 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
 
     @include when(disabled) {
       cursor: not-allowed;
-
       background-color: getCssVar('fill-color', 'light');
       color: getCssVar('text', 'placeholder-color');
       border-color: getCssVar('select-disabled-border');
@@ -78,6 +97,10 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
       }
     }
 
+    &:hover {
+      border-color: getCssVar('text', 'placeholder-color');
+    }
+
     #{$selector}__input-wrapper {
       box-sizing: border-box;
       position: relative;
@@ -92,31 +115,29 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
     }
 
     #{$selector}__input-wrapper input {
-      @include set-css-var-value(
-        'input-inner-height',
-        calc(
-          var(
-              #{getCssVarName('component-size')},
-              #{map.get($input-height, 'default')}
-            ) - 8px
-        )
-      );
-
       height: getCssVar('input-inner-height');
       line-height: getCssVar('input-inner-height');
       min-width: 4px;
       width: 100%;
-
       background-color: transparent;
       -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none;
       background: 0 0;
       border: none;
-
       margin: 2px 0;
       outline: none;
       padding: 0;
+
+      @include set-css-var-value(
+        'input-inner-height',
+        calc(
+          var(
+              #{getCssVarName('component-size')},
+              #{map.get($input-height, 'default')}
+            ) - 8px
+        )
+      );
     }
   }
 
@@ -138,53 +159,6 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
     );
   }
 
-  @each $size in (large, small) {
-    @include m($size) {
-      @include e(wrapper) {
-        #{$selector}__combobox-input {
-          height: map.get($input-height, $size) - 8px;
-        }
-      }
-      @include e(caret) {
-        height: map.get($input-height, $size);
-      }
-      @include e(suffix) {
-        height: map.get($input-height, $size);
-      }
-      @include e(placeholder) {
-        font-size: map.get($input-font-size, $size);
-        line-height: map.get($input-line-height, $size);
-      }
-    }
-  }
-
-  #{$selector}__selection > span {
-    display: inline-block;
-  }
-
-  &:hover {
-    #{$selector}__combobox-input {
-      border-color: getCssVar('select-border-color-hover');
-    }
-  }
-
-  .#{$namespace}-select__selection-text {
-    text-overflow: ellipsis;
-    display: inline-block;
-    overflow-x: hidden;
-    vertical-align: bottom;
-  }
-
-  #{$selector}__combobox-input {
-    padding-right: 35px;
-    display: block;
-    color: getCssVar('text', 'regular-color');
-
-    &:focus {
-      border-color: getCssVar('select-input-focus-border-color');
-    }
-  }
-
   @include e(input) {
     border: none;
     outline: none;
@@ -228,7 +202,7 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
     );
 
     .#{$namespace}-input__icon {
-      height: inherit!important;
+      height: inherit !important;
 
       &:not(:first-child) {
         margin-left: 8px;
@@ -261,7 +235,7 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
     }
 
     &.#{$namespace}-icon {
-      height: inherit!important;
+      height: inherit !important;
 
       svg {
         vertical-align: middle;
@@ -302,16 +276,48 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
     transform: translateY(-50%);
     margin-inline-start: $input-inline-start;
     width: calc(100% - 52px);
-    @include line-clamp();
     color: var(
       #{getCssVarName('input-text-color')},
       map.get($input, 'text-color')
     );
+
+    @include line-clamp;
+
     @include when(transparent) {
       color: getCssVar('text', 'placeholder-color');
     }
   }
 
+  @include icon-arrow-up;
+  @include icon-circle-close;
+
+  #{$selector}__selection > span {
+    display: inline-block;
+  }
+
+  &:hover {
+    #{$selector}__combobox-input {
+      border-color: getCssVar('select-border-color-hover');
+    }
+  }
+
+  .#{$namespace}-select__selection-text {
+    text-overflow: ellipsis;
+    display: inline-block;
+    overflow-x: hidden;
+    vertical-align: bottom;
+  }
+
+  #{$selector}__combobox-input {
+    padding-right: 35px;
+    display: block;
+    color: getCssVar('text', 'regular-color');
+
+    &:focus {
+      border-color: getCssVar('select-input-focus-border-color');
+    }
+  }
+
   .#{$namespace}-select__selection .#{$namespace}-tag {
     box-sizing: border-box;
     border-color: transparent;
@@ -340,7 +346,4 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
       height: 18px;
     }
   }
-
-  @include icon-arrow-up;
-  @include icon-circle-close;
 }