vft 0.0.142 → 0.0.144

package/theme-style/src/alert.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-
 @use 'mixins/mixins' as *;
 @use 'mixins/var' as *;
 @use 'common/var' as *;
@@ -7,7 +6,28 @@
 $name: alert;
 
 @include b($name) {
-  @include set-component-css-var($name, $alert);
+  @each $type in (success, info, warning, error) {
+    @include m($type) {
+      @include css-var-from-global(
+        ('alert', 'bg-color'),
+        ($type, 'color', 'light-9')
+      );
+
+      &.is-light {
+        background-color: getCssVar('alert', 'bg-color');
+        color: getCssVar($type, 'color');
+
+        .#{$namespace}-alert__description {
+          color: getCssVar($type, 'color');
+        }
+      }
+
+      &.is-dark {
+        background-color: getCssVar($type, 'color');
+        color: getCssVar('color', 'white');
+      }
+    }
+  }
 
   width: 100%;
   padding: getCssVar('alert', 'padding');
@@ -22,6 +42,8 @@ $name: alert;
   align-items: center;
   transition: opacity getCssVar('transition-duration', 'fast');
 
+  @include set-component-css-var($name, $alert);
+
   @include when(light) {
     .#{$namespace}-alert__close-btn {
       color: getCssVar('text-placeholder-color');
@@ -41,34 +63,21 @@ $name: alert;
     justify-content: center;
   }
 
-  @each $type in (success, info, warning, error) {
-    @include m($type) {
-      @include css-var-from-global(
-        ('alert', 'bg-color'),
-        ($type, 'color', 'light-9')
-      );
-
-      &.is-light {
-        background-color: getCssVar('alert', 'bg-color');
-        color: getCssVar($type,'color');
-
-        .#{$namespace}-alert__description {
-          color: getCssVar($type, 'color');
-        }
-      }
-
-      &.is-dark {
-        background-color: getCssVar($type, 'color');
-        color: getCssVar('color', 'white');
-      }
-    }
-  }
-
   @include e(content) {
     display: table-cell;
     padding: 0 8px;
   }
 
+  @include e(title) {
+    font-size: getCssVar('alert', 'title-font-size');
+    line-height: 18px;
+    vertical-align: text-top;
+
+    @include when(bold) {
+      font-weight: bold;
+    }
+  }
+
   & .#{$namespace}-alert__icon {
     font-size: getCssVar('alert', 'icon-size');
     width: getCssVar('alert', 'icon-size');
@@ -79,18 +88,9 @@ $name: alert;
     }
   }
 
-  @include e(title) {
-    font-size: getCssVar('alert', 'title-font-size');
-    line-height: 18px;
-    vertical-align: text-top;
-    @include when(bold) {
-      font-weight: bold;
-    }
-  }
-
   & .#{$namespace}-alert__description {
     font-size: getCssVar('alert', 'description-font-size');
-    margin: 5px 0 0 0;
+    margin: 5px 0 0;
   }
 
   & .#{$namespace}-alert__close-btn {

package/theme-style/src/avatar.scss

