Browse Source

Pull request #2754: DESIGN-4069 feat: 新增一套浅色按钮

Merge in VISUAL/fineui from ~TREECAT/fineui:master to master

* commit '664bc9b6f6773796c94cea154656830384c165be':
  DESIGN-4069 feat: 新增一套浅色按钮
es6
treecat 2 years ago
parent
commit
3e4ff1e6e3
  1. 31
      demo/js/base/button/demo.button.js
  2. 12
      src/base/single/button/buttons/button.js
  3. 64
      src/less/base/single/button/button.less
  4. 4
      src/less/lib/colors.less
  5. 22
      src/less/lib/theme.less

31
demo/js/base/button/demo.button.js

@ -242,6 +242,37 @@ Demo.Button = BI.inherit(BI.Widget, {
iconCls: "close-font",
iconPosition: "right"
}
}, {
el: {
type: "bi.button",
text: "浅色的一般按钮",
iconCls: "close-font",
light: true
}
}, {
el: {
type: "bi.button",
text: "浅色的成功按钮",
level: "success",
iconCls: "close-font",
light: true
}
}, {
el: {
type: "bi.button",
text: "浅色的警告按钮",
level: "warning",
iconCls: "close-font",
light: true
}
}, {
el: {
type: "bi.button",
iconCls: "close-font",
text: "浅色的失败按钮",
level: "error",
light: true
}
}];
// BI.each(items, function (i, item) {
// item.el.handler = function () {

12
src/base/single/button/buttons/button.js

