vft 0.0.146 → 0.0.148

package/theme-style/src/autocomplete.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-
 @use 'mixins/mixins' as *;
 @use 'common/var' as *;
 
@@ -31,6 +30,26 @@
     padding: 0;
   }
 
+  @include when(loading) {
+    li {
+      text-align: center;
+      height: 100px;
+      line-height: 100px;
+      font-size: 20px;
+      color: getCssVar('text-secondary-color');
+
+      @include utils-vertical-center;
+
+      &:hover {
+        background-color: getCssVar('bg-color', 'overlay');
+      }
+    }
+
+    & .#{$namespace}-icon-loading {
+      vertical-align: middle;
+    }
+  }
+
   & li {
     padding: 0 20px;
     margin: 0;
@@ -61,23 +80,4 @@
       margin-bottom: -6px;
     }
   }
-
-  @include when(loading) {
-    li {
-      text-align: center;
-      height: 100px;
-      line-height: 100px;
-      font-size: 20px;
-      color: getCssVar('text-secondary-color');
-      @include utils-vertical-center;
-
-      &:hover {
-        background-color: getCssVar('bg-color', 'overlay');
-      }
-    }
-
-    & .#{$namespace}-icon-loading {
-      vertical-align: middle;
-    }
-  }
 }

package/theme-style/src/badge.scss

@@ -1,27 +1,30 @@
 @use 'sass:math';
 @use 'sass:map';
-
 @use 'mixins/mixins' as *;
 @use 'mixins/var' as *;
 @use 'common/var' as *;
 
 @include b(badge) {
-  @include set-component-css-var('badge', $badge);
-
   position: relative;
   vertical-align: middle;
   display: inline-block;
   width: fit-content;
 
+  @include set-component-css-var('badge', $badge);
+
   @include e(content) {
+    @each $type in (primary, success, warning, info, danger) {
+      @include m($type) {
+        background-color: getCssVar('color', $type);
+      }
+    }
+
     background-color: getCssVar('badge', 'bg-color');
     border-radius: getCssVar('badge', 'radius');
     color: getCssVar('color', 'white');
-
     display: inline-flex;
     justify-content: center;
     align-items: center;
-
     font-size: getCssVar('badge', 'font-size');
     height: getCssVar('badge', 'size');
     padding: 0 getCssVar('badge', 'padding');
@@ -47,11 +50,5 @@
       right: 0;
       border-radius: 50%;
     }
-
-    @each $type in (primary, success, warning, info, danger) {
-      @include m($type) {
-        background-color: getCssVar('color', $type);
-      }
-    }
   }
 }

package/theme-style/src/breadcrumb.scss

@@ -4,6 +4,7 @@
 @include b(breadcrumb) {
   font-size: 14px;
   line-height: 1;
+
   @include utils-clearfix;
 
   @include e(separator) {
@@ -14,6 +15,7 @@
     &.#{$namespace}-icon {
       margin: 0 6px;
       font-weight: normal;
+
       svg {
         vertical-align: middle;
       }

package/theme-style/src/button-group.scss

@@ -1,27 +1,51 @@
 @use 'sass:map';
-
 @use 'common/var' as *;
 @use 'mixins/mixins' as *;
 
 @include b(button-group) {
-  @include utils-clearfix;
+  @each $type in (primary, success, warning, danger, info) {
+    .#{$namespace}-button--#{$type} {
+      &:first-child {
+        border-right-color: getCssVar('button', 'divide-border-color');
+      }
+
+      &:last-child {
+        border-left-color: getCssVar('button', 'divide-border-color');
+      }
+
+      &:not(:first-child, :last-child) {
+        border-left-color: getCssVar('button', 'divide-border-color');
+        border-right-color: getCssVar('button', 'divide-border-color');
+      }
+    }
+  }
+
   display: inline-block;
   vertical-align: middle;
 
+  @include utils-clearfix;
+
   & > .#{$namespace}-button {
     float: left;
     position: relative;
+
+    @include when(active) {
+      z-index: 1;
+    }
     & + .#{$namespace}-button {
       margin-left: 0;
     }
+
     &:first-child {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }
+
     &:last-child {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
+
     &:first-child:last-child {
       border-top-right-radius: map.get($button-border-radius, 'default');
       border-bottom-right-radius: map.get($button-border-radius, 'default');
@@ -36,9 +60,11 @@
         border-radius: 50%;
       }
     }
-    &:not(:first-child):not(:last-child) {
+
+    &:not(:first-child, :last-child) {
       border-radius: 0;
     }
+
     &:not(:last-child) {
       margin-right: -1px;
     }
@@ -48,10 +74,6 @@
     &:active {
       z-index: 1;
     }
-
-    @include when(active) {
-      z-index: 1;
-    }
   }
 
   & > .#{$namespace}-dropdown {
@@ -61,19 +83,4 @@
       border-left-color: getCssVar('button', 'divide-border-color');
     }
   }