@@ -6,12 +6,14 @@ $name: avatar;
 @include set-root-css-vars($name, $avatar);
 
 @include b($name) {
-  @include set-component-css-var('avatar-size', $avatar-size);
-
-  @include set-css-var-value(
+  @each $size in (small, large) {
+    @include m($size) {
+      @include set-css-var-value(
         ('avatar', 'size'),
-      map-get($avatar-size, 'default')
-  );
+        map-get($avatar-size, $size)
+      );
+    }
+  }
 
   display: inline-flex;
   justify-content: center;
@@ -25,10 +27,11 @@ $name: avatar;
   height: getCssVar('avatar', 'size');
   font-size: getCssVar('avatar', 'text-size');
 
-  > img {
-    display: block;
-    height: 100%;
-  }
+  @include set-component-css-var('avatar-size', $avatar-size);
+  @include set-css-var-value(
+    ('avatar', 'size'),
+    map-get($avatar-size, 'default')
+  );
 
   @include m(circle) {
     border-radius: 50%;
@@ -43,12 +46,8 @@ $name: avatar;
     font-size: getCssVar('avatar', 'icon-size');
   }
 
-  @each $size in (small, large) {
-    @include m($size) {
-      @include set-css-var-value(
-            ('avatar', 'size'),
-          map-get($avatar-size, $size)
-      );
-    }
+  > img {
+    display: block;
+    height: 100%;
   }
 }

package/theme-style/src/backtop.scss

@@ -8,7 +8,6 @@ $name: backtop;
 }
 
 @include b($name) {
-  @include set-component-css-var('backtop', $backtop);
   position: fixed;
   background-color: getCompCssVar('bg-color');
   width: 40px;
@@ -23,15 +22,17 @@ $name: backtop;
   cursor: pointer;
   z-index: getCssVar('z-index-backtop');
 
-  &:hover {
-    background-color: getCssVar('backtop', 'hover-bg-color');
-  }
+  @include set-component-css-var('backtop', $backtop);
 
   @include e(icon) {
     font-size: 20px;
   }
 
+  &:hover {
+    background-color: getCssVar('backtop', 'hover-bg-color');
+  }
+
   .icon-back-top {
-    @include icon-common($icon-back-top)
+    @include icon-common($icon-back-top);
   }
 }

package/theme-style/src/button.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-
 @use 'common/var' as *;
 @use 'mixins/button' as *;
 @use 'mixins/mixins' as *;
@@ -20,10 +19,43 @@ $button-icon-span-gap: map.merge(
 }
 
 @include b(button) {
+  @each $type in (primary, success, warning, danger, info) {
+    @include m($type) {
+      @include button-variant($type);
+    }
+  }
+
+  @each $size in (large, small) {
+    @include m($size) {
+      height: getCssVar('button', 'size');
+
+      @include set-css-var-value(
+        ('button', 'size'),
+        map.get($input-height, $size)
+      );
+      @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),
+        map.get($button-border-radius, $size)
+      );
+
+      @include when(circle) {
+        width: getCssVar('button', 'size');
+        padding: map.get($button-padding-vertical, $size) - $button-border-width;
+      }
+
+      & [class*='#{$namespace}-icon'] {
+        & + span {
+          margin-left: map.get($button-icon-span-gap, $size);
+        }
+      }
+    }
+  }
+
   display: inline-flex;
   justify-content: center;
   align-items: center;
-
   line-height: 1;
   // min-height will expand when in flex
   height: map.get($input-height, 'default');
