vft 0.0.142 → 0.0.144

package/theme-style/src/menu.scss

@@ -23,10 +23,16 @@ $name: menu;
   cursor: pointer;
   position: relative;
   transition: border-color getCssVar('transition-duration'),
-  background-color getCssVar('transition-duration'),
-  color getCssVar('transition-duration');
+    background-color getCssVar('transition-duration'),
+    color getCssVar('transition-duration');
   white-space: nowrap;
 
+  @include when(disabled) {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background: none !important;
+  }
+
   * {
     vertical-align: bottom;
   }
@@ -43,18 +49,12 @@ $name: menu;
 
   &:hover {
     background-color: getCompCssVar('hover-bg-color');
-
-  }
-
-  @include when(disabled) {
-    opacity: 0.5;
-    cursor: not-allowed;
-    background: none !important;
   }
 
   .#{$namespace}-sub-menu__text {
-    @include line-clamp;
     word-break: break-all;
+
+    @include line-clamp;
   }
 }
 
@@ -69,14 +69,17 @@ $name: menu;
   scroll-behavior: smooth;
 
   @include m(vertical) {
-    &:not(.#{$namespace}-menu--collapse):not(.#{$namespace}-menu--popup-container) {
+    &:not(.#{$namespace}-menu--collapse):not(
+        .#{$namespace}-menu--popup-container
+      ) {
       & .#{$namespace}-menu-item,
       & .#{$namespace}-sub-menu__title,
       & .#{$namespace}-menu-item-group__title {
         //white-space: nowrap;
         padding-left: calc(
-          #{getCompCssVar('base-level-padding')} + #{getCompCssVar('level')} *
-          #{getCompCssVar('level-padding')}
+          #{getCompCssVar('base-level-padding')} + #{getCompCssVar('level')} * #{getCompCssVar(
+              'level-padding'
+            )}
         );
       }
     }
@@ -108,9 +111,7 @@ $name: menu;
       display: inline-flex;
       justify-content: center;
       align-items: center;
-
       height: 100%;
-
       margin: 0;
       border-bottom: getCompCssVar('item-border-bottom');
       color: getCompCssVar('text-color');
@@ -135,7 +136,7 @@ $name: menu;
 
       &.is-active {
         > .#{$namespace}-sub-menu__title {
-          border-bottom: getCompCssVar('item-active-border-bottom');;
+          border-bottom: getCompCssVar('item-active-border-bottom');
           color: getCompCssVar('active-color');
 
           &:hover {
@@ -182,7 +183,7 @@ $name: menu;
       //background-color: getCompCssVar('focus-bg-color');
     }
     & > .#{$namespace}-menu-item.is-active {
-      border-bottom: getCompCssVar('item-active-border-bottom');;
+      border-bottom: getCompCssVar('item-active-border-bottom');
       color: getCompCssVar('active-color');
     }
   }
@@ -190,12 +191,15 @@ $name: menu;
   @include m(collapse) {
     width: calc(
       #{getCompCssVar('icon-width')} + #{getCompCssVar('base-level-padding')} *
-      2
+        2
     );
 
     > .#{$namespace}-menu-item,
     > .#{$namespace}-sub-menu > .#{$namespace}-sub-menu__title,
-    > .#{$namespace}-menu-item-group > ul > .#{$namespace}-sub-menu > .#{$namespace}-sub-menu__title {
+    > .#{$namespace}-menu-item-group
+      > ul
+      > .#{$namespace}-sub-menu
+      > .#{$namespace}-sub-menu__title {
       [class^='#{$namespace}-icon'] {
         margin: 0;
         vertical-align: middle;
@@ -225,7 +229,7 @@ $name: menu;
     }
 
     .#{$namespace}-sub-menu__text {
-      padding-right: 0px;
+      padding-right: 0;
     }
   }
 
@@ -257,17 +261,17 @@ $name: menu;
     }
   }
 
-  .#{$namespace}-icon {
-    flex-shrink: 0;
-  }
-
   @include icon-arrow-left;
   @include icon-arrow-right;
   @include icon-arrow-down;
   @include icon-arrow-up;
 
+  .#{$namespace}-icon {
+    flex-shrink: 0;
+  }
+
   .icon-menu-line {
-    @include icon-common($icon-menu-line)
+    @include icon-common($icon-menu-line);
   }
 }
 