@ -37,6 +37,7 @@
clear: false, // 是否去掉边框和背景
ghost: false, // 是否幽灵显示, 即正常状态无背景
loading: false, // 是否处于加载中
light: false, // 是否使用浅色
textAlign: "center",
whiteSpace: "nowrap",
textWidth: null,
@ -59,7 +60,7 @@
var lineHeight, textHeight = o.textHeight;
if (BI.isNumber(o.height)) {
if (!isVertical(o.iconPosition)) {
if (o.clear || o.block) {
if (o.clear || o.block || o.light) {
lineHeight = o.height;
} else {
lineHeight = o.height - 2;
@ -146,6 +147,9 @@
if (o.loading === true) {
this.element.addClass("loading");
}
if (o.light === true) {
this.element.addClass("light");
}
if (o.minWidth > 0) {
this.element.css({"min-width": o.minWidth / BI.pixRatio + BI.pixUnit});
}
@ -168,10 +172,10 @@
},
setLoading: function (loading) {
if(loading) {
this.element.addClass("loading");
if (loading) {
this.element.addClass("loading");
} else {
this.element.removeClass("loading");
this.element.removeClass("loading");
}
},

64
src/less/base/single/button/button.less

@ -41,6 +41,22 @@ body .bi-button, #body .bi-button {
&, & .b-font:before {
color: @color-bi-text-common-button;
}
&.light {
border-width: 0;
background-color: @color-bi-background-common-light-button;
&, & .b-font:before {
color: @color-bi-text-common-light-button;
}
&:hover, &:focus {
background-color: @color-bi-background-hover-common-light-button;
}
&.active {
background-color: @color-bi-background-active-common-light-button;
}
}
&.clear, &.clear .b-font:before {
color: @color-bi-text-common-clear-button;
}
@ -92,6 +108,22 @@ body .bi-button, #body .bi-button {
background-color: @color-bi-background-success-button;
border-color: @color-bi-border-success-button;
}
&.light {
border-width: 0;
background-color: @color-bi-background-success-light-button;
&, & .b-font:before {
color: @color-bi-text-success-light-button;
}
&:hover, &:focus {
background-color: @color-bi-background-hover-success-light-button;
}
&.active {
background-color: @color-bi-background-active-success-light-button;
}
}
&.clear {
&, & .b-font:before {
color: @color-bi-text-success-clear-button;
@ -121,6 +153,22 @@ body .bi-button, #body .bi-button {
background-color: @color-bi-background-warning-button;
border-color: @color-bi-border-warning-button;
}
&.light {
border-width: 0;
background-color: @color-bi-background-warning-light-button;
&, & .b-font:before {
color: @color-bi-text-warning-light-button;
}
&:hover, &:focus {
background-color: @color-bi-background-hover-warning-light-button;
}
&.active {
background-color: @color-bi-background-active-warning-light-button;
}
}
&.clear {
&, & .b-font:before {
color: @color-bi-text-warning-clear-button;
@ -150,6 +198,22 @@ body .bi-button, #body .bi-button {
background-color: @color-bi-background-error-button;
border-color: @color-bi-border-error-button;
}
&.light {
border-width: 0;
background-color: @color-bi-background-error-light-button;
&, & .b-font:before {
color: @color-bi-text-error-light-button;
}
&:hover, &:focus {
background-color: @color-bi-background-hover-error-light-button;
}
&.active {
background-color: @color-bi-background-active-error-light-button;
}
}
&.clear {
&, & .b-font:before {
color: @color-bi-text-error-clear-button;

4
src/less/lib/colors.less

@ -34,6 +34,7 @@
@color-bi-text-success: @font-color-success;
//失败字体颜色
@color-bi-text-failure: @font-color-negative;
//基本提亮颜色
@color-bi-text-highlight: @font-color-highlight;
//标红色
@ -98,6 +99,9 @@
@color-bi-background-highlight: @background-color-highlight;
//背景提亮色(浅)
@color-bi-background-light-highlight: @background-color-light-highlight;
// 浅蓝色的背景
@color-bi-background-light-blue: @color-blue-10;
//黑色边框色
@color-bi-border-black: @border-color-black;

22
src/less/lib/theme.less

@ -72,6 +72,12 @@
@color-bi-background-hover-common-ghost-button: @color-bi-background-highlight;
@color-bi-text-hover-common-ghost-button-theme-dark: @color-bi-text-normal;
@color-bi-background-hover-common-ghost-button-theme-dark: @color-bi-background-default;
@color-bi-text-common-light-button: @color-bi-text-highlight;
@color-bi-background-common-light-button: @color-bi-background-light-blue;
@color-bi-background-hover-common-light-button: @color-bi-background-light-blue;
@color-bi-background-active-common-light-button: @color-bi-background-light-blue;
@color-bi-background-active-common-ghost-button: @color-bi-background-highlight;
@color-bi-background-active-common-ghost-button-theme-dark: @color-bi-background-default;
@color-bi-text-ignore-button: @color-bi-text-highlight;
@ -80,18 +86,34 @@
@color-bi-background-ignore-button-theme-dark: @color-bi-background-default-theme-dark;
@color-bi-background-hover-ignore-button-theme-dark: @color-blue-10;
@color-bi-background-active-ignore-button-theme-dark: @color-blue-10;
@color-bi-text-success-button: @color-bi-text;
@color-bi-background-success-button: @color-bi-background-success;
@color-bi-border-success-button: @color-bi-border-success;
@color-bi-text-success-clear-button: @color-bi-text-success;
@color-bi-text-success-ghost-button: @color-bi-text-success;
@color-bi-text-success-light-button: @color-bi-text-success;
@color-bi-background-success-light-button: @color-bi-background-light-success;
@color-bi-background-hover-success-light-button: @color-bi-background-light-success;
@color-bi-background-active-success-light-button: @color-bi-background-light-success;
@color-bi-text-warning-button: @color-bi-text;
@color-bi-text-warning-light-button: @color-bi-text-redmark;
@color-bi-background-warning-light-button: @color-bi-background-light-warning;
@color-bi-background-hover-warning-light-button: @color-bi-background-light-warning;
@color-bi-background-active-warning-light-button: @color-bi-background-light-warning;
@color-bi-background-warning-button: @color-bi-background-warning;
@color-bi-border-warning-button: @color-bi-border-warning;
@color-bi-text-warning-clear-button: @color-bi-text-redmark;
@color-bi-text-warning-ghost-button: @color-bi-text-redmark;
@color-bi-text-error-button: @color-bi-text;
@color-bi-background-error-light-button: @color-bi-background-light-failure;
@color-bi-background-error-button: @color-bi-background-failure;
@color-bi-text-error-light-button: @color-bi-text-failure;
@color-bi-background-hover-error-light-button: @color-bi-background-light-failure;
@color-bi-background-active-error-light-button: @color-bi-background-light-failure;
@color-bi-border-error-button: @color-bi-border-failure;
@color-bi-text-error-clear-button: @color-bi-text-failure;
@color-bi-text-error-ghost-button: @color-bi-text-failure;

Loading…
Cancel
Save