Browse Source

深浅主题下的幽灵按钮

es6
windy 7 years ago
parent
commit
71406c6e60
  1. 25
      demo/js/base/button/demo.button.js
  2. 81
      dist/base.css
  3. 5
      dist/base.js
  4. 81
      dist/bundle.css
  5. 5
      dist/bundle.js
  6. 25
      dist/demo.js
  7. 81
      dist/fineui.css
  8. 5
      dist/fineui.js
  9. 5
      src/base/single/button/buttons/button.js
  10. 81
      src/css/base/single/button/button.css
  11. 54
      src/less/base/single/button/button.less
  12. 2
      src/less/lib/colors.less
  13. 1
      src/less/lib/constant.less

25
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,

81
dist/base.css vendored

@ -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 {

5
dist/base.js vendored

@ -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"});
}

81
dist/bundle.css vendored

@ -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 {

5
dist/bundle.js vendored

@ -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"});
}

25
dist/demo.js vendored

@ -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,

81
dist/fineui.css vendored

@ -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 {

5
dist/fineui.js vendored

@ -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"});
}

5
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"});
}

81
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;
}

54
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);
}
}
}
}

2
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;

1
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;//

Loading…
Cancel
Save