-
-  @each $type in (primary, success, warning, danger, info) {
-    .#{$namespace}-button--#{$type} {
-      &:first-child {
-        border-right-color: getCssVar('button', 'divide-border-color');
-      }
-      &:last-child {
-        border-left-color: getCssVar('button', 'divide-border-color');
-      }
-      &:not(:first-child):not(:last-child) {
-        border-left-color: getCssVar('button', 'divide-border-color');
-        border-right-color: getCssVar('button', 'divide-border-color');
-      }
-    }
-  }
 }

package/theme-style/src/calendar.scss

@@ -3,10 +3,10 @@
 @use 'common/var' as *;
 
 @include b(calendar) {
-  @include set-component-css-var('calendar', $calendar);
-
   background-color: getCssVar('fill-color', 'blank');
 
+  @include set-component-css-var('calendar', $calendar);
+
   @include e(header) {
     display: flex;
     justify-content: space-between;
@@ -28,6 +28,17 @@
   table-layout: fixed;
   width: 100%;
 
+  @include b(calendar-day) {
+    box-sizing: border-box;
+    padding: 8px;
+    height: getCssVar('calendar', 'cell-width');
+
+    &:hover {
+      cursor: pointer;
+      background-color: getCssVar('calendar', 'selected-bg-color');
+    }
+  }
+
   thead th {
     padding: 12px 0;
     color: getCssVar('text-regular-color');
@@ -67,14 +78,4 @@
   tr.#{$namespace}-calendar-table__row--hide-border td {
     border-top: none;
   }
-
-  @include b(calendar-day) {
-    box-sizing: border-box;
-    padding: 8px;
-    height: getCssVar('calendar', 'cell-width');
-    &:hover {
-      cursor: pointer;
-      background-color: getCssVar('calendar', 'selected-bg-color');
-    }
-  }
 }

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

@@ -23,6 +23,7 @@
     @include m(card) {
       width: 50%;
       transition: transform 0.4s ease-in-out;
+
       &.is-in-stage {
         cursor: pointer;
         z-index: getCssVar('z-index', 'normal');
@@ -31,6 +32,7 @@
           opacity: 0.12;
         }
       }
+
       &.is-active {
         z-index: calc(getCssVar('z-index', 'normal') + 1);
       }

package/theme-style/src/carousel.scss

@@ -1,14 +1,13 @@
 @use 'sass:math';
-
 @use 'mixins/mixins' as *;
 @use 'mixins/var' as *;
 @use 'common/var' as *;
 
 @include b(carousel) {
-  @include set-component-css-var('carousel', $carousel);
-
   position: relative;
 
+  @include set-component-css-var('carousel', $carousel);
+
   @include m(horizontal) {
     overflow-x: hidden;
   }
@@ -90,6 +89,7 @@
       .#{$namespace}-carousel__indicator:hover button {
         opacity: 0.64;
       }
+
       button {
         background-color: getCssVar('carousel', 'indicator-out-color');
         opacity: 0.24;
@@ -120,10 +120,6 @@
     background-color: transparent;
     cursor: pointer;
 
-    &:hover button {
-      opacity: 0.72;
-    }
-
     @include m(horizontal) {
       display: inline-block;
       padding: getCssVar('carousel-indicator-padding-vertical')
@@ -144,6 +140,10 @@
         opacity: 1;
       }
     }
+
+    &:hover button {
+      opacity: 0.72;
+    }
   }
 
   @include e(button) {

package/theme-style/src/cascader-panel.scss

@@ -23,14 +23,6 @@
   color: getCssVar('cascader-menu', 'text-color');
   border-right: getCssVar('cascader-menu', 'border');
 
-  &:last-child {
-    border-right: none;
-
-    .#{$namespace}-cascader-node {
-      padding-right: 20px;
-    }
-  }
-
   @include e(wrap) {
     // Raise the priority
     &.#{$namespace}-scrollbar__wrap {
@@ -69,6 +61,14 @@
       margin-right: 2px;
     }
   }