@@ -280,14 +284,6 @@ $name: menu;
   @include e(title) {
     @include menu-item;
 
-    &:hover {
-      background-color: getCompCssVar('hover-bg-color');
-
-      .vft-icon {
-        color: getCompCssVar('hover-text-color') !important;
-      }
-    }
-
     //padding-right: calc(
     //  #{getCssVar('menu-base-level-padding')} + #{getCssVar('menu-icon-width')}
     //);
@@ -297,31 +293,35 @@ $name: menu;
         padding-right: getCompCssVar('base-level-padding');
       }
     }
+
+    &:hover {
+      background-color: getCompCssVar('hover-bg-color');
+
+      .vft-icon {
+        color: getCompCssVar('hover-text-color') !important;
+      }
+    }
   }
-  & .#{$namespace}-menu {
-    border: none;
-  }
-  & .#{$namespace}-menu-item {
-    height: getCompCssVar('sub-item-height');
-    line-height: getCompCssVar('sub-item-height');
-    min-width: getCompCssVar('item-min-width');
-  }
+
   @include e(hide-arrow) {
     .#{$namespace}-sub-menu__icon-arrow {
       display: none !important;
     }
   }
+
   @include when(active) {
+    background-color: getCompCssVar('no-popup-active-bg-color');
     .#{$namespace}-sub-menu__title {
       border-bottom-color: getCompCssVar('active-color');
     }
+
     &.is-opened {
       > .#{$namespace}-sub-menu__title {
         color: getCompCssVar('active-color');
       }
     }
-    background-color: getCompCssVar('no-popup-active-bg-color');
   }
+
   @include when(disabled) {
     .#{$namespace}-sub-menu__title,
     .#{$namespace}-menu-item {
@@ -330,12 +330,21 @@ $name: menu;
       background: none !important;
     }
   }
+  & .#{$namespace}-menu {
+    border: none;
+  }
+  & .#{$namespace}-menu-item {
+    height: getCompCssVar('sub-item-height');
+    line-height: getCompCssVar('sub-item-height');
+    min-width: getCompCssVar('item-min-width');
+  }
   .#{$namespace}-icon {
     vertical-align: middle;
     margin-right: getCompCssVar('icon-mr');
     text-align: center;
 
-    &.#{$namespace}-sub-menu__icon-more, &.#{$namespace}-sub-menu__icon-arrow {
+    &.#{$namespace}-sub-menu__icon-more,
+    &.#{$namespace}-sub-menu__icon-arrow {
       margin-right: 0 !important;
     }
   }
@@ -348,18 +357,20 @@ $name: menu;
 @include b(menu-item) {
   @include menu-item;
 
-  & [class^='#{$namespace}-icon'] {
-    margin-right: getCompCssVar('icon-mr');
-    width: getCompCssVar('icon-width');
-    text-align: center;
-    vertical-align: middle;
-  }
   @include when(active) {
     color: getCompCssVar('active-color');
+
     i {
       color: inherit;
     }
   }
+
+  & [class^='#{$namespace}-icon'] {
+    margin-right: getCompCssVar('icon-mr');
+    width: getCompCssVar('icon-width');
+    text-align: center;
+    vertical-align: middle;
+  }
   .#{$namespace}-menu-tooltip__trigger {
     position: absolute;
     left: 0;
@@ -372,27 +383,32 @@ $name: menu;
   }
 
   .vft-menu-item__text {
-    @include line-clamp($inline: true);
     word-break: break-all;
     white-space: break-spaces;
+
+    @include line-clamp($inline: true);
   }
 }
 
 @include b(menu-item-group) {
-  > ul {
-    padding: 0;
-  }
   @include e(title) {
-    padding: 0px getCompCssVar('base-level-padding');
+    padding: 0 getCompCssVar('base-level-padding');
     line-height: getCompCssVar(sub-item-height);
     height: getCompCssVar(sub-item-height);
     font-size: 12px;
     color: getCssVar('text-secondary-color');
-    @include line-clamp()
+
+    @include line-clamp;
+  }
+
+  > ul {
+    padding: 0;
   }
 }
 
