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

2 years ago · 55bc3ae6af
2 changed files with 85 additions and 0 deletions
--- a/demo/js/base/button/demo.button.js
+++ b/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 () {
--- a/src/less/core/utils/list-item.less
+++ b/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 {