vft 0.0.71 → 0.0.72

package/theme-style/src/menu.scss

@@ -34,7 +34,7 @@ $name: menu;
 
   i {
     flex-shrink: 0;
-    margin-right: getCompCssVar('icon-mr');;
+    margin-right: getCompCssVar('icon-mr');
   }
 
   &:hover,
@@ -67,6 +67,8 @@ $name: menu;
   padding-left: 0;
   background-color: getCompCssVar('bg-color');
   box-sizing: border-box;
+  scroll-behavior: smooth;
+
   @include m(vertical) {
     &:not(.#{$namespace}-menu--collapse):not(.#{$namespace}-menu--popup-container) {
       & .#{$namespace}-menu-item,
@@ -79,11 +81,17 @@ $name: menu;
         );
       }
     }
-    @include b(menu-item) {
-      white-space: initial;
+
+    &:not(.vft-menu--collapse) {
+      .#{$namespace}-sub-menu__text {
+        white-space: break-spaces;
+      }
     }
-    .#{$namespace}-sub-menu__text {
-      white-space: break-spaces;
+
+    & > .#{$namespace}-sub-menu {
+      @include e(title) {
+        padding-right: calc(#{getCssVar('menu-base-level-padding')} + #{getCssVar('menu-icon-width')});
+      }
     }
   }
 
@@ -204,7 +212,7 @@ $name: menu;
         display: none;
       }
 
-      > .#{$namespace}-sub-menu__text {
+      > .#{$namespace}-sub-menu__text span {
         height: 0;
         width: 0;
         overflow: hidden;
@@ -220,6 +228,10 @@ $name: menu;
     .#{$namespace}-menu .#{$namespace}-sub-menu {
       min-width: 200px;
     }
+
+    .#{$namespace}-sub-menu__text {
+      padding-right: 0px;
+    }
   }
   @include m(popup) {
     z-index: 100;
@@ -230,7 +242,6 @@ $name: menu;
 
     // Todo radius
     border-radius: getCompCssVar('popup-border-radius');
-
   }
 
   .#{$namespace}-icon {
@@ -242,10 +253,9 @@ $name: menu;
   @include menu-item;
 
   & [class^='#{$namespace}-icon'] {
-    margin-right: 5px;
+    margin-right: getCompCssVar('icon-mr');
     width: getCompCssVar('icon-width');
     text-align: center;
-    font-size: 18px;
     vertical-align: middle;
   }
   @include when(active) {
@@ -265,23 +275,32 @@ $name: menu;
     box-sizing: border-box;
     padding: 0 getCompCssVar('base-level-padding');
   }
+  span {
+    @include line-clamp();
+    word-break: break-all;
+    white-space: break-spaces;
+  }
 }
 
 @include b(sub-menu) {
   list-style: none;
   margin: 0;
   padding-left: 0;
-  background: getCompCssVar('sub-menu-bg-color');;
+  background: getCompCssVar('sub-menu-bg-color');
 
   @include e(title) {
     @include menu-item;
-
     &:hover {
       background-color: getCompCssVar('hover-bg-color');
     }
 
+    //&:not(.vft-menu--collapse) {
+    //  .#{$namespace}-sub-menu__text {
+    //    white-space: break-spaces;
+    //  }
+    //}
     @include e(text) {
-      padding-right: 30px;
+      padding-right: getCompCssVar('base-level-padding');
     }
 
   }
@@ -302,6 +321,12 @@ $name: menu;
     .#{$namespace}-sub-menu__title {
       border-bottom-color: getCompCssVar('active-color');
     }
+    &.is-opened {
+
+      > .#{$namespace}-sub-menu__title {
+        color: getCompCssVar('active-color');
+      }
+    }
   }
   @include when(disabled) {
     .#{$namespace}-sub-menu__title,
@@ -313,7 +338,7 @@ $name: menu;
   }
   .#{$namespace}-icon {
     vertical-align: middle;
-    margin-right: getCompCssVar('icon-mr');;
+    margin-right: getCompCssVar('icon-mr');
     text-align: center;
 
     &.#{$namespace}-sub-menu__icon-more {
