tntd/lib/input/input.less

tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

@import './style/mixin.less';

@input-prefix-cls: ~'@{ant-prefix}-input';

.tnt-input,
.@{input-prefix-cls} {
  &-outline {
    .input-reset-border;

    .@{input-prefix-cls} {
      .input-reset-border;
    }

    &.@{input-prefix-cls}-group-wrapper {
      .@{input-prefix-cls}-group-addon {
        .input-reset-border;
      }
    }
  }

  &-fill {
    &:not(:has(.@{input-prefix-cls})) {
      .input-fill;
    }

    .@{input-prefix-cls} {
      .input-fill;
    }

    &.@{input-prefix-cls}-group-wrapper {
      .@{input-prefix-cls}-group-addon {
        .input-fill;
      }
    }
  }

  &:has(input:placeholder-shown) {
    &:hover {
      .@{input-prefix-cls}-prefix,
      .@{input-prefix-cls}-suffix {
        color: @input-color;

        & > .anticon {
          color: @input-color;
        }
      }
    }

    .@{input-prefix-cls}-prefix,
    .@{input-prefix-cls}-suffix {
      color: @input-placeholder-color;

      & > .anticon {
        color: @input-placeholder-color;
      }
    }
  }

  &:has(.@{input-prefix-cls}-disabled) {
    .@{input-prefix-cls}-prefix,
    .@{input-prefix-cls}-suffix {
      color: @text-color-tertiary !important;

      & > .anticon {
        color: @text-color-tertiary !important;
      }
    }
  }

  .@{input-prefix-cls}-textarea-clear-icon {
    color: @bg-color-spotilight-tint-50;
  }
}

.@{input-prefix-cls} {
  &-prefix,
  &-suffix {
    & > .anticon {
      color: @input-color;
    }

    .@{input-prefix-cls}-clear-icon {
      color: @bg-color-spotilight-tint-50;
    }
  }

  &-affix-wrapper {
    .@{input-prefix-cls}:not(:last-child) {
      padding-right: 36px;
    }
    .@{input-prefix-cls}:not(:first-child) {
      padding-left: 36px;
    }
  }
}

.input-reset-border {
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;

  &:focus {
    box-shadow: none !important;
  }
}

.input-fill {
  border-color: @fill-color-quaternary;
  background-color: @fill-color-quaternary;
  .tnt-input-behavior(@fill-color-tertiary);
}

.tnt-input-behavior(@border-color) {
  &:hover {
    .hover();
  }

  &:focus {
    .active();
  }

  &.@{input-prefix-cls}-disabled {
    .disabled(@border-color);
  }

  &[disabled] {
    .disabled(@border-color);
  }
}

.disabled(@border-color) {
  color: @disabled-color;
  border-color: @border-color;
  background-color: @input-disabled-bg;
  cursor: not-allowed;
  opacity: 1;

  &:hover {
    .hover(@border-color);
  }
}