@@ -42,34 +74,6 @@ $button-icon-span-gap: map.merge(
   border: getCssVar('border');
   border-color: getCssVar('button', 'border-color');
 
-  &:hover,
-  &:focus {
-    color: getCssVar('button', 'hover', 'text-color');
-    border-color: getCssVar('button', 'hover', 'border-color');
-    background-color: getCssVar('button', 'hover', 'bg-color');
-    outline: none;
-  }
-
-  &:active {
-    color: getCssVar('button', 'active', 'text-color');
-    border-color: getCssVar('button', 'active', 'border-color');
-    background-color: getCssVar('button', 'active', 'bg-color');
-    outline: none;
-  }
-
-  &:focus-visible {
-    //outline-offset: 1px;
-  }
-
-  > span {
-    display: inline-flex;
-    align-items: center;
-  }
-
-  & + & {
-    margin-left: 12px;
-  }
-
   @include button-size(
     map.get($button-padding-vertical, 'default') - $button-border-width,
     map.get($button-padding-horizontal, 'default') - $button-border-width,
@@ -77,19 +81,6 @@ $button-icon-span-gap: map.merge(
     map.get($button-border-radius, 'default')
   );
 
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  & [class*='#{$namespace}-icon'] {
-    & + span {
-      margin-left: map.get($button-icon-span-gap, 'default');
-    }
-    svg {
-      vertical-align: bottom;
-    }
-  }
-
   @include when(block) {
     width: 100%;
   }
@@ -132,8 +123,7 @@ $button-icon-span-gap: map.merge(
     position: relative;
     pointer-events: none;
 
-
-    &:before {
+    &::before {
       // mask the button
       z-index: 1;
       pointer-events: none;
@@ -151,9 +141,11 @@ $button-icon-span-gap: map.merge(
       margin-right: 2px;
     }
   }
+
   @include when(round) {
     border-radius: getCssVar('border-radius', 'round');
   }
+
   @include when(circle) {
     border-radius: 50%;
     padding: map.get($button-padding-vertical, 'default') - $button-border-width;
@@ -170,6 +162,19 @@ $button-icon-span-gap: map.merge(
     }
 
     &:not(.is-disabled) {
+      @include when(has-bg) {
+        background-color: getCssVar('fill-color', 'light');
+
+        &:hover,
+        &:focus {
+          background-color: getCssVar('fill-color');
+        }
+
+        &:active {
+          background-color: getCssVar('fill-color', 'dark');
+        }
+      }
+
       &:hover,
       &:focus {
         background-color: getCssVar('fill-color', 'light');
@@ -183,19 +188,6 @@ $button-icon-span-gap: map.merge(
       &:active {
         background-color: getCssVar('fill-color');
       }
-
-      @include when(has-bg) {
-        background-color: getCssVar('fill-color', 'light');
-
-        &:hover,
-        &:focus {
-          background-color: getCssVar('fill-color');
-        }
-
-        &:active {
-          background-color: getCssVar('fill-color', 'dark');
-        }
-      }
     }
   }
 
@@ -213,17 +205,17 @@ $button-icon-span-gap: map.merge(
     padding: 2px;
     height: auto;
 
-    &:hover,
-    &:focus {
-      color: getCssVar('button', 'hover', 'link-text-color');
-    }
-
     @include when(disabled) {
       color: getCssVar('button', 'disabled', 'text-color');
       background-color: transparent !important;
       border-color: transparent !important;
     }
 
+    &:hover,
+    &:focus {
+      color: getCssVar('button', 'hover', 'link-text-color');
+    }
+
     &:not(.is-disabled) {
       &:hover,
       &:focus {
@@ -245,6 +237,7 @@ $button-icon-span-gap: map.merge(
     color: getCssVar('primary', 'color');
     padding-left: 0;
     padding-right: 0;
+
     @include when(disabled) {
       color: getCssVar('button', 'disabled', 'text-color');
       background-color: transparent !important;
@@ -274,42 +267,49 @@ $button-icon-span-gap: map.merge(
     }
   }
 
-  @each $type in (primary, success, warning, danger, info) {
-    @include m($type) {
-      @include button-variant($type);
-    }
+  &:hover,
+  &:focus {
+    color: getCssVar('button', 'hover', 'text-color');
+    border-color: getCssVar('button', 'hover', 'border-color');
+    background-color: getCssVar('button', 'hover', 'bg-color');
+    outline: none;
   }
 
-  @each $size in (large, small) {
-    @include m($size) {
-      @include set-css-var-value(
-        ('button', 'size'),
-        map.get($input-height, $size)
-      );
+  &:active {
+    color: getCssVar('button', 'active', 'text-color');
+    border-color: getCssVar('button', 'active', 'border-color');
+    background-color: getCssVar('button', 'active', 'bg-color');
+    outline: none;
+  }
 
-      height: getCssVar('button', 'size');
+  &:focus-visible {
+    //outline-offset: 1px;
+  }
 
-      & [class*='#{$namespace}-icon'] {
-        & + span {
-          margin-left: map.get($button-icon-span-gap, $size);
-        }
-      }
+  > span {
+    display: inline-flex;
+    align-items: center;
+  }
 
-      @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),
-        map.get($button-border-radius, $size)
-      );
+  & + & {
+    margin-left: 12px;
+  }
 
-      @include when(circle) {
-        width: getCssVar('button', 'size');
-        padding: map.get($button-padding-vertical, $size) - $button-border-width;
-      }
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  & [class*='#{$namespace}-icon'] {
+    & + span {
+      margin-left: map.get($button-icon-span-gap, 'default');
+    }
+
+    svg {
+      vertical-align: bottom;
     }
   }
 
   .icon-loading {
-    @include icon-common($icon-loading)
+    @include icon-common($icon-loading);
   }
 }

package/theme-style/src/col.scss

@@ -14,7 +14,6 @@
 
 .#{$namespace}-col-0 {
   display: none;
-  // to avoid introducing !important syntax, redundant css rule is required due to selector priority.
   @include when(guttered) {
     display: none;
   }

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

@@ -1,5 +1,4 @@
 @use 'sass:map';
-
 @use 'mixins/mixins' as *;
 @use 'common/var' as *;
 
@@ -53,6 +52,10 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
     border-radius: 4px;
     cursor: pointer;
 
+    @include when(alpha) {
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+    }
+
     &:nth-child(10n + 1) {
       margin-left: 0;
     }
@@ -66,10 +69,6 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
       height: 100%;
       border-radius: 3px;
     }
-
-    @include when(alpha) {
-      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
-    }
   }
 }
 
@@ -84,8 +83,9 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
 
   @include e(bar) {
     position: relative;
-    @include bar-background;
     height: 100%;
+
+    @include bar-background;
   }
 
   @include e(thumb) {
@@ -176,6 +176,7 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
   box-sizing: border-box;
   width: 280px;
   height: 12px;
+
   @include alpha-bg;
 
   @include e(bar) {
@@ -241,30 +242,6 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
 }
 
 @include b(color-picker) {
-  display: inline-block;
-  position: relative;
-  line-height: normal;
-  outline: none;
-
-  &:hover:not(.is-disabled) {
-    .#{$namespace}-color-picker__trigger {
-      border: 1px solid getCssVar('border-color-hover');
-    }
-  }
-
-  &:focus-visible:not(.is-disabled) {
-    .#{$namespace}-color-picker__trigger {
-      outline: 2px solid getCssVar('primary-color');
-      outline-offset: 1px;
-    }
-  }
-
-  @include when(disabled) {
-    .#{$namespace}-color-picker__trigger {
-      cursor: not-allowed;
-    }
-  }
-
   @each $size in (large, small) {
     @include m($size) {
       height: map.get($color-picker-size, $size);
@@ -281,6 +258,17 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
     }
   }
 
+  display: inline-block;
+  position: relative;
+  line-height: normal;
+  outline: none;
+
+  @include when(disabled) {
+    .#{$namespace}-color-picker__trigger {
+      cursor: not-allowed;
+    }
+  }
+
   @include m(small) {
     .#{$namespace}-color-picker__icon,
     .#{$namespace}-color-picker__empty {
@@ -304,7 +292,6 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
     display: inline-flex;
     justify-content: center;
     align-items: center;
-
     box-sizing: border-box;
     height: map.get($color-picker-size, 'default');
     width: map.get($color-picker-size, 'default');
@@ -340,19 +327,6 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
     height: 100%;
   }
 
-  & .#{$namespace}-color-picker__empty {
-    font-size: 12px;
-    color: getCssVar('text-secondary-color');
-  }
-
-  & .#{$namespace}-color-picker__icon {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    color: $color-white;
-    font-size: 12px;
-  }
-
   @include e(panel) {
     position: absolute;
     z-index: 10;
@@ -367,7 +341,33 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
   }
 
   @include icon-arrow-down;
-  @include icon-circle-close
+  @include icon-circle-close;
+
+  &:hover:not(.is-disabled) {
+    .#{$namespace}-color-picker__trigger {
+      border: 1px solid getCssVar('border-color-hover');
+    }
+  }
+
+  &:focus-visible:not(.is-disabled) {
+    .#{$namespace}-color-picker__trigger {
+      outline: 2px solid getCssVar('primary-color');
+      outline-offset: 1px;
+    }
+  }
+
+  & .#{$namespace}-color-picker__empty {
+    font-size: 12px;
+    color: getCssVar('text-secondary-color');
+  }
+
+  & .#{$namespace}-color-picker__icon {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    color: $color-white;
+    font-size: 12px;
+  }
 }
 
 .#{bem('color-picker')},