+
+  &:last-child {
+    border-right: none;
+
+    .#{$namespace}-cascader-node {
+      padding-right: 20px;
+    }
+  }
 }
 
 @include b(cascader-node) {
@@ -80,26 +80,6 @@
   line-height: 34px;
   outline: none;
 
-  &.is-selectable.in-active-path {
-    color: getCssVar('cascader-menu', 'text-color');
-  }
-
-  &.in-active-path,
-  &.is-selectable.in-checked-path,
-  &.is-active {
-    color: getCssVar('cascader-menu', 'selected-text-color');
-    font-weight: bold;
-  }
-
-  &:not(.is-disabled) {
-    cursor: pointer;
-
-    &:hover,
-    &:focus {
-      background: getCssVar('cascader-node', 'background-hover');
-    }
-  }
-
   @include when(disabled) {
     color: getCssVar('cascader-node', 'color-disabled');
     cursor: not-allowed;
@@ -124,6 +104,26 @@
     text-overflow: ellipsis;
   }
 
+  &.is-selectable.in-active-path {
+    color: getCssVar('cascader-menu', 'text-color');
+  }
+
+  &.in-active-path,
+  &.is-selectable.in-checked-path,
+  &.is-active {
+    color: getCssVar('cascader-menu', 'selected-text-color');
+    font-weight: bold;
+  }
+
+  &:not(.is-disabled) {
+    cursor: pointer;
+
+    &:hover,
+    &:focus {
+      background: getCssVar('cascader-node', 'background-hover');
+    }
+  }
+
   > .#{$namespace}-checkbox {
     margin-right: 0;
   }

package/theme-style/src/cascader.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-
 @use 'mixins/mixins' as *;
 @use 'mixins/var' as *;
 @use 'common/var' as *;
@@ -36,7 +35,12 @@
 }
 
 @include b(cascader) {
-  @include set-component-css-var('cascader', $cascader);
+  @each $size in (large, small) {
+    @include m($size) {
+      font-size: map.get($input-font-size, $size);
+      line-height: map.get($input-height, $size);
+    }
+  }
 
   display: inline-block;
   vertical-align: middle;
@@ -45,66 +49,7 @@
   line-height: map.get($input-height, 'default');
   outline: none;
 
-  &:not(.is-disabled):hover {
-    .#{$namespace}-input__wrapper {
-      cursor: pointer;
-      box-shadow: 0 0 0 1px getCssVar('input', 'hover-border-color') inset;
-    }
-  }
-
-  .#{$namespace}-input {
-    display: flex;
-    cursor: pointer;
-
-    .#{$namespace}-input__inner {
-      text-overflow: ellipsis;
-      cursor: pointer;
-    }
-
-    .#{$namespace}-input__suffix-inner {
-      .#{$namespace}-icon {
-        height: calc(100% - 2px);
-
-        svg {
-          vertical-align: middle;
-        }
-      }
-    }
-
-    .icon-arrow-down {
-      transition: transform getCssVar('transition-duration');
-      font-size: 14px;
-
-      @include when(reverse) {
-        transform: rotateZ(180deg);
-      }
-    }
-
-    .icon-circle-close:hover {
-      color: var(
-        #{getCssVarName('input', 'clear-hover-color')},
-        map.get($input, 'clear-hover-color')
-      );
-    }
-
-    @include when(focus) {
-      .#{$namespace}-input__wrapper {
-        box-shadow: 0 0 0 1px
-          var(
-            #{getCssVarName('input', 'focus-border-color')},
-            map.get($input, 'focus-border-color')
-          )
-          inset;
-      }
-    }
-  }
-
-  @each $size in (large, small) {
-    @include m($size) {
-      font-size: map.get($input-font-size, $size);
-      line-height: map.get($input-height, $size);
-    }
-  }
+  @include set-component-css-var('cascader', $cascader);
 
   @include when(disabled) {
     .#{$namespace}-cascader__label {
@@ -143,12 +88,14 @@
     line-height: normal;
     text-align: left;
     box-sizing: border-box;
+
     @include cascader-tag-normal(getCssVar('cascader-tag-background'));
   }
 
   @include e(collapse-tags) {
     white-space: normal;
     z-index: getCssVar('z-index-normal');
+
     @include cascader-tag-normal(getCssVar('fill-color'));
   }
 