@@ -333,10 +358,12 @@ $name: menu;
     padding: 0;
   }
   @include e(title) {
-    padding: 7px 0 7px getCompCssVar('base-level-padding');
-    line-height: normal;
+    padding: 0px getCompCssVar('base-level-padding');
+    line-height: getCompCssVar(sub-item-height);
+    height: getCompCssVar(sub-item-height);
     font-size: 12px;
-    color: getCssVar('text-color', 'secondary');
+    color: getCssVar('text-secondary-color');
+    @include line-clamp()
   }
 }
 
@@ -344,4 +371,3 @@ $name: menu;
   transition: getCssVar('transition-duration-fast');
   opacity: 0;
 }
-

package/theme-style/src/message-box.scss

@@ -0,0 +1,258 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+@use 'common/popup' as *;
+
+@include b(message-box) {
+  @include set-component-css-var('messagebox', $messagebox);
+}
+
+@include b(message-box) {
+  display: inline-block;
+  max-width: getCssVar('messagebox-width');
+  width: 100%;
+  padding-bottom: 10px;
+  vertical-align: middle;
+  background-color: getCssVar('bg-color');
+  border-radius: getCssVar('messagebox-border-radius');
+  border: 1px solid getCssVar('border-color-lighter');
+  font-size: getCssVar('messagebox-font-size');
+  box-shadow: getCssVar('box-shadow-light');
+  text-align: left;
+  overflow: hidden;
+  backface-visibility: hidden;
+  // To avoid small screen overflowing, see #11919
+  box-sizing: border-box;
+
+  &:focus {
+    outline: none !important;
+  }
+
+  @at-root .#{$namespace}-overlay.is-message-box {
+    .#{$namespace}-overlay-message-box {
+      text-align: center;
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      padding: 16px;
+      overflow: auto;
+
+      &::after {
+        content: '';
+        display: inline-block;
+        height: 100%;
+        width: 0;
+        vertical-align: middle;
+      }
+    }
+  }
+
+  @include when(draggable) {
+    @include e(header) {
+      cursor: move;
+      user-select: none;
+    }
+  }
+
+  @include e(header) {
+    position: relative;
+    padding: getCssVar('messagebox-padding-primary');
+    padding-bottom: 10px;
+  }
+
+  @include e(title) {
+    padding-left: 0;
+    margin-bottom: 0;
+    font-size: getCssVar('messagebox-font-size');
+    line-height: 1;
+    color: getCssVar('messagebox-title-color');
+  }
+
+  @include e(headerbtn) {
+    position: absolute;
+    top: getCssVar('messagebox-padding-primary');
+    right: getCssVar('messagebox-padding-primary');
+    padding: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: var(
+      #{getCssVarName('message-close-size')},
+      map.get($message, 'close-size')
+    );
+    cursor: pointer;
+
+    .#{$namespace}-message-box__close {
+      color: getCssVar('info-color');
+      font-size: inherit;
+    }
+
+    &:focus,
+    &:hover {
+      .#{$namespace}-message-box__close {
+        color: getCssVar('primary-color');
+      }
+    }
+  }
+
+  @include e(content) {
+    padding: 10px getCssVar('messagebox-padding-primary');
+    color: getCssVar('messagebox-content-color');
+    font-size: getCssVar('messagebox-content-font-size');
+  }
+
+  @include e(container) {
+    position: relative;
+  }
+
+  @include e(input) {
+    padding-top: 15px;
+
+    & div.invalid > input {
+      border-color: getCssVar('error-color');
+
+      &:focus {
+        border-color: getCssVar('error-color');
+      }
+    }
+  }
+
+  @include e(status) {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 24px !important;
+
+    &::before {
+      // 防止图标切割
+      padding-left: 1px;
+    }
+
+    &.#{$namespace}-icon {
+      // 防止 el-icon 的position样式覆盖
+      position: absolute;
+    }
+
+    + .#{$namespace}-message-box__message {
+      padding-left: 36px;
+      padding-right: 12px;
+      word-break: break-word;
+    }
+
+    @each $type in (success, info, warning, error) {
+      &.#{$namespace}-message-box-icon--#{$type} {
+        @include css-var-from-global(('messagebox', 'color'), ('color', $type));
+        color: getCssVar('messagebox-color');
+      }
+    }
+  }
+
+  @include e(message) {
+    margin: 0;
+
+    & p {
+      margin: 0;
+      line-height: 24px;
+    }
+  }
+
+  @include e(errormsg) {
+    color: getCssVar('error-color');
+    font-size: getCssVar('messagebox-error-font-size');
+    min-height: 18px;
+    margin-top: 2px;
+  }
+
+  @include e(btns) {
+    padding: 5px 15px 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-items: center;
+
+    & button:nth-child(2) {
+      margin-left: 10px;
+    }
+  }
+
+  @include e(btns-reverse) {
+    flex-direction: row-reverse;
+  }
+
+  // centerAlign 布局
+  @include m(center) {
+    @include e(title) {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    @include e(status) {
+      position: relative;
+      top: auto;
+      padding-right: 5px;
+      text-align: center;
+      transform: translateY(-1px);
+    }
+
+    @include e(message) {
+      margin-left: 0;
+    }
+
+    @include e(btns) {
+      justify-content: center;
+    }
+
+    @include e(content) {
+      $padding-horizontal: calc(
+        #{getCssVar('messagebox', 'padding-primary')} + 12px
+      );
+
+      padding-left: $padding-horizontal;
+      padding-right: $padding-horizontal;
+
+      text-align: center;
+    }
+  }
+}
+
+.fade-in-linear-enter-active {
+  .#{$namespace}-overlay-message-box {
+    animation: msgbox-fade-in getCssVar('transition-duration');
+  }
+}
+
+.fade-in-linear-leave-active {
+  .#{$namespace}-overlay-message-box {
+    animation: msgbox-fade-in getCssVar('transition-duration') reverse;
+  }
+}
+
+@keyframes msgbox-fade-in {
+  0% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes msgbox-fade-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+}

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

