choerodon-ui/pro/lib/field/style/mixin.less

An enterprise-class UI design language and React-based implementation

@field-label-prefix-cls: ~'@{c7n-pro-prefix}-field-label';

.validation() {
  &-invalid &,
  &-invalid label:hover &,
  &-invalid &:hover {
    color: @error-color;
    border-color: @error-color;
  }

  &-invalid&-wrapper {
    background-color: @error-bg-color;
  }

  &-invalid &-clear-button {
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0),
      @error-bg-color 20%,
      @error-bg-color
    ) !important;
  }

  // &-invalid &:focus {
  //   box-shadow: 0 0 @outline-blur-size @outline-width fade(@error-color, 20%);
  // }
}

.float-label(@prefix-width: @input-icon-width-base) {
  &-float-label .@{field-label-prefix-cls} {
    &-wrapper {
      position: absolute;
      top: 0;
      left: @input-padding-horizontal-base;
      max-width: 98%;
      height: 0;
      margin-left: -0.05rem;
      padding: 0 0.05rem;
      border-top: 0.02rem @border-style-base @component-background;
      transform-origin: 0.1rem -230%;
      transition: all 0.2s @ease-out;
    }

    &::after {
      width: 0;
    }

    padding: 0;
    color: @label-color;
    line-height: 34 / 13; // <-- fieldHeight / fontSize
    transform-origin: inherit;
    transition: inherit;
    pointer-events: none;
  }
  &-float-label&-focused .@{field-label-prefix-cls} {
    color: @outline-color;
  }
  &-float-label&-invalid .@{field-label-prefix-cls} {
    color: @error-color;
  }
  &-float-label .@{field-label-prefix-cls}-wrapper,
  &-float-label &:focus + .@{field-label-prefix-cls}-wrapper {
    transform: scaleX(0.8);
  }
  &-float-label &:-webkit-autofill + .@{field-label-prefix-cls}-wrapper {
    transform: scaleX(0.8);
  }
  &-float-label .@{field-label-prefix-cls},
  &-float-label&-focused .@{field-label-prefix-cls} {
    font-weight: 500;
    font-size: 0.15rem; // 15 * 0.8(缩放比例) = 12(目标值)
    transform: scaleY(0.8);
  }
  &-float-label &:-webkit-autofill + .@{field-label-prefix-cls}-wrapper .@{field-label-prefix-cls} {
    font-weight: 500;
    font-size: 0.15rem; // 15 * 0.8(缩放比例) = 12(目标值)
    transform: scaleY(0.8);
  }
  &-float-label & {
    height: 0.36rem;
    border-radius: 0.04rem;
  }
  &-float-label textarea& {
    height: auto;
  }
  &-float-label&-invalid,
  &-float-label&-required {
    background-color: @input-wrapper-bg;
  }
  &-float-label&-required .@{field-label-prefix-cls}::after {
    width: 0.08rem;
  }
  &-empty:not(&-focused) {
    .@{field-label-prefix-cls} {
      &-wrapper {
        border-top-color: transparent;
        transform: none;
      }
      font-weight: inherit;
      font-size: inherit;
      transform: none;
    }
  }
  &-float-label & > ul {
    margin-top: 0.06rem;
    margin-left: 0.03rem;
    > li {
      display: inline-block;
      max-width: 99%;
      height: 0.2rem;
      margin-bottom: 0.02rem;
      line-height: 0.2rem;
      vertical-align: middle;
    }
  }
  &-float-label &-multiple-block {
    display: inline-block;
    max-width: 99%;
    margin: 0 0.02rem;
    padding: 0 0 0 0.08rem;
    overflow: hidden;
    color: @tag-default-color;
    line-height: @line-height-base;
    white-space: nowrap;
    background-color: @tag-default-bg;
    border-radius: 0.12rem;
    > div {
      display: inline-block;
      max-width: 100%;
      height: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      vertical-align: top;

      &:not(:last-child) {
        max-width: ~'calc(100% - .24rem)';
      }
    }
    &-invalid {
      background-color: @error-color;
    }
    &-disabled {
      padding-right: 0.1rem;
      background-color: @disabled-color;
      cursor: not-allowed;
    }

    cursor: default;

    .@{iconfont-css-prefix} {
      height: 100%;
      margin-left: 0.08rem;
      color: @tag-multiple-color;
      font-size: 0.16rem;
      line-height: 0.2rem;
      vertical-align: top;
      cursor: pointer;
    }
  }
  &-prefix-button&-float-label .@{field-label-prefix-cls}-wrapper {
    left: @prefix-width;
  }
}