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

TDesign Component for React

.range-input-base() {
  border-width: 1px;
  border-style: solid;
  border-radius: @border-radius-default;
  border-color: @range-input-border-color-default;
  padding: @range-input-padding-default;
  background-color: @range-input-bg-color-default;
  color: @range-input-text-color-default;
  font-size: @range-input-font;
  box-sizing: border-box;
  transition: @range-input-inner-transition;
  display: inline-flex;
  flex-direction: column;
  gap: @spacer-s;

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

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

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

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

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

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

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

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

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

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

    & > .@{prefix}-range-input__tips {
      color: @@fontColor;
      font-size: @font-size-s;
      margin-left: calc(-1 * @comp-paddingLR-xs);
      @fontColor: "range-input-extra-color-@{status}";
    }
  }
}

.range-input-size(@size) {
  & when(@size = l) {
    &.@{prefix}-size-l {
      & > .@{prefix}-range-input__inner {
        height: @range-input-height-l;
        line-height: @range-input-height-l;
      }
    }
  }
  & when not (@size = l) {
    &.@{prefix}-size-@{size} {
      width: @@width-size;
      @width-size: "range-input-width-@{size}";
    }
  }
}

.range-input-fix-position(@position) {
  &.@{prefix}-range-input--@{position} {
    .@{prefix}-range-input__@{position} {
      height: 100%;
      text-align: center;
      display: flex;
      align-items: center;
      font-size: @font-size-base;
    }
  }
}