@@ -0,0 +1,38 @@
+@use 'sass:math';
+
+@use '../common/var' as *;
+@use './mixins' as *;
+
+@mixin col-size($size) {
+  @include res($size) {
+    .#{$namespace}-col-#{$size}-0 {
+      display: none;
+      @include when(guttered) {
+        display: none;
+      }
+    }
+    @for $i from 0 through 24 {
+      .#{$namespace}-col-#{$size}-#{$i} {
+        @if $i != 0 {
+          display: block;
+        }
+        max-width: (math.div(1, 24) * $i * 100) * 1%;
+        flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
+      }
+
+      .#{$namespace}-col-#{$size}-offset-#{$i} {
+        margin-left: (math.div(1, 24) * $i * 100) * 1%;
+      }
+
+      .#{$namespace}-col-#{$size}-pull-#{$i} {
+        position: relative;
+        right: (math.div(1, 24) * $i * 100) * 1%;
+      }
+
+      .#{$namespace}-col-#{$size}-push-#{$i} {
+        position: relative;
+        left: (math.div(1, 24) * $i * 100) * 1%;
+      }
+    }
+  }
+}

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

@@ -59,6 +59,18 @@
   }
 }
 
+// Break-points
+@mixin res($key, $map: $breakpoints) {
+  // loop breakpoint Map, return if present
+  @if map-has-key($map, $key) {
+    @media only screen and #{unquote(map-get($map, $key))} {
+      @content;
+    }
+  } @else {
+    @warn "Undefined points: `#{$map}`";
+  }
+}
+
 
 //@include e(header) {} ==> .vft-tabs__header {}
 //@include @include e((nav-next, nav-prev)) {} ==> ,vft-tabs__nav-prev .vft-tabs__nav-next {}
@@ -286,3 +298,16 @@
     }
   }
 }
+
+@mixin utils-vertical-center {
+  $selector: &;
+
+  @at-root {
+    #{$selector}::after {
+      display: inline-block;
+      content: '';
+      height: 100%;
+      vertical-align: middle;
+    }
+  }
+}

