From 829dd6a36c7818fbb13d345e9d8d5882c607739c Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Sat, 5 May 2018 18:08:17 +0800
Subject: [PATCH] [Improvement] Stepper: update disabled style (#997)

---
 packages/stepper/index.vue        |  2 +-
 packages/vant-css/src/stepper.css | 35 +++++++++++++------------------
 2 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/packages/stepper/index.vue b/packages/stepper/index.vue
index b22c41d13..7964527ff 100644
--- a/packages/stepper/index.vue
+++ b/packages/stepper/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="b({ disabled })">
+  <div :class="b()">
     <button
       :class="b('minus', { disabled: minusDisabled })"
       @click="onChange('minus')"
diff --git a/packages/vant-css/src/stepper.css b/packages/vant-css/src/stepper.css
index 63013f3d2..1d0c79741 100644
--- a/packages/vant-css/src/stepper.css
+++ b/packages/vant-css/src/stepper.css
@@ -3,14 +3,6 @@
 .van-stepper {
   font-size: 0;
 
-  &--disabled {
-    .van-stepper__input,
-    .van-stepper__minus,
-    .van-stepper__plus {
-      border-color: $active-color;
-    }
-  }
-
   &__minus,
   &__plus {
     width: 40px;
@@ -48,6 +40,15 @@
       background-color: $active-color;
     }
 
+    &--disabled {
+      background-color: $background-color;
+
+      &::before,
+      &::after {
+        background-color: $gray;
+      }
+    }
+
     &--disabled:active {
       background-color: $background-color;
     }
@@ -59,20 +60,10 @@
     &::after {
       display: none;
     }
-
-    &--disabled {
-      background-color: $background-color;
-      border-color: $active-color $border-color $active-color $active-color;
-    }
   }
 
   &__plus {
     border-radius: 0 2px 2px 0;
-
-    &--disabled {
-      background-color: $background-color;
-      border-color: $active-color $active-color $active-color $border-color;
-    }
   }
 
   &__input {
@@ -88,10 +79,14 @@
     vertical-align: middle;
     text-align: center;
     -webkit-appearance: none;
+
+    &[disabled] {
+      color: $gray;
+    }
   }
 
-  input[type=number]::-webkit-inner-spin-button,
-  input[type=number]::-webkit-outer-spin-button {
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
     -webkit-appearance: none;
     margin: 0;
   }