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>
 ```
 :::

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;