package/theme-style/src/notification.scss

@@ -0,0 +1,105 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(notification) {
+  @include set-component-css-var('notification', $notification);
+}
+
+@include b(notification) {
+  display: flex;
+  width: getCssVar('notification-width');
+  padding: getCssVar('notification-padding');
+  border-radius: getCssVar('notification-radius');
+  box-sizing: border-box;
+  border: 1px solid getCssVar('notification-border-color');
+  position: fixed;
+  background-color: getCssVar('bg-color', 'overlay');
+  box-shadow: getCssVar('notification-shadow');
+  transition: opacity getCssVar('transition-duration'),
+    transform getCssVar('transition-duration'),
+    left getCssVar('transition-duration'),
+    right getCssVar('transition-duration'), top 0.4s,
+    bottom getCssVar('transition-duration');
+  overflow-wrap: anywhere;
+  overflow: hidden;
+  z-index: 9999;
+
+  &.right {
+    right: 16px;
+  }
+
+  &.left {
+    left: 16px;
+  }
+
+  @include e(group) {
+    margin-left: getCssVar('notification-group-margin-left');
+    margin-right: getCssVar('notification-group-margin-right');
+  }
+
+  @include e(title) {
+    font-weight: bold;
+    font-size: getCssVar('notification-title-font-size');
+    line-height: getCssVar('notification-icon-size');
+    color: getCssVar('notification-title-color');
+    margin: 0;
+  }
+
+  @include e(content) {
+    font-size: getCssVar('notification-content-font-size');
+    line-height: 24px;
+    margin: 6px 0 0;
+    color: getCssVar('notification-content-color');
+    text-align: justify;
+
+    p {
+      margin: 0;
+    }
+  }
+
+  & .#{$namespace}-notification__icon {
+    height: getCssVar('notification-icon-size');
+    width: getCssVar('notification-icon-size');
+    font-size: getCssVar('notification-icon-size');
+  }
+
+  & .#{$namespace}-notification__closeBtn {
+    position: absolute;
+    top: 18px;
+    right: 15px;
+    cursor: pointer;
+    color: getCssVar('notification-close-color');
+    font-size: getCssVar('notification-close-font-size');
+
+    &:hover {
+      color: getCssVar('notification-close-hover-color');
+    }
+  }
+
+  @each $type in (success, info, warning, error) {
+    & .#{$namespace}-notification--#{$type} {
+      @include css-var-from-global(
+        ('notification', 'icon-color'),
+        ('color', $type)
+      );
+      color: getCssVar('notification-icon-color');
+    }
+  }
+}
+
+.#{$namespace}-notification-fade-enter-from {
+  &.right {
+    right: 0;
+    transform: translateX(100%);
+  }
+
+  &.left {
+    left: 0;
+    transform: translateX(-100%);
+  }
+}
+
+.#{$namespace}-notification-fade-leave-to {
+  opacity: 0;
+}

package/theme-style/src/option.scss

@@ -0,0 +1,36 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'common/var' as *;
+
+@include b(select-dropdown) {
+  @include e(item) {
+    font-size: map.get($select, 'font-size');
+    // 20 as the padding of option item, 12 as the size of ✓ icon size
+    padding: 0 #{20 + 12}px 0 20px;
+    position: relative;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: map.get($select-option, 'text-color');
+    height: map.get($select-option, 'height');
+    line-height: map.get($select-option, 'height');
+    box-sizing: border-box;
+    cursor: pointer;
+
+    @include when(disabled) {
+      color: map.get($select-option, 'disabled-color');
+      cursor: not-allowed;
+    }
+
+    &.hover,
+    &:hover {
+      background-color: map.get($select-option, 'hover-background');
+    }
+
+    &.selected {
+      color: map.get($select-option, 'selected-text-color');
+      font-weight: bold;
+    }
+  }
+}

package/theme-style/src/pagination.scss

@@ -86,9 +86,7 @@
   .btn-next {
     .#{$namespace}-icon {
       display: block;
-      font-size: 12px;
       font-weight: bold;
-      width: inherit;
     }
   }