Browse Source

Merge pull request #57490 in DEC/fineui from master to feature/x

* commit '2b4e38eef7cf4d24f2b53f94763343b3e84335c1':
  无JIRA任务 更新lessconfig
  DESIGN-4069 feat: 新增一套浅色按钮
es6
superman 2 years ago
parent
commit
43628a1c23
  1. 15
      bi.lessconfig.json
  2. 31
      demo/js/base/button/demo.button.js
  3. 6
      src/base/single/button/buttons/button.js
  4. 64
      src/less/base/single/button/button.less
  5. 4
      src/less/lib/colors.less
  6. 22
      src/less/lib/theme.less

15
bi.lessconfig.json

@ -4,20 +4,29 @@
"@color-light-blue-100": "#19B8EA", "@color-light-blue-100": "#19B8EA",
"@color-orange-100": "#FAAA39", "@color-orange-100": "#FAAA39",
"@color-red-100": "#E65251", "@color-red-100": "#E65251",
"@color-black": "#000A19", "@color-black": "#091E40",
"@color-light-gray": "#ECEEF3", "@color-light-gray": "#ECEEF3",
"@color-light-gray-theme-dark": "#292F45", "@color-light-gray-theme-dark": "#292F45",
"@border-color-line": "rgba(9, 30, 64, 0.15)",
"@border-color-light-line": "#E6E9EF",
"@border-color-dark-line": "#2E3A4D", "@border-color-dark-line": "#2E3A4D",
"@color-sliver-theme-dark": "#363E55", "@color-sliver-theme-dark": "#363E55",
"@border-color-disabled": "#E7E8EB", "@border-color-disabled": "rgba(9, 30, 64, 0.07)",
"@font-color-gray": "rgba(9, 30, 64, 0.9)",
"@font-color-light-gray": "rgba(9, 30, 64, 0.66)",
"@font-color-tips": "rgba(9, 30, 64, 0.47)",
"@font-color-disabled": "rgba(9, 30, 64, 0.25)",
"@color-bi-background-active-radio": "transparent", "@color-bi-background-active-radio": "transparent",
"@color-bi-border-radio": "rgba(9, 30, 64, 0.37)",
"@color-bi-border-disabled-radio": "rgba(9, 30, 64, 0.19)",
"@color-bi-background-active-radio-content": "#2C60DB", "@color-bi-background-active-radio-content": "#2C60DB",
"@color-bi-background-disabled-active-radio-content": "#FFFFFF", "@color-bi-background-disabled-active-radio-content": "#FFFFFF",
"@color-bi-background-disabled-active-radio-content-theme-dark": "#606479", "@color-bi-background-disabled-active-radio-content-theme-dark": "#606479",
"@color-bi-background-disabled-active-checkbox-content": "#FFFFFF", "@color-bi-background-disabled-active-checkbox-content": "#FFFFFF",
"@color-bi-background-disabled-active-checkbox-content-theme-dark": "#606479", "@color-bi-background-disabled-active-checkbox-content-theme-dark": "#606479",
"@color-bi-background-tooltip-success": "#2E3A4D",
"@color-bi-text-header-background": "#647185", "@color-bi-text-header-background": "#647185",
"@color-bi-background-tooltip-success": "#2E3A4D",
"@color-bi-border-tooltip-success": "#2E3A4D", "@color-bi-border-tooltip-success": "#2E3A4D",
"@color-bi-background-toast-success": "#FFFFFF", "@color-bi-background-toast-success": "#FFFFFF",
"@color-bi-background-toast-warning": "#FFFFFF", "@color-bi-background-toast-warning": "#FFFFFF",

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

@ -242,6 +242,37 @@ Demo.Button = BI.inherit(BI.Widget, {
iconCls: "close-font", iconCls: "close-font",
iconPosition: "right" 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) { // BI.each(items, function (i, item) {
// item.el.handler = function () { // item.el.handler = function () {

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

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

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

@ -41,6 +41,22 @@ body .bi-button, #body .bi-button {
&, & .b-font:before { &, & .b-font:before {
color: @color-bi-text-common-button; 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 { &.clear, &.clear .b-font:before {
color: @color-bi-text-common-clear-button; color: @color-bi-text-common-clear-button;
} }
@ -92,6 +108,22 @@ body .bi-button, #body .bi-button {
background-color: @color-bi-background-success-button; background-color: @color-bi-background-success-button;
border-color: @color-bi-border-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 { &.clear {
&, & .b-font:before { &, & .b-font:before {
color: @color-bi-text-success-clear-button; color: @color-bi-text-success-clear-button;
@ -121,6 +153,22 @@ body .bi-button, #body .bi-button {
background-color: @color-bi-background-warning-button; background-color: @color-bi-background-warning-button;
border-color: @color-bi-border-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 { &.clear {
&, & .b-font:before { &, & .b-font:before {
color: @color-bi-text-warning-clear-button; color: @color-bi-text-warning-clear-button;
@ -150,6 +198,22 @@ body .bi-button, #body .bi-button {
background-color: @color-bi-background-error-button; background-color: @color-bi-background-error-button;
border-color: @color-bi-border-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 { &.clear {
&, & .b-font:before { &, & .b-font:before {
color: @color-bi-text-error-clear-button; 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-success: @font-color-success;
//失败字体颜色 //失败字体颜色
@color-bi-text-failure: @font-color-negative; @color-bi-text-failure: @font-color-negative;
//基本提亮颜色 //基本提亮颜色
@color-bi-text-highlight: @font-color-highlight; @color-bi-text-highlight: @font-color-highlight;
//标红色 //标红色
@ -98,6 +99,9 @@
@color-bi-background-highlight: @background-color-highlight; @color-bi-background-highlight: @background-color-highlight;
//背景提亮色(浅) //背景提亮色(浅)
@color-bi-background-light-highlight: @background-color-light-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; @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-background-hover-common-ghost-button: @color-bi-background-highlight;
@color-bi-text-hover-common-ghost-button-theme-dark: @color-bi-text-normal; @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-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: @color-bi-background-highlight;
@color-bi-background-active-common-ghost-button-theme-dark: @color-bi-background-default; @color-bi-background-active-common-ghost-button-theme-dark: @color-bi-background-default;
@color-bi-text-ignore-button: @color-bi-text-highlight; @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-ignore-button-theme-dark: @color-bi-background-default-theme-dark;
@color-bi-background-hover-ignore-button-theme-dark: @color-blue-10; @color-bi-background-hover-ignore-button-theme-dark: @color-blue-10;
@color-bi-background-active-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-text-success-button: @color-bi-text;
@color-bi-background-success-button: @color-bi-background-success; @color-bi-background-success-button: @color-bi-background-success;
@color-bi-border-success-button: @color-bi-border-success; @color-bi-border-success-button: @color-bi-border-success;
@color-bi-text-success-clear-button: @color-bi-text-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-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-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-background-warning-button: @color-bi-background-warning;
@color-bi-border-warning-button: @color-bi-border-warning; @color-bi-border-warning-button: @color-bi-border-warning;
@color-bi-text-warning-clear-button: @color-bi-text-redmark; @color-bi-text-warning-clear-button: @color-bi-text-redmark;
@color-bi-text-warning-ghost-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-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-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-border-error-button: @color-bi-border-failure;
@color-bi-text-error-clear-button: @color-bi-text-failure; @color-bi-text-error-clear-button: @color-bi-text-failure;
@color-bi-text-error-ghost-button: @color-bi-text-failure; @color-bi-text-error-ghost-button: @color-bi-text-failure;

Loading…
Cancel
Save