tdesign-react/esm/style/web/components/input/_mixin.less

TDesign Component for React

.input-base() {
  border-width: 1px;
  border-style: solid;
  border-radius: @input-border-radius;
  border-color: @input-border-color-default;
  padding: @input-padding-default;
  background-color: @input-bg-color-default;
  outline: none;
  color: @input-text-color-default;
  font: @input-font;
  width: 100%;
  box-sizing: border-box;
  transition: @input-inner-transition;
  display: flex;
  align-items: center;
  overflow: hidden;

  &:hover {
    border-color: @input-border-color-default-hover;
  }

  &:focus {
    z-index: 1;
    border-color: @input-border-color-default-focus;
    box-shadow: @input-box-shadow-focus;
  }
}

.input-readonly {
  &.@{prefix}-is-readonly {
    color: @input-text-color-readonly;
    background-color: @input-bg-color-readonly;

    .@{prefix}-input__inner {
      cursor: @input-cursor-readonly;
    }
  }
}

.input-disabled {
  &.@{prefix}-is-disabled {
    color: @input-text-color-disabled;
    background-color: @input-bg-color-disabled;

    &:hover {
      border-color: @input-border-color-default;
    }

    .@{prefix}-input__inner {
      cursor: not-allowed;
      color: @input-text-color-disabled;
      text-overflow: initial;

      &::placeholder {
        color: @input-text-color-disabled;
      }
    }

    & > .@{prefix}-input__prefix,
    & > .@{prefix}-input__suffix {
      .t-icon {
        color: @input-text-color-disabled;

        &:hover {
          color: @input-text-color-disabled;
        }
      }
    }
  }
}

.input-status(@status) {
  &.@{prefix}-is-@{status} {
    border-color: @@borderColor;
    @borderColor: "input-border-color-@{status}";

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

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

    & > .@{prefix}-input__extra {
      color: @@fontColor;
      @fontColor: "input-extra-color-@{status}";
    }
  }
}

.input-fix-position(@position) {
  &.@{prefix}-input--@{position} {
    & > .@{prefix}-input__@{position} {
      z-index: 2;
      height: 100%;
      text-align: center;
      display: flex;
      align-items: center;
    }

    & > .@{prefix}-input__@{position}-icon {
      font-size: @font-size-l;
    }
    &.@{prefix}-size-s {
      .@{prefix}-input__@{position}-icon {
        font-size: @font-size-base;
      }
    }
    &.@{prefix}-size-l {
      .@{prefix}-input__@{position}-icon {
        font-size: @font-size-xl;
      }
    }
  }
}