fix(Button): 修复 bg-color 在 disable=true 的情况下不生效的问题

BREAKING CHANGE: hover 和 disable 样式变动

close #817

Author: juzi214032

config/styles/_base.less

@@ -1,37 +1,38 @@
 @import "_theme";
 
 // Color 
-@default-color          : @theme-color;
-@success-color          : #34BFA3;
-@warning-color          : #FFE57F;
-@error-color            : #F4516C;
-@disabled-color         : #DEE2E6;
-@selected-color         : fade(@default-color, 90%);
-@tooltip-color          : #fff;
-@subsidiary-color       : #80848f;
-@rate-star-color        : #f5a623;
+@default-color    : @theme-color;
+@success-color    : #34BFA3;
+@warning-color    : #FFE57F;
+@error-color      : #F4516C;
+@disabled-color   : #DEE2E6;
+@selected-color   : fade(@default-color, 90%);
+@tooltip-color    : #fff;
+@subsidiary-color : #80848f;
+@rate-star-color  : #f5a623;
+@active-color     : #333;
 
 // steps
 
-@step-color             : #C4C9D2;
-@step-active-color      : @theme-color;
+@step-color        : #C4C9D2;
+@step-active-color : @theme-color;
 
 // Text
-@title-color            : #333; 
-@text-color             : #888;
+@title-color : #333;
+@text-color  : #888;
 
 // Background Color
-@background-color-base  : #f8f8f8;  // base
+@background-color-base : #f8f8f8; // base
 
 // Border color
-@border-color-base      : #dddee1;  // outside
-@border-color-split     : #e9eaec;  // inside
+@border-color-base  : #dddee1; // outside
+@border-color-split : #e9eaec; // inside
 
 // Size
-@size-grid-icon         : 28rpx;
-@size-font-base         : 28rpx;
-@size-font-mini         : 24rpx;
-@size-font-large        : 32rpx;
+@size-grid-icon  : 28rpx;
+@size-font-base  : 28rpx;
+@size-font-mini  : 24rpx;
+@size-font-large : 32rpx;
 
 // Button
 @btn-font-weight        : normal;
@@ -57,37 +58,37 @@
 @btn-width              : 180rpx;
 @btn-height-large       : 88rpx;
 @btn-width-large        : 710rpx;
-@btn-height-mini        : 60rpx; 
-@btn-width-mini         : 140rpx; 
+@btn-height-mini        : 60rpx;
+@btn-width-mini         : 140rpx;
 @btn-loading-color      : #fff;
 @btn-circle-size        : 40rpx;
 @btn-circle-size-mini   : 30rpx;
 @btn-circle-size-large  : 48rpx;
 
 
 // icon
-@icon-font-size         : 32px;                      // 图标字体大小        默认
-@icon-font-size-large   : 42px;                      // 图标字体大小        大号
-@icon-font-size-small   : 22px;                      // 图标字体大小        小号
-@icon-font-color        : #80848f;
+@icon-font-size       : 32px; // 图标字体大小        默认
+@icon-font-size-large : 42px; // 图标字体大小        大号
+@icon-font-size-small : 22px; // 图标字体大小        小号
+@icon-font-color      : #80848f;
 
 
 // Avatar
-@avatar-bg              : #ccc;
-@avatar-color           : #fff;
-@avatar-size-base       : 32px;
-@avatar-size-lg         : 40px;
-@avatar-size-sm         : 24px;
-@avatar-font-size-base  : 18px;
-@avatar-font-size-lg    : 24px;
-@avatar-font-size-sm    : 14px;
-@avatar-border-radius   : @border-radius-small;
-@border-radius-small    : 4px;
+@avatar-bg             : #ccc;
+@avatar-color          : #fff;
+@avatar-size-base      : 32px;
+@avatar-size-lg        : 40px;
+@avatar-size-sm        : 24px;
+@avatar-font-size-base : 18px;
+@avatar-font-size-lg   : 24px;
+@avatar-font-size-sm   : 14px;
+@avatar-border-radius  : @border-radius-small;
+@border-radius-small   : 4px;
 
 // Animation
