vft 0.0.146 → 0.0.148

package/theme-style/src/drawer.scss

@@ -9,6 +9,12 @@ $directions: rtl, ltr, ttb, btt;
 }
 
 @include b(drawer) {
+  @each $direction in $directions {
+    .#{$direction} {
+      transform: translate(0, 0);
+    }
+  }
+
   position: absolute;
   box-sizing: border-box;
   background-color: getCssVar('drawer', 'bg-color');
@@ -16,15 +22,16 @@ $directions: rtl, ltr, ttb, btt;
   flex-direction: column;
   box-shadow: getCssVar('box-shadow', 'dark');
   overflow: hidden;
-
   transition: all getCssVar('transition-duration');
 
-  @each $direction in $directions {
-    .#{$direction} {
-      transform: translate(0, 0);
-    }
+  @include e(footer) {
+    padding: getCssVar('drawer-padding-primary');
+    padding-top: 10px;
+    text-align: right;
   }
 
+  @include icon-close;
+
   &__sr-focus:focus {
     outline: none !important;
   }
@@ -36,6 +43,7 @@ $directions: rtl, ltr, ttb, btt;
     margin-bottom: 32px;
     padding: getCssVar('drawer-padding-primary');
     padding-bottom: 0;
+
     & > :first-child {
       flex: 1;
     }
@@ -48,14 +56,9 @@ $directions: rtl, ltr, ttb, btt;
     font-size: 1rem;
   }
 
-  @include e(footer) {
-    padding: getCssVar('drawer-padding-primary');
-    padding-top: 10px;
-    text-align: right;
-  }
-
   &__close-btn {
     display: inline-flex;
+
     &:focus,
     &:hover {
       i {
@@ -69,6 +72,7 @@ $directions: rtl, ltr, ttb, btt;
     flex: 1;
     padding: getCssVar('drawer-padding-primary');
     overflow: auto;
+
     & > * {
       box-sizing: border-box;
     }
@@ -103,8 +107,6 @@ $directions: rtl, ltr, ttb, btt;
   &.btt {
     bottom: 0;
   }
-
-  @include icon-close;
 }
 
 .#{$namespace}-drawer-fade {

package/theme-style/src/dropdown.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-
 @use 'mixins/mixins' as *;
 @use 'mixins/var' as *;
 @use 'common/var' as *;
@@ -13,7 +12,6 @@ $dropdown-item-line-height: map.merge(
   ),
   $dropdown-item-line-height
 );
-
 $dropdown-item-padding: () !default;
 $dropdown-item-padding: map.merge(
   (
@@ -23,7 +21,6 @@ $dropdown-item-padding: map.merge(
   ),
   $dropdown-item-padding
 );
-
 $dropdown-item-divided-margin: () !default;
 $dropdown-item-divided-margin: map.merge(
   (
@@ -33,14 +30,18 @@ $dropdown-item-divided-margin: map.merge(
   ),
   $dropdown-item-divided-margin
 );
-
 $dropdown-caret-width: () !default;
 $dropdown-caret-width: map.merge($common-component-size, $dropdown-caret-width);
-
 $dropdown-divider-width: 1px !default;
 
 @include b(dropdown) {
-  @include set-component-css-var('dropdown', $dropdown);
+  @each $size in (large, small) {
+    @include m($size) {
+      .#{$namespace}-dropdown__caret-button {
+        width: map.get($dropdown-caret-width, $size);
+      }
+    }
+  }
 
   display: inline-flex;
   position: relative;
@@ -49,10 +50,7 @@ $dropdown-divider-width: 1px !default;
   line-height: 1;
   vertical-align: top;
 
-  &.is-disabled {
-    color: getCssVar('text', 'placeholder-color');
-    cursor: not-allowed;
-  }
+  @include set-component-css-var('dropdown', $dropdown);
 
   @include e(popper) {
     @include set-component-css-var('dropdown', $dropdown);
@@ -65,14 +63,6 @@ $dropdown-divider-width: 1px !default;
       getCssVar('dropdown-menu-box-shadow')
     );
 
-    .#{$namespace}-dropdown-menu {
-      border: none;
-    }
-
-    #{& + '-selfdefine'} {
-      outline: none;
-    }
-
     @include b(scrollbar__bar) {
       z-index: calc(#{getCssVar('dropdown', 'menu-index')} + 1);
     }
@@ -83,6 +73,21 @@ $dropdown-divider-width: 1px !default;
       margin: 0;
       box-sizing: border-box;
     }
+
+    .#{$namespace}-dropdown-menu {
+      border: none;
+    }
+
+    #{& + '-selfdefine'} {
+      outline: none;
+    }
+  }
+
+  @include icon-arrow-down;
+
+  &.is-disabled {
+    color: getCssVar('text', 'placeholder-color');
+    cursor: not-allowed;
   }
 
   & .#{$namespace}-dropdown__caret-button {
@@ -124,16 +129,6 @@ $dropdown-divider-width: 1px !default;
     // 自定义
     outline: none;
   }
