From 71406c6e602698e8582621c58b63cfa606cc4d29 Mon Sep 17 00:00:00 2001
From: windy <1374721899@qq.com>
Date: Thu, 1 Feb 2018 10:42:05 +0800
Subject: [PATCH 1/6] =?UTF-8?q?=E6=B7=B1=E6=B5=85=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E4=B8=8B=E7=9A=84=E5=B9=BD=E7=81=B5=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/js/base/button/demo.button.js       | 25 ++++++--
 dist/base.css                            | 81 ++++++++++++++++++++++++
 dist/base.js                             |  5 +-
 dist/bundle.css                          | 81 ++++++++++++++++++++++++
 dist/bundle.js                           |  5 +-
 dist/demo.js                             | 25 ++++++--
 dist/fineui.css                          | 81 ++++++++++++++++++++++++
 dist/fineui.js                           |  5 +-
 src/base/single/button/buttons/button.js |  5 +-
 src/css/base/single/button/button.css    | 81 ++++++++++++++++++++++++
 src/less/base/single/button/button.less  | 54 ++++++++++++++++
 src/less/lib/colors.less                 |  2 +
 src/less/lib/constant.less               |  1 +
 13 files changed, 437 insertions(+), 14 deletions(-)

diff --git a/demo/js/base/button/demo.button.js b/demo/js/base/button/demo.button.js
index b44da5f8a..077e886ab 100644
--- a/demo/js/base/button/demo.button.js
+++ b/demo/js/base/button/demo.button.js
@@ -182,13 +182,28 @@ Demo.Button = BI.inherit(BI.Widget, {
                     text: "文字按钮",
                     height: 30
                 }
+            }, {
+                el: {
+                    type: "bi.button",
+                    text: "幽灵按钮（common）",
+                    ghost: true,
+                    height: 30
+                }
+            }, {
+                el: {
+                    type: "bi.button",
+                    text: "幽灵按钮（common）灰化",
+                    disabled: true,
+                    ghost: true,
+                    height: 30
+                }
             }
         ];
-        BI.each(items, function (i, item) {
-            item.el.handler = function () {
-                BI.Msg.alert("按钮", this.options.text);
-            };
-        });
+        // BI.each(items, function (i, item) {
+        //     item.el.handler = function () {
+        //         BI.Msg.alert("按钮", this.options.text);
+        //     };
+        // });
         return {
             type: "bi.left",
             vgap: 100,
diff --git a/dist/base.css b/dist/base.css
index 5edaea46a..9bd4f0313 100644
--- a/dist/base.css
+++ b/dist/base.css
@@ -844,6 +844,11 @@ body .bi-button.clear:active,
   opacity: 0.75;
   filter: alpha(opacity=75);
 }
+body .bi-button.ghost,
+#body .bi-button.ghost {
+  font-size: inherit;
+  background-color: transparent;
+}
 body .bi-button.button-common,
 #body .bi-button.button-common,
 body .bi-button.button-common .b-font:before,
@@ -856,6 +861,21 @@ body .bi-button.button-common.clear .b-font:before,
 #body .bi-button.button-common.clear .b-font:before {
   color: #3685f2;
 }
+body .bi-button.button-common.ghost,
+#body .bi-button.button-common.ghost,
+body .bi-button.button-common.ghost .b-font:before,
+#body .bi-button.button-common.ghost .b-font:before {
+  color: #3685f2;
+}
+body .bi-button.button-common.ghost:hover,
+#body .bi-button.button-common.ghost:hover {
+  color: #ffffff;
+  background-color: #3f8ce8;
+}
+body .bi-button.button-common.ghost:active,
+#body .bi-button.button-common.ghost:active {
+  background-color: #3077DA;
+}
 body .bi-button.button-ignore,
 #body .bi-button.button-ignore {
   background-color: #ffffff;
@@ -1016,6 +1036,37 @@ body .bi-button.button-ignore.disabled.clear:active,
   opacity: 1;
   filter: alpha(opacity=100);
 }
+body .bi-button.button-common.disabled.ghost,
+#body .bi-button.button-common.disabled.ghost,
+body .bi-button.button-success.disabled.ghost,
+#body .bi-button.button-success.disabled.ghost,
+body .bi-button.button-warning.disabled.ghost,
+#body .bi-button.button-warning.disabled.ghost,
+body .bi-button.button-ignore.disabled.ghost,
+#body .bi-button.button-ignore.disabled.ghost {
+  background: transparent !important;
+  border-color: #3685f2 !important;
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+body .bi-button.button-common.disabled.ghost,
+#body .bi-button.button-common.disabled.ghost,
+body .bi-button.button-success.disabled.ghost,
+#body .bi-button.button-success.disabled.ghost,
+body .bi-button.button-warning.disabled.ghost,
+#body .bi-button.button-warning.disabled.ghost,
+body .bi-button.button-ignore.disabled.ghost,
+#body .bi-button.button-ignore.disabled.ghost,
+body .bi-button.button-common.disabled.ghost .b-font:before,
+#body .bi-button.button-common.disabled.ghost .b-font:before,
+body .bi-button.button-success.disabled.ghost .b-font:before,
+#body .bi-button.button-success.disabled.ghost .b-font:before,
+body .bi-button.button-warning.disabled.ghost .b-font:before,
+#body .bi-button.button-warning.disabled.ghost .b-font:before,
+body .bi-button.button-ignore.disabled.ghost .b-font:before,
+#body .bi-button.button-ignore.disabled.ghost .b-font:before {
+  color: #3685f2 !important;
+}
 .bi-basic-button.button-common .bi-button-mask,
 .bi-basic-button.button-success .bi-button-mask,
 .bi-basic-button.button-warning .bi-button-mask {
@@ -1028,6 +1079,36 @@ body .bi-button.button-ignore.disabled.clear:active,
   filter: alpha(opacity=20);
   background-color: #1a1a1a;
 }
+.bi-theme-dark body .bi-button.button-common.ghost,
+.bi-theme-dark #body .bi-button.button-common.ghost,
+.bi-theme-dark body .bi-button.button-common.ghost .b-font:before,
+.bi-theme-dark #body .bi-button.button-common.ghost .b-font:before {
+  color: #ffffff;
+  border-color: #ffffff;
+}
+.bi-theme-dark body .bi-button.button-common.ghost:hover,
+.bi-theme-dark #body .bi-button.button-common.ghost:hover {
+  color: #3d4d66;
+  background-color: #ffffff;
+}
+.bi-theme-dark body .bi-button.button-common.ghost:active,
+.bi-theme-dark #body .bi-button.button-common.ghost:active {
+  background-color: rgba(255, 255, 255, 0.9);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e6ffffff,endColorstr=#e6ffffff);
+}
+.bi-theme-dark body .bi-button.button-common.disabled.ghost,
+.bi-theme-dark #body .bi-button.button-common.disabled.ghost {
+  background: transparent !important;
+  border-color: #ffffff !important;
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+.bi-theme-dark body .bi-button.button-common.disabled.ghost,
+.bi-theme-dark #body .bi-button.button-common.disabled.ghost,
+.bi-theme-dark body .bi-button.button-common.disabled.ghost .b-font:before,
+.bi-theme-dark #body .bi-button.button-common.disabled.ghost .b-font:before {
+  color: #ffffff !important;
+}
 
 .bi-single-select-icon-text-item:active .b-font:before,
 .bi-single-select-icon-text-item.active .b-font:before {
diff --git a/dist/base.js b/dist/base.js
index 383b2a933..db5409a85 100644
--- a/dist/base.js
+++ b/dist/base.js
@@ -16520,7 +16520,7 @@ BI.shortcut("bi.image_button", BI.ImageButton);(function ($) {
             return BI.extend(conf, {
                 baseCls: (conf.baseCls || "") + " bi-button",
                 minWidth: (props.block === true || props.clear === true) ? 0 : 90,
-                shadow: props.clear !== true,
+                shadow: props.clear !== true && props.ghost !== true,
                 isShadowShowingOnSelected: true,
                 readonly: true,
                 iconCls: "",
@@ -16600,6 +16600,9 @@ BI.shortcut("bi.image_button", BI.ImageButton);(function ($) {
             if (o.clear === true) {
                 this.element.addClass("clear");
             }
+            if (o.ghost === true) {
+                this.element.addClass("ghost");
+            }
             if (o.minWidth > 0) {
                 this.element.css({"min-width": o.minWidth + "px"});
             }
diff --git a/dist/bundle.css b/dist/bundle.css
index a00cae530..c6e6a32fd 100644
--- a/dist/bundle.css
+++ b/dist/bundle.css
@@ -2891,6 +2891,11 @@ body .bi-button.clear:active,
   opacity: 0.75;
   filter: alpha(opacity=75);
 }
+body .bi-button.ghost,
+#body .bi-button.ghost {
+  font-size: inherit;
+  background-color: transparent;
+}
 body .bi-button.button-common,
 #body .bi-button.button-common,
 body .bi-button.button-common .b-font:before,
@@ -2903,6 +2908,21 @@ body .bi-button.button-common.clear .b-font:before,
 #body .bi-button.button-common.clear .b-font:before {
   color: #3685f2;
 }
+body .bi-button.button-common.ghost,
+#body .bi-button.button-common.ghost,
+body .bi-button.button-common.ghost .b-font:before,
+#body .bi-button.button-common.ghost .b-font:before {
+  color: #3685f2;
+}
+body .bi-button.button-common.ghost:hover,
+#body .bi-button.button-common.ghost:hover {
+  color: #ffffff;
+  background-color: #3f8ce8;
+}
+body .bi-button.button-common.ghost:active,
+#body .bi-button.button-common.ghost:active {
+  background-color: #3077DA;
+}
 body .bi-button.button-ignore,
 #body .bi-button.button-ignore {
   background-color: #ffffff;
@@ -3063,6 +3083,37 @@ body .bi-button.button-ignore.disabled.clear:active,
   opacity: 1;
   filter: alpha(opacity=100);
 }
+body .bi-button.button-common.disabled.ghost,
+#body .bi-button.button-common.disabled.ghost,
+body .bi-button.button-success.disabled.ghost,
+#body .bi-button.button-success.disabled.ghost,
+body .bi-button.button-warning.disabled.ghost,
+#body .bi-button.button-warning.disabled.ghost,
+body .bi-button.button-ignore.disabled.ghost,
+#body .bi-button.button-ignore.disabled.ghost {
+  background: transparent !important;
+  border-color: #3685f2 !important;
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+body .bi-button.button-common.disabled.ghost,
+#body .bi-button.button-common.disabled.ghost,
+body .bi-button.button-success.disabled.ghost,
+#body .bi-button.button-success.disabled.ghost,
+body .bi-button.button-warning.disabled.ghost,
+#body .bi-button.button-warning.disabled.ghost,
+body .bi-button.button-ignore.disabled.ghost,
+#body .bi-button.button-ignore.disabled.ghost,
+body .bi-button.button-common.disabled.ghost .b-font:before,
+#body .bi-button.button-common.disabled.ghost .b-font:before,
+body .bi-button.button-success.disabled.ghost .b-font:before,
+#body .bi-button.button-success.disabled.ghost .b-font:before,
+body .bi-button.button-warning.disabled.ghost .b-font:before,
+#body .bi-button.button-warning.disabled.ghost .b-font:before,
+body .bi-button.button-ignore.disabled.ghost .b-font:before,
+#body .bi-button.button-ignore.disabled.ghost .b-font:before {
+  color: #3685f2 !important;
+}
 .bi-basic-button.button-common .bi-button-mask,
 .bi-basic-button.button-success .bi-button-mask,
 .bi-basic-button.button-warning .bi-button-mask {
@@ -3075,6 +3126,36 @@ body .bi-button.button-ignore.disabled.clear:active,
   filter: alpha(opacity=20);
   background-color: #1a1a1a;
 }
+.bi-theme-dark body .bi-button.button-common.ghost,
+.bi-theme-dark #body .bi-button.button-common.ghost,
+.bi-theme-dark body .bi-button.button-common.ghost .b-font:before,
+.bi-theme-dark #body .bi-button.button-common.ghost .b-font:before {
+  color: #ffffff;
+  border-color: #ffffff;
+}
+.bi-theme-dark body .bi-button.button-common.ghost:hover,
+.bi-theme-dark #body .bi-button.button-common.ghost:hover {
+  color: #3d4d66;
+  background-color: #ffffff;
+}
+.bi-theme-dark body .bi-button.button-common.ghost:active,
+.bi-theme-dark #body .bi-button.button-common.ghost:active {
+  background-color: rgba(255, 255, 255, 0.9);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e6ffffff,endColorstr=#e6ffffff);
+}
+.bi-theme-dark body .bi-button.button-common.disabled.ghost,
+.bi-theme-dark #body .bi-button.button-common.disabled.ghost {
+  background: transparent !important;
+  border-color: #ffffff !important;
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+.bi-theme-dark body .bi-button.button-common.disabled.ghost,
+.bi-theme-dark #body .bi-button.button-common.disabled.ghost,
+.bi-theme-dark body .bi-button.button-common.disabled.ghost .b-font:before,
+.bi-theme-dark #body .bi-button.button-common.disabled.ghost .b-font:before {
+  color: #ffffff !important;
+}
 
 .bi-single-select-icon-text-item:active .b-font:before,
 .bi-single-select-icon-text-item.active .b-font:before {
diff --git a/dist/bundle.js b/dist/bundle.js
index 13e1da321..05a2c91e8 100644
--- a/dist/bundle.js
+++ b/dist/bundle.js
@@ -42572,7 +42572,7 @@ BI.shortcut("bi.image_button", BI.ImageButton);(function ($) {
             return BI.extend(conf, {
                 baseCls: (conf.baseCls || "") + " bi-button",
                 minWidth: (props.block === true || props.clear === true) ? 0 : 90,
-                shadow: props.clear !== true,
+                shadow: props.clear !== true && props.ghost !== true,
                 isShadowShowingOnSelected: true,
                 readonly: true,
                 iconCls: "",
@@ -42652,6 +42652,9 @@ BI.shortcut("bi.image_button", BI.ImageButton);(function ($) {
             if (o.clear === true) {
                 this.element.addClass("clear");
             }
+            if (o.ghost === true) {
+                this.element.addClass("ghost");
+            }
             if (o.minWidth > 0) {
                 this.element.css({"min-width": o.minWidth + "px"});
             }
diff --git a/dist/demo.js b/dist/demo.js
index 66e2d45a2..1421a65d3 100644
--- a/dist/demo.js
+++ b/dist/demo.js
@@ -201,13 +201,28 @@ $(function () {
                     text: "文字按钮",
                     height: 30
                 }
+            }, {
+                el: {
+                    type: "bi.button",
+                    text: "幽灵按钮（common）",
+                    ghost: true,
+                    height: 30
+                }
+            }, {
+                el: {
+                    type: "bi.button",
+                    text: "幽灵按钮（common）灰化",
+                    disabled: true,
+                    ghost: true,
+                    height: 30
+                }
             }
         ];
-        BI.each(items, function (i, item) {
-            item.el.handler = function () {
-                BI.Msg.alert("按钮", this.options.text);
-            };
-        });
+        // BI.each(items, function (i, item) {
+        //     item.el.handler = function () {
+        //         BI.Msg.alert("按钮", this.options.text);
+        //     };
+        // });
         return {
             type: "bi.left",
             vgap: 100,
diff --git a/dist/fineui.css b/dist/fineui.css
index 4fc1d05a3..f303d72fe 100644
--- a/dist/fineui.css
+++ b/dist/fineui.css
@@ -2891,6 +2891,11 @@ body .bi-button.clear:active,
   opacity: 0.75;
   filter: alpha(opacity=75);
 }
+body .bi-button.ghost,
+#body .bi-button.ghost {
+  font-size: inherit;
+  background-color: transparent;
+}
 body .bi-button.button-common,
 #body .bi-button.button-common,
 body .bi-button.button-common .b-font:before,
@@ -2903,6 +2908,21 @@ body .bi-button.button-common.clear .b-font:before,
 #body .bi-button.button-common.clear .b-font:before {
   color: #3685f2;
 }
+body .bi-button.button-common.ghost,
+#body .bi-button.button-common.ghost,
+body .bi-button.button-common.ghost .b-font:before,
+#body .bi-button.button-common.ghost .b-font:before {
+  color: #3685f2;
+}
+body .bi-button.button-common.ghost:hover,
+#body .bi-button.button-common.ghost:hover {
+  color: #ffffff;
+  background-color: #3f8ce8;
+}
+body .bi-button.button-common.ghost:active,
+#body .bi-button.button-common.ghost:active {
+  background-color: #3077DA;
+}
 body .bi-button.button-ignore,
 #body .bi-button.button-ignore {
   background-color: #ffffff;
@@ -3063,6 +3083,37 @@ body .bi-button.button-ignore.disabled.clear:active,
   opacity: 1;
   filter: alpha(opacity=100);
 }
