From f86afcb694dd3af91e50fe9a1d5d45c39329b265 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Tue, 7 Nov 2017 05:41:34 -0600
Subject: [PATCH] [bugfix] Steps style error when has more than 4 items (#287)

* [bugfix] CouponList always show empty info

* [bugfix] add click feedback of buttons in components

* [Doc] add custom theme document

* [new feature] Notice bar support more props

* [bugfix] PullRefresh test cases

* [bugfix] unused NoticeBar style

* [bugfix] Swipe width calc error

* [Doc] english document of all action components

* [Doc] change document site path to /zanui/vant

* [Doc] fix

* [bugfix] uploader style error

* [bugfix] tabs document demo

* [new feature] Cell support vue-router target route

* [bugfix] add cell test cases

* update yarn.lock

* [bugfix] Tabbar cann't display info when use icon slot

* [Doc] update document title

* [bugfix] Dialog should reset button text when showed

* [new feature] CouponList add showCloseButton prop

* [new feature] Swipe add 'initialSwipe' prop

* [bugfix] NoticeBar text disappeared when page back

* [new feature] ImagePreview support startPosition

* fix: improve imagePreview test cases

* [bugfix] Steps style error when has more than 4 items
---
 packages/steps/index.vue        | 12 +-----------
 packages/vant-css/src/steps.css | 14 ++------------
 2 files changed, 3 insertions(+), 23 deletions(-)

diff --git a/packages/steps/index.vue b/packages/steps/index.vue
index a333938be..9c01f7e84 100644
--- a/packages/steps/index.vue
+++ b/packages/steps/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="van-steps" :class="stepsClass">
+  <div :class="['van-steps', `van-steps--${direction}`]">
     <div class="van-steps__status" v-if="title || description">
       <div class="van-steps__icon" v-if="icon || $slots.icon">
         <slot name="icon">
@@ -56,16 +56,6 @@ export default {
     return {
       steps: []
     };
-  },
-
-  computed: {
-    stepsClass() {
-      return [
-        `van-steps--${this.direction}`, {
-          [`van-steps--${this.steps.length}`]: this.direction === 'horizontal'
-        }
-      ];
-    }
   }
 };
 </script>
diff --git a/packages/vant-css/src/steps.css b/packages/vant-css/src/steps.css
index d9219fba1..d4caff87f 100644
--- a/packages/vant-css/src/steps.css
+++ b/packages/vant-css/src/steps.css
@@ -9,6 +9,7 @@
     padding: 0 10px;
 
     .van-steps__items {
+      display: flex;
       margin: 0 0 10px;
       overflow: hidden;
       position: relative;
@@ -24,18 +25,6 @@
     padding: 0 0 0 35px;
   }
 
-  &--4 {
-    .van-step {
-      width: 33.2%;
-    }
-  }
-
-  &--3 {
-    .van-step {
-      width: 50%;
-    }
-  }
-
   &__icon {
     float: left;
     margin-right: 10px;
@@ -72,6 +61,7 @@
 }
 
 .van-step {
+  flex: 1;
   font-size: 14px;
   position: relative;
   color: $gray-dark;