-.horizontal-collapse-transition .#{$namespace}-sub-menu__title .#{$namespace}-sub-menu__icon-arrow {
+.horizontal-collapse-transition
+  .#{$namespace}-sub-menu__title
+  .#{$namespace}-sub-menu__icon-arrow {
   transition: getCssVar('transition-duration-fast');
   opacity: 0;
 }

package/theme-style/src/message.scss

@@ -10,6 +10,42 @@ $name: message;
 }
 
 @include b($name) {
+  @each $type in (success, info, warning, error) {
+    @include m($type) {
+      @include css-var-from-global(
+        ('message', 'bg-color'),
+        ($type, 'color', 'light-9')
+      );
+      @include css-var-from-global(
+        ('message', 'border-color'),
+        ($type, 'color', 'light-8')
+      );
+      @include css-var-from-global(('message', 'text-color'), ($type, 'color'));
+
+      .#{$namespace}-message__content {
+        color: getCompCssVar('text-color');
+        overflow-wrap: anywhere;
+      }
+    }
+
+    & .#{$namespace}-message-icon--#{$type} {
+      display: flex;
+      align-items: center;
+      color: getCompCssVar('text-color');
+
+      @include set-component-css-var(
+        'icon',
+        (
+          'text-color': getCompCssVar('text-color'),
+        )
+      );
+
+      i {
+        color: inherit !important;
+      }
+    }
+  }
+
   width: fit-content;
   max-width: calc(100% - 32px);
   box-sizing: border-box;
@@ -37,36 +73,25 @@ $name: message;
     }
   }
 
-  p {
-    margin: 0;
+  @include e(icon) {
+    margin-right: 10px;
   }
 
-  @each $type in (success, info, warning, error) {
-    @include m($type) {
-      @include css-var-from-global(('message', 'bg-color'), ($type, 'color', 'light-9'));
-      @include css-var-from-global(('message', 'border-color'), ($type, 'color', 'light-8'));
-      @include css-var-from-global(('message', 'text-color'), ($type, 'color'));
-
-      .#{$namespace}-message__content {
-        color: getCompCssVar('text-color');
-        overflow-wrap: anywhere;
-      }
-    }
-
-    & .#{$namespace}-message-icon--#{$type} {
-      display: flex;
-      align-items: center;
-      @include set-component-css-var('icon', ('text-color':getCompCssVar('text-color')));
+  @include e(content) {
+    padding: 0;
+    font-size: 14px;
+    line-height: 1;
 
-      color: getCompCssVar('text-color');
-      i {
-        color: inherit !important;
-      }
+    &:focus {
+      outline-width: 0;
     }
   }
 
-  @include e(icon) {
-    margin-right: 10px;
+  @include icon-circle-close-filled;
+  @include icon-circle-close;
+
+  p {
+    margin: 0;
   }
 
   .#{$namespace}-message__badge {
@@ -75,15 +100,6 @@ $name: message;
     right: -8px;
   }
 
-  @include e(content) {
-    padding: 0;
-    font-size: 14px;
-    line-height: 1;
-    &:focus {
-      outline-width: 0;
-    }
-  }
-
   & .#{$namespace}-message__closeBtn {
     position: absolute;
     top: 50%;
@@ -96,20 +112,19 @@ $name: message;
     &:focus {
       outline-width: 0;
     }
+
     &:hover {
       color: getCssVar('message', 'close-hover-color');
     }
   }
 
   .icon-success-filled {
-    @include icon-common($icon-success-filled)
+    @include icon-common($icon-success-filled);
   }
 
   .icon-warning-filled {
-    @include icon-common($icon-warning-filled)
+    @include icon-common($icon-warning-filled);
   }
-  @include icon-circle-close-filled;
-  @include icon-circle-close;
 }
 
 .#{$namespace}-message-fade-enter-from,

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

@@ -1,5 +1,4 @@
 @use 'sass:map';
-
 @use 'config';
 @use 'function' as *;
 @use '../common/var' as *;
