From 519b5bf80a6e7d68e8a914b23dc868163426dff3 Mon Sep 17 00:00:00 2001
From: rex <rexkaneki@gmail.com>
Date: Tue, 19 Feb 2019 16:51:46 +0800
Subject: [PATCH] [improvement] Stepper: update style (#2790)

---
 packages/stepper/index.less | 29 ++++++++++++++++-------------
 packages/style/var.less     |  6 ++++++
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/packages/stepper/index.less b/packages/stepper/index.less
index dfbd8683c..2e58d6e1b 100644
--- a/packages/stepper/index.less
+++ b/packages/stepper/index.less
@@ -5,11 +5,12 @@
 
   &__minus,
   &__plus {
-    width: 40px;
-    height: 30px;
+    width: 28px;
+    height: 28px;
     box-sizing: border-box;
-    background-color: @white;
-    border: 1px solid @border-color;
+    background-color: @stepper-background-color;
+    border: 0;
+    margin: 1px;
     position: relative;
     padding: 5px;
     vertical-align: middle;
@@ -33,7 +34,7 @@
       left: 0;
       right: 0;
       bottom: 0;
-      background-color: @gray-darker;
+      background-color: @text-color;
     }
 
     &:active {
@@ -41,7 +42,7 @@
     }
 
     &--disabled {
-      background-color: @background-color;
+      background-color: @stepper-button-disabled-color;
 
       &::before,
       &::after {
@@ -50,12 +51,12 @@
     }
 
     &--disabled:active {
-      background-color: @background-color;
+      background-color: @stepper-button-disabled-color;
     }
   }
 
   &__minus {
-    border-radius: 2px 0 0 2px;
+    border-radius: @stepper-border-radius 0 0 @stepper-border-radius;
 
     &::after {
       display: none;
@@ -63,18 +64,20 @@
   }
 
   &__plus {
-    border-radius: 0 2px 2px 0;
+    border-radius: 0 @stepper-border-radius @stepper-border-radius 0;
   }
 
   &__input {
-    width: 33px;
+    width: 30px;
     height: 26px;
     padding: 1px;
-    border: 1px solid @border-color;
+    border: 0;
+    margin: 1px;
+    background-color: @stepper-background-color;
     border-width: 1px 0;
     border-radius: 0;
     box-sizing: content-box;
-    color: @gray-darker;
+    color: @text-color;
     font-size: 14px;
     vertical-align: middle;
     text-align: center;
@@ -82,7 +85,7 @@
 
     &[disabled] {
       color: @gray;
-      background-color: @background-color;
+      background-color: @stepper-input-disabled-color;
     }
   }
 
diff --git a/packages/style/var.less b/packages/style/var.less
index 72e870d7a..01e3a5e9d 100644
--- a/packages/style/var.less
+++ b/packages/style/var.less
@@ -148,3 +148,9 @@
 
 // Search
 @search-background-color: #f7f8fA;
+
+// Stepper
+@stepper-background-color: #f2f3f5;
+@stepper-button-disabled-color: #f7f8fa;
+@stepper-border-radius: 4px;
+@stepper-input-disabled-color: #f2f3f5;