-@animation-time         : .3s;
-@transition-time        : .2s;
-@ease-in-out            : ease-in-out;
+@animation-time  : .3s;
+@transition-time : .2s;
+@ease-in-out     : ease-in-out;
 
 // Progress
 @progress-active-color : @theme-color;

config/styles/_mixins.less

@@ -12,4 +12,19 @@
     pointer-events: none;
     box-sizing: border-box;
     border: 0 solid @border-color-split;
+}
+
+.active() {
+    opacity: 0.15;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    border: inherit;
+    border-radius: inherit; /* inherit parent's border radius */
+    transform: translate(-50%, -50%);
+    content: ' ';
+    background-color: @active-color;
+    border-color: @active-color;
 }

dist/button/index.wxml

@@ -5,7 +5,7 @@
     </view>
   </block>
   <block wx:else>
-    <view class="l-btn {{ 'l-btn-' + size }} {{ 'l-btn-' + type }} {{ 'l-btn-' + shape }} {{plain?'l-btn-plain':''}} {{ disabled ? 'l-btn-disabled' : ''}} l-class" hover-class="btn-hover l-hover-class" hover-stop-propagation="{{hoverStopPropagation}}" hover-start-time="{{hoverStartTime}}" hover-stay-time="{{hoverStayTime}}" style="{{width?'min-width:'+width+'rpx;':''}} {{height?'height:'+height+'rpx;'+'line-height:'+height+'rpx;':''}} {{size=='long'?'border-radius:0;':''}} {{'background-color:'+bgColor}}">
+    <view class="l-btn {{ 'l-btn-' + size }} {{ 'l-btn-' + type }} {{ 'l-btn-' + shape }} {{plain?'l-btn-plain':''}} {{ disabled ? 'l-btn-disabled' : ''}} l-class" hover-class="{{disabled?'':'btn-hover l-hover-class'}}" hover-stop-propagation="{{hoverStopPropagation}}" hover-start-time="{{hoverStartTime}}" hover-stay-time="{{hoverStayTime}}" style="{{width?'min-width:'+width+'rpx;':''}} {{height?'height:'+height+'rpx;'+'line-height:'+height+'rpx;':''}} {{size=='long'?'border-radius:0;':''}} {{'background-color:'+bgColor}}">
       <view wx:if="{{loading}}" class="l-btn-loading {{'margin-' + size}} {{ plain ?'l-btn-loading-' + type : '' }}"></view>
       <l-icon l-class="l-icon-class" class="{{'margin-' + size}}" wx:if="{{icon}}" name="{{icon}}" color="{{iconColor}}" size="{{iconSize}}"/>
       <slot/>

dist/button/index.wxss