@@ -29,18 +28,24 @@
 // --vft-primary-color-light-9: #ffe6e6;
 // --vft-primary-color-dark-2: #cc0000;
 @mixin set-css-color-type($colors, $type) {
-  @include set-css-var-value(($type, 'color'), map.get($colors, $type, 'base'));
-
   @each $i in (3, 5, 7, 8, 9) {
-    @include set-css-var-value(($type, 'color', 'light', $i), map.get($colors, $type, 'light-#{$i}'));
+    @include set-css-var-value(
+      ($type, 'color', 'light', $i),
+      map.get($colors, $type, 'light-#{$i}')
+    );
   }
 
-  @include set-css-var-value(($type, 'color', 'dark-2'), map.get($colors, $type, 'dark-2'));
+  @include set-css-var-value(($type, 'color'), map.get($colors, $type, 'base'));
+  @include set-css-var-value(
+    ($type, 'color', 'dark-2'),
+    map.get($colors, $type, 'dark-2')
+  );
 }
 
 // html css vars (can set dark)
 @mixin set-root-css-vars($name, $variables, $isDark: false) {
   $selector: ':root';
+
   @if $isDark {
     $selector: ':root.dark';
   }
@@ -50,7 +55,6 @@
   }
 }
 
-
 // genereate comp css vars
 // set-component-css-var('tabs', ('header-height': 40px,'bg-color': red ))
 // {
@@ -72,7 +76,13 @@
 // --vft-success-color-rgb: 62, 175, 124;
 @mixin set-css-color-rgb($type) {
   $color: map.get($colors, $type, 'base');
-  @include set-css-var-value(($type, 'color', 'rgb'), #{red($color), green($color), blue($color)});
+
+  @include set-css-var-value(
+    ($type, 'color', 'rgb'),
+    #{red($color),
+    green($color),
+    blue($color)}
+  );
 }
 
 // generate css var from existing css var
@@ -82,5 +92,6 @@
 @mixin css-var-from-global($var, $gVar) {
   $varName: joinVarName($var);
   $gVarName: joinVarName($gVar);
+
   #{$varName}: var(#{$gVarName});
 }

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

@@ -4,6 +4,7 @@
 @function selectorToString($selector) {
   $selector: inspect($selector);
   $selector: str-slice($selector, 2, -2);
+
   @return $selector;
 }
 
@@ -39,18 +40,21 @@
 }
 
 @function hitAllSpecialNestRule($selector) {
-  @return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
+  @return containsModifier($selector) or containWhenFlag($selector) or
+    containPseudoClass($selector);
 }
 
 // join var name
 // joinVarName(('button', 'text-color')) => '--vft-button-text-color'
 @function joinVarName($list) {
   $name: '--' + config.$namespace;
+
   @each $item in $list {
     @if $item != '' {
       $name: $name + '-' + $item;
     }
   }
+
   @return $name;
 }
 

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

@@ -3,50 +3,50 @@
 @mixin icon-common($dataUrl) {
   mask: url($dataUrl) no-repeat;
   mask-size: 100% 100%;
-  background-color: currentColor;
-  color: var(--vft-icon-color);
+  background-color: currentcolor;
+  color: inherit;
   width: 1em;
   height: 1em;
 }
 
 @mixin icon-close {
   .icon-close {
-    @include icon-common($icon-close)
+    @include icon-common($icon-close);
   }
 }
 
 @mixin icon-circle-close {
   .icon-circle-close {
-    @include icon-common($icon-circle-close)
+    @include icon-common($icon-circle-close);
   }
 }
 
 @mixin icon-circle-close-filled {
   .icon-circle-close-filled {
-    @include icon-common($icon-circle-close-filled)
+    @include icon-common($icon-circle-close-filled);
   }
 }
 
 @mixin icon-arrow-down {
   .icon-arrow-down {
-    @include icon-common($icon-arrow-down)
+    @include icon-common($icon-arrow-down);
   }
 }
 
 @mixin icon-arrow-left {
   .icon-arrow-left {
-    @include icon-common($icon-arrow-left)
+    @include icon-common($icon-arrow-left);
   }
 }
 
 @mixin icon-arrow-right {
   .icon-arrow-right {
-    @include icon-common($icon-arrow-right)
+    @include icon-common($icon-arrow-right);
   }
 }
 
 @mixin icon-arrow-up {
   .icon-arrow-up {
-    @include icon-common($icon-arrow-up)
+    @include icon-common($icon-arrow-up);
   }
 }