Steps: fix style for last step when vertical

examples/components/side-nav.vue

@@ -3,9 +3,9 @@
     width: 100%;
     box-sizing: border-box;
     padding-right: 30px;
-    transition: opacity .5s;
-    &:hover {
-      opacity: 1 !important;
+    transition: opacity .3s;
+    &.is-fade {
+      transition: opacity 3s;
     }
 
     li {
@@ -88,6 +88,7 @@
   <div
     class="side-nav"
     @mouseenter="isFade = false"
+    :class="{ 'is-fade': isFade }"
     :style="navStyle">
     <ul>
       <li class="nav-item" v-for="item in data">
@@ -167,9 +168,7 @@
         if (this.isSmallScreen) {
           style.paddingBottom = '60px';
         }
-        if (this.isFade) {
-          style.opacity = '0.5';
-        }
+        style.opacity = this.isFade ? '0.5' : '1';
         return style;
       },
       langConfig() {

examples/versions.json

@@ -1 +1 @@
-{"1.0.9":"1.0","1.1.6":"1.1","1.2.9":"1.2","1.3.7":"1.3","1.4.8":"1.4","2.0.2":"2.0"}
+{"1.0.9":"1.0","1.1.6":"1.1","1.2.9":"1.2","1.3.7":"1.3","1.4.9":"1.4","2.0.2":"2.0"}

packages/steps/src/step.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="el-step"
-    :style="[style,  isLast ? { maxWidth: 100 / stepsCount + '%' } : { marginRight: - $parent.stepOffset + 'px' }]"
+    :style="style"
     :class="[
       !isSimple && `is-${$parent.direction}`,
       isSimple && 'is-simple',
@@ -113,6 +113,7 @@ export default {
       return isSimple ? '' : space ;
     },
     style: function() {
+      const style = {};
       const parent = this.$parent;
       const len = parent.steps.length;
 
@@ -121,8 +122,15 @@ export default {
         : this.space
           ? this.space
           : 100 / (len - 1) + '%');
+      style.flexBasis = space;
+      if (this.isVertical) return style;
+      if (this.isLast) {
+        style.maxWidth = 100 / this.stepsCount + '%';
+      } else {
+        style.marginRight = -this.$parent.stepOffset + 'px';
+      }
 
-      return { flexBasis: space };
+      return style;
     }
   },
 

packages/theme-chalk/src/common/var.scss

@@ -689,7 +689,7 @@ $--breakpoints: (
 
 $--breakpoints-spec: (
   'xs-only' : (max-width: $--sm - 1),
-  'small-and-up' : (min-width: $--sm),
+  'sm-and-up' : (min-width: $--sm),
   'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md} - 1)",
   'sm-and-down': (max-width: $--md - 1),
   'md-and-up' : (min-width: $--md),