@@ -1 +1 @@
-.btn-hover{opacity:.8}.special-container{display:flex}.l-btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;font-size:28rpx;position:relative;color:#fff;padding:0 12rpx;box-sizing:border-box}.l-btn-img-mini{width:30rpx;height:30rpx}.l-btn-img-medium{width:36rpx;height:36rpx}.l-btn-img-large{height:44rpx;width:44rpx}.l-btn-long{border-radius:0;margin:0;height:88rpx;width:100%}.l-btn-medium{height:72rpx;min-width:180rpx}.l-btn-large{height:88rpx;min-width:710rpx}.l-btn-mini{height:60rpx;min-width:140rpx;font-size:24rpx}.l-btn-default{background-color:#3963bc}.l-btn-success{background-color:#34bfa3}.l-btn-warning{background-color:#ffe57f;color:#333}.l-btn-error{background-color:#f4516c}.l-btn-square{border-radius:0}.l-btn-semicircle{border-radius:40rpx}.l-btn-large.l-btn-semicircle{border-radius:48rpx}.l-btn-mini.l-btn-semicircle{border-radius:30rpx}.l-btn-circle{border-radius:8rpx}.l-btn-large.l-btn-circle{border-radius:9.6rpx}.l-btn-mini.l-btn-circle{border-radius:6rpx}.l-btn-plain{background-color:#fff;color:#3963bc;border:2rpx solid #3963bc}.l-btn-success.l-btn-plain{background-color:#fff;color:#34bfa3;border:2rpx solid #34bfa3}.l-btn-error.l-btn-plain{background-color:#fff;color:#f4516c;border:2rpx solid #f4516c}.l-btn-warning.l-btn-plain{background-color:#fff;color:#ffe57f;border:2rpx solid #ffe57f}.l-btn-loading{opacity:.6;display:inline-block;vertical-align:middle;width:24rpx;height:24rpx;background:0 0;border-radius:50%;border:4rpx solid #fff;border-color:#fff #fff #fff transparent;animation:btn-spin .6s linear;animation-iteration-count:infinite}.l-btn-loading-default{border:4rpx solid #3963bc;border-color:#3963bc #3963bc #3963bc transparent}.l-btn-loading-success{border:4rpx solid #34bfa3;border-color:#34bfa3 #34bfa3 #34bfa3 transparent}.l-btn-loading-error{border:4rpx solid #f4516c;border-color:#f4516c #f4516c #f4516c transparent}.l-btn-loading-warning{border:4rpx solid #ffe57f;border-color:#ffe57f #ffe57f #ffe57f transparent}.l-btn-disabled{opacity:.8;background-color:#dee2e6}.icon{display:flex!important}.margin-mini{margin-right:10rpx}.margin-medium{margin-right:18rpx}.margin-large{margin-right:24rpx}@keyframes btn-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
+.btn-hover::before{opacity:.15;position:absolute;top:50%;left:50%;width:100%;height:100%;border:inherit;border-radius:inherit;transform:translate(-50%,-50%);content:' ';background-color:#333;border-color:#333}.special-container{display:flex}.l-btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;font-size:28rpx;position:relative;color:#fff;padding:0 12rpx;box-sizing:border-box}.l-btn-img-mini{width:30rpx;height:30rpx}.l-btn-img-medium{width:36rpx;height:36rpx}.l-btn-img-large{height:44rpx;width:44rpx}.l-btn-long{border-radius:0;margin:0;height:88rpx;width:100%}.l-btn-medium{height:72rpx;min-width:180rpx}.l-btn-large{height:88rpx;min-width:710rpx}.l-btn-mini{height:60rpx;min-width:140rpx;font-size:24rpx}.l-btn-default{background-color:#3963bc}.l-btn-success{background-color:#34bfa3}.l-btn-warning{background-color:#ffe57f;color:#333}.l-btn-error{background-color:#f4516c}.l-btn-square{border-radius:0}.l-btn-semicircle{border-radius:40rpx}.l-btn-large.l-btn-semicircle{border-radius:48rpx}.l-btn-mini.l-btn-semicircle{border-radius:30rpx}.l-btn-circle{border-radius:8rpx}.l-btn-large.l-btn-circle{border-radius:9.6rpx}.l-btn-mini.l-btn-circle{border-radius:6rpx}.l-btn-plain{background-color:#fff;color:#3963bc;border:2rpx solid #3963bc}.l-btn-success.l-btn-plain{background-color:#fff;color:#34bfa3;border:2rpx solid #34bfa3}.l-btn-error.l-btn-plain{background-color:#fff;color:#f4516c;border:2rpx solid #f4516c}.l-btn-warning.l-btn-plain{background-color:#fff;color:#ffe57f;border:2rpx solid #ffe57f}.l-btn-loading{opacity:.6;display:inline-block;vertical-align:middle;width:24rpx;height:24rpx;background:0 0;border-radius:50%;border:4rpx solid #fff;border-color:#fff #fff #fff transparent;animation:btn-spin .6s linear;animation-iteration-count:infinite}.l-btn-loading-default{border:4rpx solid #3963bc;border-color:#3963bc #3963bc #3963bc transparent}.l-btn-loading-success{border:4rpx solid #34bfa3;border-color:#34bfa3 #34bfa3 #34bfa3 transparent}.l-btn-loading-error{border:4rpx solid #f4516c;border-color:#f4516c #f4516c #f4516c transparent}.l-btn-loading-warning{border:4rpx solid #ffe57f;border-color:#ffe57f #ffe57f #ffe57f transparent}.l-btn-disabled{opacity:.8}.icon{display:flex!important}.margin-mini{margin-right:10rpx}.margin-medium{margin-right:18rpx}.margin-large{margin-right:24rpx}@keyframes btn-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

examples/dist/button/index.wxml

@@ -6,7 +6,7 @@
   </block>
   <block wx:else>
     <view class="l-btn {{ 'l-btn-' + size }} {{ 'l-btn-' + type }} {{ 'l-btn-' + shape }} {{plain?'l-btn-plain':''}} {{ disabled ? 'l-btn-disabled' : ''}} l-class " 
-          hover-class="btn-hover l-hover-class"
+          hover-class="{{disabled?'':'btn-hover l-hover-class'}}"
           hover-stop-propagation="{{hoverStopPropagation}}"
           hover-start-time="{{hoverStartTime}}"
           hover-stay-time="{{hoverStayTime}}"

examples/dist/button/index.wxss

@@ -1 +1 @@
-.btn-hover{opacity:.8}.special-container{display:flex}.l-btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;font-size:28rpx;position:relative;color:#fff;padding:0 12rpx;box-sizing:border-box}.l-btn-img-mini{width:30rpx;height:30rpx}.l-btn-img-medium{width:36rpx;height:36rpx}.l-btn-img-large{height:44rpx;width:44rpx}.l-btn-long{border-radius:0;margin:0;height:88rpx;width:100%}.l-btn-medium{height:72rpx;min-width:180rpx}.l-btn-large{height:88rpx;min-width:710rpx}.l-btn-mini{height:60rpx;min-width:140rpx;font-size:24rpx}.l-btn-default{background-color:#3963bc}.l-btn-success{background-color:#34bfa3}.l-btn-warning{background-color:#ffe57f;color:#333}.l-btn-error{background-color:#f4516c}.l-btn-square{border-radius:0}.l-btn-semicircle{border-radius:40rpx}.l-btn-large.l-btn-semicircle{border-radius:48rpx}.l-btn-mini.l-btn-semicircle{border-radius:30rpx}.l-btn-circle{border-radius:8rpx}.l-btn-large.l-btn-circle{border-radius:9.6rpx}.l-btn-mini.l-btn-circle{border-radius:6rpx}.l-btn-plain{background-color:#fff;color:#3963bc;border:2rpx solid #3963bc}.l-btn-success.l-btn-plain{background-color:#fff;color:#34bfa3;border:2rpx solid #34bfa3}.l-btn-error.l-btn-plain{background-color:#fff;color:#f4516c;border:2rpx solid #f4516c}.l-btn-warning.l-btn-plain{background-color:#fff;color:#ffe57f;border:2rpx solid #ffe57f}.l-btn-loading{opacity:.6;display:inline-block;vertical-align:middle;width:24rpx;height:24rpx;background:0 0;border-radius:50%;border:4rpx solid #fff;border-color:#fff #fff #fff transparent;animation:btn-spin .6s linear;animation-iteration-count:infinite}.l-btn-loading-default{border:4rpx solid #3963bc;border-color:#3963bc #3963bc #3963bc transparent}.l-btn-loading-success{border:4rpx solid #34bfa3;border-color:#34bfa3 #34bfa3 #34bfa3 transparent}.l-btn-loading-error{border:4rpx solid #f4516c;border-color:#f4516c #f4516c #f4516c transparent}.l-btn-loading-warning{border:4rpx solid #ffe57f;border-color:#ffe57f #ffe57f #ffe57f transparent}.l-btn-disabled{opacity:.8;background-color:#dee2e6}.icon{display:flex!important}.margin-mini{margin-right:10rpx}.margin-medium{margin-right:18rpx}.margin-large{margin-right:24rpx}@keyframes btn-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
+.btn-hover::before{opacity:.15;position:absolute;top:50%;left:50%;width:100%;height:100%;border:inherit;border-radius:inherit;transform:translate(-50%,-50%);content:' ';background-color:#333;border-color:#333}.special-container{display:flex}.l-btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;font-size:28rpx;position:relative;color:#fff;padding:0 12rpx;box-sizing:border-box}.l-btn-img-mini{width:30rpx;height:30rpx}.l-btn-img-medium{width:36rpx;height:36rpx}.l-btn-img-large{height:44rpx;width:44rpx}.l-btn-long{border-radius:0;margin:0;height:88rpx;width:100%}.l-btn-medium{height:72rpx;min-width:180rpx}.l-btn-large{height:88rpx;min-width:710rpx}.l-btn-mini{height:60rpx;min-width:140rpx;font-size:24rpx}.l-btn-default{background-color:#3963bc}.l-btn-success{background-color:#34bfa3}.l-btn-warning{background-color:#ffe57f;color:#333}.l-btn-error{background-color:#f4516c}.l-btn-square{border-radius:0}.l-btn-semicircle{border-radius:40rpx}.l-btn-large.l-btn-semicircle{border-radius:48rpx}.l-btn-mini.l-btn-semicircle{border-radius:30rpx}.l-btn-circle{border-radius:8rpx}.l-btn-large.l-btn-circle{border-radius:9.6rpx}.l-btn-mini.l-btn-circle{border-radius:6rpx}.l-btn-plain{background-color:#fff;color:#3963bc;border:2rpx solid #3963bc}.l-btn-success.l-btn-plain{background-color:#fff;color:#34bfa3;border:2rpx solid #34bfa3}.l-btn-error.l-btn-plain{background-color:#fff;color:#f4516c;border:2rpx solid #f4516c}.l-btn-warning.l-btn-plain{background-color:#fff;color:#ffe57f;border:2rpx solid #ffe57f}.l-btn-loading{opacity:.6;display:inline-block;vertical-align:middle;width:24rpx;height:24rpx;background:0 0;border-radius:50%;border:4rpx solid #fff;border-color:#fff #fff #fff transparent;animation:btn-spin .6s linear;animation-iteration-count:infinite}.l-btn-loading-default{border:4rpx solid #3963bc;border-color:#3963bc #3963bc #3963bc transparent}.l-btn-loading-success{border:4rpx solid #34bfa3;border-color:#34bfa3 #34bfa3 #34bfa3 transparent}.l-btn-loading-error{border:4rpx solid #f4516c;border-color:#f4516c #f4516c #f4516c transparent}.l-btn-loading-warning{border:4rpx solid #ffe57f;border-color:#ffe57f #ffe57f #ffe57f transparent}.l-btn-disabled{opacity:.8}.icon{display:flex!important}.margin-mini{margin-right:10rpx}.margin-medium{margin-right:18rpx}.margin-large{margin-right:24rpx}@keyframes btn-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

src/button/index.less

@@ -1,7 +1,8 @@
 @import "../../config/styles/_base.less";
+@import "../../config/styles/_mixins.less";
 
-.btn-hover{
-    opacity: 0.8;
+.btn-hover::before{
+    .active();
 }
 
 .special-container{
@@ -154,7 +155,6 @@
     // Disabled
     &-disabled{
         opacity: 0.8;
-        background-color: @disabled-color;
     }
 }
 

src/button/index.wxml

@@ -6,7 +6,7 @@
   </block>
   <block wx:else>
     <view class="l-btn {{ 'l-btn-' + size }} {{ 'l-btn-' + type }} {{ 'l-btn-' + shape }} {{plain?'l-btn-plain':''}} {{ disabled ? 'l-btn-disabled' : ''}} l-class " 
-          hover-class="btn-hover l-hover-class"
+          hover-class="{{disabled?'':'btn-hover l-hover-class'}}"
           hover-stop-propagation="{{hoverStopPropagation}}"
           hover-start-time="{{hoverStartTime}}"
           hover-stay-time="{{hoverStayTime}}"