Merge pull request #86 from chenjiahan/dev

Button: reduce unnecessary styles

docs/examples-docs/button.md

@@ -48,10 +48,10 @@ Vue.component(Button.name, Button);
 
 :::demo 按钮尺寸
 ```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">Large</van-button>
+<van-button size="normal">Normal</van-button>
+<van-button size="small">Small</van-button>
+<van-button size="mini">Mini</van-button>
 ```
 :::
 
@@ -61,7 +61,7 @@ Vue.component(Button.name, Button);
 
 :::demo 禁用状态
 ```html
-<van-button disabled>diabled</van-button>
+<van-button disabled>Diabled</van-button>
 ```
 :::
 
@@ -80,7 +80,7 @@ Vue.component(Button.name, Button);
 :::demo 自定义按钮标签
 ```html 
 <van-button tag="a" href="https://www.youzan.com" target="_blank">
-  a标签按钮
+  a 标签按钮
 </van-button>
 ```
 :::

docs/examples-docs/icon.md

@@ -65,9 +65,7 @@ Vue.component(Icon.name, Icon);
 ```
 :::
 
-#### 所有Icons
-
-以下为目前所有的图标：
+#### 图标列表
 
 :::demo 所有Icon
 ```html

packages/icon/src/icon.vue

@@ -1,22 +1,16 @@
 <template>
-  <i class="van-icon" :class="'van-icon-' + name" @click="handleIconClick"></i>
+  <i :class="['van-icon', 'van-icon-' + name]" @click="$emit('click', $event)" />
 </template>
 
 <script>
-  export default {
-    name: 'van-icon',
+export default {
+  name: 'van-icon',
 
-    props: {
-      name: {
-        type: String,
-        required: true
-      }
-    },
-
-    methods: {
-      handleIconClick(event) {
-        this.$emit('click', event);
-      }
+  props: {
+    name: {
+      type: String,
+      required: true
     }
-  };
+  }
+};
 </script>

packages/vant-css/src/button.css

@@ -1,5 +1,4 @@
 @import './common/var.css';
-@import './loading.css';
 
 .van-button {
   position: relative;
@@ -11,9 +10,9 @@
   box-sizing: border-box;
   font-size: 16px;
   text-align: center;
-  appearance: none;
   outline: 0;
   overflow: hidden;
+  -webkit-appearance: none;
 
   &::after {
     content: " ";
@@ -22,8 +21,8 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: #000;
     opacity: 0;
+    background-color: #000;
     border-radius: inherit; /* inherit parent's border radius */
   }
 
@@ -33,9 +32,6 @@
 
   &__icon-loading {
     display: inline-block;
-    width: 16px;
-    height: 16px;
-    vertical-align: middle;
   }
 
   &--default {
@@ -44,8 +40,6 @@
     border: 1px solid $button-default-border-color;
 
     &:active {
-      border-color: #cacaca;
-      background-color: $c-gray-light;
       color: $c-gray-dark;
     }
   }
@@ -54,30 +48,18 @@
     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;
-    }
   }
 
   &--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;
-    }
   }
 
   &--large {
     width: 100%;
     height: 50px;
     line-height: 48px;
-    font-size: 16px;
   }
 
   &--normal {
@@ -92,9 +74,7 @@
     font-size: 12px;
   }
 
-  /*
-    mini图标默认宽度50px，文字不能超过4个
-  */
+  /* mini图标默认宽度50px，文字不能超过4个 */
   &--mini {
     display: inline-block;
     width: 50px;
@@ -114,14 +94,8 @@
   }
 
   &--block {
-    display: block;
     width: 100%;
-  }
-
-  &--loading {
-    .van-button__text {
-      display: none;
-    }
+    display: block;
   }
 
   &--bottom-action {
@@ -130,24 +104,16 @@
     line-height: 50px;
     border: 0;
     border-radius: 0;
-    background-color: $bottom-action-button-default-background-color;
     color: $bottom-action-button-default-color;
-    font-size: 16px;
+    background-color: $bottom-action-button-default-background-color;
 
     &: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;
-      }
+      background-color: $bottom-action-button-primary-background-color;
     }
   }
 }

packages/vant-css/src/common/var.css

@@ -23,7 +23,7 @@ $button-primary-border-color: #0a0;
 
 $button-default-color: $c-black;
 $button-default-background-color: $c-white;
-$button-default-border-color: #bbb;
+$button-default-border-color: #ccc;
 
 $button-danger-color: $c-white;
 $button-danger-background-color: #f44;