tdesign-react/esm/common/style/web/components/form/_mixin.less

TDesign Component for React

.input-status(@status) {
  &.@{prefix}-is-@{status} {
    // 辅助文字
    .input-status-extra(@status);

    .@{prefix}-form__controls-content {
      // TODO: 兼容目前未使用SelectInput重构的组件的样式 全部重构后可以都由input层控制状态变化
      .@{prefix}-input,
      .@{prefix}-select,
      .@{prefix}-radio-button,
      .@{prefix}-cascader,
      .@{prefix}-range-input,
      .@{prefix}-textarea__inner {
        border-color: @@borderColor;
        @borderColor: "input-border-color-@{status}";

        &--focused {
          box-shadow: 0 0 0 2px @@boxShadowColor;
          @boxShadowColor: "input-box-shadow-color-@{status}-focus";
        }

        // 处理组件内icon颜色
        .t-icon,
        .@{prefix}-fake-arrow {
          color: @@borderColor;
          @borderColor: "input-border-color-@{status}";
        }
      }

      .@{prefix}-select {
        > .@{prefix}-select__right-icon:not(.@{prefix}-select__right-icon-clear) {
          color: @@borderColor;
          @borderColor: "input-border-color-@{status}";
        }
      }

      .@{prefix}-radio-button {
        &:last-child {
          border-right-color: @@borderColor;
          @borderColor: "input-border-color-@{status}";
        }
      }

      .@{prefix}-textarea__inner {
        &.@{prefix}-is-focused {
          box-shadow: 0 0 0 2px @@boxShadowColor;
          @boxShadowColor: "input-box-shadow-color-@{status}-focus";
        }
      }

      .@{prefix}-cascader,
      .@{prefix}-select {
        &.@{prefix}-is-active {
          box-shadow: 0 0 0 2px @@boxShadowColor;
          @boxShadowColor: "input-box-shadow-color-@{status}-focus";
        }
      }

      // 右侧状态图标
      .input-status-icon(@status);
    }
  }
}

.input-status-icon(@status) {
  .@{prefix}-form__status {
    .t-icon {
      color: @@iconColor;
      @iconColor: "form-color-@{status}";
    }
  }
}

.input-status-extra(@status) {
  .@{prefix}-input__extra {
    color: @@extraColor;
    @extraColor: "form-color-@{status}";
  }
}