From 2cc5767a9963a20ce656127ef4c1ce4f196eb0de Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Fri, 8 Dec 2017 11:17:54 +0800
Subject: [PATCH] [Improvement] Button: adjust default button border color
 (#392)

---
 docs/demos/views/button.vue          | 34 ++++++++++++++++++++--------
 docs/markdown/zh-CN/button.md        | 19 +++++++---------
 packages/vant-css/src/button.css     |  6 ++---
 packages/vant-css/src/common/var.css | 16 ++++++-------
 4 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/docs/demos/views/button.vue b/docs/demos/views/button.vue
index 770553339..a83f2da34 100644
--- a/docs/demos/views/button.vue
+++ b/docs/demos/views/button.vue
@@ -1,20 +1,20 @@
 <template>
   <demo-section>
     <demo-block :title="$t('title1')">
-      <van-button type="default">Default</van-button>
-      <van-button type="primary">Primary</van-button>
-      <van-button type="danger">Danger</van-button>
+      <van-button type="default">{{ $t('default') }}</van-button>
+      <van-button type="primary">{{ $t('primary') }}</van-button>
+      <van-button type="danger">{{ $t('danger') }}</van-button>
     </demo-block>
     
     <demo-block :title="$t('title2')">
-      <van-button size="large">Large</van-button>
-      <van-button size="normal">Normal</van-button>
-      <van-button size="small">Small</van-button>
-      <van-button size="mini">Mini</van-button>
+      <van-button size="large">{{ $t('large') }}</van-button>
+      <van-button size="normal">{{ $t('normal') }}</van-button>
+      <van-button size="small">{{ $t('small') }}</van-button>
+      <van-button size="mini">{{ $t('mini') }}</van-button>
     </demo-block>
 
     <demo-block :title="$t('disabled')">
-      <van-button disabled>Diabled</van-button>
+      <van-button disabled>{{ $t('disabled') }}</van-button>
     </demo-block>
 
     <demo-block :title="$t('title3')">
@@ -51,14 +51,28 @@ export default {
       title2: '按钮尺寸',
       title3: '加载状态',
       title4: '自定义按钮标签',
-      title5: '页面底部操作按钮'
+      title5: '页面底部操作按钮',
+      default: '默认按钮',
+      primary: '主要按钮',
+      danger: '危险按钮',
+      large: '大号按钮',
+      normal: '普通按钮',
+      small: '小型按钮',
+      mini: '迷你按钮'
     },
     'en-US': {
       title1: 'Type',
       title2: 'Size',
       title3: 'Loading',
       title4: 'Custom Tag',
-      title5: 'Action Button'
+      title5: 'Action Button',
+      default: 'Default',
+      primary: 'Primary',
+      danger: 'Danger',
+      large: 'Large',
+      normal: 'Normal',
+      small: 'Small',
+      mini: 'Mini'
     }
   }
 }
diff --git a/docs/markdown/zh-CN/button.md b/docs/markdown/zh-CN/button.md
index c6be861cd..214e39a73 100644
--- a/docs/markdown/zh-CN/button.md
+++ b/docs/markdown/zh-CN/button.md
@@ -10,32 +10,29 @@ Vue.component(Button.name, Button);
 ### 代码演示
 
 #### 按钮类型
-
 支持`default`、`primary`、`danger`三种类型，默认为`default`
 
 ```html
-<van-button type="default">Default</van-button>
-<van-button type="primary">Primary</van-button>
-<van-button type="danger">Danger</van-button>
+<van-button type="default">默认按钮</van-button>
+<van-button type="primary">主要按钮</van-button>
+<van-button type="danger">危险按钮</van-button>
 ```
 
 #### 按钮尺寸
-
 支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
 
 ```html 
-<van-button size="large">Large</van-button>
-<van-button size="normal">Normal</van-button>
-<van-button size="small">Small</van-button>
-<van-button size="mini">Mini</van-button>
+<van-button size="large">大号按钮</van-button>
+<van-button size="normal">普通按钮</van-button>
+<van-button size="small">小型按钮</van-button>
+<van-button size="mini">迷你按钮</van-button>
 ```
 
 #### 禁用状态
-
 通过`disabled`属性来禁用按钮，此时按钮不可点击
 
 ```html
-<van-button disabled>Diabled</van-button>
+<van-button disabled>禁用状态</van-button>
 ```
 
 #### 加载状态
diff --git a/packages/vant-css/src/button.css b/packages/vant-css/src/button.css
index adf513605..0cead28d1 100644
--- a/packages/vant-css/src/button.css
+++ b/packages/vant-css/src/button.css
@@ -102,11 +102,11 @@
     border: 0;
     border-radius: 0;
     font-size: 16px;
-    color: $bottom-action-button-default-color;
-    background-color: $bottom-action-button-default-background-color;
+    color: $button-bottom-action-default-color;
+    background-color: $button-bottom-action-default-background-color;
 
     &.van-button--primary {
-      background-color: $bottom-action-button-primary-background-color;
+      background-color: $button-bottom-action-primary-background-color;
     }
   }
 
diff --git a/packages/vant-css/src/common/var.css b/packages/vant-css/src/common/var.css
index 24597a71f..79488fd19 100644
--- a/packages/vant-css/src/common/var.css
+++ b/packages/vant-css/src/common/var.css
@@ -17,19 +17,19 @@ $active-color: #e8e8e8;
 $background-color: #f8f8f8;
 
 /* button */
+$button-default-color: $text-color;
+$button-default-background-color: $white;
+$button-default-border-color: $gray-light;
 $button-primary-color: $white;
 $button-primary-background-color: #4b0;
 $button-primary-border-color: #0a0;
-$button-default-color: $text-color;
-$button-default-background-color: $white;
-$button-default-border-color: $border-color;
 $button-danger-color: $white;
 $button-danger-background-color: $red;
 $button-danger-border-color: #e33;
 $button-disabled-color: $gray-dark;
 $button-disabled-background-color: $gray-light;
-$button-disabled-border-color: #cacaca;
-$bottom-action-button-default-color: $white;
-$bottom-action-button-default-background-color: #f85;
-$bottom-action-button-primary-color: $white;
-$bottom-action-button-primary-background-color: $red;
+$button-disabled-border-color: $border-color;
+$button-bottom-action-default-color: $white;
+$button-bottom-action-default-background-color: #f85;
+$button-bottom-action-primary-color: $white;
+$button-bottom-action-primary-background-color: $red;