Frank
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

DESIGN-4069 feat: 增加了一组 plain 按钮

es6
treecat 2 years ago
parent
d9c2af16aa
commit
667c9bb303
4 changed files with 154 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 67
      demo/js/base/button/demo.button.js
  2. 4
      src/base/single/button/buttons/button.js
  3. 75
      src/less/base/single/button/button.less
  4. 8
      src/less/lib/theme.less

67
demo/js/base/button/demo.button.js
Unescape View File

@ -309,6 +309,73 @@ Demo.Button = BI.inherit(BI.Widget, {
cls: "hover-mask",
light: true
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "common",
plain: true
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "success",
plain: true
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "error",
plain: true
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "warning",
plain: true
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "ignore",
plain: true
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "ignore",
plain: true,
disabled: true
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "error",
plain: true,
disabled: true
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "common",
plain: true,
disabled: true
}
}];
// BI.each(items, function (i, item) {
// item.el.handler = function () {

4
src/base/single/button/buttons/button.js
Unescape View File

@ -38,6 +38,7 @@
ghost: false, // 是否幽灵显示, 即正常状态无背景
loading: false, // 是否处于加载中
light: false, // 是否使用浅色
plain: false, // 是否是朴素按钮，和 clear 的区别是 plain 有悬浮效果
textAlign: "center",
whiteSpace: "nowrap",
textWidth: null,
@ -144,6 +145,9 @@
if (o.ghost === true) {
this.element.addClass("ghost");
}
if (o.plain === true) {
this.element.addClass("plain");
}
if (o.loading === true) {
this.element.addClass("loading");
}

75
src/less/base/single/button/button.less
Unescape View File

@ -33,6 +33,11 @@ body .bi-button, #body .bi-button {
display: none;
}
}
&.plain {
font-size: inherit;
border-width: 0;
background-color: transparent;
}
&.ghost {
font-size: inherit;
background-color: transparent;
@ -60,6 +65,18 @@ body .bi-button, #body .bi-button {
&.clear, &.clear .b-font:before {
color: @color-bi-text-common-clear-button;
}
&.plain, &.plain .b-font:before {
background-color: transparent;
color: @color-bi-text-common-plain-button;
}
&.plain {
&:hover {
background-color: @color-bi-background-hover-plain-button;
}
&:focus {
background-color: @color-bi-background-active-plain-button;
}
}
&.ghost {
&, & .b-font:before {
color: @color-bi-text-common-ghost-button;
@ -99,6 +116,18 @@ body .bi-button, #body .bi-button {
background-color: transparent;
border-color: @color-bi-border-dark-gray-line;
}
&.plain, &.plain .b-font:before {
background-color: transparent;
color: @color-bi-text-ignore-plain-button;
}
&.plain {
&:hover {
background-color: @color-bi-background-hover-plain-button;
}
&:focus {
background-color: @color-bi-background-active-plain-button;
}
}
}
&.button-success {
& {
@ -144,6 +173,18 @@ body .bi-button, #body .bi-button {
background-color: @color-bi-background-success-button;
}
}
&.plain, &.plain .b-font:before {
background-color: transparent;
color: @color-bi-text-success-plain-button;
}
&.plain {
&:hover {
background-color: @color-bi-background-hover-plain-button;
}
&:focus {
background-color: @color-bi-background-active-plain-button;
}
}
}
&.button-warning {
& {
@ -189,6 +230,18 @@ body .bi-button, #body .bi-button {
background-color: @color-bi-background-warning-button;
}
}
&.plain, &.plain .b-font:before {
background-color: transparent;
color: @color-bi-text-warning-plain-button;
}
&.plain {
&:hover {
background-color: @color-bi-background-hover-plain-button;
}
&:focus {
background-color: @color-bi-background-active-plain-button;
}
}
}
&.button-error {
& {
@ -234,6 +287,18 @@ body .bi-button, #body .bi-button {
background-color: @color-bi-background-error-button;
}
}
&.plain, &.plain .b-font:before {
background-color: transparent;
color: @color-bi-text-error-plain-button;
}
&.plain {
&:hover {
background-color: @color-bi-background-hover-plain-button;
}
&:focus {
background-color: @color-bi-background-active-plain-button;
}
}
}
&.button-common.disabled,
&.button-success.disabled,
@ -277,6 +342,16 @@ body .bi-button, #body .bi-button {
.opacity(1);
}
}
&.plain {
&, & .b-font:before {
color: @color-bi-text-disabled-plain-clear-button !important;
}
background: transparent !important;
border-width: 0 !important;
&:hover, &:focus, &:active {
.opacity(1);
}
}
&.ghost {
&, & .b-font:before {
// color: @color-bi-text-disabled-ignore-ghost-button !important;

8
src/less/lib/theme.less
Unescape View File

@ -64,6 +64,7 @@
@color-bi-background-button: @color-bi-background-highlight;
@color-bi-text-common-button: @color-bi-text;
@color-bi-text-common-clear-button: @color-bi-text-highlight;
@color-bi-text-common-plain-button: @color-bi-text-highlight;
@color-bi-text-common-ghost-button: @color-bi-text-highlight;
@color-bi-text-common-ghost-button-theme-dark: @color-bi-text;
@color-bi-text-disabled-common-ghost-button-theme-dark: @color-bi-text;
@ -77,10 +78,13 @@
@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-hover-plain-button: @color-black-5;
@color-bi-background-active-plain-button: @color-black-10;
@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;
@color-bi-text-ignore-plain-button: @background-color-light-black;
@color-bi-border-ignore-button: @color-bi-border-highlight;
@color-bi-background-ignore-button: @color-bi-background-default;
@color-bi-background-ignore-button-theme-dark: @color-bi-background-default-theme-dark;
@ -91,6 +95,7 @@
@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-plain-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;
@ -98,6 +103,7 @@
@color-bi-background-active-success-light-button: @color-bi-background-light-success;
@color-bi-text-warning-button: @color-bi-text;
@color-bi-text-warning-plain-button: @color-bi-text-redmark;
@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;
@ -115,6 +121,7 @@
@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-plain-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-disabled-button: @color-bi-text-disabled;
@ -124,6 +131,7 @@
@color-bi-background-disabled-ignore-button: @color-bi-background-default;
@color-bi-border-disabled-ignore-button: @color-bi-border-line;
@color-bi-text-disabled-ignore-clear-button: @color-bi-text-disabled;
@color-bi-text-disabled-plain-clear-button: @color-bi-text-disabled;
@color-bi-text-disabled-common-ghost-button: @color-bi-text-highlight;
@color-bi-border-disabled-common-ghost-button: @color-bi-border-highlight;
@color-bi-text-disabled-success-ghost-button: @color-bi-text-success;

Write Preview
Loading…
Cancel
Save