feat(Loading): optimize styles (#2217)

packages/button/index.less

@@ -3,9 +3,12 @@
 
 .van-button {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   box-sizing: border-box;
   padding: 0;
+  line-height: @button-line-height;
   text-align: center;
   vertical-align: middle;
   -webkit-appearance: none;
@@ -13,7 +16,6 @@
 
   .theme(height, '@button-default-height');
   .theme(font-size, '@button-default-font-size');
-  .theme(line-height, '@button-default-line-height');
   .theme(transition, 'opacity @animation-duration-fast');
   .theme(border-radius, '@button-border-radius');
 
@@ -99,7 +101,6 @@
   &--large {
     width: 100%;
     .theme(height, '@button-large-height');
-    .theme(line-height, '@button-large-line-height');
   }
 
   &--normal {
@@ -112,7 +113,6 @@
     .theme(height, '@button-small-height');
     .theme(padding, '0 @padding-xs');
     .theme(font-size, '@button-small-font-size');
-    .theme(line-height, '@button-small-line-height');
   }
 
   // mini图标默认宽度50px，文字不能超过4个
@@ -121,7 +121,6 @@
     .theme(min-width, '@button-mini-min-width');
     .theme(height, '@button-mini-height');
     .theme(font-size, '@button-mini-font-size');
-    .theme(line-height, '@button-mini-line-height');
 
     & + .van-button--mini {
       margin-left: 5px;
@@ -129,7 +128,7 @@
   }
 
   &--block {
-    display: block;
+    display: flex;
     width: 100%;
   }
 
@@ -149,10 +148,9 @@
     display: inline;
   }
 
-  &__loading-text {
+  &__loading-text,
-    display: inline-block;
+  &__icon + &__text:not(:empty) {
-    margin-left: 5px;
+    margin-left: @padding-base;
-    vertical-align: middle;
   }
 
   &__icon {
@@ -161,12 +159,6 @@
     vertical-align: top;
   }
 
-  &__icon + &__text:not(:empty) {
-    display: inline-block;
-    margin-left: 5px;
-    vertical-align: top;
-  }
-
   &--hairline {
     padding-top: 1px; // add 1px padding for text vertical align middle
     border-width: 0;

packages/button/index.wxml

@@ -28,7 +28,7 @@
       custom-class="loading-class"
       size="{{ loadingSize }}"
       type="{{ loadingType }}"
-      color="{{ type === 'default' ? '#c9c9c9' : '' }}"
+      color="{{ type === 'default' ? '#c9c9c9' : 'white' }}"
     />
     <view
       wx:if="{{ loadingText }}"

packages/common/style/var.less

@@ -74,17 +74,13 @@
 @button-mini-height: 22px;
 @button-mini-min-width: 50px;
 @button-mini-font-size: @font-size-xs;
-@button-mini-line-height: 20px;
 @button-small-height: 30px;
 @button-small-font-size: @font-size-sm;
 @button-small-min-width: 60px;
-@button-small-line-height: 28px;
 @button-normal-font-size: @font-size-md;
 @button-large-height: 50px;
-@button-large-line-height: 48px;
 @button-default-color: @text-color;
 @button-default-height: 44px;
-@button-default-line-height: 42px;
 @button-default-font-size: @font-size-lg;
 @button-default-background-color: @white;
 @button-default-border-color: @border-color;
@@ -100,6 +96,7 @@
 @button-warning-color: @white;
 @button-warning-background-color: @orange;
 @button-warning-border-color: @orange;
+@button-line-height: 20px;
 @button-border-radius: @border-radius-sm;
 @button-round-border-radius: @border-radius-max;
 @button-plain-background-color: @white;