+body .bi-button.button-common.disabled.ghost,
+#body .bi-button.button-common.disabled.ghost,
+body .bi-button.button-success.disabled.ghost,
+#body .bi-button.button-success.disabled.ghost,
+body .bi-button.button-warning.disabled.ghost,
+#body .bi-button.button-warning.disabled.ghost,
+body .bi-button.button-ignore.disabled.ghost,
+#body .bi-button.button-ignore.disabled.ghost {
+  background: transparent !important;
+  border-color: #3685f2 !important;
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+body .bi-button.button-common.disabled.ghost,
+#body .bi-button.button-common.disabled.ghost,
+body .bi-button.button-success.disabled.ghost,
+#body .bi-button.button-success.disabled.ghost,
+body .bi-button.button-warning.disabled.ghost,
+#body .bi-button.button-warning.disabled.ghost,
+body .bi-button.button-ignore.disabled.ghost,
+#body .bi-button.button-ignore.disabled.ghost,
+body .bi-button.button-common.disabled.ghost .b-font:before,
+#body .bi-button.button-common.disabled.ghost .b-font:before,
+body .bi-button.button-success.disabled.ghost .b-font:before,
+#body .bi-button.button-success.disabled.ghost .b-font:before,
+body .bi-button.button-warning.disabled.ghost .b-font:before,
+#body .bi-button.button-warning.disabled.ghost .b-font:before,
+body .bi-button.button-ignore.disabled.ghost .b-font:before,
+#body .bi-button.button-ignore.disabled.ghost .b-font:before {
+  color: #3685f2 !important;
+}
 .bi-basic-button.button-common .bi-button-mask,
 .bi-basic-button.button-success .bi-button-mask,
 .bi-basic-button.button-warning .bi-button-mask {
@@ -3075,6 +3126,36 @@ body .bi-button.button-ignore.disabled.clear:active,
   filter: alpha(opacity=20);
   background-color: #1a1a1a;
 }
+.bi-theme-dark body .bi-button.button-common.ghost,
+.bi-theme-dark #body .bi-button.button-common.ghost,
+.bi-theme-dark body .bi-button.button-common.ghost .b-font:before,
+.bi-theme-dark #body .bi-button.button-common.ghost .b-font:before {
+  color: #ffffff;
+  border-color: #ffffff;
+}
+.bi-theme-dark body .bi-button.button-common.ghost:hover,
+.bi-theme-dark #body .bi-button.button-common.ghost:hover {
+  color: #3d4d66;
+  background-color: #ffffff;
+}
+.bi-theme-dark body .bi-button.button-common.ghost:active,
+.bi-theme-dark #body .bi-button.button-common.ghost:active {
+  background-color: rgba(255, 255, 255, 0.9);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e6ffffff,endColorstr=#e6ffffff);
+}
+.bi-theme-dark body .bi-button.button-common.disabled.ghost,
+.bi-theme-dark #body .bi-button.button-common.disabled.ghost {
+  background: transparent !important;
+  border-color: #ffffff !important;
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+.bi-theme-dark body .bi-button.button-common.disabled.ghost,
+.bi-theme-dark #body .bi-button.button-common.disabled.ghost,
+.bi-theme-dark body .bi-button.button-common.disabled.ghost .b-font:before,
+.bi-theme-dark #body .bi-button.button-common.disabled.ghost .b-font:before {
+  color: #ffffff !important;
+}
 
 .bi-single-select-icon-text-item:active .b-font:before,
 .bi-single-select-icon-text-item.active .b-font:before {
diff --git a/dist/fineui.js b/dist/fineui.js
index 0b3014a0e..2a0bb9f62 100644
--- a/dist/fineui.js
+++ b/dist/fineui.js
@@ -44336,7 +44336,7 @@ BI.shortcut("bi.image_button", BI.ImageButton);(function ($) {
             return BI.extend(conf, {
                 baseCls: (conf.baseCls || "") + " bi-button",
                 minWidth: (props.block === true || props.clear === true) ? 0 : 90,
-                shadow: props.clear !== true,
+                shadow: props.clear !== true && props.ghost !== true,
                 isShadowShowingOnSelected: true,
                 readonly: true,
                 iconCls: "",
@@ -44416,6 +44416,9 @@ BI.shortcut("bi.image_button", BI.ImageButton);(function ($) {
             if (o.clear === true) {
                 this.element.addClass("clear");
             }
+            if (o.ghost === true) {
+                this.element.addClass("ghost");
+            }
             if (o.minWidth > 0) {
                 this.element.css({"min-width": o.minWidth + "px"});
             }
diff --git a/src/base/single/button/buttons/button.js b/src/base/single/button/buttons/button.js
index df81aea2e..aff295470 100644
--- a/src/base/single/button/buttons/button.js
+++ b/src/base/single/button/buttons/button.js
@@ -15,7 +15,7 @@
             return BI.extend(conf, {
                 baseCls: (conf.baseCls || "") + " bi-button",
                 minWidth: (props.block === true || props.clear === true) ? 0 : 90,
-                shadow: props.clear !== true,
+                shadow: props.clear !== true && props.ghost !== true,
                 isShadowShowingOnSelected: true,
                 readonly: true,
                 iconCls: "",
@@ -95,6 +95,9 @@
             if (o.clear === true) {
                 this.element.addClass("clear");
             }
+            if (o.ghost === true) {
+                this.element.addClass("ghost");
+            }
             if (o.minWidth > 0) {
                 this.element.css({"min-width": o.minWidth + "px"});
             }
diff --git a/src/css/base/single/button/button.css b/src/css/base/single/button/button.css
index 04c16554f..7a02b7d97 100644
--- a/src/css/base/single/button/button.css
+++ b/src/css/base/single/button/button.css
@@ -31,6 +31,11 @@ body .bi-button.clear:active,
   opacity: 0.75;
   filter: alpha(opacity=75);
 }
+body .bi-button.ghost,
+#body .bi-button.ghost {
+  font-size: inherit;
+  background-color: transparent;
+}
 body .bi-button.button-common,
 #body .bi-button.button-common,
 body .bi-button.button-common .b-font:before,
@@ -43,6 +48,21 @@ body .bi-button.button-common.clear .b-font:before,
 #body .bi-button.button-common.clear .b-font:before {
   color: #3685f2;
 }
+body .bi-button.button-common.ghost,
+#body .bi-button.button-common.ghost,
+body .bi-button.button-common.ghost .b-font:before,
+#body .bi-button.button-common.ghost .b-font:before {
+  color: #3685f2;
+}
+body .bi-button.button-common.ghost:hover,
+#body .bi-button.button-common.ghost:hover {
+  color: #ffffff;
+  background-color: #3f8ce8;
+}
+body .bi-button.button-common.ghost:active,
+#body .bi-button.button-common.ghost:active {
+  background-color: #3077DA;
+}
 body .bi-button.button-ignore,
 #body .bi-button.button-ignore {
   background-color: #ffffff;
@@ -203,6 +223,37 @@ body .bi-button.button-ignore.disabled.clear:active,
   opacity: 1;
   filter: alpha(opacity=100);
 }
+body .bi-button.button-common.disabled.ghost,
+#body .bi-button.button-common.disabled.ghost,
+body .bi-button.button-success.disabled.ghost,
+#body .bi-button.button-success.disabled.ghost,
+body .bi-button.button-warning.disabled.ghost,
+#body .bi-button.button-warning.disabled.ghost,
+body .bi-button.button-ignore.disabled.ghost,
+#body .bi-button.button-ignore.disabled.ghost {
+  background: transparent !important;
+  border-color: #3685f2 !important;
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+body .bi-button.button-common.disabled.ghost,
+#body .bi-button.button-common.disabled.ghost,
+body .bi-button.button-success.disabled.ghost,
+#body .bi-button.button-success.disabled.ghost,
+body .bi-button.button-warning.disabled.ghost,
+#body .bi-button.button-warning.disabled.ghost,
+body .bi-button.button-ignore.disabled.ghost,
+#body .bi-button.button-ignore.disabled.ghost,
+body .bi-button.button-common.disabled.ghost .b-font:before,
+#body .bi-button.button-common.disabled.ghost .b-font:before,
+body .bi-button.button-success.disabled.ghost .b-font:before,
+#body .bi-button.button-success.disabled.ghost .b-font:before,
+body .bi-button.button-warning.disabled.ghost .b-font:before,
+#body .bi-button.button-warning.disabled.ghost .b-font:before,
+body .bi-button.button-ignore.disabled.ghost .b-font:before,
+#body .bi-button.button-ignore.disabled.ghost .b-font:before {
+  color: #3685f2 !important;
+}
 .bi-basic-button.button-common .bi-button-mask,
 .bi-basic-button.button-success .bi-button-mask,
 .bi-basic-button.button-warning .bi-button-mask {
@@ -215,3 +266,33 @@ body .bi-button.button-ignore.disabled.clear:active,
   filter: alpha(opacity=20);
   background-color: #1a1a1a;
 }
+.bi-theme-dark body .bi-button.button-common.ghost,
+.bi-theme-dark #body .bi-button.button-common.ghost,
+.bi-theme-dark body .bi-button.button-common.ghost .b-font:before,
+.bi-theme-dark #body .bi-button.button-common.ghost .b-font:before {
+  color: #ffffff;
+  border-color: #ffffff;
+}
+.bi-theme-dark body .bi-button.button-common.ghost:hover,
+.bi-theme-dark #body .bi-button.button-common.ghost:hover {
+  color: #3d4d66;
+  background-color: #ffffff;
+}
+.bi-theme-dark body .bi-button.button-common.ghost:active,
+.bi-theme-dark #body .bi-button.button-common.ghost:active {
+  background-color: rgba(255, 255, 255, 0.9);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e6ffffff,endColorstr=#e6ffffff);
+}
+.bi-theme-dark body .bi-button.button-common.disabled.ghost,
+.bi-theme-dark #body .bi-button.button-common.disabled.ghost {
+  background: transparent !important;
+  border-color: #ffffff !important;
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+.bi-theme-dark body .bi-button.button-common.disabled.ghost,
+.bi-theme-dark #body .bi-button.button-common.disabled.ghost,
+.bi-theme-dark body .bi-button.button-common.disabled.ghost .b-font:before,
+.bi-theme-dark #body .bi-button.button-common.disabled.ghost .b-font:before {
+  color: #ffffff !important;
+}
diff --git a/src/less/base/single/button/button.less b/src/less/base/single/button/button.less
index f4d60a788..02ca8f494 100644
--- a/src/less/base/single/button/button.less
+++ b/src/less/base/single/button/button.less
@@ -21,6 +21,10 @@ body .bi-button, #body .bi-button {
       .opacity(0.75);
     }
   }
+  &.ghost {
+    font-size: inherit;
+    background-color: transparent;
+  }
   &.button-common {
     &, & .b-font:before {
       color: @color-bi-text;
@@ -28,6 +32,18 @@ body .bi-button, #body .bi-button {
     &.clear, &.clear .b-font:before {
       color: @color-bi-text-highlight;
     }
+    &.ghost{
+      &, & .b-font:before{
+        color: @color-bi-text-highlight;
+      }
+      &:hover{
+        color: @color-bi-text;
+        background-color: @color-bi-background-highlight;
+      }
+      &:active{
+        background-color: @color-bi-background-dark-highlight;
+      }
+    }
   }
   &.button-ignore {
     & {
@@ -106,6 +122,14 @@ body .bi-button, #body .bi-button {
         .opacity(1);
       }
     }
+    &.ghost {
+      &, & .b-font:before {
+        color: @color-bi-text-highlight !important;
+      }
+      background: transparent !important;
+      border-color: @color-bi-text-highlight !important;
+      .opacity(0.5);
+    }
   }
 }
 
@@ -120,4 +144,34 @@ body .bi-button, #body .bi-button {
     .opacity(0.2);
     background-color: @color-bi-button-mask;
   }
