DESIGN-4069 feat: 给按钮增加一组点击效果

demo/js/base/button/demo.button.js

@@ -309,6 +309,67 @@ Demo.Button = BI.inherit(BI.Widget, {
                 cls: "hover-mask",
                 light: true
             }
+        }, {
+            el: {
+                type: "bi.button",
+                width: 24,
+                height: 24,
+                clear: true,
+                level: "error",
+                iconCls: "search-font",
+                cls: "bi-list-item-select4"
+            }
+        }, {
+            el: {
+                type: "bi.button",
+                width: 24,
+                height: 24,
+                clear: true,
+                level: "warning",
+                iconCls: "search-font",
+                cls: "bi-list-item-select4"
+            }
+        }, {
+            el: {
+                type: "bi.button",
+                width: 24,
+                height: 24,
+                clear: true,
+                level: "common",
+                iconCls: "search-font",
+                cls: "bi-list-item-select4"
+            }
+        }, {
+            el: {
+                type: "bi.button",
+                width: 24,
+                height: 24,
+                clear: true,
+                level: "ignore",
+                iconCls: "search-font",
+                cls: "bi-list-item-select4"
+            }
+        }, {
+            el: {
+                type: "bi.button",
+                width: 24,
+                height: 24,
+                clear: true,
+                level: "success",
+                iconCls: "search-font",
+                cls: "bi-list-item-select4"
+            }
+        }, {
+            el: {
+                type: "bi.button",
+                height: 24,
+                width: 200,
+                clear: true,
+                text: "拥有悬浮效果的文字按钮",
+                level: "success",
+                iconCls: "search-font",
+                cls: "bi-list-item-select4"
+            }
         }];
         // BI.each(items, function (i, item) {
         //     item.el.handler = function () {

src/less/core/utils/list-item.less

@@ -383,6 +383,30 @@
   }
 }
 
+.bi-list-item-select4 {
+  &:hover {
+    .background-color(@color-black, 4%);
+  }
+
+  &.active {
+    .background-color(@color-black, 8%);
+  }
+
+  &.bi-button.button-error.clear,
+  &.bi-button.button-warning.clear,
+  &.bi-button.button-common.clear,
+  &.bi-button.button-success.clear,
+  &.bi-button.button-ignore.clear {
+    &:hover {
+      .background-color(@color-black, 4%);
+    }
+
+    &.active {
+      .background-color(@color-black, 8%);
+    }
+  }
+}
+
 // hover的时候背景变化
 // active的时候背景高亮
 .bi-list-item-select {