Browse Source

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

* commit 'c76710d3d424633b21e49c0586de89e15e501717':
  无JIRA .bi-theme-dark 同级类名控制
  无JIRA 删掉
  BI-139672 fix: 修改高度后文本未上下居中
master
superman 12 months ago
parent
commit
061dd8f4b1
  1. 3
      packages/fineui/src/case/colorchooser/colorchooser.trigger.long.js
  2. 112
      packages/fineui/src/less/base/single/button/button.less
  3. 81
      packages/fineui/src/less/core/utils/common.less
  4. 2
      packages/fineui/src/less/visual.less

3
packages/fineui/src/case/colorchooser/colorchooser.trigger.long.js

@ -27,6 +27,7 @@ export class LongColorChooserTrigger extends Trigger {
} }
_init() { _init() {
const {height} = this.options;
super._init(...arguments); super._init(...arguments);
this.colorContainer = createWidget({ this.colorContainer = createWidget({
type: HTapeLayout.xtype, type: HTapeLayout.xtype,
@ -51,7 +52,7 @@ export class LongColorChooserTrigger extends Trigger {
}, },
textAlign: "left", textAlign: "left",
hgap: 5, hgap: 5,
height: 18, height: height - 4,
text: i18nText("BI-Basic_Auto"), text: i18nText("BI-Basic_Auto"),
}, },
} }

112
packages/fineui/src/less/base/single/button/button.less

@ -1,4 +1,5 @@
@import "../../../index.less"; @import "../../../index.less";
@hoverVal: opacity .3s ease; @hoverVal: opacity .3s ease;
@activeVal: transform .5s ease, opacity 1s ease; @activeVal: transform .5s ease, opacity 1s ease;
@activeStopVal: transform 0s; @activeStopVal: transform 0s;
@ -6,6 +7,7 @@ body .bi-button, #body .bi-button {
&.hack { &.hack {
.border-radius(0px); .border-radius(0px);
} }
.border-radius(2px); .border-radius(2px);
outline: 0; outline: 0;
border: 1px solid @color-bi-border-button; border: 1px solid @color-bi-border-button;
@ -14,41 +16,51 @@ body .bi-button, #body .bi-button {
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
&.loading { &.loading {
cursor: not-allowed; cursor: not-allowed;
} }
&.block { &.block {
font-size: inherit; font-size: inherit;
border-width: 0; border-width: 0;
.border-radius(0px); .border-radius(0px);
} }
&.clear { &.clear {
font-size: inherit; font-size: inherit;
border-width: 0; border-width: 0;
background-color: transparent; background-color: transparent;
&:hover, &:focus { &:hover, &:focus {
.opacity(0.8); .opacity(0.8);
} }
&:active { &:active {
.opacity(1); .opacity(1);
} }
&:after { &:after {
display: none; display: none;
} }
} }
&.plain { &.plain {
font-size: inherit; font-size: inherit;
border-width: 0; border-width: 0;
background-color: transparent; background-color: transparent;
} }
&.ghost { &.ghost {
font-size: inherit; font-size: inherit;
background-color: transparent; background-color: transparent;
} }
&.button-common { &.button-common {
&, & .b-font:before { &, & .b-font:before {
color: @color-bi-text-common-button; color: @color-bi-text-common-button;
} }
&.light { &.light {
border-width: 0; border-width: 0;
background-color: @color-bi-background-common-light-button; 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; 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;
} }
&.plain, &.plain .b-font:before { &.plain, &.plain .b-font:before {
background-color: transparent; background-color: transparent;
color: @color-bi-text-common-plain-button; color: @color-bi-text-common-plain-button;
} }
&.plain { &.plain {
&:hover { &:hover {
background-color: @color-bi-background-hover-plain-button; background-color: @color-bi-background-hover-plain-button;
} }
&:focus { &:focus {
background-color: @color-bi-background-active-plain-button; background-color: @color-bi-background-active-plain-button;
} }
} }
&.ghost { &.ghost {
&, & .b-font:before { &, & .b-font:before {
color: @color-bi-text-common-ghost-button; color: @color-bi-text-common-ghost-button;
} }
&:hover, &:focus, &:hover .b-font:before, &:focus .b-font:before { &:hover, &:focus, &:hover .b-font:before, &:focus .b-font:before {
color: @color-bi-text; color: @color-bi-text;
background-color: @color-bi-background-hover-common-ghost-button; background-color: @color-bi-background-hover-common-ghost-button;
} }
&:active { &:active {
background-color: @color-bi-background-active-common-ghost-button; background-color: @color-bi-background-active-common-ghost-button;
} }
} }
} }
&.button-ignore { &.button-ignore {
& { & {
background-color: @color-bi-background-ignore-button; background-color: @color-bi-background-ignore-button;
&:not(.clear, .ghost) { &:not(.clear, .ghost) {
border-color: @color-bi-border-ignore-button; border-color: @color-bi-border-ignore-button;
} }
} }
&:not(.clear, .ghost) { &:not(.clear, .ghost) {
&, & .b-font:before { &, & .b-font:before {
color: @color-bi-text-ignore-button; color: @color-bi-text-ignore-button;
} }
} }
&.clear { &.clear {
background-color: transparent; background-color: transparent;
border-width: 0; border-width: 0;
} }
&.ghost { &.ghost {
&:hover, &:focus { &:hover, &:focus {
border-color: @color-bi-border-ignore-button; border-color: @color-bi-border-ignore-button;
&, & .b-font:before { &, & .b-font:before {
color: @color-bi-text-ignore-button; color: @color-bi-text-ignore-button;
} }
} }
background-color: transparent; background-color: transparent;
border-color: @color-bi-border-dark-gray-line; border-color: @color-bi-border-dark-gray-line;
} }
&.plain, &.plain .b-font:before { &.plain, &.plain .b-font:before {
background-color: transparent; background-color: transparent;
color: @color-bi-text-ignore-plain-button; color: @color-bi-text-ignore-plain-button;
} }
&.plain { &.plain {
&:hover { &:hover {
background-color: @color-bi-background-hover-plain-button; background-color: @color-bi-background-hover-plain-button;
} }
&:focus { &:focus {
background-color: @color-bi-background-active-plain-button; background-color: @color-bi-background-active-plain-button;
} }
} }
} }
&.button-success { &.button-success {
& { & {
&, & .b-font:before { &, & .b-font:before {
color: @color-bi-text-success-button; color: @color-bi-text-success-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 { &.light {
border-width: 0; border-width: 0;
background-color: @color-bi-background-success-light-button; 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; 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;
} }
background-color: transparent; background-color: transparent;
border-width: 0; border-width: 0;
} }
&.ghost { &.ghost {
&, & .b-font:before { &, & .b-font:before {
color: @color-bi-text-success-ghost-button; color: @color-bi-text-success-ghost-button;
} }
background-color: transparent; background-color: transparent;
&:hover, &:focus, &:hover .b-font:before, &:focus .b-font:before { &:hover, &:focus, &:hover .b-font:before, &:focus .b-font:before {
color: @color-bi-text; color: @color-bi-text;
background-color: @color-bi-background-success-button; background-color: @color-bi-background-success-button;
} }
&:active { &:active {
background-color: @color-bi-background-success-button; background-color: @color-bi-background-success-button;
} }
} }
&.plain, &.plain .b-font:before { &.plain, &.plain .b-font:before {
background-color: transparent; background-color: transparent;
color: @color-bi-text-success-plain-button; color: @color-bi-text-success-plain-button;
} }
&.plain { &.plain {
&:hover { &:hover {
background-color: @color-bi-background-hover-plain-button; background-color: @color-bi-background-hover-plain-button;
} }
&:focus { &:focus {
background-color: @color-bi-background-active-plain-button; background-color: @color-bi-background-active-plain-button;
} }
} }
} }
&.button-warning { &.button-warning {
& { & {
&, & .b-font:before { &, & .b-font:before {
color: @color-bi-text-warning-button; color: @color-bi-text-warning-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 { &.light {
border-width: 0; border-width: 0;
background-color: @color-bi-background-warning-light-button; 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; 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;
} }
background-color: transparent; background-color: transparent;
border-width: 0; border-width: 0;
} }
&.ghost { &.ghost {
&, & .b-font:before { &, & .b-font:before {
color: @color-bi-text-warning-ghost-button; color: @color-bi-text-warning-ghost-button;
} }
background-color: transparent; background-color: transparent;
&:hover, &:focus, &:hover .b-font:before, &:focus .b-font:before { &:hover, &:focus, &:hover .b-font:before, &:focus .b-font:before {
color: @color-bi-text; color: @color-bi-text;
background-color: @color-bi-background-warning-button; background-color: @color-bi-background-warning-button;
} }
&:active { &:active {
background-color: @color-bi-background-warning-button; background-color: @color-bi-background-warning-button;
} }
} }
&.plain, &.plain .b-font:before { &.plain, &.plain .b-font:before {
background-color: transparent; background-color: transparent;
color: @color-bi-text-warning-plain-button; color: @color-bi-text-warning-plain-button;
} }
&.plain { &.plain {
&:hover { &:hover {
background-color: @color-bi-background-hover-plain-button; background-color: @color-bi-background-hover-plain-button;
} }
&:focus { &:focus {
background-color: @color-bi-background-active-plain-button; background-color: @color-bi-background-active-plain-button;
} }
} }
} }
&.button-error { &.button-error {
& { & {
&, & .b-font:before { &, & .b-font:before {
color: @color-bi-text-error-button; color: @color-bi-text-error-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 { &.light {
border-width: 0; border-width: 0;
background-color: @color-bi-background-error-light-button; 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; 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;
} }
background-color: transparent; background-color: transparent;
border-width: 0; border-width: 0;
} }
&.ghost { &.ghost {
&, & .b-font:before { &, & .b-font:before {
color: @color-bi-text-error-ghost-button; color: @color-bi-text-error-ghost-button;
} }
background-color: transparent; background-color: transparent;
&:hover, &:focus, &:hover .b-font:before, &:focus .b-font:before { &:hover, &:focus, &:hover .b-font:before, &:focus .b-font:before {
color: @color-bi-text; color: @color-bi-text;
background-color: @color-bi-background-error-button; background-color: @color-bi-background-error-button;
} }
&:active { &:active {
background-color: @color-bi-background-error-button; background-color: @color-bi-background-error-button;
} }
} }
&.plain, &.plain .b-font:before { &.plain, &.plain .b-font:before {
background-color: transparent; background-color: transparent;
color: @color-bi-text-error-plain-button; color: @color-bi-text-error-plain-button;
} }
&.plain { &.plain {
&:hover { &:hover {
background-color: @color-bi-background-hover-plain-button; background-color: @color-bi-background-hover-plain-button;
} }
&:focus { &:focus {
background-color: @color-bi-background-active-plain-button; background-color: @color-bi-background-active-plain-button;
} }
} }
} }
&.button-common.disabled, &.button-common.disabled,
&.button-success.disabled, &.button-success.disabled,
&.button-error.disabled, &.button-error.disabled,
@ -311,25 +377,30 @@ body .bi-button, #body .bi-button {
&, & .b-font:before { &, & .b-font:before {
color: @color-bi-text-disabled-button !important; color: @color-bi-text-disabled-button !important;
} }
background-color: fade(@color-bi-background-disabled-button, 20%) !important; background-color: fade(@color-bi-background-disabled-button, 20%) !important;
@ieColor: argb(fade(@color-bi-background-disabled-button, 20%)); @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; border-color: @color-bi-border-disabled-button !important;
} }
&:after { &:after {
display: none; display: none;
} }
} }
&.button-ignore.disabled { &.button-ignore.disabled {
&, & .b-font:before { &, & .b-font:before {
color: @color-bi-text-disabled-ignore-button !important; color: @color-bi-text-disabled-ignore-button !important;
} }
background: @color-bi-background-disabled-ignore-button !important; background: @color-bi-background-disabled-ignore-button !important;
border-color: @color-bi-border-disabled-ignore-button !important; border-color: @color-bi-border-disabled-ignore-button !important;
&:after { &:after {
display: none; display: none;
} }
} }
&.button-common.disabled, &.button-common.disabled,
&.button-success.disabled, &.button-success.disabled,
&.button-warning.disabled, &.button-warning.disabled,
@ -339,65 +410,81 @@ body .bi-button, #body .bi-button {
&, & .b-font:before { &, & .b-font:before {
color: @color-bi-text-disabled-ignore-clear-button !important; color: @color-bi-text-disabled-ignore-clear-button !important;
} }
background: transparent !important; background: transparent !important;
border-width: 0 !important; border-width: 0 !important;
&:hover, &:focus, &:active { &:hover, &:focus, &:active {
.opacity(1); .opacity(1);
} }
} }
&.plain { &.plain {
&, & .b-font:before { &, & .b-font:before {
color: @color-bi-text-disabled-plain-clear-button !important; color: @color-bi-text-disabled-plain-clear-button !important;
} }
background: transparent !important; background: transparent !important;
border-width: 0 !important; border-width: 0 !important;
&:hover, &:focus, &:active { &:hover, &:focus, &:active {
.opacity(1); .opacity(1);
} }
} }
&.ghost { &.ghost {
&, & .b-font:before { &, & .b-font:before {
// color: @color-bi-text-disabled-ignore-ghost-button !important; // color: @color-bi-text-disabled-ignore-ghost-button !important;
} }
background: transparent !important; background: transparent !important;
// border-color: @color-bi-border-disabled-ignore-ghost-button !important; // border-color: @color-bi-border-disabled-ignore-ghost-button !important;
.opacity(0.5); .opacity(0.5);
} }
} }
&.button-ignore.disabled { &.button-ignore.disabled {
&.ghost { &.ghost {
.opacity(1); .opacity(1);
} }
} }
&.button-common.disabled { &.button-common.disabled {
&.ghost { &.ghost {
&, & .b-font:before { &, & .b-font:before {
color: @color-bi-text-disabled-common-ghost-button !important; color: @color-bi-text-disabled-common-ghost-button !important;
} }
border-color: @color-bi-border-disabled-common-ghost-button !important; border-color: @color-bi-border-disabled-common-ghost-button !important;
} }
} }
&.button-success.disabled { &.button-success.disabled {
&.ghost { &.ghost {
&, & .b-font:before { &, & .b-font:before {
color: @color-bi-text-disabled-success-ghost-button !important; color: @color-bi-text-disabled-success-ghost-button !important;
} }
border-color: @color-bi-border-disabled-success-ghost-button !important; border-color: @color-bi-border-disabled-success-ghost-button !important;
} }
} }
&.button-warning.disabled { &.button-warning.disabled {
&.ghost { &.ghost {
&, & .b-font:before { &, & .b-font:before {
color: @color-bi-text-disabled-warning-ghost-button !important; color: @color-bi-text-disabled-warning-ghost-button !important;
} }
border-color: @color-bi-border-disabled-warning-ghost-button !important; border-color: @color-bi-border-disabled-warning-ghost-button !important;
} }
} }
&.button-error.disabled { &.button-error.disabled {
&.ghost { &.ghost {
&, & .b-font:before { &, & .b-font:before {
color: @color-bi-text-disabled-error-ghost-button !important; color: @color-bi-text-disabled-error-ghost-button !important;
} }
border-color: @color-bi-border-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; top: 0;
pointer-events: none; pointer-events: none;
} }
&.hack:after { &.hack:after {
content: none; content: none;
} }
&:active:after { &:active:after {
transform: scale(0, 1); transform: scale(0, 1);
.opacity(0.1); .opacity(0.1);
.transition(@activeStopVal) .transition(@activeStopVal)
} }
&:hover, &:focus { &:hover, &:focus {
& .bi-button-mask { & .bi-button-mask {
.opacity(0.1); .opacity(0.1);
@ -440,6 +530,7 @@ body .bi-button, #body .bi-button {
} }
} }
} }
&.button-ignore { &.button-ignore {
&:after { &:after {
content: ""; content: "";
@ -456,24 +547,30 @@ body .bi-button, #body .bi-button {
top: 0; top: 0;
pointer-events: none; pointer-events: none;
} }
&.hack:after { &.hack:after {
content: none; content: none;
} }
&:active:after { &:active:after {
transform: scale(0, 1); transform: scale(0, 1);
.opacity(0.1); .opacity(0.1);
.transition(@activeStopVal) .transition(@activeStopVal)
} }
&:hover, &:focus { &:hover, &:focus {
&:not(.clear, .ghost) { &:not(.clear, .ghost) {
background-color: @color-bi-background-hover-ignore-button-mask; background-color: @color-bi-background-hover-ignore-button-mask;
} }
.transition(@hoverVal); .transition(@hoverVal);
} }
} }
& .popup-content{
& .popup-content {
font-size: @font-size-14; font-size: @font-size-14;
} }
.bi-button-mask { .bi-button-mask {
pointer-events: none; pointer-events: none;
} }
@ -483,15 +580,19 @@ body .bi-button, #body .bi-button {
.bi-button { .bi-button {
&.button-ignore { &.button-ignore {
background-color: @color-bi-background-ignore-button-theme-dark; background-color: @color-bi-background-ignore-button-theme-dark;
&:hover, &:focus { &:hover, &:focus {
background-color: @color-bi-background-hover-ignore-button-theme-dark; background-color: @color-bi-background-hover-ignore-button-theme-dark;
} }
&:active { &:active {
background-color: @color-bi-background-active-ignore-button-theme-dark; background-color: @color-bi-background-active-ignore-button-theme-dark;
} }
&.clear { &.clear {
background-color: transparent; background-color: transparent;
} }
&.ghost { &.ghost {
border-color: @color-bi-border-dark-gray-line-theme-dark; 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; border-color: @color-bi-border-dark-gray-line-theme-dark !important;
background-color: fade(@color-bi-background-disabled-button-theme-dark, 20%) !important; background-color: fade(@color-bi-background-disabled-button-theme-dark, 20%) !important;
@ieColor: argb(fade(@color-bi-background-disabled-button-theme-dark, 20%)); @ieColor: argb(fade(@color-bi-background-disabled-button-theme-dark, 20%));
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})";
&.clear { &.clear {
background-color: transparent !important; background-color: transparent !important;
} }
&.ghost { &.ghost {
// 深色系下灰化就统一用灰化色 // 深色系下灰化就统一用灰化色
&, & .b-font:before { &, & .b-font:before {
color: @color-bi-text-disabled-theme-dark !important; color: @color-bi-text-disabled-theme-dark !important;
} }
background: transparent !important; background: transparent !important;
.opacity(1); .opacity(1);
} }
} }
} }
&.button-ignore.disabled { &.button-ignore.disabled {
&, &.base-disabled { &, &.base-disabled {
&, & .b-font:before { &, & .b-font:before {
color: @color-bi-text-disabled-theme-dark !important; color: @color-bi-text-disabled-theme-dark !important;
} }
border-color: @color-bi-border-dark-gray-line-theme-dark !important; border-color: @color-bi-border-dark-gray-line-theme-dark !important;
background-color: @color-bi-background-ignore-button-theme-dark !important; background-color: @color-bi-background-ignore-button-theme-dark !important;
&.clear { &.clear {
background-color: transparent !important; background-color: transparent !important;
} }
&.ghost { &.ghost {
background: transparent !important; background: transparent !important;
.opacity(1); .opacity(1);

81
packages/fineui/src/less/core/utils/common.less

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

2
packages/fineui/src/less/visual.less

@ -43,13 +43,11 @@
.background-color(@color, @alpha) { .background-color(@color, @alpha) {
background-color: fade(@color, @alpha); background-color: fade(@color, @alpha);
@ieColor: argb(fade(@color, @alpha)); @ieColor: argb(fade(@color, @alpha));
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})";
} }
.opacity(@opa) { .opacity(@opa) {
opacity: @opa; opacity: @opa;
@opa-ie: @opa*100; @opa-ie: @opa*100;
filter: ~'alpha(opacity=@{opa-ie})';
} }
.transition(@transition) { .transition(@transition) {

Loading…
Cancel
Save