+}
+
+.bi-theme-dark {
+  body .bi-button, #body .bi-button {
+    &.button-common {
+      &.ghost{
+        &, & .b-font:before{
+          color: @color-bi-text;
+          border-color: @color-bi-border-default;
+        }
+        &:hover{
+          color: @color-bi-text-normal;
+          background-color: @color-bi-background-default;
+        }
+        &:active{
+          .background-color(@color-bi-background-default, 90%);
+        }
+      }
+    }
+    &.button-common.disabled{
+      &.ghost {
+        &, & .b-font:before {
+          color: @color-bi-text !important;
+        }
+        background: transparent !important;
+        border-color: @color-bi-border-default !important;
+        .opacity(0.5);
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/less/lib/colors.less b/src/less/lib/colors.less
index 919da3690..cd76d6e82 100644
--- a/src/less/lib/colors.less
+++ b/src/less/lib/colors.less
@@ -60,6 +60,8 @@
 @color-bi-background-highlight: @background-color-highlight;
 //背景提亮色(浅)
 @color-bi-background-light-highlight: @background-color-light-highlight;
+//背景提亮色(深)
+@color-bi-background-dark-highlight: @font-color-dark-highlight;
 
 //黑色边框色
 @color-bi-border-black: @border-color-black;
diff --git a/src/less/lib/constant.less b/src/less/lib/constant.less
index cbee89bba..02094bccc 100644
--- a/src/less/lib/constant.less
+++ b/src/less/lib/constant.less
@@ -25,6 +25,7 @@
 @font-color-gray: #999999;
 @font-color-white: #ffffff;//
 @font-color-highlight: #3685f2;
+@font-color-dark-highlight: #3077DA;
 @font-color-success: #5cb75d;
 @font-color-warning: #faaa39;//
 @font-color-negative: #ff4949;//

From a8e25b990b059e21b058b1c104f4bf4bcaa0ea24 Mon Sep 17 00:00:00 2001
From: windy <1374721899@qq.com>
Date: Thu, 1 Feb 2018 10:49:45 +0800
Subject: [PATCH 2/6] =?UTF-8?q?floatbox=E6=A0=87=E9=A2=98=E6=A0=8F?=
 =?UTF-8?q?=E9=AB=98=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dist/base.js                     | 4 ++--
 dist/bundle.js                   | 4 ++--
 dist/fineui.js                   | 4 ++--
 src/base/layer/layer.floatbox.js | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/dist/base.js b/dist/base.js
index db5409a85..2178a6e28 100644
--- a/dist/base.js
+++ b/dist/base.js
@@ -15285,7 +15285,7 @@ BI.FloatBox = BI.inherit(BI.Widget, {
                                 el: {
                                     type: "bi.icon_button",
                                     cls: "bi-message-close close-font",
-                                    height: 50,
+                                    height: 36,
                                     handler: function () {
                                         self.currentSectionProvider.close();
                                     }
@@ -15294,7 +15294,7 @@ BI.FloatBox = BI.inherit(BI.Widget, {
                             }
                         }
                     },
-                    height: 50
+                    height: 36
                 },
                 center: {
                     el: {
diff --git a/dist/bundle.js b/dist/bundle.js
index 05a2c91e8..95a95f761 100644
--- a/dist/bundle.js
+++ b/dist/bundle.js
@@ -41337,7 +41337,7 @@ BI.FloatBox = BI.inherit(BI.Widget, {
                                 el: {
                                     type: "bi.icon_button",
                                     cls: "bi-message-close close-font",
-                                    height: 50,
+                                    height: 36,
                                     handler: function () {
                                         self.currentSectionProvider.close();
                                     }
@@ -41346,7 +41346,7 @@ BI.FloatBox = BI.inherit(BI.Widget, {
                             }
                         }
                     },
-                    height: 50
+                    height: 36
                 },
                 center: {
                     el: {
diff --git a/dist/fineui.js b/dist/fineui.js
index 2a0bb9f62..752314313 100644
--- a/dist/fineui.js
+++ b/dist/fineui.js
@@ -43101,7 +43101,7 @@ BI.FloatBox = BI.inherit(BI.Widget, {
                                 el: {
                                     type: "bi.icon_button",
                                     cls: "bi-message-close close-font",
-                                    height: 50,
+                                    height: 36,
                                     handler: function () {
                                         self.currentSectionProvider.close();
                                     }
@@ -43110,7 +43110,7 @@ BI.FloatBox = BI.inherit(BI.Widget, {
                             }
                         }
                     },
-                    height: 50
+                    height: 36
                 },
                 center: {
                     el: {
diff --git a/src/base/layer/layer.floatbox.js b/src/base/layer/layer.floatbox.js
index dde869b3e..82d42d8fd 100644
--- a/src/base/layer/layer.floatbox.js
+++ b/src/base/layer/layer.floatbox.js
@@ -65,7 +65,7 @@ BI.FloatBox = BI.inherit(BI.Widget, {
                                 el: {
                                     type: "bi.icon_button",
                                     cls: "bi-message-close close-font",
-                                    height: 50,
+                                    height: 36,
                                     handler: function () {
                                         self.currentSectionProvider.close();
                                     }
@@ -74,7 +74,7 @@ BI.FloatBox = BI.inherit(BI.Widget, {
                             }
                         }
                     },
-                    height: 50
+                    height: 36
                 },
                 center: {
                     el: {

From 312d67efad431a99c189a13cfdce187a899a4372 Mon Sep 17 00:00:00 2001
From: windy <1374721899@qq.com>
Date: Thu, 1 Feb 2018 11:20:13 +0800
Subject: [PATCH 3/6] =?UTF-8?q?=E5=BC=80=E5=85=B3=E6=8E=A7=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/js/widget/basewidget/demo.items.js |  3 ++
 dist/base.css                           | 15 +++++++
 dist/bundle.css                         | 15 +++++++
 dist/bundle.js                          | 51 ++++++++++++++++++++++++
 dist/case.js                            | 51 ++++++++++++++++++++++++
 dist/demo.js                            |  3 ++
 dist/fineui.css                         | 15 +++++++
 dist/fineui.js                          | 51 ++++++++++++++++++++++++
 src/case/button/switch.js               | 52 +++++++++++++++++++++++++
 src/css/base/single/button/switch.css   | 15 +++++++
 src/less/base/single/button/switch.less | 12 ++++++
 11 files changed, 283 insertions(+)
 create mode 100644 src/case/button/switch.js
 create mode 100644 src/css/base/single/button/switch.css
 create mode 100644 src/less/base/single/button/switch.less

diff --git a/demo/js/widget/basewidget/demo.items.js b/demo/js/widget/basewidget/demo.items.js
index 14a1115fd..0562519b3 100644
--- a/demo/js/widget/basewidget/demo.items.js
+++ b/demo/js/widget/basewidget/demo.items.js
@@ -27,6 +27,9 @@ Demo.Items = BI.inherit(BI.Widget, {
             }, {
                 type: "bi.multi_select_item",
                 text: "复选项"
+            }, {
+                type: "bi.switch",
+                selected: true
             }],
             hgap: 300
         };
diff --git a/dist/base.css b/dist/base.css
index 9bd4f0313..f99995f9f 100644
--- a/dist/base.css
+++ b/dist/base.css
@@ -1120,6 +1120,21 @@ body .bi-button.button-ignore.disabled.ghost .b-font:before,
 .bi-single-select-icon-text-item.active .b-font:before {
   color: #3685f2;
 }
+.bi-switch {
+  -webkit-border-radius: 40px 40px 40px 40px;
+  -moz-border-radius: 40px 40px 40px 40px;
+  border-radius: 40px 40px 40px 40px;
+  background-color: #d4dadd;
+}
+.bi-switch:active,
+.bi-switch.active {
+  background-color: #3f8ce8;
+}
+.bi-switch .circle-button {
+  -webkit-border-radius: 9px 9px 9px 9px;
+  -moz-border-radius: 9px 9px 9px 9px;
+  border-radius: 9px 9px 9px 9px;
+}
 .bi-code-editor .param {
   color: #ffffff;
   padding: 0 5px;
diff --git a/dist/bundle.css b/dist/bundle.css
index c6e6a32fd..801c729f2 100644
--- a/dist/bundle.css
+++ b/dist/bundle.css
@@ -3167,6 +3167,21 @@ body .bi-button.button-ignore.disabled.ghost .b-font:before,
 .bi-single-select-icon-text-item.active .b-font:before {
   color: #3685f2;
 }
+.bi-switch {
+  -webkit-border-radius: 40px 40px 40px 40px;
+  -moz-border-radius: 40px 40px 40px 40px;
+  border-radius: 40px 40px 40px 40px;
+  background-color: #d4dadd;
+}
+.bi-switch:active,
+.bi-switch.active {
+  background-color: #3f8ce8;
+}
+.bi-switch .circle-button {
+  -webkit-border-radius: 9px 9px 9px 9px;
+  -moz-border-radius: 9px 9px 9px 9px;
+  border-radius: 9px 9px 9px 9px;
+}
 .bi-code-editor .param {
   color: #ffffff;
   padding: 0 5px;
diff --git a/dist/bundle.js b/dist/bundle.js
index 95a95f761..5ec791bdb 100644
--- a/dist/bundle.js
+++ b/dist/bundle.js
@@ -63547,6 +63547,57 @@ BI.PlusGroupNode = BI.inherit(BI.NodeButton, {
 });
 
 BI.shortcut("bi.plus_group_node", BI.PlusGroupNode);/**
+ * Created by Windy on 2018/2/1.
+ */
+/**
+ * guy
+ * 复选框item
+ * @type {*|void|Object}
+ */
+BI.Switch = BI.inherit(BI.BasicButton, {
+
+    props: {
+        extraCls: "bi-switch",
+        height: 22,
+        width: 44,
+        logic: {
+            dynamic: false
+        }
+    },
+
+    render: function () {
+        var self = this;
+        return {
+            type: "bi.absolute",
+            ref: function () {
+                self.layout = this;
+            },
+            items: [{
+                el: {
+                    type: "bi.text_button",
+                    cls: "circle-button bi-card"
+                },
+                width: 18,
+                height: 18,
+                top: 2,
+                left: this.options.selected ? 24 : 2
+            }]
+        }
+    },
+
+    setSelected: function (v) {
+        BI.Switch.superclass.setSelected.apply(this, arguments);
+        this.layout.attr("items")[0].left = v ? 24 : 2;
+        this.layout.resize();
+    },
+
+    doClick: function () {
+        BI.Switch.superclass.doClick.apply(this, arguments);
+        this.fireEvent(BI.Switch.EVENT_CHANGE);
+    }
+});
+BI.Switch.EVENT_CHANGE = "EVENT_CHANGE";
+BI.shortcut("bi.switch", BI.Switch);/**
  * guy
  * 复选框item
  * @type {*|void|Object}
diff --git a/dist/case.js b/dist/case.js
index 121c93d2e..c27d04131 100644
--- a/dist/case.js
+++ b/dist/case.js
@@ -978,6 +978,57 @@ BI.PlusGroupNode = BI.inherit(BI.NodeButton, {
 });
 
 BI.shortcut("bi.plus_group_node", BI.PlusGroupNode);/**
+ * Created by Windy on 2018/2/1.
+ */
+/**
+ * guy
+ * 复选框item
+ * @type {*|void|Object}
+ */
+BI.Switch = BI.inherit(BI.BasicButton, {
+
+    props: {
+        extraCls: "bi-switch",
+        height: 22,
+        width: 44,
+        logic: {
+            dynamic: false
+        }
+    },
+
+    render: function () {
+        var self = this;
+        return {
+            type: "bi.absolute",
+            ref: function () {
+                self.layout = this;
+            },
+            items: [{
+                el: {
+                    type: "bi.text_button",
+                    cls: "circle-button bi-card"
+                },
+                width: 18,
+                height: 18,
+                top: 2,
+                left: this.options.selected ? 24 : 2
+            }]
+        }
+    },
+
+    setSelected: function (v) {
+        BI.Switch.superclass.setSelected.apply(this, arguments);
+        this.layout.attr("items")[0].left = v ? 24 : 2;
+        this.layout.resize();
+    },
+
+    doClick: function () {
+        BI.Switch.superclass.doClick.apply(this, arguments);
+        this.fireEvent(BI.Switch.EVENT_CHANGE);
+    }
+});
+BI.Switch.EVENT_CHANGE = "EVENT_CHANGE";
+BI.shortcut("bi.switch", BI.Switch);/**
  * guy
  * 复选框item
  * @type {*|void|Object}
diff --git a/dist/demo.js b/dist/demo.js
index 7c4aa250d..642c19279 100644
--- a/dist/demo.js
+++ b/dist/demo.js
@@ -11594,6 +11594,9 @@ Demo.Items = BI.inherit(BI.Widget, {
             }, {
                 type: "bi.multi_select_item",
                 text: "复选项"
+            }, {
+                type: "bi.switch",
+                selected: true
             }],
             hgap: 300
         };
diff --git a/dist/fineui.css b/dist/fineui.css
index f303d72fe..af8d56446 100644
--- a/dist/fineui.css
+++ b/dist/fineui.css
@@ -3167,6 +3167,21 @@ body .bi-button.button-ignore.disabled.ghost .b-font:before,
 .bi-single-select-icon-text-item.active .b-font:before {
   color: #3685f2;
 }
+.bi-switch {
+  -webkit-border-radius: 40px 40px 40px 40px;
+  -moz-border-radius: 40px 40px 40px 40px;
+  border-radius: 40px 40px 40px 40px;
+  background-color: #d4dadd;
+}
+.bi-switch:active,
+.bi-switch.active {
+  background-color: #3f8ce8;
+}
+.bi-switch .circle-button {
+  -webkit-border-radius: 9px 9px 9px 9px;
+  -moz-border-radius: 9px 9px 9px 9px;
+  border-radius: 9px 9px 9px 9px;
+}
 .bi-code-editor .param {
   color: #ffffff;
   padding: 0 5px;
diff --git a/dist/fineui.js b/dist/fineui.js
index 752314313..c2139974c 100644
--- a/dist/fineui.js
+++ b/dist/fineui.js
@@ -65311,6 +65311,57 @@ BI.PlusGroupNode = BI.inherit(BI.NodeButton, {
 });
 
 BI.shortcut("bi.plus_group_node", BI.PlusGroupNode);/**
+ * Created by Windy on 2018/2/1.
+ */
+/**
+ * guy
+ * 复选框item
+ * @type {*|void|Object}
+ */
+BI.Switch = BI.inherit(BI.BasicButton, {
+
+    props: {
+        extraCls: "bi-switch",
+        height: 22,
+        width: 44,
+        logic: {
+            dynamic: false
+        }
+    },
+
+    render: function () {
+        var self = this;
+        return {
+            type: "bi.absolute",
+            ref: function () {
+                self.layout = this;
+            },
+            items: [{
+                el: {
+                    type: "bi.text_button",
+                    cls: "circle-button bi-card"
+                },
+                width: 18,
+                height: 18,
+                top: 2,
+                left: this.options.selected ? 24 : 2
+            }]
+        }
+    },
+
+    setSelected: function (v) {
+        BI.Switch.superclass.setSelected.apply(this, arguments);
+        this.layout.attr("items")[0].left = v ? 24 : 2;
+        this.layout.resize();
+    },
+
+    doClick: function () {
+        BI.Switch.superclass.doClick.apply(this, arguments);
+        this.fireEvent(BI.Switch.EVENT_CHANGE);
+    }
+});
+BI.Switch.EVENT_CHANGE = "EVENT_CHANGE";
+BI.shortcut("bi.switch", BI.Switch);/**
  * guy
  * 复选框item
  * @type {*|void|Object}
diff --git a/src/case/button/switch.js b/src/case/button/switch.js
new file mode 100644
index 000000000..0a7b6ee77
--- /dev/null
+++ b/src/case/button/switch.js
@@ -0,0 +1,52 @@
+/**
+ * Created by Windy on 2018/2/1.
+ */
+/**
+ * guy
+ * 复选框item
+ * @type {*|void|Object}
+ */
+BI.Switch = BI.inherit(BI.BasicButton, {
+
+    props: {
+        extraCls: "bi-switch",
+        height: 22,
+        width: 44,
+        logic: {
+            dynamic: false
+        }
+    },
+
+    render: function () {
+        var self = this;
+        return {
+            type: "bi.absolute",
+            ref: function () {
+                self.layout = this;
+            },
+            items: [{
+                el: {
+                    type: "bi.text_button",
+                    cls: "circle-button bi-card"
+                },
+                width: 18,
+                height: 18,
+                top: 2,
+                left: this.options.selected ? 24 : 2
+            }]
+        }
+    },
+
+    setSelected: function (v) {
+        BI.Switch.superclass.setSelected.apply(this, arguments);
+        this.layout.attr("items")[0].left = v ? 24 : 2;
+        this.layout.resize();
+    },
+
+    doClick: function () {
+        BI.Switch.superclass.doClick.apply(this, arguments);
+        this.fireEvent(BI.Switch.EVENT_CHANGE);
+    }
+});
+BI.Switch.EVENT_CHANGE = "EVENT_CHANGE";
+BI.shortcut("bi.switch", BI.Switch);
\ No newline at end of file
diff --git a/src/css/base/single/button/switch.css b/src/css/base/single/button/switch.css
new file mode 100644
index 000000000..6cd02ad84
--- /dev/null
+++ b/src/css/base/single/button/switch.css
@@ -0,0 +1,15 @@
+.bi-switch {
+  -webkit-border-radius: 40px 40px 40px 40px;
+  -moz-border-radius: 40px 40px 40px 40px;
+  border-radius: 40px 40px 40px 40px;
+  background-color: #d4dadd;
+}
+.bi-switch:active,
+.bi-switch.active {
+  background-color: #3f8ce8;
+}
+.bi-switch .circle-button {
+  -webkit-border-radius: 9px 9px 9px 9px;
+  -moz-border-radius: 9px 9px 9px 9px;
+  border-radius: 9px 9px 9px 9px;
+}
diff --git a/src/less/base/single/button/switch.less b/src/less/base/single/button/switch.less
new file mode 100644
index 000000000..2ff516a4d
--- /dev/null
+++ b/src/less/base/single/button/switch.less
@@ -0,0 +1,12 @@
+@import "../../../index";
+
+.bi-switch{
+  .border-radius(40px 40px 40px 40px);
+  background-color: @background-color-dark;
+  &:active, &.active {
+    background-color: @color-bi-background-highlight;
+  }
+  & .circle-button{
+    .border-radius(9px 9px 9px 9px);
+  }
+}
\ No newline at end of file

From f23fae87cc236faae4a67fabdf4c116c361ba931 Mon Sep 17 00:00:00 2001
From: windy <1374721899@qq.com>
Date: Thu, 1 Feb 2018 11:21:39 +0800
Subject: [PATCH 4/6] update

---
 dist/bundle.js            | 5 -----
 dist/case.js              | 5 -----
 dist/fineui.js            | 5 -----
 src/case/button/switch.js | 5 -----
 4 files changed, 20 deletions(-)

diff --git a/dist/bundle.js b/dist/bundle.js
index 5ec791bdb..930307bd9 100644
--- a/dist/bundle.js
+++ b/dist/bundle.js
@@ -63549,11 +63549,6 @@ BI.PlusGroupNode = BI.inherit(BI.NodeButton, {
 BI.shortcut("bi.plus_group_node", BI.PlusGroupNode);/**
  * Created by Windy on 2018/2/1.
  */
-/**
- * guy
- * 复选框item
- * @type {*|void|Object}
- */
 BI.Switch = BI.inherit(BI.BasicButton, {
 
     props: {
diff --git a/dist/case.js b/dist/case.js
index c27d04131..3cf261bc6 100644
--- a/dist/case.js
+++ b/dist/case.js
@@ -980,11 +980,6 @@ BI.PlusGroupNode = BI.inherit(BI.NodeButton, {
 BI.shortcut("bi.plus_group_node", BI.PlusGroupNode);/**
  * Created by Windy on 2018/2/1.
  */
-/**
- * guy
- * 复选框item
- * @type {*|void|Object}
- */
 BI.Switch = BI.inherit(BI.BasicButton, {
 
     props: {
diff --git a/dist/fineui.js b/dist/fineui.js
index c2139974c..ccab83e67 100644
--- a/dist/fineui.js
+++ b/dist/fineui.js
@@ -65313,11 +65313,6 @@ BI.PlusGroupNode = BI.inherit(BI.NodeButton, {
 BI.shortcut("bi.plus_group_node", BI.PlusGroupNode);/**
  * Created by Windy on 2018/2/1.
  */
-/**
- * guy
- * 复选框item
- * @type {*|void|Object}
- */
 BI.Switch = BI.inherit(BI.BasicButton, {
 
     props: {
diff --git a/src/case/button/switch.js b/src/case/button/switch.js
index 0a7b6ee77..69325cb6e 100644
--- a/src/case/button/switch.js
+++ b/src/case/button/switch.js
@@ -1,11 +1,6 @@
 /**
  * Created by Windy on 2018/2/1.
  */
-/**
- * guy
- * 复选框item
- * @type {*|void|Object}
- */
 BI.Switch = BI.inherit(BI.BasicButton, {
 
     props: {

From a6b6e767b77a84a7d0520c1aca4eeeef3f2fe408 Mon Sep 17 00:00:00 2001
From: windy <1374721899@qq.com>
Date: Thu, 1 Feb 2018 16:56:08 +0800
Subject: [PATCH 5/6] =?UTF-8?q?=E5=8E=BBtrigger=E7=AB=96=E7=BA=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dist/bundle.js                        | 2 --
 dist/case.js                          | 2 --
 dist/fineui.js                        | 2 --
 src/case/trigger/trigger.editor.js    | 1 -
 src/case/trigger/trigger.icon.text.js | 1 -
 5 files changed, 8 deletions(-)

diff --git a/dist/bundle.js b/dist/bundle.js
index 930307bd9..c1a47766e 100644
--- a/dist/bundle.js
+++ b/dist/bundle.js
@@ -76186,7 +76186,6 @@ BI.EditorTrigger = BI.inherit(BI.Trigger, {
                 }, {
                     el: {
                         type: "bi.trigger_icon_button",
-                        cls: "bi-border-left",
                         width: o.triggerWidth || o.height
                     },
                     width: o.triggerWidth || o.height
@@ -76267,7 +76266,6 @@ BI.IconTextTrigger = BI.inherit(BI.Trigger, {
         });
         this.trigerButton = BI.createWidget({
             type: "bi.trigger_icon_button",
-            cls: "bi-border-left",
             width: o.triggerWidth || o.height
         });
 
diff --git a/dist/case.js b/dist/case.js
index 3cf261bc6..6cce5be11 100644
--- a/dist/case.js
+++ b/dist/case.js
@@ -13617,7 +13617,6 @@ BI.EditorTrigger = BI.inherit(BI.Trigger, {
                 }, {
                     el: {
                         type: "bi.trigger_icon_button",
-                        cls: "bi-border-left",
                         width: o.triggerWidth || o.height
                     },
                     width: o.triggerWidth || o.height
@@ -13698,7 +13697,6 @@ BI.IconTextTrigger = BI.inherit(BI.Trigger, {
         });
         this.trigerButton = BI.createWidget({
             type: "bi.trigger_icon_button",
-            cls: "bi-border-left",
             width: o.triggerWidth || o.height
         });
 
diff --git a/dist/fineui.js b/dist/fineui.js
index ccab83e67..d0c55b3d8 100644
--- a/dist/fineui.js
+++ b/dist/fineui.js
@@ -77950,7 +77950,6 @@ BI.EditorTrigger = BI.inherit(BI.Trigger, {
                 }, {
                     el: {
                         type: "bi.trigger_icon_button",
-                        cls: "bi-border-left",
                         width: o.triggerWidth || o.height
                     },
                     width: o.triggerWidth || o.height
@@ -78031,7 +78030,6 @@ BI.IconTextTrigger = BI.inherit(BI.Trigger, {
         });
         this.trigerButton = BI.createWidget({
             type: "bi.trigger_icon_button",
-            cls: "bi-border-left",
             width: o.triggerWidth || o.height
         });
 
diff --git a/src/case/trigger/trigger.editor.js b/src/case/trigger/trigger.editor.js
index 97fb48ce2..8737f5aca 100644
--- a/src/case/trigger/trigger.editor.js
+++ b/src/case/trigger/trigger.editor.js
@@ -53,7 +53,6 @@ BI.EditorTrigger = BI.inherit(BI.Trigger, {
                 }, {
                     el: {
                         type: "bi.trigger_icon_button",
-                        cls: "bi-border-left",
                         width: o.triggerWidth || o.height
                     },
                     width: o.triggerWidth || o.height
diff --git a/src/case/trigger/trigger.icon.text.js b/src/case/trigger/trigger.icon.text.js
index c2805878a..7a27d28ae 100644
--- a/src/case/trigger/trigger.icon.text.js
+++ b/src/case/trigger/trigger.icon.text.js
@@ -30,7 +30,6 @@ BI.IconTextTrigger = BI.inherit(BI.Trigger, {
         });
         this.trigerButton = BI.createWidget({
             type: "bi.trigger_icon_button",
-            cls: "bi-border-left",
             width: o.triggerWidth || o.height
         });
 

From 8a9bddb1c980f9e8316d08033086c85b6cd71cf1 Mon Sep 17 00:00:00 2001
From: windy <1374721899@qq.com>
Date: Thu, 1 Feb 2018 18:55:31 +0800
Subject: [PATCH 6/6] =?UTF-8?q?=E4=B8=8D=E5=90=8C=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E7=9A=84button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/js/base/button/demo.button.js           |   7 +
 dist/base.css                                |  91 +++++++--
 dist/base.js                                 |   2 +-
 dist/bundle.css                              |  91 +++++++--
 dist/bundle.js                               |   2 +-
 dist/demo.js                                 |   7 +
 dist/fineui.css                              |  91 +++++++--
 dist/fineui.js                               |   2 +-
 src/base/single/button/buttons/button.js     |   2 +-
 src/css/base/pager/pager.css                 |  14 --
 src/css/base/single/button/button.css        |  91 +++++++--
 src/css/base/single/tip/tip.css              |  67 -------
 src/css/base/table/table.css                 | 196 -------------------
 src/css/base/trigger/trigger.css             |  14 --
 src/css/core/utils/common.css                |   2 +-
 src/css/resource/font.css                    |   1 +
 src/css/theme/dark.css                       |   2 +-
 src/css/widget/exceltable/exceltable.css     |   5 -
 src/css/widget/previewtable/previewtable.css |  13 +-
 src/less/base/single/button/button.less      |  51 +++--
 src/less/lib/colors.less                     |   2 -
 src/less/lib/constant.less                   |   1 -
 22 files changed, 360 insertions(+), 394 deletions(-)

diff --git a/demo/js/base/button/demo.button.js b/demo/js/base/button/demo.button.js
index 077e886ab..99ef9032b 100644
--- a/demo/js/base/button/demo.button.js
+++ b/demo/js/base/button/demo.button.js
@@ -25,6 +25,13 @@ Demo.Button = BI.inherit(BI.Widget, {
                     level: "warning",
                     height: 30
                 }
+            }, {
+                el: {
+                    type: "bi.button",
+                    text: "表示错误状态的按钮",
+                    level: "error",
+                    height: 30
+                }
             }, {
                 el: {
                     type: "bi.button",
diff --git a/dist/base.css b/dist/base.css
index f99995f9f..ccfa3153f 100644
--- a/dist/base.css
+++ b/dist/base.css
@@ -838,11 +838,14 @@ body .bi-button.clear,
   background-color: transparent;
 }
 body .bi-button.clear:hover,
-#body .bi-button.clear:hover,
+#body .bi-button.clear:hover {
+  opacity: 0.9;
+  filter: alpha(opacity=90);
+}
 body .bi-button.clear:active,
 #body .bi-button.clear:active {
-  opacity: 0.75;
-  filter: alpha(opacity=75);
+  opacity: 0.8;
+  filter: alpha(opacity=80);
 }
 body .bi-button.ghost,
 #body .bi-button.ghost {
@@ -874,18 +877,18 @@ body .bi-button.button-common.ghost:hover,
 }
 body .bi-button.button-common.ghost:active,
 #body .bi-button.button-common.ghost:active {
-  background-color: #3077DA;
+  background-color: #3f8ce8;
 }
 body .bi-button.button-ignore,
 #body .bi-button.button-ignore {
   background-color: #ffffff;
-  border-color: #d4dadd;
+  border-color: #178cdf;
 }
 body .bi-button.button-ignore,
 #body .bi-button.button-ignore,
 body .bi-button.button-ignore .b-font:before,
 #body .bi-button.button-ignore .b-font:before {
-  color: #1a1a1a;
+  color: #3685f2;
 }
 body .bi-button.button-ignore.clear,
 #body .bi-button.button-ignore.clear {
@@ -916,8 +919,8 @@ body .bi-button.button-success.clear .b-font:before,
 }
 body .bi-button.button-warning,
 #body .bi-button.button-warning {
-  background-color: #ff4949;
-  border-color: #e85050;
+  background-color: #faaa39;
+  border-color: #fbb03b;
 }
 body .bi-button.button-warning,
 #body .bi-button.button-warning,
@@ -934,18 +937,44 @@ body .bi-button.button-warning.clear,
 #body .bi-button.button-warning.clear,
 body .bi-button.button-warning.clear .b-font:before,
 #body .bi-button.button-warning.clear .b-font:before {
+  color: #faaa39;
+}
+body .bi-button.button-error,
+#body .bi-button.button-error {
+  background-color: #ff4949;
+  border-color: #e85050;
+}
+body .bi-button.button-error,
+#body .bi-button.button-error,
+body .bi-button.button-error .b-font:before,
+#body .bi-button.button-error .b-font:before {
+  color: #ffffff;
+}
+body .bi-button.button-error.clear,
+#body .bi-button.button-error.clear {
+  background-color: transparent;
+  border-width: 0;
+}
+body .bi-button.button-error.clear,
+#body .bi-button.button-error.clear,
+body .bi-button.button-error.clear .b-font:before,
+#body .bi-button.button-error.clear .b-font:before {
   color: #ff4949;
 }
 body .bi-button.button-common.disabled,
 #body .bi-button.button-common.disabled,
 body .bi-button.button-success.disabled,
 #body .bi-button.button-success.disabled,
+body .bi-button.button-error.disabled,
+#body .bi-button.button-error.disabled,
 body .bi-button.button-warning.disabled,
 #body .bi-button.button-warning.disabled,
 body .bi-button.button-common.disabled.base-disabled,
 #body .bi-button.button-common.disabled.base-disabled,
 body .bi-button.button-success.disabled.base-disabled,
 #body .bi-button.button-success.disabled.base-disabled,
+body .bi-button.button-error.disabled.base-disabled,
+#body .bi-button.button-error.disabled.base-disabled,
 body .bi-button.button-warning.disabled.base-disabled,
 #body .bi-button.button-warning.disabled.base-disabled {
   background: #cccccc !important;
@@ -955,24 +984,32 @@ body .bi-button.button-common.disabled,
 #body .bi-button.button-common.disabled,
 body .bi-button.button-success.disabled,
 #body .bi-button.button-success.disabled,
+body .bi-button.button-error.disabled,
+#body .bi-button.button-error.disabled,
 body .bi-button.button-warning.disabled,
 #body .bi-button.button-warning.disabled,
 body .bi-button.button-common.disabled.base-disabled,
 #body .bi-button.button-common.disabled.base-disabled,
 body .bi-button.button-success.disabled.base-disabled,
 #body .bi-button.button-success.disabled.base-disabled,
+body .bi-button.button-error.disabled.base-disabled,
+#body .bi-button.button-error.disabled.base-disabled,
 body .bi-button.button-warning.disabled.base-disabled,
 #body .bi-button.button-warning.disabled.base-disabled,
 body .bi-button.button-common.disabled .b-font:before,
 #body .bi-button.button-common.disabled .b-font:before,
 body .bi-button.button-success.disabled .b-font:before,
 #body .bi-button.button-success.disabled .b-font:before,
+body .bi-button.button-error.disabled .b-font:before,
+#body .bi-button.button-error.disabled .b-font:before,
 body .bi-button.button-warning.disabled .b-font:before,
 #body .bi-button.button-warning.disabled .b-font:before,
 body .bi-button.button-common.disabled.base-disabled .b-font:before,
 #body .bi-button.button-common.disabled.base-disabled .b-font:before,
 body .bi-button.button-success.disabled.base-disabled .b-font:before,
 #body .bi-button.button-success.disabled.base-disabled .b-font:before,
+body .bi-button.button-error.disabled.base-disabled .b-font:before,
+#body .bi-button.button-error.disabled.base-disabled .b-font:before,
 body .bi-button.button-warning.disabled.base-disabled .b-font:before,
 #body .bi-button.button-warning.disabled.base-disabled .b-font:before {
   color: #ffffff !important;
@@ -994,6 +1031,8 @@ body .bi-button.button-success.disabled.clear,
 #body .bi-button.button-success.disabled.clear,
 body .bi-button.button-warning.disabled.clear,
 #body .bi-button.button-warning.disabled.clear,
+body .bi-button.button-error.disabled.clear,
+#body .bi-button.button-error.disabled.clear,
 body .bi-button.button-ignore.disabled.clear,
 #body .bi-button.button-ignore.disabled.clear {
   background: transparent !important;
@@ -1005,6 +1044,8 @@ body .bi-button.button-success.disabled.clear,
 #body .bi-button.button-success.disabled.clear,
 body .bi-button.button-warning.disabled.clear,
 #body .bi-button.button-warning.disabled.clear,
+body .bi-button.button-error.disabled.clear,
+#body .bi-button.button-error.disabled.clear,
 body .bi-button.button-ignore.disabled.clear,
 #body .bi-button.button-ignore.disabled.clear,
 body .bi-button.button-common.disabled.clear .b-font:before,
@@ -1013,6 +1054,8 @@ body .bi-button.button-success.disabled.clear .b-font:before,
 #body .bi-button.button-success.disabled.clear .b-font:before,
 body .bi-button.button-warning.disabled.clear .b-font:before,
 #body .bi-button.button-warning.disabled.clear .b-font:before,
+body .bi-button.button-error.disabled.clear .b-font:before,
+#body .bi-button.button-error.disabled.clear .b-font:before,
 body .bi-button.button-ignore.disabled.clear .b-font:before,
 #body .bi-button.button-ignore.disabled.clear .b-font:before {
   color: #9ea6b2 !important;
@@ -1023,6 +1066,8 @@ body .bi-button.button-success.disabled.clear:hover,
 #body .bi-button.button-success.disabled.clear:hover,
 body .bi-button.button-warning.disabled.clear:hover,
 #body .bi-button.button-warning.disabled.clear:hover,
+body .bi-button.button-error.disabled.clear:hover,
+#body .bi-button.button-error.disabled.clear:hover,
 body .bi-button.button-ignore.disabled.clear:hover,
 #body .bi-button.button-ignore.disabled.clear:hover,
 body .bi-button.button-common.disabled.clear:active,
@@ -1031,6 +1076,8 @@ body .bi-button.button-success.disabled.clear:active,
 #body .bi-button.button-success.disabled.clear:active,
 body .bi-button.button-warning.disabled.clear:active,
 #body .bi-button.button-warning.disabled.clear:active,
+body .bi-button.button-error.disabled.clear:active,
+#body .bi-button.button-error.disabled.clear:active,
 body .bi-button.button-ignore.disabled.clear:active,
 #body .bi-button.button-ignore.disabled.clear:active {
   opacity: 1;
@@ -1042,6 +1089,8 @@ body .bi-button.button-success.disabled.ghost,
 #body .bi-button.button-success.disabled.ghost,
 body .bi-button.button-warning.disabled.ghost,
 #body .bi-button.button-warning.disabled.ghost,
+body .bi-button.button-error.disabled.ghost,
+#body .bi-button.button-error.disabled.ghost,
 body .bi-button.button-ignore.disabled.ghost,
 #body .bi-button.button-ignore.disabled.ghost {
   background: transparent !important;
@@ -1055,6 +1104,8 @@ body .bi-button.button-success.disabled.ghost,
 #body .bi-button.button-success.disabled.ghost,
 body .bi-button.button-warning.disabled.ghost,
 #body .bi-button.button-warning.disabled.ghost,
+body .bi-button.button-error.disabled.ghost,
+#body .bi-button.button-error.disabled.ghost,
 body .bi-button.button-ignore.disabled.ghost,
 #body .bi-button.button-ignore.disabled.ghost,
 body .bi-button.button-common.disabled.ghost .b-font:before,
@@ -1063,20 +1114,28 @@ body .bi-button.button-success.disabled.ghost .b-font:before,
 #body .bi-button.button-success.disabled.ghost .b-font:before,
 body .bi-button.button-warning.disabled.ghost .b-font:before,
 #body .bi-button.button-warning.disabled.ghost .b-font:before,
+body .bi-button.button-error.disabled.ghost .b-font:before,
+#body .bi-button.button-error.disabled.ghost .b-font:before,
 body .bi-button.button-ignore.disabled.ghost .b-font:before,
 #body .bi-button.button-ignore.disabled.ghost .b-font:before {
   color: #3685f2 !important;
 }
-.bi-basic-button.button-common .bi-button-mask,
-.bi-basic-button.button-success .bi-button-mask,
-.bi-basic-button.button-warning .bi-button-mask {
-  opacity: 0.2;
-  filter: alpha(opacity=20);
+.bi-basic-button.button-common:hover .bi-button-mask,
+.bi-basic-button.button-success:hover .bi-button-mask,
+.bi-basic-button.button-warning:hover .bi-button-mask,
+.bi-basic-button.button-error:hover .bi-button-mask,
+.bi-basic-button.button-ignore:hover .bi-button-mask {
+  opacity: 0.1;
+  filter: alpha(opacity=10);
   background-color: #ffffff;
 }
-.bi-basic-button .bi-button-mask {
-  opacity: 0.2;
-  filter: alpha(opacity=20);
+.bi-basic-button.button-common:active .bi-button-mask,
+.bi-basic-button.button-success:active .bi-button-mask,
+.bi-basic-button.button-warning:active .bi-button-mask,
+.bi-basic-button.button-error:active .bi-button-mask,
+.bi-basic-button.button-ignore:active .bi-button-mask {
+  opacity: 0.1;
+  filter: alpha(opacity=10);
   background-color: #1a1a1a;
 }
 .bi-theme-dark body .bi-button.button-common.ghost,
diff --git a/dist/base.js b/dist/base.js
index 2178a6e28..0f9a66864 100644
--- a/dist/base.js
+++ b/dist/base.js
@@ -16520,7 +16520,7 @@ BI.shortcut("bi.image_button", BI.ImageButton);(function ($) {
             return BI.extend(conf, {
                 baseCls: (conf.baseCls || "") + " bi-button",
                 minWidth: (props.block === true || props.clear === true) ? 0 : 90,
-                shadow: props.clear !== true && props.ghost !== true,
+                shadow: props.clear !== true,
                 isShadowShowingOnSelected: true,
                 readonly: true,
                 iconCls: "",
diff --git a/dist/bundle.css b/dist/bundle.css
index 801c729f2..0c160c48e 100644
--- a/dist/bundle.css
+++ b/dist/bundle.css
@@ -2885,11 +2885,14 @@ body .bi-button.clear,
   background-color: transparent;
 }
 body .bi-button.clear:hover,
-#body .bi-button.clear:hover,
+#body .bi-button.clear:hover {
+  opacity: 0.9;
+  filter: alpha(opacity=90);
+}
 body .bi-button.clear:active,
 #body .bi-button.clear:active {
-  opacity: 0.75;
-  filter: alpha(opacity=75);
+  opacity: 0.8;
+  filter: alpha(opacity=80);
 }
 body .bi-button.ghost,
 #body .bi-button.ghost {
@@ -2921,18 +2924,18 @@ body .bi-button.button-common.ghost:hover,
 }
 body .bi-button.button-common.ghost:active,
 #body .bi-button.button-common.ghost:active {
-  background-color: #3077DA;
+  background-color: #3f8ce8;
 }
 body .bi-button.button-ignore,
 #body .bi-button.button-ignore {
   background-color: #ffffff;
-  border-color: #d4dadd;
+  border-color: #178cdf;
 }
 body .bi-button.button-ignore,
 #body .bi-button.button-ignore,
 body .bi-button.button-ignore .b-font:before,
 #body .bi-button.button-ignore .b-font:before {
-  color: #1a1a1a;
+  color: #3685f2;
 }
 body .bi-button.button-ignore.clear,
 #body .bi-button.button-ignore.clear {
@@ -2963,8 +2966,8 @@ body .bi-button.button-success.clear .b-font:before,
 }
 body .bi-button.button-warning,
 #body .bi-button.button-warning {
-  background-color: #ff4949;
-  border-color: #e85050;
+  background-color: #faaa39;
+  border-color: #fbb03b;
 }
 body .bi-button.button-warning,
 #body .bi-button.button-warning,
@@ -2981,18 +2984,44 @@ body .bi-button.button-warning.clear,
 #body .bi-button.button-warning.clear,
 body .bi-button.button-warning.clear .b-font:before,
 #body .bi-button.button-warning.clear .b-font:before {
+  color: #faaa39;
+}
+body .bi-button.button-error,
+#body .bi-button.button-error {
+  background-color: #ff4949;
+  border-color: #e85050;
+}
+body .bi-button.button-error,
+#body .bi-button.button-error,
+body .bi-button.button-error .b-font:before,
+#body .bi-button.button-error .b-font:before {
+  color: #ffffff;
+}
+body .bi-button.button-error.clear,
+#body .bi-button.button-error.clear {
+  background-color: transparent;
+  border-width: 0;
+}
+body .bi-button.button-error.clear,
+#body .bi-button.button-error.clear,
+body .bi-button.button-error.clear .b-font:before,
+#body .bi-button.button-error.clear .b-font:before {
   color: #ff4949;
 }
 body .bi-button.button-common.disabled,
 #body .bi-button.button-common.disabled,
 body .bi-button.button-success.disabled,
 #body .bi-button.button-success.disabled,
+body .bi-button.button-error.disabled,
+#body .bi-button.button-error.disabled,
 body .bi-button.button-warning.disabled,
 #body .bi-button.button-warning.disabled,
 body .bi-button.button-common.disabled.base-disabled,
 #body .bi-button.button-common.disabled.base-disabled,
 body .bi-button.button-success.disabled.base-disabled,
 #body .bi-button.button-success.disabled.base-disabled,
+body .bi-button.button-error.disabled.base-disabled,
+#body .bi-button.button-error.disabled.base-disabled,
 body .bi-button.button-warning.disabled.base-disabled,
 #body .bi-button.button-warning.disabled.base-disabled {
   background: #cccccc !important;
@@ -3002,24 +3031,32 @@ body .bi-button.button-common.disabled,
 #body .bi-button.button-common.disabled,
 body .bi-button.button-success.disabled,
 #body .bi-button.button-success.disabled,
+body .bi-button.button-error.disabled,
+#body .bi-button.button-error.disabled,
 body .bi-button.button-warning.disabled,
 #body .bi-button.button-warning.disabled,
 body .bi-button.button-common.disabled.base-disabled,
 #body .bi-button.button-common.disabled.base-disabled,
 body .bi-button.button-success.disabled.base-disabled,
 #body .bi-button.button-success.disabled.base-disabled,
+body .bi-button.button-error.disabled.base-disabled,
+#body .bi-button.button-error.disabled.base-disabled,
 body .bi-button.button-warning.disabled.base-disabled,
 #body .bi-button.button-warning.disabled.base-disabled,
 body .bi-button.button-common.disabled .b-font:before,
 #body .bi-button.button-common.disabled .b-font:before,
 body .bi-button.button-success.disabled .b-font:before,
 #body .bi-button.button-success.disabled .b-font:before,
+body .bi-button.button-error.disabled .b-font:before,
+#body .bi-button.button-error.disabled .b-font:before,
 body .bi-button.button-warning.disabled .b-font:before,
 #body .bi-button.button-warning.disabled .b-font:before,
 body .bi-button.button-common.disabled.base-disabled .b-font:before,
 #body .bi-button.button-common.disabled.base-disabled .b-font:before,
 body .bi-button.button-success.disabled.base-disabled .b-font:before,
 #body .bi-button.button-success.disabled.base-disabled .b-font:before,
+body .bi-button.button-error.disabled.base-disabled .b-font:before,
+#body .bi-button.button-error.disabled.base-disabled .b-font:before,
 body .bi-button.button-warning.disabled.base-disabled .b-font:before,
 #body .bi-button.button-warning.disabled.base-disabled .b-font:before {
   color: #ffffff !important;
@@ -3041,6 +3078,8 @@ body .bi-button.button-success.disabled.clear,
 #body .bi-button.button-success.disabled.clear,
 body .bi-button.button-warning.disabled.clear,
 #body .bi-button.button-warning.disabled.clear,
+body .bi-button.button-error.disabled.clear,
+#body .bi-button.button-error.disabled.clear,
 body .bi-button.button-ignore.disabled.clear,
 #body .bi-button.button-ignore.disabled.clear {
   background: transparent !important;
@@ -3052,6 +3091,8 @@ body .bi-button.button-success.disabled.clear,
 #body .bi-button.button-success.disabled.clear,
 body .bi-button.button-warning.disabled.clear,
 #body .bi-button.button-warning.disabled.clear,
+body .bi-button.button-error.disabled.clear,
+#body .bi-button.button-error.disabled.clear,
 body .bi-button.button-ignore.disabled.clear,
 #body .bi-button.button-ignore.disabled.clear,
 body .bi-button.button-common.disabled.clear .b-font:before,
@@ -3060,6 +3101,8 @@ body .bi-button.button-success.disabled.clear .b-font:before,
 #body .bi-button.button-success.disabled.clear .b-font:before,
 body .bi-button.button-warning.disabled.clear .b-font:before,
 #body .bi-button.button-warning.disabled.clear .b-font:before,
+body .bi-button.button-error.disabled.clear .b-font:before,
+#body .bi-button.button-error.disabled.clear .b-font:before,
 body .bi-button.button-ignore.disabled.clear .b-font:before,
 #body .bi-button.button-ignore.disabled.clear .b-font:before {
   color: #9ea6b2 !important;
@@ -3070,6 +3113,8 @@ body .bi-button.button-success.disabled.clear:hover,
 #body .bi-button.button-success.disabled.clear:hover,
 body .bi-button.button-warning.disabled.clear:hover,
 #body .bi-button.button-warning.disabled.clear:hover,
+body .bi-button.button-error.disabled.clear:hover,
+#body .bi-button.button-error.disabled.clear:hover,
 body .bi-button.button-ignore.disabled.clear:hover,
 #body .bi-button.button-ignore.disabled.clear:hover,
 body .bi-button.button-common.disabled.clear:active,
@@ -3078,6 +3123,8 @@ body .bi-button.button-success.disabled.clear:active,
 #body .bi-button.button-success.disabled.clear:active,
 body .bi-button.button-warning.disabled.clear:active,
 #body .bi-button.button-warning.disabled.clear:active,
+body .bi-button.button-error.disabled.clear:active,
+#body .bi-button.button-error.disabled.clear:active,
 body .bi-button.button-ignore.disabled.clear:active,
 #body .bi-button.button-ignore.disabled.clear:active {
   opacity: 1;
@@ -3089,6 +3136,8 @@ body .bi-button.button-success.disabled.ghost,
 #body .bi-button.button-success.disabled.ghost,
 body .bi-button.button-warning.disabled.ghost,
 #body .bi-button.button-warning.disabled.ghost,
+body .bi-button.button-error.disabled.ghost,
+#body .bi-button.button-error.disabled.ghost,
 body .bi-button.button-ignore.disabled.ghost,
 #body .bi-button.button-ignore.disabled.ghost {
   background: transparent !important;
@@ -3102,6 +3151,8 @@ body .bi-button.button-success.disabled.ghost,
 #body .bi-button.button-success.disabled.ghost,
 body .bi-button.button-warning.disabled.ghost,
 #body .bi-button.button-warning.disabled.ghost,
+body .bi-button.button-error.disabled.ghost,
+#body .bi-button.button-error.disabled.ghost,
 body .bi-button.button-ignore.disabled.ghost,
 #body .bi-button.button-ignore.disabled.ghost,
 body .bi-button.button-common.disabled.ghost .b-font:before,
@@ -3110,20 +3161,28 @@ body .bi-button.button-success.disabled.ghost .b-font:before,
 #body .bi-button.button-success.disabled.ghost .b-font:before,
 body .bi-button.button-warning.disabled.ghost .b-font:before,
 #body .bi-button.button-warning.disabled.ghost .b-font:before,
+body .bi-button.button-error.disabled.ghost .b-font:before,
+#body .bi-button.button-error.disabled.ghost .b-font:before,
 body .bi-button.button-ignore.disabled.ghost .b-font:before,
 #body .bi-button.button-ignore.disabled.ghost .b-font:before {
   color: #3685f2 !important;
 }
-.bi-basic-button.button-common .bi-button-mask,
-.bi-basic-button.button-success .bi-button-mask,
-.bi-basic-button.button-warning .bi-button-mask {
-  opacity: 0.2;
-  filter: alpha(opacity=20);
+.bi-basic-button.button-common:hover .bi-button-mask,
+.bi-basic-button.button-success:hover .bi-button-mask,
+.bi-basic-button.button-warning:hover .bi-button-mask,
+.bi-basic-button.button-error:hover .bi-button-mask,
+.bi-basic-button.button-ignore:hover .bi-button-mask {
+  opacity: 0.1;
+  filter: alpha(opacity=10);
   background-color: #ffffff;
 }
-.bi-basic-button .bi-button-mask {
-  opacity: 0.2;
-  filter: alpha(opacity=20);
+.bi-basic-button.button-common:active .bi-button-mask,
+.bi-basic-button.button-success:active .bi-button-mask,
+.bi-basic-button.button-warning:active .bi-button-mask,
+.bi-basic-button.button-error:active .bi-button-mask,
+.bi-basic-button.button-ignore:active .bi-button-mask {
+  opacity: 0.1;
+  filter: alpha(opacity=10);
   background-color: #1a1a1a;
 }
 .bi-theme-dark body .bi-button.button-common.ghost,
diff --git a/dist/bundle.js b/dist/bundle.js
index c1a47766e..2dfad066d 100644
--- a/dist/bundle.js
+++ b/dist/bundle.js
@@ -42572,7 +42572,7 @@ BI.shortcut("bi.image_button", BI.ImageButton);(function ($) {
             return BI.extend(conf, {
                 baseCls: (conf.baseCls || "") + " bi-button",
                 minWidth: (props.block === true || props.clear === true) ? 0 : 90,
-                shadow: props.clear !== true && props.ghost !== true,
+                shadow: props.clear !== true,
                 isShadowShowingOnSelected: true,
                 readonly: true,
                 iconCls: "",
diff --git a/dist/demo.js b/dist/demo.js
index 642c19279..51f869c04 100644
--- a/dist/demo.js
+++ b/dist/demo.js
@@ -44,6 +44,13 @@ $(function () {
                     level: "warning",
                     height: 30
                 }
+            }, {
+                el: {
+                    type: "bi.button",
+                    text: "表示错误状态的按钮",
+                    level: "error",
+                    height: 30
+                }
             }, {
                 el: {
                     type: "bi.button",
diff --git a/dist/fineui.css b/dist/fineui.css
index af8d56446..5828b3867 100644
--- a/dist/fineui.css
+++ b/dist/fineui.css
@@ -2885,11 +2885,14 @@ body .bi-button.clear,
   background-color: transparent;
 }
 body .bi-button.clear:hover,
-#body .bi-button.clear:hover,
+#body .bi-button.clear:hover {
+  opacity: 0.9;
+  filter: alpha(opacity=90);
+}
 body .bi-button.clear:active,
 #body .bi-button.clear:active {
-  opacity: 0.75;
-  filter: alpha(opacity=75);
+  opacity: 0.8;
+  filter: alpha(opacity=80);
 }
 body .bi-button.ghost,
 #body .bi-button.ghost {
@@ -2921,18 +2924,18 @@ body .bi-button.button-common.ghost:hover,
 }
 body .bi-button.button-common.ghost:active,
 #body .bi-button.button-common.ghost:active {
-  background-color: #3077DA;
+  background-color: #3f8ce8;
 }
 body .bi-button.button-ignore,
 #body .bi-button.button-ignore {
   background-color: #ffffff;
-  border-color: #d4dadd;
+  border-color: #178cdf;
 }
 body .bi-button.button-ignore,
 #body .bi-button.button-ignore,
 body .bi-button.button-ignore .b-font:before,
 #body .bi-button.button-ignore .b-font:before {
-  color: #1a1a1a;
+  color: #3685f2;
 }
 body .bi-button.button-ignore.clear,
 #body .bi-button.button-ignore.clear {
@@ -2963,8 +2966,8 @@ body .bi-button.button-success.clear .b-font:before,
 }
 body .bi-button.button-warning,
 #body .bi-button.button-warning {
-  background-color: #ff4949;
-  border-color: #e85050;
+  background-color: #faaa39;
+  border-color: #fbb03b;
 }
 body .bi-button.button-warning,
 #body .bi-button.button-warning,
@@ -2981,18 +2984,44 @@ body .bi-button.button-warning.clear,
 #body .bi-button.button-warning.clear,
 body .bi-button.button-warning.clear .b-font:before,
 #body .bi-button.button-warning.clear .b-font:before {
+  color: #faaa39;
+}
+body .bi-button.button-error,
+#body .bi-button.button-error {
+  background-color: #ff4949;
+  border-color: #e85050;
+}
+body .bi-button.button-error,
+#body .bi-button.button-error,
+body .bi-button.button-error .b-font:before,
+#body .bi-button.button-error .b-font:before {
+  color: #ffffff;
+}
+body .bi-button.button-error.clear,
+#body .bi-button.button-error.clear {
+  background-color: transparent;
+  border-width: 0;
+}
+body .bi-button.button-error.clear,
+#body .bi-button.button-error.clear,
+body .bi-button.button-error.clear .b-font:before,
+#body .bi-button.button-error.clear .b-font:before {
   color: #ff4949;
 }
 body .bi-button.button-common.disabled,
 #body .bi-button.button-common.disabled,
 body .bi-button.button-success.disabled,
 #body .bi-button.button-success.disabled,
+body .bi-button.button-error.disabled,
+#body .bi-button.button-error.disabled,
 body .bi-button.button-warning.disabled,
 #body .bi-button.button-warning.disabled,
 body .bi-button.button-common.disabled.base-disabled,
 #body .bi-button.button-common.disabled.base-disabled,
 body .bi-button.button-success.disabled.base-disabled,
 #body .bi-button.button-success.disabled.base-disabled,
+body .bi-button.button-error.disabled.base-disabled,
+#body .bi-button.button-error.disabled.base-disabled,
 body .bi-button.button-warning.disabled.base-disabled,
 #body .bi-button.button-warning.disabled.base-disabled {
   background: #cccccc !important;
@@ -3002,24 +3031,32 @@ body .bi-button.button-common.disabled,
 #body .bi-button.button-common.disabled,
 body .bi-button.button-success.disabled,
 #body .bi-button.button-success.disabled,
+body .bi-button.button-error.disabled,
+#body .bi-button.button-error.disabled,
 body .bi-button.button-warning.disabled,
 #body .bi-button.button-warning.disabled,
 body .bi-button.button-common.disabled.base-disabled,
 #body .bi-button.button-common.disabled.base-disabled,
 body .bi-button.button-success.disabled.base-disabled,
 #body .bi-button.button-success.disabled.base-disabled,
+body .bi-button.button-error.disabled.base-disabled,
+#body .bi-button.button-error.disabled.base-disabled,
 body .bi-button.button-warning.disabled.base-disabled,
 #body .bi-button.button-warning.disabled.base-disabled,
 body .bi-button.button-common.disabled .b-font:before,
 #body .bi-button.button-common.disabled .b-font:before,
 body .bi-button.button-success.disabled .b-font:before,
 #body .bi-button.button-success.disabled .b-font:before,
+body .bi-button.button-error.disabled .b-font:before,
+#body .bi-button.button-error.disabled .b-font:before,
 body .bi-button.button-warning.disabled .b-font:before,
 #body .bi-button.button-warning.disabled .b-font:before,
 body .bi-button.button-common.disabled.base-disabled .b-font:before,
 #body .bi-button.button-common.disabled.base-disabled .b-font:before,
 body .bi-button.button-success.disabled.base-disabled .b-font:before,
 #body .bi-button.button-success.disabled.base-disabled .b-font:before,
+body .bi-button.button-error.disabled.base-disabled .b-font:before,
+#body .bi-button.button-error.disabled.base-disabled .b-font:before,
 body .bi-button.button-warning.disabled.base-disabled .b-font:before,
 #body .bi-button.button-warning.disabled.base-disabled .b-font:before {
   color: #ffffff !important;
@@ -3041,6 +3078,8 @@ body .bi-button.button-success.disabled.clear,
 #body .bi-button.button-success.disabled.clear,
 body .bi-button.button-warning.disabled.clear,
 #body .bi-button.button-warning.disabled.clear,
+body .bi-button.button-error.disabled.clear,
+#body .bi-button.button-error.disabled.clear,
 body .bi-button.button-ignore.disabled.clear,
 #body .bi-button.button-ignore.disabled.clear {
   background: transparent !important;
@@ -3052,6 +3091,8 @@ body .bi-button.button-success.disabled.clear,
 #body .bi-button.button-success.disabled.clear,
 body .bi-button.button-warning.disabled.clear,
 #body .bi-button.button-warning.disabled.clear,
+body .bi-button.button-error.disabled.clear,
+#body .bi-button.button-error.disabled.clear,
 body .bi-button.button-ignore.disabled.clear,
 #body .bi-button.button-ignore.disabled.clear,
 body .bi-button.button-common.disabled.clear .b-font:before,
@@ -3060,6 +3101,8 @@ body .bi-button.button-success.disabled.clear .b-font:before,
 #body .bi-button.button-success.disabled.clear .b-font:before,
 body .bi-button.button-warning.disabled.clear .b-font:before,
 #body .bi-button.button-warning.disabled.clear .b-font:before,
+body .bi-button.button-error.disabled.clear .b-font:before,
+#body .bi-button.button-error.disabled.clear .b-font:before,
 body .bi-button.button-ignore.disabled.clear .b-font:before,
 #body .bi-button.button-ignore.disabled.clear .b-font:before {
   color: #9ea6b2 !important;
@@ -3070,6 +3113,8 @@ body .bi-button.button-success.disabled.clear:hover,
 #body .bi-button.button-success.disabled.clear:hover,
 body .bi-button.button-warning.disabled.clear:hover,
 #body .bi-button.button-warning.disabled.clear:hover,
+body .bi-button.button-error.disabled.clear:hover,
+#body .bi-button.button-error.disabled.clear:hover,
 body .bi-button.button-ignore.disabled.clear:hover,
 #body .bi-button.button-ignore.disabled.clear:hover,
 body .bi-button.button-common.disabled.clear:active,
@@ -3078,6 +3123,8 @@ body .bi-button.button-success.disabled.clear:active,
 #body .bi-button.button-success.disabled.clear:active,
 body .bi-button.button-warning.disabled.clear:active,
 #body .bi-button.button-warning.disabled.clear:active,
+body .bi-button.button-error.disabled.clear:active,
+#body .bi-button.button-error.disabled.clear:active,
 body .bi-button.button-ignore.disabled.clear:active,
 #body .bi-button.button-ignore.disabled.clear:active {
   opacity: 1;
@@ -3089,6 +3136,8 @@ body .bi-button.button-success.disabled.ghost,
 #body .bi-button.button-success.disabled.ghost,
 body .bi-button.button-warning.disabled.ghost,
 #body .bi-button.button-warning.disabled.ghost,
+body .bi-button.button-error.disabled.ghost,
+#body .bi-button.button-error.disabled.ghost,
 body .bi-button.button-ignore.disabled.ghost,
 #body .bi-button.button-ignore.disabled.ghost {
   background: transparent !important;
@@ -3102,6 +3151,8 @@ body .bi-button.button-success.disabled.ghost,
 #body .bi-button.button-success.disabled.ghost,
 body .bi-button.button-warning.disabled.ghost,
 #body .bi-button.button-warning.disabled.ghost,
+body .bi-button.button-error.disabled.ghost,
+#body .bi-button.button-error.disabled.ghost,
 body .bi-button.button-ignore.disabled.ghost,
 #body .bi-button.button-ignore.disabled.ghost,
 body .bi-button.button-common.disabled.ghost .b-font:before,
@@ -3110,20 +3161,28 @@ body .bi-button.button-success.disabled.ghost .b-font:before,
 #body .bi-button.button-success.disabled.ghost .b-font:before,
 body .bi-button.button-warning.disabled.ghost .b-font:before,
 #body .bi-button.button-warning.disabled.ghost .b-font:before,
+body .bi-button.button-error.disabled.ghost .b-font:before,
+#body .bi-button.button-error.disabled.ghost .b-font:before,
 body .bi-button.button-ignore.disabled.ghost .b-font:before,
 #body .bi-button.button-ignore.disabled.ghost .b-font:before {
   color: #3685f2 !important;
 }
-.bi-basic-button.button-common .bi-button-mask,
-.bi-basic-button.button-success .bi-button-mask,
-.bi-basic-button.button-warning .bi-button-mask {
-  opacity: 0.2;
-  filter: alpha(opacity=20);
+.bi-basic-button.button-common:hover .bi-button-mask,
+.bi-basic-button.button-success:hover .bi-button-mask,
+.bi-basic-button.button-warning:hover .bi-button-mask,
+.bi-basic-button.button-error:hover .bi-button-mask,
+.bi-basic-button.button-ignore:hover .bi-button-mask {
+  opacity: 0.1;
+  filter: alpha(opacity=10);
   background-color: #ffffff;
 }
-.bi-basic-button .bi-button-mask {
-  opacity: 0.2;
-  filter: alpha(opacity=20);
+.bi-basic-button.button-common:active .bi-button-mask,
+.bi-basic-button.button-success:active .bi-button-mask,
+.bi-basic-button.button-warning:active .bi-button-mask,
+.bi-basic-button.button-error:active .bi-button-mask,
+.bi-basic-button.button-ignore:active .bi-button-mask {
+  opacity: 0.1;
+  filter: alpha(opacity=10);
   background-color: #1a1a1a;
 }
 .bi-theme-dark body .bi-button.button-common.ghost,
diff --git a/dist/fineui.js b/dist/fineui.js
index d0c55b3d8..9aaf51eeb 100644
--- a/dist/fineui.js
+++ b/dist/fineui.js
@@ -44336,7 +44336,7 @@ BI.shortcut("bi.image_button", BI.ImageButton);(function ($) {
             return BI.extend(conf, {
                 baseCls: (conf.baseCls || "") + " bi-button",
                 minWidth: (props.block === true || props.clear === true) ? 0 : 90,
-                shadow: props.clear !== true && props.ghost !== true,
+                shadow: props.clear !== true,
                 isShadowShowingOnSelected: true,
                 readonly: true,
                 iconCls: "",
diff --git a/src/base/single/button/buttons/button.js b/src/base/single/button/buttons/button.js
index aff295470..bf406f521 100644
--- a/src/base/single/button/buttons/button.js
+++ b/src/base/single/button/buttons/button.js
@@ -15,7 +15,7 @@
             return BI.extend(conf, {
                 baseCls: (conf.baseCls || "") + " bi-button",
                 minWidth: (props.block === true || props.clear === true) ? 0 : 90,
-                shadow: props.clear !== true && props.ghost !== true,
+                shadow: props.clear !== true,
                 isShadowShowingOnSelected: true,
                 readonly: true,
                 iconCls: "",
diff --git a/src/css/base/pager/pager.css b/src/css/base/pager/pager.css
index b28d24360..585c51289 100644
--- a/src/css/base/pager/pager.css
+++ b/src/css/base/pager/pager.css
@@ -1,17 +1,3 @@
-.bi-all-count-pager .all-pager-prev {
-  font-size: 16px;
-}
-.bi-all-count-pager .all-pager-next {
-  font-size: 16px;
-}
-
-.bi-direction-pager .direction-pager-prev {
-  font-size: 16px;
-}
-.bi-direction-pager .direction-pager-next {
-  font-size: 16px;
-}
-
 .bi-pager .page-item {
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
diff --git a/src/css/base/single/button/button.css b/src/css/base/single/button/button.css
index 7a02b7d97..d1acdd33e 100644
--- a/src/css/base/single/button/button.css
+++ b/src/css/base/single/button/button.css
@@ -25,11 +25,14 @@ body .bi-button.clear,
   background-color: transparent;
 }
 body .bi-button.clear:hover,
-#body .bi-button.clear:hover,
+#body .bi-button.clear:hover {
+  opacity: 0.9;
+  filter: alpha(opacity=90);
+}
 body .bi-button.clear:active,
 #body .bi-button.clear:active {
-  opacity: 0.75;
-  filter: alpha(opacity=75);
+  opacity: 0.8;
+  filter: alpha(opacity=80);
 }
 body .bi-button.ghost,
 #body .bi-button.ghost {
@@ -61,18 +64,18 @@ body .bi-button.button-common.ghost:hover,
 }
 body .bi-button.button-common.ghost:active,
 #body .bi-button.button-common.ghost:active {
-  background-color: #3077DA;
+  background-color: #3f8ce8;
 }
 body .bi-button.button-ignore,
 #body .bi-button.button-ignore {
   background-color: #ffffff;
-  border-color: #d4dadd;
+  border-color: #178cdf;
 }
 body .bi-button.button-ignore,
 #body .bi-button.button-ignore,
 body .bi-button.button-ignore .b-font:before,
 #body .bi-button.button-ignore .b-font:before {
-  color: #1a1a1a;
+  color: #3685f2;
 }
 body .bi-button.button-ignore.clear,
 #body .bi-button.button-ignore.clear {
@@ -103,8 +106,8 @@ body .bi-button.button-success.clear .b-font:before,
 }
 body .bi-button.button-warning,
 #body .bi-button.button-warning {
-  background-color: #ff4949;
-  border-color: #e85050;
+  background-color: #faaa39;
+  border-color: #fbb03b;
 }
 body .bi-button.button-warning,
 #body .bi-button.button-warning,
@@ -121,18 +124,44 @@ body .bi-button.button-warning.clear,
 #body .bi-button.button-warning.clear,
 body .bi-button.button-warning.clear .b-font:before,
 #body .bi-button.button-warning.clear .b-font:before {
+  color: #faaa39;
+}
+body .bi-button.button-error,
+#body .bi-button.button-error {
+  background-color: #ff4949;
+  border-color: #e85050;
+}
+body .bi-button.button-error,
+#body .bi-button.button-error,
+body .bi-button.button-error .b-font:before,
+#body .bi-button.button-error .b-font:before {
+  color: #ffffff;
+}
+body .bi-button.button-error.clear,
+#body .bi-button.button-error.clear {
+  background-color: transparent;
+  border-width: 0;
+}
+body .bi-button.button-error.clear,
+#body .bi-button.button-error.clear,
+body .bi-button.button-error.clear .b-font:before,
+#body .bi-button.button-error.clear .b-font:before {
   color: #ff4949;
 }
 body .bi-button.button-common.disabled,
 #body .bi-button.button-common.disabled,
 body .bi-button.button-success.disabled,
 #body .bi-button.button-success.disabled,
+body .bi-button.button-error.disabled,
+#body .bi-button.button-error.disabled,
 body .bi-button.button-warning.disabled,
 #body .bi-button.button-warning.disabled,
 body .bi-button.button-common.disabled.base-disabled,
 #body .bi-button.button-common.disabled.base-disabled,
 body .bi-button.button-success.disabled.base-disabled,
 #body .bi-button.button-success.disabled.base-disabled,
+body .bi-button.button-error.disabled.base-disabled,
+#body .bi-button.button-error.disabled.base-disabled,
 body .bi-button.button-warning.disabled.base-disabled,
 #body .bi-button.button-warning.disabled.base-disabled {
   background: #cccccc !important;
@@ -142,24 +171,32 @@ body .bi-button.button-common.disabled,
 #body .bi-button.button-common.disabled,
 body .bi-button.button-success.disabled,
 #body .bi-button.button-success.disabled,
+body .bi-button.button-error.disabled,
+#body .bi-button.button-error.disabled,
 body .bi-button.button-warning.disabled,
 #body .bi-button.button-warning.disabled,
 body .bi-button.button-common.disabled.base-disabled,
 #body .bi-button.button-common.disabled.base-disabled,
 body .bi-button.button-success.disabled.base-disabled,
 #body .bi-button.button-success.disabled.base-disabled,
+body .bi-button.button-error.disabled.base-disabled,
+#body .bi-button.button-error.disabled.base-disabled,
 body .bi-button.button-warning.disabled.base-disabled,
 #body .bi-button.button-warning.disabled.base-disabled,
 body .bi-button.button-common.disabled .b-font:before,
 #body .bi-button.button-common.disabled .b-font:before,
 body .bi-button.button-success.disabled .b-font:before,
 #body .bi-button.button-success.disabled .b-font:before,
+body .bi-button.button-error.disabled .b-font:before,
+#body .bi-button.button-error.disabled .b-font:before,
 body .bi-button.button-warning.disabled .b-font:before,
 #body .bi-button.button-warning.disabled .b-font:before,
 body .bi-button.button-common.disabled.base-disabled .b-font:before,
 #body .bi-button.button-common.disabled.base-disabled .b-font:before,
 body .bi-button.button-success.disabled.base-disabled .b-font:before,
 #body .bi-button.button-success.disabled.base-disabled .b-font:before,
+body .bi-button.button-error.disabled.base-disabled .b-font:before,
+#body .bi-button.button-error.disabled.base-disabled .b-font:before,
 body .bi-button.button-warning.disabled.base-disabled .b-font:before,
 #body .bi-button.button-warning.disabled.base-disabled .b-font:before {
   color: #ffffff !important;
@@ -181,6 +218,8 @@ body .bi-button.button-success.disabled.clear,
 #body .bi-button.button-success.disabled.clear,
 body .bi-button.button-warning.disabled.clear,
 #body .bi-button.button-warning.disabled.clear,
+body .bi-button.button-error.disabled.clear,
+#body .bi-button.button-error.disabled.clear,
 body .bi-button.button-ignore.disabled.clear,
 #body .bi-button.button-ignore.disabled.clear {
   background: transparent !important;
@@ -192,6 +231,8 @@ body .bi-button.button-success.disabled.clear,
 #body .bi-button.button-success.disabled.clear,
 body .bi-button.button-warning.disabled.clear,
 #body .bi-button.button-warning.disabled.clear,
+body .bi-button.button-error.disabled.clear,
+#body .bi-button.button-error.disabled.clear,
 body .bi-button.button-ignore.disabled.clear,
 #body .bi-button.button-ignore.disabled.clear,
 body .bi-button.button-common.disabled.clear .b-font:before,
@@ -200,6 +241,8 @@ body .bi-button.button-success.disabled.clear .b-font:before,
 #body .bi-button.button-success.disabled.clear .b-font:before,
 body .bi-button.button-warning.disabled.clear .b-font:before,
 #body .bi-button.button-warning.disabled.clear .b-font:before,
+body .bi-button.button-error.disabled.clear .b-font:before,
+#body .bi-button.button-error.disabled.clear .b-font:before,
 body .bi-button.button-ignore.disabled.clear .b-font:before,
 #body .bi-button.button-ignore.disabled.clear .b-font:before {
   color: #9ea6b2 !important;
@@ -210,6 +253,8 @@ body .bi-button.button-success.disabled.clear:hover,
 #body .bi-button.button-success.disabled.clear:hover,
 body .bi-button.button-warning.disabled.clear:hover,
 #body .bi-button.button-warning.disabled.clear:hover,
+body .bi-button.button-error.disabled.clear:hover,
+#body .bi-button.button-error.disabled.clear:hover,
 body .bi-button.button-ignore.disabled.clear:hover,
 #body .bi-button.button-ignore.disabled.clear:hover,
 body .bi-button.button-common.disabled.clear:active,
@@ -218,6 +263,8 @@ body .bi-button.button-success.disabled.clear:active,
 #body .bi-button.button-success.disabled.clear:active,
 body .bi-button.button-warning.disabled.clear:active,
 #body .bi-button.button-warning.disabled.clear:active,
+body .bi-button.button-error.disabled.clear:active,
+#body .bi-button.button-error.disabled.clear:active,
 body .bi-button.button-ignore.disabled.clear:active,
 #body .bi-button.button-ignore.disabled.clear:active {
   opacity: 1;
@@ -229,6 +276,8 @@ body .bi-button.button-success.disabled.ghost,
 #body .bi-button.button-success.disabled.ghost,
 body .bi-button.button-warning.disabled.ghost,
 #body .bi-button.button-warning.disabled.ghost,
+body .bi-button.button-error.disabled.ghost,
+#body .bi-button.button-error.disabled.ghost,
 body .bi-button.button-ignore.disabled.ghost,
 #body .bi-button.button-ignore.disabled.ghost {
   background: transparent !important;
@@ -242,6 +291,8 @@ body .bi-button.button-success.disabled.ghost,
 #body .bi-button.button-success.disabled.ghost,
 body .bi-button.button-warning.disabled.ghost,
 #body .bi-button.button-warning.disabled.ghost,
+body .bi-button.button-error.disabled.ghost,
+#body .bi-button.button-error.disabled.ghost,
 body .bi-button.button-ignore.disabled.ghost,
 #body .bi-button.button-ignore.disabled.ghost,
 body .bi-button.button-common.disabled.ghost .b-font:before,
@@ -250,20 +301,28 @@ body .bi-button.button-success.disabled.ghost .b-font:before,
 #body .bi-button.button-success.disabled.ghost .b-font:before,
 body .bi-button.button-warning.disabled.ghost .b-font:before,
 #body .bi-button.button-warning.disabled.ghost .b-font:before,
+body .bi-button.button-error.disabled.ghost .b-font:before,
+#body .bi-button.button-error.disabled.ghost .b-font:before,
 body .bi-button.button-ignore.disabled.ghost .b-font:before,
 #body .bi-button.button-ignore.disabled.ghost .b-font:before {
   color: #3685f2 !important;
 }
-.bi-basic-button.button-common .bi-button-mask,
-.bi-basic-button.button-success .bi-button-mask,
-.bi-basic-button.button-warning .bi-button-mask {
-  opacity: 0.2;
-  filter: alpha(opacity=20);
+.bi-basic-button.button-common:hover .bi-button-mask,
+.bi-basic-button.button-success:hover .bi-button-mask,
+.bi-basic-button.button-warning:hover .bi-button-mask,
+.bi-basic-button.button-error:hover .bi-button-mask,
+.bi-basic-button.button-ignore:hover .bi-button-mask {
+  opacity: 0.1;
+  filter: alpha(opacity=10);
   background-color: #ffffff;
 }
-.bi-basic-button .bi-button-mask {
-  opacity: 0.2;
-  filter: alpha(opacity=20);
+.bi-basic-button.button-common:active .bi-button-mask,
+.bi-basic-button.button-success:active .bi-button-mask,
+.bi-basic-button.button-warning:active .bi-button-mask,
+.bi-basic-button.button-error:active .bi-button-mask,
+.bi-basic-button.button-ignore:active .bi-button-mask {
+  opacity: 0.1;
+  filter: alpha(opacity=10);
   background-color: #1a1a1a;
 }
 .bi-theme-dark body .bi-button.button-common.ghost,
diff --git a/src/css/base/single/tip/tip.css b/src/css/base/single/tip/tip.css
index e5ddf3362..bc771b53d 100644
--- a/src/css/base/single/tip/tip.css
+++ b/src/css/base/single/tip/tip.css
@@ -1,70 +1,3 @@
-.bi-bubble {
-  font-size: 14px;
-}
-.bi-bubble .bubble-text {
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-}
-.bi-bubble .bubble-error {
-  background: #ffecec;
-  color: #ff4949;
-}
-.bi-bubble .bubble-common {
-  background: #eaf2fd;
-  color: #3685f2;
-}
-.bi-bubble .bubble-success {
-  background: #e1f4e7;
-  color: #5cb75d;
-}
-.bi-bubble .bubble-warning {
-  background: #feeed7;
-  color: #faaa39;
-}
-
 .bi-tip {
   position: fixed !important;
 }
-
-.bi-toast {
-  font-size: 14px;
-  color: #ffffff;
-  max-width: 400px;
-  min-width: 150px;
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-}
-.bi-toast.toast-success {
-  background: #58cc7d;
-}
-.bi-toast.toast-warning {
-  background: #faaa39;
-}
-.bi-toast.toast-error {
-  background: #ff4949;
-}
-.bi-toast.toast-normal {
-  background: #3f8ce8;
-}
-.bi-toast .toast-icon {
-  font-size: 16px;
-}
-
-.bi-tooltip {
-  max-width: 250px;
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-  font-size: 12px;
-  color: #ffffff;
-}
-.bi-tooltip.tooltip-success {
-  background: #647185;
-  border: 1px solid #647185;
-}
-.bi-tooltip.tooltip-warning {
-  background: #ff4949;
-  border: 1px solid #e85050;
-}
diff --git a/src/css/base/table/table.css b/src/css/base/table/table.css
index 331c660d1..abfd5a942 100644
--- a/src/css/base/table/table.css
+++ b/src/css/base/table/table.css
@@ -1,169 +1,3 @@
-.bi-collection-table-cell {
-  -webkit-box-sizing: border-box;
-  /*Safari3.2+*/
-  -moz-box-sizing: border-box;
-  /*Firefox3.5+*/
-  -ms-box-sizing: border-box;
-  /*IE8*/
-  box-sizing: border-box;
-  /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
-}
-.bi-collection-table-cell.first-row {
-  border-top: 1px solid #d4dadd;
-}
-.bi-collection-table-cell.first-col {
-  border-left: 1px solid #d4dadd;
-}
-.bi-theme-dark .bi-collection-table-cell.first-row {
-  border-top: 1px solid #525466;
-}
-.bi-theme-dark .bi-collection-table-cell.first-col {
-  border-left: 1px solid #525466;
-}
-
-.bi-quick-collection-table > div > .bi-collection {
-  overflow: hidden !important;
-  overflow-x: hidden !important;
-  overflow-y: hidden !important;
-}
-
-.bi-grid-table-cell {
-  -webkit-box-sizing: border-box;
-  /*Safari3.2+*/
-  -moz-box-sizing: border-box;
-  /*Firefox3.5+*/
-  -ms-box-sizing: border-box;
-  /*IE8*/
-  box-sizing: border-box;
-  /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
-}
-.bi-grid-table-cell.first-row {
-  border-top: 1px solid #d4dadd;
-}
-.bi-grid-table-cell.first-col {
-  border-left: 1px solid #d4dadd;
-}
-.bi-theme-dark .bi-grid-table-cell.first-row {
-  border-top: 1px solid #525466;
-}
-.bi-theme-dark .bi-grid-table-cell.first-col {
-  border-left: 1px solid #525466;
-}
-
-.scrollbar-layout-main {
-  box-sizing: border-box;
-  outline: none;
-  overflow: hidden;
-  position: absolute;
-  transition-duration: 250ms;
-  transition-timing-function: ease;
-  user-select: none;
-  background-color: rgba(102, 102, 102, 0.05);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d666666,endColorstr=#0d666666);
-  border-radius: 5px;
-}
-.bi-theme-dark .scrollbar-layout-main {
-  background-color: rgba(204, 204, 204, 0.05);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dcccccc,endColorstr=#0dcccccc);
-}
-.scrollbar-layout-main-vertical {
-  bottom: 0;
-  right: 0;
-  top: 0;
-  transition-property: background-color;
-  width: 10px;
-}
-.scrollbar-layout-main-vertical.public-scrollbar-main-active,
-.scrollbar-layout-main-vertical:hover {
-  width: 10px;
-}
-.scrollbar-layout-main-horizontal {
-  bottom: 0;
-  height: 10px;
-  left: 0;
-  transition-property: background-color;
-  background-color: rgba(102, 102, 102, 0.05);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d666666,endColorstr=#0d666666);
-}
-.bi-theme-dark .scrollbar-layout-main-horizontal {
-  background-color: rgba(204, 204, 204, 0.05);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dcccccc,endColorstr=#0dcccccc);
-}
-/* Touching the scroll-track directly makes the scroll-track bolder */
-.scrollbar-layout-main-horizontal.public-scrollbar-main-active,
-.scrollbar-layout-main-horizontal:hover {
-  height: 10px;
-}
-.scrollbar-layout-face {
-  left: 0;
-  overflow: hidden;
-  position: absolute;
-  z-index: 1;
-}
-/**
- * This selector renders the "nub" of the scrollface. The nub must
- * be rendered as pseudo-element so that it won't receive any UI events then
- * we can get the correct `event.offsetX` and `event.offsetY` from the
- * scrollface element while dragging it.
- */
-.scrollbar-layout-face:after {
-  border-radius: 6px;
-  content: '';
-  display: block;
-  position: absolute;
-  transition: background-color 250ms ease;
-}
-.scrollbar-layout-face-horizontal {
-  bottom: 0;
-  left: 0;
-  top: 0;
-}
-.scrollbar-layout-face-horizontal:after {
-  bottom: 2px;
-  left: 0;
-  top: 2px;
-  width: 100%;
-}
-.scrollbar-layout-face-vertical {
-  left: 0;
-  right: 0;
-  top: 0;
-}
-.scrollbar-layout-face-vertical:after {
-  height: 100%;
-  left: 2px;
-  right: 2px;
-  top: 0;
-}
-/**
- * scrollbars.
- */
-/* Touching the scroll-track directly makes the scroll-track bolder */
-.public-scrollbar-face:after {
-  background-color: rgba(102, 102, 102, 0.3);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d666666,endColorstr=#4d666666);
-}
-.bi-theme-dark .public-scrollbar-face:after {
-  background-color: rgba(204, 204, 204, 0.3);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dcccccc,endColorstr=#4dcccccc);
-}
-.public-scrollbar-main:hover .public-scrollbar-face:after,
-.public-scrollbar-main-active .public-scrollbar-face:after,
-.public-scrollbar-face-active:after {
-  background-color: rgba(102, 102, 102, 0.7);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3666666,endColorstr=#b3666666);
-}
-.bi-theme-dark .public-scrollbar-main:hover .public-scrollbar-face:after,
-.bi-theme-dark .public-scrollbar-main-active .public-scrollbar-face:after,
-.bi-theme-dark .public-scrollbar-face-active:after {
-  background-color: rgba(204, 204, 204, 0.7);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3cccccc,endColorstr=#b3cccccc);
-}
-.horizontal-scrollbar {
-  bottom: 0;
-  position: absolute;
-}
-
 .bi-table > .first-col {
   border-left: none;
 }
@@ -242,33 +76,3 @@
   border-top: 1px solid #525466;
   border-left: 1px solid #525466;
 }
-
-.bi-resizable-table-cell .resizable-table-cell-resizer-container {
-  cursor: ew-resize;
-  z-index: 1;
-}
-.bi-resizable-table-cell .resizable-table-cell-resizer-container:hover .resizable-table-cell-resizer-knob,
-.bi-resizable-table-cell .resizable-table-cell-resizer-container.dragging .resizable-table-cell-resizer-knob {
-  background-color: #3f8ce8;
-}
-.bi-resizable-table-cell .resizable-table-cell-resizer-container.suitable .resizable-table-cell-resizer-knob {
-  background-color: #58cc7d;
-}
-
-.bi-resizable-table .resizable-table-resizer {
-  cursor: ew-resize;
-  z-index: 1;
-  background-color: #3f8ce8;
-}
-.bi-resizable-table .resizable-table-resizer.suitable {
-  background-color: #58cc7d;
-}
-.bi-resizable-table .resizable-table-region-resizer {
-  cursor: ew-resize;
-  z-index: 1;
-}
-.bi-resizable-table .resizable-table-region-resizer:hover .resizable-table-region-resizer-knob,
-.bi-resizable-table .resizable-table-region-resizer.dragging .resizable-table-region-resizer-knob {
-  background-color: #3f8ce8;
-}
-
diff --git a/src/css/base/trigger/trigger.css b/src/css/base/trigger/trigger.css
index acc7552a7..51c60b492 100644
--- a/src/css/base/trigger/trigger.css
+++ b/src/css/base/trigger/trigger.css
@@ -1,17 +1,3 @@
-
-
 .bi-trigger .bi-trigger-icon-button {
   font-size: 16px;
 }
-
-.bi-select-text-trigger {
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-}
-
-.bi-small-select-text-trigger {
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-}
diff --git a/src/css/core/utils/common.css b/src/css/core/utils/common.css
index 7386469ff..58e6b2cdd 100644
--- a/src/css/core/utils/common.css
+++ b/src/css/core/utils/common.css
@@ -57,7 +57,7 @@ textarea {
   color: #3d4d66;
 }
 .bi-theme-dark .bi-background {
-  background-color: #191B2B;
+  background-color: #191b2b;
   color: #cccccc;
 }
 .bi-theme-dark .bi-background .bi-input {
diff --git a/src/css/resource/font.css b/src/css/resource/font.css
index 3a2ffee80..7a14efa24 100644
--- a/src/css/resource/font.css
+++ b/src/css/resource/font.css
@@ -1,6 +1,7 @@
 @font-face {
   font-family: 'bi';
   src: url('font/iconfont.eot'), /* IE6-IE8 */ url('font/iconfont.woff') format('woff'), /* chrome、firefox */ url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('font/iconfont.svg#svgFontName') format('svg');
+  
   /*  iOS 4.1- */
 }
 .b-font {
diff --git a/src/css/theme/dark.css b/src/css/theme/dark.css
index d8f0e5f38..7349cdeef 100644
--- a/src/css/theme/dark.css
+++ b/src/css/theme/dark.css
@@ -1,5 +1,5 @@
 .bi-theme-dark {
-  background-color: #191B2B;
+  background-color: #191b2b;
   color: #cccccc;
 }
 .bi-theme-dark .bi-input {
diff --git a/src/css/widget/exceltable/exceltable.css b/src/css/widget/exceltable/exceltable.css
index ef99484d4..4f6dc3b7a 100644
--- a/src/css/widget/exceltable/exceltable.css
+++ b/src/css/widget/exceltable/exceltable.css
@@ -1,8 +1,3 @@
-
-.bi-excel-table-header-cell {
-  font-weight: bold;
-}
-
 .bi-excel-table > div.bottom-right > div > div > table {
   border-right: 1px solid #d4dadd;
 }
diff --git a/src/css/widget/previewtable/previewtable.css b/src/css/widget/previewtable/previewtable.css
index 043b8d6cf..679dff637 100644
--- a/src/css/widget/previewtable/previewtable.css
+++ b/src/css/widget/previewtable/previewtable.css
@@ -1,14 +1,3 @@
-.bi-preview-table-cell {
-  min-height: 25px;
-  min-width: 80px;
-}
-
-.bi-preview-table-header-cell {
-  font-weight: bold;
-  min-height: 25px;
-  min-width: 80px;
-}
-
 .bi-preview-table {
   -webkit-user-select: text;
   -khtml-user-select: text;
@@ -23,5 +12,5 @@
 }
 .bi-theme-dark .bi-preview-table > div > table > thead > tr.odd,
 .bi-theme-dark .bi-preview-table > div > div > div > table > thead > tr.odd {
-  background-color: #191B2B;
+  background-color: #191b2b;
 }
diff --git a/src/less/base/single/button/button.less b/src/less/base/single/button/button.less
index 02ca8f494..d7f550b99 100644
--- a/src/less/base/single/button/button.less
+++ b/src/less/base/single/button/button.less
@@ -17,8 +17,11 @@ body .bi-button, #body .bi-button {
     font-size: inherit;
     border-width: 0;
     background-color: transparent;
-    &:hover, &:active {
-      .opacity(0.75);
+    &:hover {
+      .opacity(0.9);
+    }
+    &:active {
+      .opacity(0.8);
     }
   }
   &.ghost {
@@ -41,17 +44,17 @@ body .bi-button, #body .bi-button {
         background-color: @color-bi-background-highlight;
       }
       &:active{
-        background-color: @color-bi-background-dark-highlight;
+        background-color: @color-bi-background-highlight;
       }
     }
   }
   &.button-ignore {
     & {
       &, & .b-font:before {
-        color: @color-bi-text-black;
+        color: @color-bi-text-highlight;
       }
       background-color: @color-bi-background-default;
-      border-color: @color-bi-border-line;
+      border-color: @color-bi-border-highlight;
     }
     &.clear {
       background-color: transparent;
@@ -75,6 +78,22 @@ body .bi-button, #body .bi-button {
     }
   }
   &.button-warning {
+    & {
+      &, & .b-font:before {
+        color: @color-bi-text;
+      }
+      background-color: @color-bi-background-warning;
+      border-color: @color-bi-border-warning;
+    }
+    &.clear {
+      &, & .b-font:before {
+        color: @color-bi-text-redmark;
+      }
+      background-color: transparent;
+      border-width: 0;
+    }
+  }
+  &.button-error {
     & {
       &, & .b-font:before {
         color: @color-bi-text;
@@ -92,6 +111,7 @@ body .bi-button, #body .bi-button {
   }
   &.button-common.disabled,
   &.button-success.disabled,
+  &.button-error.disabled,
   &.button-warning.disabled {
     &, &.base-disabled {
       &, & .b-font:before {
@@ -111,6 +131,7 @@ body .bi-button, #body .bi-button {
   &.button-common.disabled,
   &.button-success.disabled,
   &.button-warning.disabled,
+  &.button-error.disabled,
   &.button-ignore.disabled {
     &.clear {
       &, & .b-font:before {
@@ -134,15 +155,19 @@ body .bi-button, #body .bi-button {
 }
 
 .bi-basic-button {
-  &.button-common, &.button-success, &.button-warning {
-    & .bi-button-mask {
-      .opacity(0.2);
-      background-color: @color-bi-background-default;
+  &.button-common, &.button-success, &.button-warning, &.button-error, &.button-ignore {
+    &:hover{
+      & .bi-button-mask {
+        .opacity(0.1);
+        background-color: @color-bi-background-default;
+      }
+    }
+    &:active{
+      & .bi-button-mask {
+        .opacity(0.1);
+        background-color: @color-bi-button-mask;
+      }
     }
-  }
-  & .bi-button-mask {
-    .opacity(0.2);
-    background-color: @color-bi-button-mask;
   }
 }
 
diff --git a/src/less/lib/colors.less b/src/less/lib/colors.less
index cd76d6e82..919da3690 100644
--- a/src/less/lib/colors.less
+++ b/src/less/lib/colors.less
@@ -60,8 +60,6 @@
 @color-bi-background-highlight: @background-color-highlight;
 //背景提亮色(浅)
 @color-bi-background-light-highlight: @background-color-light-highlight;
-//背景提亮色(深)
-@color-bi-background-dark-highlight: @font-color-dark-highlight;
 
 //黑色边框色
 @color-bi-border-black: @border-color-black;
diff --git a/src/less/lib/constant.less b/src/less/lib/constant.less
index 02094bccc..cbee89bba 100644
--- a/src/less/lib/constant.less
+++ b/src/less/lib/constant.less
@@ -25,7 +25,6 @@
 @font-color-gray: #999999;
 @font-color-white: #ffffff;//
 @font-color-highlight: #3685f2;
-@font-color-dark-highlight: #3077DA;
 @font-color-success: #5cb75d;
 @font-color-warning: #faaa39;//
 @font-color-negative: #ff4949;//