diff --git a/demo/js/base/button/demo.button.js b/demo/js/base/button/demo.button.js index b44da5f8a2..99ef9032b4 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", @@ -182,13 +189,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/demo/js/widget/basewidget/demo.items.js b/demo/js/widget/basewidget/demo.items.js index 14a1115fd8..0562519b3d 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 5edaea46aa..ccfa3153f7 100644 --- a/dist/base.css +++ b/dist/base.css @@ -838,11 +838,19 @@ 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 { + font-size: inherit; + background-color: transparent; } body .bi-button.button-common, #body .bi-button.button-common, @@ -856,16 +864,31 @@ 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: #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 { @@ -896,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, @@ -914,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; @@ -935,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; @@ -974,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; @@ -985,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, @@ -993,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; @@ -1003,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, @@ -1011,23 +1076,98 @@ 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; filter: alpha(opacity=100); } -.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); +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-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; + 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-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, +#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-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: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, +.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 { @@ -1039,6 +1179,21 @@ body .bi-button.button-ignore.disabled.clear:active, .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/base.js b/dist/base.js index 383b2a933a..0f9a66864b 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: { @@ -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 a00cae5300..0c160c48e6 100644 --- a/dist/bundle.css +++ b/dist/bundle.css @@ -2885,11 +2885,19 @@ 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 { + font-size: inherit; + background-color: transparent; } body .bi-button.button-common, #body .bi-button.button-common, @@ -2903,16 +2911,31 @@ 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: #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 { @@ -2943,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, @@ -2961,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; @@ -2982,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; @@ -3021,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; @@ -3032,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, @@ -3040,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; @@ -3050,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, @@ -3058,23 +3123,98 @@ 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; filter: alpha(opacity=100); } -.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); +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-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; + 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-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, +#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-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: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, +.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 { @@ -3086,6 +3226,21 @@ body .bi-button.button-ignore.disabled.clear:active, .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 13e1da3215..2dfad066d8 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: { @@ -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"}); } @@ -63544,6 +63547,52 @@ BI.PlusGroupNode = BI.inherit(BI.NodeButton, { }); BI.shortcut("bi.plus_group_node", BI.PlusGroupNode);/** + * Created by Windy on 2018/2/1. + */ +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} @@ -76137,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 @@ -76218,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 121c93d2ea..6cce5be115 100644 --- a/dist/case.js +++ b/dist/case.js @@ -978,6 +978,52 @@ BI.PlusGroupNode = BI.inherit(BI.NodeButton, { }); BI.shortcut("bi.plus_group_node", BI.PlusGroupNode);/** + * Created by Windy on 2018/2/1. + */ +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} @@ -13571,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 @@ -13652,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/demo.js b/dist/demo.js index fdcf6153fe..51f869c04b 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", @@ -201,13 +208,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, @@ -11579,6 +11601,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 4fc1d05a37..5828b38672 100644 --- a/dist/fineui.css +++ b/dist/fineui.css @@ -2885,11 +2885,19 @@ 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 { + font-size: inherit; + background-color: transparent; } body .bi-button.button-common, #body .bi-button.button-common, @@ -2903,16 +2911,31 @@ 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: #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 { @@ -2943,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, @@ -2961,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; @@ -2982,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; @@ -3021,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; @@ -3032,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, @@ -3040,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; @@ -3050,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, @@ -3058,23 +3123,98 @@ 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; filter: alpha(opacity=100); } -.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); +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-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; + 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-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, +#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-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: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, +.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 { @@ -3086,6 +3226,21 @@ body .bi-button.button-ignore.disabled.clear:active, .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 0b3014a0e6..9aaf51eeb2 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: { @@ -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"}); } @@ -65308,6 +65311,52 @@ BI.PlusGroupNode = BI.inherit(BI.NodeButton, { }); BI.shortcut("bi.plus_group_node", BI.PlusGroupNode);/** + * Created by Windy on 2018/2/1. + */ +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} @@ -77901,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 @@ -77982,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/base/layer/layer.floatbox.js b/src/base/layer/layer.floatbox.js index dde869b3e8..82d42d8fde 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: { diff --git a/src/base/single/button/buttons/button.js b/src/base/single/button/buttons/button.js index df81aea2ec..bf406f5215 100644 --- a/src/base/single/button/buttons/button.js +++ b/src/base/single/button/buttons/button.js @@ -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/case/button/switch.js b/src/case/button/switch.js new file mode 100644 index 0000000000..69325cb6e9 --- /dev/null +++ b/src/case/button/switch.js @@ -0,0 +1,47 @@ +/** + * Created by Windy on 2018/2/1. + */ +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/case/trigger/trigger.editor.js b/src/case/trigger/trigger.editor.js index 97fb48ce2f..8737f5aca7 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 c2805878a5..7a27d28ae8 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 }); diff --git a/src/css/base/pager/pager.css b/src/css/base/pager/pager.css index b28d243600..585c512896 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 04c16554fe..d1acdd33e7 100644 --- a/src/css/base/single/button/button.css +++ b/src/css/base/single/button/button.css @@ -25,11 +25,19 @@ 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 { + font-size: inherit; + background-color: transparent; } body .bi-button.button-common, #body .bi-button.button-common, @@ -43,16 +51,31 @@ 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: #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 { @@ -83,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, @@ -101,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; @@ -122,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; @@ -161,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; @@ -172,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, @@ -180,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; @@ -190,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, @@ -198,20 +263,95 @@ 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; filter: alpha(opacity=100); } -.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); +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-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; + 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-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, +#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-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: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, +.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/css/base/single/button/switch.css b/src/css/base/single/button/switch.css new file mode 100644 index 0000000000..6cd02ad842 --- /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/css/base/single/tip/tip.css b/src/css/base/single/tip/tip.css index e5ddf33623..bc771b53d4 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 331c660d16..abfd5a9428 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 acc7552a78..51c60b4927 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 7386469ffa..58e6b2cddf 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 3a2ffee80a..7a14efa241 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 d8f0e5f38b..7349cdeef4 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 ef99484d46..4f6dc3b7ad 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 043b8d6cfa..679dff637f 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 f4d60a7882..d7f550b994 100644 --- a/src/less/base/single/button/button.less +++ b/src/less/base/single/button/button.less @@ -17,10 +17,17 @@ 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 { + font-size: inherit; + background-color: transparent; + } &.button-common { &, & .b-font:before { color: @color-bi-text; @@ -28,14 +35,26 @@ 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-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; @@ -59,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; @@ -76,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 { @@ -95,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 { @@ -106,18 +143,60 @@ 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); + } } } .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; +} + +.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/base/single/button/switch.less b/src/less/base/single/button/switch.less new file mode 100644 index 0000000000..2ff516a4d8 --- /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