-
-  @each $size in (large, small) {
-    @include m($size) {
-      .#{$namespace}-dropdown__caret-button {
-        width: map.get($dropdown-caret-width, $size);
-      }
-    }
-  }
-
-  @include icon-arrow-down;
 }
 
 $dropdown-menu-padding-vertical: () !default;
@@ -147,6 +142,22 @@ $dropdown-menu-padding-vertical: map.merge(
 );
 
 @include b(dropdown-menu) {
+  @each $size in (large, small) {
+    @include m($size) {
+      padding: map.get($dropdown-menu-padding-vertical, $size)-$border-width 0;
+
+      @include e(item) {
+        padding: map.get($dropdown-item-padding, $size);
+        line-height: map.get($dropdown-item-line-height, $size);
+        font-size: map.get($input-font-size, $size);
+
+        @include m(divided) {
+          margin: map.get($dropdown-item-divided-margin, $size);
+        }
+      }
+    }
+  }
+
   position: relative;
   top: 0;
   left: 0;
@@ -171,14 +182,6 @@ $dropdown-menu-padding-vertical: map.merge(
     color: getCssVar('text', 'regular-color');
     cursor: pointer;
     outline: none;
-    &:not(.is-disabled):focus {
-      background-color: getCssVar('dropdown-menuItem-hover-fill');
-      color: getCssVar('dropdown-menuItem-hover-color');
-    }
-
-    i {
-      margin-right: 5px;
-    }
 
     @include m(divided) {
       margin: map.get($dropdown-item-divided-margin, 'default');
@@ -189,21 +192,14 @@ $dropdown-menu-padding-vertical: map.merge(
       cursor: not-allowed;
       color: getCssVar('text-disabled-color');
     }
-  }
-
-  @each $size in (large, small) {
-    @include m($size) {
-      padding: map.get($dropdown-menu-padding-vertical, $size)-$border-width 0;
 
-      @include e(item) {
-        padding: map.get($dropdown-item-padding, $size);
-        line-height: map.get($dropdown-item-line-height, $size);
-        font-size: map.get($input-font-size, $size);
+    &:not(.is-disabled):focus {
+      background-color: getCssVar('dropdown-menuItem-hover-fill');
+      color: getCssVar('dropdown-menuItem-hover-color');
+    }
 
-        @include m(divided) {
-          margin: map.get($dropdown-item-divided-margin, $size);
-        }
-      }
+    i {
+      margin-right: 5px;
     }
   }
 }

package/theme-style/src/footer-layout.scss

@@ -16,10 +16,6 @@ $name: footer-layout;
   justify-content: space-between;
   align-items: center;
 
-  &.#{$namespace}-footer {
-    height: getCompCssVar('height');
-  }
-
   @include e(left) {
     min-width: getCompCssVar('left-min-width');
   }
@@ -27,4 +23,8 @@ $name: footer-layout;
   @include e(right) {
     min-width: getCompCssVar('right-min-width');
   }
+
+  &.#{$namespace}-footer {
+    height: getCompCssVar('height');
+  }
 }

package/theme-style/src/footer.scss

@@ -3,9 +3,9 @@
 @use 'common/var' as *;
 
 @include b(footer) {
-  @include set-component-css-var('footer', $footer);
-
   box-sizing: border-box;
   flex-shrink: 0;
   height: getCssVar('footer-height');
+
+  @include set-component-css-var('footer', $footer);
 }

package/theme-style/src/header.scss

@@ -3,9 +3,9 @@
 @use 'common/var' as *;
 
 @include b(header) {
-  @include set-component-css-var('header', $header);
-
   box-sizing: border-box;
   flex-shrink: 0;
   height: getCssVar('header-height');
+
+  @include set-component-css-var('header', $header);
 }

package/theme-style/src/image.scss

