diff --git a/packages/fineui/src/less/base/single/button/button.less b/packages/fineui/src/less/base/single/button/button.less index 6d96e3c83..6f186ef0f 100644 --- a/packages/fineui/src/less/base/single/button/button.less +++ b/packages/fineui/src/less/base/single/button/button.less @@ -1,4 +1,5 @@ @import "../../../index.less"; + @hoverVal: opacity .3s ease; @activeVal: transform .5s ease, opacity 1s ease; @activeStopVal: transform 0s; @@ -6,6 +7,7 @@ body .bi-button, #body .bi-button { &.hack { .border-radius(0px); } + .border-radius(2px); outline: 0; border: 1px solid @color-bi-border-button; @@ -14,41 +16,51 @@ body .bi-button, #body .bi-button { text-align: center; vertical-align: middle; cursor: pointer; + &.loading { cursor: not-allowed; } + &.block { font-size: inherit; border-width: 0; .border-radius(0px); } + &.clear { font-size: inherit; border-width: 0; background-color: transparent; + &:hover, &:focus { .opacity(0.8); } + &:active { .opacity(1); } + &:after { display: none; } } + &.plain { font-size: inherit; border-width: 0; background-color: transparent; } + &.ghost { font-size: inherit; background-color: transparent; } + &.button-common { &, & .b-font:before { color: @color-bi-text-common-button; } + &.light { border-width: 0; background-color: @color-bi-background-common-light-button; @@ -65,81 +77,101 @@ body .bi-button, #body .bi-button { background-color: @color-bi-background-active-common-light-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; } + &:hover, &:focus, &:hover .b-font:before, &:focus .b-font:before { color: @color-bi-text; background-color: @color-bi-background-hover-common-ghost-button; } + &:active { background-color: @color-bi-background-active-common-ghost-button; } } } + &.button-ignore { & { background-color: @color-bi-background-ignore-button; + &:not(.clear, .ghost) { border-color: @color-bi-border-ignore-button; } } + &:not(.clear, .ghost) { &, & .b-font:before { color: @color-bi-text-ignore-button; } } + &.clear { background-color: transparent; border-width: 0; } + &.ghost { &:hover, &:focus { border-color: @color-bi-border-ignore-button; + &, & .b-font:before { color: @color-bi-text-ignore-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 { & { &, & .b-font:before { color: @color-bi-text-success-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; @@ -156,47 +188,59 @@ body .bi-button, #body .bi-button { background-color: @color-bi-background-active-success-light-button; } } + &.clear { &, & .b-font:before { color: @color-bi-text-success-clear-button; } + background-color: transparent; border-width: 0; } + &.ghost { &, & .b-font:before { color: @color-bi-text-success-ghost-button; } + background-color: transparent; + &:hover, &:focus, &:hover .b-font:before, &:focus .b-font:before { color: @color-bi-text; background-color: @color-bi-background-success-button; } + &:active { 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 { & { &, & .b-font:before { color: @color-bi-text-warning-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; @@ -213,47 +257,59 @@ body .bi-button, #body .bi-button { background-color: @color-bi-background-active-warning-light-button; } } + &.clear { &, & .b-font:before { color: @color-bi-text-warning-clear-button; } + background-color: transparent; border-width: 0; } + &.ghost { &, & .b-font:before { color: @color-bi-text-warning-ghost-button; } + background-color: transparent; + &:hover, &:focus, &:hover .b-font:before, &:focus .b-font:before { color: @color-bi-text; background-color: @color-bi-background-warning-button; } + &:active { 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 { & { &, & .b-font:before { color: @color-bi-text-error-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; @@ -270,39 +326,49 @@ body .bi-button, #body .bi-button { background-color: @color-bi-background-active-error-light-button; } } + &.clear { &, & .b-font:before { color: @color-bi-text-error-clear-button; } + background-color: transparent; border-width: 0; } + &.ghost { &, & .b-font:before { color: @color-bi-text-error-ghost-button; } + background-color: transparent; + &:hover, &:focus, &:hover .b-font:before, &:focus .b-font:before { color: @color-bi-text; background-color: @color-bi-background-error-button; } + &:active { 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, &.button-error.disabled, @@ -311,25 +377,30 @@ body .bi-button, #body .bi-button { &, & .b-font:before { color: @color-bi-text-disabled-button !important; } + background-color: fade(@color-bi-background-disabled-button, 20%) !important; @ieColor: argb(fade(@color-bi-background-disabled-button, 20%)); - filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})"; border-color: @color-bi-border-disabled-button !important; } + &:after { display: none; } } + &.button-ignore.disabled { &, & .b-font:before { color: @color-bi-text-disabled-ignore-button !important; } + background: @color-bi-background-disabled-ignore-button !important; border-color: @color-bi-border-disabled-ignore-button !important; + &:after { display: none; } } + &.button-common.disabled, &.button-success.disabled, &.button-warning.disabled, @@ -339,65 +410,81 @@ body .bi-button, #body .bi-button { &, & .b-font:before { color: @color-bi-text-disabled-ignore-clear-button !important; } + background: transparent !important; border-width: 0 !important; + &:hover, &:focus, &:active { .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; } + background: transparent !important; // border-color: @color-bi-border-disabled-ignore-ghost-button !important; .opacity(0.5); } } + &.button-ignore.disabled { &.ghost { .opacity(1); } } + &.button-common.disabled { &.ghost { &, & .b-font:before { color: @color-bi-text-disabled-common-ghost-button !important; } + border-color: @color-bi-border-disabled-common-ghost-button !important; } } + &.button-success.disabled { &.ghost { &, & .b-font:before { color: @color-bi-text-disabled-success-ghost-button !important; } + border-color: @color-bi-border-disabled-success-ghost-button !important; } } + &.button-warning.disabled { &.ghost { &, & .b-font:before { color: @color-bi-text-disabled-warning-ghost-button !important; } + border-color: @color-bi-border-disabled-warning-ghost-button !important; } } + &.button-error.disabled { &.ghost { &, & .b-font:before { color: @color-bi-text-disabled-error-ghost-button !important; } + border-color: @color-bi-border-disabled-error-ghost-button !important; } } @@ -424,14 +511,17 @@ body .bi-button, #body .bi-button { top: 0; pointer-events: none; } + &.hack:after { content: none; } + &:active:after { transform: scale(0, 1); .opacity(0.1); .transition(@activeStopVal) } + &:hover, &:focus { & .bi-button-mask { .opacity(0.1); @@ -440,6 +530,7 @@ body .bi-button, #body .bi-button { } } } + &.button-ignore { &:after { content: ""; @@ -456,24 +547,30 @@ body .bi-button, #body .bi-button { top: 0; pointer-events: none; } + &.hack:after { content: none; } + &:active:after { transform: scale(0, 1); .opacity(0.1); .transition(@activeStopVal) } + &:hover, &:focus { &:not(.clear, .ghost) { background-color: @color-bi-background-hover-ignore-button-mask; } + .transition(@hoverVal); } } - & .popup-content{ + + & .popup-content { font-size: @font-size-14; } + .bi-button-mask { pointer-events: none; } @@ -483,15 +580,19 @@ body .bi-button, #body .bi-button { .bi-button { &.button-ignore { background-color: @color-bi-background-ignore-button-theme-dark; + &:hover, &:focus { background-color: @color-bi-background-hover-ignore-button-theme-dark; } + &:active { background-color: @color-bi-background-active-ignore-button-theme-dark; } + &.clear { background-color: transparent; } + &.ghost { border-color: @color-bi-border-dark-gray-line-theme-dark; } @@ -506,31 +607,36 @@ body .bi-button, #body .bi-button { border-color: @color-bi-border-dark-gray-line-theme-dark !important; background-color: fade(@color-bi-background-disabled-button-theme-dark, 20%) !important; @ieColor: argb(fade(@color-bi-background-disabled-button-theme-dark, 20%)); - filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})"; &.clear { background-color: transparent !important; } + &.ghost { // 深色系下灰化就统一用灰化色 &, & .b-font:before { color: @color-bi-text-disabled-theme-dark !important; } + background: transparent !important; .opacity(1); } } } + &.button-ignore.disabled { &, &.base-disabled { &, & .b-font:before { color: @color-bi-text-disabled-theme-dark !important; } + border-color: @color-bi-border-dark-gray-line-theme-dark !important; background-color: @color-bi-background-ignore-button-theme-dark !important; + &.clear { background-color: transparent !important; } + &.ghost { background: transparent !important; .opacity(1); diff --git a/packages/fineui/src/less/visual.less b/packages/fineui/src/less/visual.less index 3c7601937..daaec256a 100644 --- a/packages/fineui/src/less/visual.less +++ b/packages/fineui/src/less/visual.less @@ -43,13 +43,11 @@ .background-color(@color, @alpha) { background-color: fade(@color, @alpha); @ieColor: argb(fade(@color, @alpha)); - filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})"; } .opacity(@opa) { opacity: @opa; @opa-ie: @opa*100; - filter: ~'alpha(opacity=@{opa-ie})'; } .transition(@transition) {