Pull request #3707: 无JIRA .bi-theme-dark 同级类名控制

Merge in VISUAL/fineui from ~DAILER/fineui:master to master * commit 'c9b3b561537cc1a7cdb519152729e89a91e2a4c7': 无JIRA .bi-theme-dark 同级类名控制无JIRA 删掉
6 months ago · c76710d3d4
3 changed files with 184 additions and 11 deletions
--- 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);
--- 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;
--- 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) {