@@ -14,8 +14,10 @@
 
   @include e(inner) {
     @extend %size !optional;
+
     vertical-align: top;
     opacity: 1;
+
     @include when(loading) {
       opacity: 0;
     }
@@ -23,6 +25,7 @@
 
   @include e(wrapper) {
     @extend %size !optional;
+
     position: absolute;
     top: 0;
     left: 0;
@@ -30,11 +33,13 @@
 
   @include e(placeholder) {
     @extend %size !optional;
+
     background: getCssVar('fill-color', 'light');
   }
 
   @include e(error) {
     @extend %size !optional;
+
     display: flex;
     justify-content: center;
     align-items: center;

package/theme-style/src/md/figure.scss

@@ -1,14 +1,10 @@
 figure {
   position: relative;
-
   display: flex;
   flex-direction: column;
-
   width: auto;
   margin: 1rem auto;
-
   text-align: center;
-
   transition: transform var(--t-transform, 0.3s ease);
 
   img {

package/theme-style/src/md-vue-playground.scss

@@ -824,7 +824,7 @@ $name: md-vue-playground;
     background-color: transparent;
   }
 
-  .CodeMirrorwrapper ::-moz-selection {
+  .CodeMirrorwrapper ::selection {
     background-color: transparent;
   }
 
@@ -940,7 +940,7 @@ $name: md-vue-playground;
   }
 
   .CodeMirror-line::selection,
-  .CodeMirror-line > span::-moz-selection,
+  .CodeMirror-line > span::selection,
   .CodeMirror-line > span > span::-moz-selection {
     background: var(--selected-bg);
   }

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

@@ -1,5 +1,4 @@
 @use 'sass:map';
-
 @use 'mixins/mixins' as *;
 @use 'mixins/var' as *;
 @use 'common/var' as *;
@@ -10,26 +9,6 @@
 }
 
 @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;
@@ -51,6 +30,22 @@
     }
   }
 
+  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;
+
   @include when(draggable) {
     @include e(header) {
       cursor: move;
@@ -122,6 +117,14 @@
   }
 
   @include e(status) {
+    @each $type in (success, info, warning, error) {
+      &.#{$namespace}-message-box-icon--#{$type} {
+        color: getCssVar('messagebox-color');
+
+        @include css-var-from-global(('messagebox', 'color'), ('color', $type));
+      }
+    }
+
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -142,13 +145,6 @@
       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) {
@@ -215,10 +211,13 @@
 
       padding-left: $padding-horizontal;
       padding-right: $padding-horizontal;
-
       text-align: center;
     }
   }
+
+  &:focus {
+    outline: none !important;
+  }
 }
 
 .fade-in-linear-enter-active {

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

@@ -1,5 +1,4 @@
 @use 'sass:map';
-
 @use '../mixins/var' as *;
 @use '../mixins/function' as *;
 @use '../common/var' as *;
@@ -161,6 +160,7 @@
   padding: $padding-vertical $padding-horizontal;
   font-size: $font-size;
   border-radius: $border-radius;
+
   &.is-round {
     padding: $padding-vertical $padding-horizontal;
   }

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

@@ -1,21 +1,15 @@
 @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%;
       }
@@ -34,5 +28,12 @@
         left: (math.div(1, 24) * $i * 100) * 1%;
       }
     }
+    .#{$namespace}-col-#{$size}-0 {
+      display: none;
+
+      @include when(guttered) {
+        display: none;
+      }
+    }
   }
 }

package/theme-style/src/notification.scss

@@ -7,6 +7,17 @@
 }
 
 @include b(notification) {
+  @each $type in (success, info, warning, error) {
+    & .#{$namespace}-notification--#{$type} {
+      color: getCssVar('notification-icon-color');
+
+      @include css-var-from-global(
+        ('notification', 'icon-color'),
+        ('color', $type)
+      );
+    }
+  }
+
   display: flex;
   width: getCssVar('notification-width');
   padding: getCssVar('notification-padding');
@@ -25,14 +36,6 @@
   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');
@@ -58,6 +61,14 @@
     }
   }
 
+  &.right {
+    right: 16px;
+  }
+
+  &.left {
+    left: 16px;
+  }
+
   & .#{$namespace}-notification__icon {
     height: getCssVar('notification-icon-size');
     width: getCssVar('notification-icon-size');
@@ -76,16 +87,6 @@
       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 {

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

@@ -1,5 +1,4 @@
 @use 'sass:map';
-
 @use 'mixins/mixins' as *;
 @use 'common/var' as *;
 

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

@@ -1,5 +1,4 @@
 @use 'sass:map';
-
 @use 'mixins/mixins' as *;
 @use 'mixins/var' as *;
 @use 'common/var' as *;

package/theme-style/src/option.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-
 @use 'mixins/mixins' as *;
 @use 'common/var' as *;
 

package/theme-style/src/overlay.scss

@@ -3,9 +3,6 @@
 @use 'common/var' as *;
 
 @include b(overlay) {
-  #{& + '-root'} {
-    height: 0;
-  }
   position: fixed;
   top: 0;
   right: 0;
@@ -15,4 +12,7 @@
   height: 100%;
   background-color: getCssVar('overlay-color', 'lighter');
   overflow: auto;
+  #{& + '-root'} {
+    height: 0;
+  }
 }

package/theme-style/src/page-wrapper.scss

@@ -23,6 +23,6 @@ $name: page-wrapper;
   }
 
   @include e(content) {
-    padding: 20px 20px 0 20px;
+    padding: 20px 20px 0;
   }
 }

package/theme-style/src/popover.scss

@@ -39,6 +39,8 @@
     }
 
     @include when(dark) {
+      color: getCssVar('bg-color');
+
       @include set-css-var-value(
         ('popover', 'bg-color'),
         var(#{getCssVarName('text', 'primary-color')})
@@ -51,7 +53,6 @@
         ('popover', 'title-text-color'),
         var(#{getCssVarName('bg-color')})
       );
-      color: getCssVar('bg-color');
     }
 
     &:focus:active,