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] =?UTF-8?q?=E6=B7=B1=E6=B5=85=E4=B8=BB=E9=A2=98=E4=B8=8B?= =?UTF-8?q?=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;//