From 5d0cdbc3f1c91fac827c36190081ea5469af083b Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Thu, 20 Apr 2017 13:59:55 +0800
Subject: [PATCH] fix: button add active style

---
 docs/examples-dist/button.vue     |  3 ++
 docs/examples-dist/switch.vue     | 32 +++++-------
 docs/examples-docs/button.md      |  3 ++
 docs/examples-docs/switch.md      | 87 +++++++++++++++----------------
 docs/src/components/demo-list.vue |  2 +-
 packages/vant-css/src/button.css  | 28 ++++++++++
 6 files changed, 89 insertions(+), 66 deletions(-)

diff --git a/docs/examples-dist/button.vue b/docs/examples-dist/button.vue
index e35b0c13d..489b1a2f5 100644
--- a/docs/examples-dist/button.vue
+++ b/docs/examples-dist/button.vue
@@ -76,6 +76,9 @@
 <style>
 @component-namespace demo {
   @b button {
+    .van-button {
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    }
     .van-row {
       padding: 0 15px;
     }
diff --git a/docs/examples-dist/switch.vue b/docs/examples-dist/switch.vue
index 942e36132..3facc3045 100644
--- a/docs/examples-dist/switch.vue
+++ b/docs/examples-dist/switch.vue
@@ -1,16 +1,18 @@
 <template><section class="demo-switch"><h1 class="demo-title">Switch 开关</h1><example-block title="基础用法">
-                <van-switch class="some-customized-class" v-model="switchState1"></van-switch>
-<div class="demo-switch__text">{{ switchState1 ? ' ON' : 'OFF' }}</div>
+                <van-row>
+  <van-col span="12">
+    <van-switch class="some-customized-class" v-model="switchState1"></van-switch>
+    <div class="demo-switch__text">{{ switchState1 ? ' 打开' : '关闭' }}</div>
+  </van-col>
+  <van-col span="12">
+    <van-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></van-switch>
+    <div class="demo-switch__text">{{ switchState2 ? ' 打开' : '关闭' }}</div>
+  </van-col>
+</van-row>
 
 
 
 
-              </example-block><example-block title="">
-                <van-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></van-switch>
-<div class="demo-switch__text">{{ switchState2 ? ' ON' : 'OFF' }}</div>
-
-
-
 
               </example-block><example-block title="禁用状态">
                 <van-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></van-switch>
@@ -34,19 +36,9 @@
 <style>
   @component-namespace demo {
     @b switch {
-      .examples,
-      .example-block  {
-        text-align: center;
-      }
-
-      .example-block {
-        .demo-sub-title {
-          text-align: left;
-        }
-      }
-
       @e text {
-        margin: 20px auto;
+        display: inline-block;
+        line-height: 32px;
       }
     }
   }
diff --git a/docs/examples-docs/button.md b/docs/examples-docs/button.md
index 6f5117c4b..965c5f23b 100644
--- a/docs/examples-docs/button.md
+++ b/docs/examples-docs/button.md
@@ -1,6 +1,9 @@
 <style>
 @component-namespace demo {
   @b button {
+    .van-button {
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    }
     .van-row {
       padding: 0 15px;
     }
diff --git a/docs/examples-docs/switch.md b/docs/examples-docs/switch.md
index 28a9a9666..d23df7d6c 100644
--- a/docs/examples-docs/switch.md
+++ b/docs/examples-docs/switch.md
@@ -1,19 +1,17 @@
 <style>
   @component-namespace demo {
     @b switch {
-      .examples,
-      .example-block  {
-        text-align: center;
-      }
-
-      .example-block {
-        .demo-sub-title {
-          text-align: left;
-        }
+      .van-switch {
+        float: left;
+        margin: 0 15px;
       }
 
       @e text {
-        margin: 20px auto;
+        display: inline-block;
+        line-height: 32px;
+        float: left;
+        font-size: 14px;
+        color: #333;
       }
     }
   }
@@ -26,7 +24,7 @@ export default {
   data() {
     return {
       switchState1: true,
-      switchState2: true,
+      switchState2: false,
       switchStateTrue: true,
       switchStateFalse: false
     };
@@ -83,35 +81,25 @@ export default {
 
 :::demo 基础用法
 ```html
-<van-switch class="some-customized-class" v-model="switchState1"></van-switch>
-<div class="demo-switch__text">{{ switchState1 ? ' ON' : 'OFF' }}</div>
+<van-row>
+  <van-col span="12">
+    <van-switch class="some-customized-class" v-model="switchState1"></van-switch>
+    <div class="demo-switch__text">{{ switchState1 ? ' 打开' : '关闭' }}</div>
+  </van-col>
+  <van-col span="12">
+    <van-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></van-switch>
+    <div class="demo-switch__text">{{ switchState2 ? ' 打开' : '关闭' }}</div>
+  </van-col>
+</van-row>
+
 
 
 <script>
 export default {
   data() {
     return {
-      switchState1: true
-    };
-  }
-};  
-</script>
-```
-:::
-
-:::demo
-```html
-<van-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></van-switch>
-<div class="demo-switch__text">{{ switchState2 ? ' ON' : 'OFF' }}</div>
-
-
-<script>
-import Dialog from 'packages/dialog';
-
-export default {
-  data() {
-    return {
-      switchState2: true
+      switchState1: true,
+      switchState2: false
     };
   },
   methods: {
@@ -131,18 +119,22 @@ export default {
 ```
 :::
 
-
 #### 禁用状态
 
 设置`disabled`属性为`true`，此时开关不可点击。
 
 :::demo 禁用状态
 ```html
-<van-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></van-switch>
-<div class="demo-switch__text">ON, DISABLED</div>
-
-<van-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></van-switch>
-<div class="demo-switch__text">OFF, DISABLED</div>
+<van-row>
+  <van-col span="12">
+    <van-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></van-switch>
+    <div class="demo-switch__text">打开</div>
+  </van-col>
+  <van-col span="12">
+    <van-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></van-switch>
+    <div class="demo-switch__text">关闭</div>
+  </van-col>
+</van-row>
 
 <script>
 export default {
@@ -163,11 +155,16 @@ export default {
 
 :::demo loading状态
 ```html
-<van-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></van-switch>
-<div class="demo-switch__text">ON, LOADING</div>
-
-<van-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></van-switch>
-<div class="demo-switch__text">OFF, LOADING</div>
+<van-row>
+  <van-col span="12">
+    <van-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></van-switch>
+    <div class="demo-switch__text">打开</div>
+  </van-col>
+  <van-col span="12">
+    <van-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></van-switch>
+    <div class="demo-switch__text">关闭</div>
+  </van-col>
+</van-row>
 
 <script>
 export default {
diff --git a/docs/src/components/demo-list.vue b/docs/src/components/demo-list.vue
index fb4ee5d8f..f0091b207 100644
--- a/docs/src/components/demo-list.vue
+++ b/docs/src/components/demo-list.vue
@@ -50,7 +50,7 @@ export default {
       padding-top: 40px;
       height: 0;
       overflow: hidden;
-      background: url(https://img.yzcdn.cn/upload_files/2017/04/18/FveNmX6aFsQm1jUhcvBBZn6UrZFi.png) center center no-repeat;
+      background: url(https://img.yzcdn.cn/upload_files/2017/04/20/FjwR1mraVIqtHWb8YWDW_YzQ_Kh2.png) center center no-repeat;
       background-size: 156px 40px;
       margin-bottom: 10px;
     }
diff --git a/packages/vant-css/src/button.css b/packages/vant-css/src/button.css
index 6d1f63d01..3ae0856c0 100644
--- a/packages/vant-css/src/button.css
+++ b/packages/vant-css/src/button.css
@@ -38,18 +38,35 @@
       color: $button-default-color;
       background-color: $button-default-background-color;
       border: 1px solid $button-default-border-color;
+
+      &:active {
+        border-color: #cacaca;
+        background-color: $c-gray-light;
+        color: $c-gray-dark;
+      }
     }
 
     @m primary {
       color: $button-primary-color;
       background-color: $button-primary-background-color;
       border: 1px solid $button-primary-border-color;
+
+      &:active {
+        border-color: #00AA00;
+        background-color: #00AA00;
+        color: #66CC66;
+      }
     }
 
     @m danger {
       color: $button-danger-color;
       background-color: $button-danger-background-color;
       border: 1px solid $button-danger-border-color;
+
+      &:active {
+        border-color: #D43333;
+        background-color: #D43333;
+      }
     }
 
     @m large {
@@ -113,9 +130,20 @@
       color: $bottom-action-button-default-color;
       font-size: 16px;
 
+      &:active {
+        border-color: #DD6F44;
+        background-color: #DD6F44;
+        color: #fff;
+      }
+
       &.van-button--primary {
         background-color: $bottom-action-button-primary-background-color;
         color: $bottom-action-button-primary-color;
+
+        &:active {
+          border-color: #D43333;
+          background-color: #D43333;
+        }
       }
     }
   }