@@ -205,7 +152,6 @@
     border: none;
     outline: none;
     box-sizing: border-box;
-
     background: transparent;
 
     &::placeholder {
@@ -213,4 +159,58 @@
       color: transparent;
     }
   }
+
+  &:not(.is-disabled):hover {
+    .#{$namespace}-input__wrapper {
+      cursor: pointer;
+      box-shadow: 0 0 0 1px getCssVar('input', 'hover-border-color') inset;
+    }
+  }
+
+  .#{$namespace}-input {
+    display: flex;
+    cursor: pointer;
+
+    @include when(focus) {
+      .#{$namespace}-input__wrapper {
+        box-shadow: 0 0 0 1px
+          var(
+            #{getCssVarName('input', 'focus-border-color')},
+            map.get($input, 'focus-border-color')
+          )
+          inset;
+      }
+    }
+
+    .#{$namespace}-input__inner {
+      text-overflow: ellipsis;
+      cursor: pointer;
+    }
+
+    .#{$namespace}-input__suffix-inner {
+      .#{$namespace}-icon {
+        height: calc(100% - 2px);
+
+        svg {
+          vertical-align: middle;
+        }
+      }
+    }
+
+    .icon-arrow-down {
+      transition: transform getCssVar('transition-duration');
+      font-size: 14px;
+
+      @include when(reverse) {
+        transform: rotateZ(180deg);
+      }
+    }
+
+    .icon-circle-close:hover {
+      color: var(
+        #{getCssVarName('input', 'clear-hover-color')},
+        map.get($input, 'clear-hover-color')
+      );
+    }
+  }
 }

package/theme-style/src/check-tag.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-
 @use 'mixins/mixins' as *;
 @use 'common/var' as *;
 
@@ -15,15 +14,16 @@
   transition: getCssVar('transition', 'all');
   font-weight: bold;
 
-  &:hover {
-    background-color: getCssVar('color', 'info', 'light-7');
-  }
-
   @include when(checked) {
     background-color: getCssVar('primary-color', 'light-8');
     color: getCssVar('primary-color');
+
     &:hover {
       background-color: getCssVar('primary-color', 'light-7');
     }
   }
+
+  &:hover {
+    background-color: getCssVar('color', 'info', 'light-7');
+  }
 }

package/theme-style/src/checkbox-button.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-
 @use 'common/var' as *;
 @use 'mixins/mixins' as *;
 @use 'mixins/var' as *;
@@ -10,6 +9,19 @@
 }
 
 @include b(checkbox-button) {
+  @each $size in (large, small) {
+    @include m($size) {
+      .#{$namespace}-checkbox-button__inner {
+        @include button-size(
+          map.get($button-padding-vertical, $size) - $button-border-width,
+          map.get($button-padding-horizontal, $size) - $button-border-width,
+          map.get($button-font-size, $size),
+          0
+        );
+      }
+    }
+  }
+
   position: relative;
   display: inline-block;
 
@@ -123,17 +135,4 @@
       border-bottom-right-radius: getCssVar('border-radius-base');
     }
   }
-
-  @each $size in (large, small) {
-    @include m($size) {
-      .#{$namespace}-checkbox-button__inner {
-        @include button-size(
-          map.get($button-padding-vertical, $size) - $button-border-width,
-          map.get($button-padding-horizontal, $size) - $button-border-width,
-          map.get($button-font-size, $size),
-          0
-        );
-      }
-    }
-  }
 }