@perfma/heaven/es/input-number/index.less

An UI Framework base [Ant Design V4](https://ant.design/components/overview-cn/) for React.

/* stylelint-disable eslint-disable */

@import '~antd/es/input-number/style/index.less';
@import '../style/vars.less';

@height-lg: 36px;
@height-md: 32px;
@height-sm: 24px;

// InputNumber
.@{ant-prefix}-input-number {
  &-input {
    padding-right: 22px;
  }

  &-controls-sides {
    .@{ant-prefix}-input-number-handler-wrap {
      height: @height-md!important;
      .@{ant-prefix}-input-number-handler {
        height: @height-md - 2px !important;
      }
    }

    &.@{ant-prefix}-input-number-sm {
      .@{ant-prefix}-input-number-handler-wrap {
        height: @height-sm!important;
        .@{ant-prefix}-input-number-handler {
          height: @height-sm - 2px !important;
        }
      }
    }

    &.@{ant-prefix}-input-number-lg {
      .@{ant-prefix}-input-number-handler-wrap {
        height: @height-lg!important;
        .@{ant-prefix}-input-number-handler {
          height: @height-lg - 2px !important;
        }
      }
    }

    .@{ant-prefix}-input-number-input {
      padding: 0 32px;
      text-align: center;
    }

    &.@{ant-prefix}-input-number-disabled {
      .@{ant-prefix}-input-number-handler-wrap {
        display: block !important;
        .@{ant-prefix}-input-number-handler {
          cursor: not-allowed;
        }

        &:hover {
          .@{ant-prefix}-input-number-handler {
            &-up-inner,
            &-down-inner {
              transform: scale(1);
              color: rgb(156, 156, 156);
            }
          }
        }
      }
    }

    .@{ant-prefix}-input-number-handler-wrap {
      width: 100% !important;
      height: 100% !important;
      background: none !important;
      opacity: 1 !important;
      pointer-events: none;
    }

    .@{ant-prefix}-input-number-handler {
      width: @height-md!important;
      pointer-events: auto;
      transition: all 0.3s ease;

      &:hover {
        .@{ant-prefix}-input-number-handler-up-inner,
        .@{ant-prefix}-input-number-handler-down-inner {
          transform: scale(1.2);
        }
      }

      &-up {
        position: absolute;
        right: 0;
      }

      &-down {
        border: none !important;
        border-right: 1px solid #d4d9dc !important;
        border-radius: 0 !important;
      }

      &-up-inner,
      &-down-inner {
        font-size: 12px !important;
        right: 9px !important;
      }
    }
  }
}