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/core/utils/common.less b/packages/fineui/src/less/core/utils/common.less index 7e0d85ff0..3da0ab1c0 100644 --- a/packages/fineui/src/less/core/utils/common.less +++ b/packages/fineui/src/less/core/utils/common.less @@ -2,16 +2,20 @@ .base-disabled { cursor: not-allowed !important; + .cursor-pointer { cursor: not-allowed !important; } + .cursor-default { cursor: not-allowed !important; } + .cursor-move { cursor: not-allowed !important; } - .cursor-text{ + + .cursor-text { cursor: not-allowed !important; } @@ -54,16 +58,20 @@ .base-invalid { cursor: default !important; + .cursor-pointer { cursor: default !important; } + .cursor-default { cursor: default !important; } + .cursor-move { cursor: default !important; } - .cursor-text{ + + .cursor-text { cursor: default !important; } } @@ -73,6 +81,7 @@ &:focus, &:hover { border-color: @color-bi-border-highlight; } + // ie下不支持focus-within, 和上面写在一起会导致ie下:hover不生效 &:focus-within { border-color: @color-bi-border-highlight; @@ -125,6 +134,7 @@ & .bi-input { color: @color-bi-text-background; } + & .bi-textarea { color: @color-bi-text-background; } @@ -134,9 +144,11 @@ .bi-background { background-color: @color-bi-background-normal-theme-dark; color: @color-bi-text-background-theme-dark; + & .bi-input { color: @color-bi-text-background-theme-dark; } + & .bi-textarea { color: @color-bi-text-background-theme-dark; } @@ -146,9 +158,11 @@ .bi-header-background { background-color: @color-bi-background-header-background; color: @color-bi-text-header-background; + & .bi-input { color: @color-bi-text-header-background; } + & .bi-textarea { color: @color-bi-text-header-background; } @@ -158,9 +172,11 @@ .bi-header-background { background-color: @color-bi-background-header-background-theme-dark; color: @color-bi-text-header-background-theme-dark; + & .bi-input { color: @color-bi-text-header-background-theme-dark; } + & .bi-textarea { color: @color-bi-text-header-background-theme-dark; } @@ -171,12 +187,15 @@ .bi-card { background-color: @color-bi-background-card; color: @color-bi-text-card; + & .bi-input { color: @color-bi-text-card; } + & .bi-textarea { color: @color-bi-text-card; } + &.bi-primary { background-color: @background-color-card-primary; color: @color-card-primary; @@ -184,12 +203,14 @@ } .bi-theme-dark { - .bi-card { + .bi-card, &.bi-card { background-color: @color-bi-background-card-theme-dark; color: @color-bi-text-card-theme-dark; + & .bi-input { color: @color-bi-text-card-theme-dark; } + & .bi-textarea { color: @color-bi-text-card-theme-dark; } @@ -199,20 +220,24 @@ //灰化 .bi-disabled { color: @color-bi-text-disabled; + & .bi-input { color: @color-bi-text-disabled; } + & .bi-textarea { color: @color-bi-text-disabled; } } .bi-theme-dark { - .bi-disabled { + .bi-disabled, &.bi-disabled { color: @color-bi-text-disabled-theme-dark; + & .bi-input { color: @color-bi-text-disabled-theme-dark; } + & .bi-textarea { color: @color-bi-text-disabled-theme-dark; } @@ -222,20 +247,24 @@ // 提示区域, 灰色字体 .bi-tips { color: @color-bi-text-tips; + & .bi-input { color: @color-bi-text-tips; } + & .bi-textarea { color: @color-bi-text-tips; } } .bi-theme-dark { - .bi-tips { + .bi-tips, &.bi-tips { color: @color-bi-text-tips-theme-dark; + & .bi-input { color: @color-bi-text-tips-theme-dark;; } + & .bi-textarea { color: @color-bi-text-tips-theme-dark; } @@ -245,9 +274,11 @@ // 边框 .bi-border { border: 1px solid @color-bi-border-line; + &.disabled { border-color: @color-bi-border-disabled !important; } + &.error { border-color: @border-color-negative; } @@ -255,9 +286,11 @@ .bi-border-top { border-top: 1px solid @color-bi-border-line; + &.disabled { border-color: @color-bi-border-disabled !important; } + &.error { border-color: @border-color-negative; } @@ -265,9 +298,11 @@ .bi-border-right { border-right: 1px solid @color-bi-border-line; + &.disabled { border-color: @color-bi-border-disabled !important; } + &.error { border-color: @border-color-negative; } @@ -275,9 +310,11 @@ .bi-border-bottom { border-bottom: 1px solid @color-bi-border-line; + &.disabled { border-color: @color-bi-border-disabled !important; } + &.error { border-color: @border-color-negative; } @@ -285,9 +322,11 @@ .bi-border-left { border-left: 1px solid @color-bi-border-line; + &.disabled { border-color: @color-bi-border-disabled !important; } + &.error { border-color: @border-color-negative; } @@ -296,6 +335,7 @@ .bi-theme-dark { .bi-border { border: 1px solid @color-bi-border-line-theme-dark; + &.disabled { border-color: @color-bi-border-disabled-theme-dark !important; } @@ -303,6 +343,7 @@ .bi-border-top { border-top: 1px solid @color-bi-border-line-theme-dark; + &.disabled { border-color: @color-bi-border-disabled-theme-dark !important; } @@ -310,6 +351,7 @@ .bi-border-right { border-right: 1px solid @color-bi-border-line-theme-dark; + &.disabled { border-color: @color-bi-border-disabled-theme-dark !important; } @@ -317,6 +359,7 @@ .bi-border-bottom { border-bottom: 1px solid @color-bi-border-line-theme-dark; + &.disabled { border-color: @color-bi-border-disabled-theme-dark !important; } @@ -324,6 +367,7 @@ .bi-border-left { border-left: 1px solid @color-bi-border-line-theme-dark; + &.disabled { border-color: @color-bi-border-disabled-theme-dark !important; } @@ -421,9 +465,11 @@ // 标红 .bi-keyword-red-mark { color: @color-bi-text-redmark; + & .bi-input { color: @color-bi-text-redmark; } + & .bi-textarea { color: @color-bi-text-redmark; } @@ -432,9 +478,11 @@ // 高亮 .bi-high-light { color: @color-bi-text-highlight; + & .bi-input { color: @color-bi-text-highlight; } + & .bi-textarea { color: @color-bi-text-highlight; } @@ -442,9 +490,11 @@ .bi-error { color: @color-bi-text-failure; + & .bi-input { color: @color-bi-text-failure; } + & .bi-textarea { color: @color-bi-text-failure; } @@ -453,9 +503,11 @@ .bi-high-light-background { background-color: @color-bi-background-highlight; color: @color-bi-text; + & .bi-input { color: @color-bi-text; } + & .bi-textarea { color: @color-bi-text; } @@ -464,9 +516,11 @@ .bi-error-background { background-color: @color-bi-background-failure; color: @color-bi-text; + & .bi-input { color: @color-bi-text; } + & .bi-textarea { color: @color-bi-text; } @@ -474,6 +528,7 @@ .bi-high-light-border { border: 1px solid @color-bi-border-highlight; + &.disabled { border-color: @color-bi-border-disabled !important; } @@ -481,6 +536,7 @@ .bi-high-light-border-top { border-top: 1px solid @color-bi-border-highlight; + &.disabled { border-color: @color-bi-border-disabled !important; } @@ -488,6 +544,7 @@ .bi-high-light-border-right { border-right: 1px solid @color-bi-border-highlight; + &.disabled { border-color: @color-bi-border-disabled !important; } @@ -495,6 +552,7 @@ .bi-high-light-border-bottom { border-bottom: 1px solid @color-bi-border-highlight; + &.disabled { border-color: @color-bi-border-disabled !important; } @@ -502,6 +560,7 @@ .bi-high-light-border-left { border-left: 1px solid @color-bi-border-highlight; + &.disabled { border-color: @color-bi-border-disabled !important; } @@ -512,9 +571,11 @@ color: @color-bi-text-water-mark; cursor: text; .user-select-disable(); + & .bi-input { color: @color-bi-text-water-mark; } + & .bi-textarea { color: @color-bi-text-water-mark; } @@ -523,9 +584,11 @@ .bi-theme-dark { .bi-water-mark { color: @color-bi-text-water-mark-theme-dark; + & .bi-input { color: @color-bi-text-water-mark-theme-dark; } + & .bi-textarea { color: @color-bi-text-water-mark-theme-dark; } @@ -548,24 +611,30 @@ // 蒙板 .bi-mask { color: @color-bi-text; + & .bi-input { color: @color-bi-text; } + & .bi-textarea { color: @color-bi-text; } + .background-color(@color-bi-background-black, 20%); } .bi-theme-dark { .bi-mask { color: @color-bi-text-white-theme-dark; + & .bi-input { color: @color-bi-text-white-theme-dark; } + & .bi-textarea { color: @color-bi-text-white-theme-dark; } + .background-color(@color-bi-background-default, 20%); } } @@ -576,7 +645,7 @@ } .bi-theme-dark { - .bi-z-index-mask { + .bi-z-index-mask, &.bi-z-index-mask { //color: @color-bi-background-default; //& .bi-input { // color: @color-bi-background-default; 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) {