styles for Input.tsx

Input.scss

@import '../../styles/typography.mixins';
@import '../../styles/palette.variables';

$border-radius: 4px;
$input-padding-h: 16px;
$icon-size-small: 16px;
$icon-size-medium: 24px;
$icon-size-large: 24px;
$input-margin-v: 4px;
$input-width: 220px;
$maxInput-width: 400px;
$label-height: 24px;
$message-fixed-height: 36px;
$icon-margin: 7px;
$input-height-small: 28px;
$input-height-medium: 40px;
$input-height-large: 52px;

.root {
  display: flex;
  align-items: center;
  position: relative;
  width: inherit;
  min-width: $input-width;
  max-width: $maxInput-width;

  &.disabled input {
    border: 1px solid $color-grayscale-3;
    color: $color-grayscale-3;
    background-color: $color-grayscale-8;
    box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.0590183);
  }

  .iconLeft {
    left: $input-padding-h;
  }

  .iconRight {
    right: $input-padding-h;
  }

  input {
    border: 1px solid $color-grayscale-3;
    border-radius: $border-radius;
    outline: none;
    height: 100%;
    width: 100%;
    padding: 11px $input-padding-h 8px $input-padding-h;
    margin: 0;

    &:focus {
      border: 1px solid $color-system-blue;
    }

    &::placeholder {
      color: $color-grayscale-4;
    }
  }

  input::-ms-reveal,
  input::-ms-clear {
    display: none;
  }

  &.error input {
    border: 1px solid $color-system-red;
  }

  // IconButton
  .iconButton {
    display: flex;
    border: none;
    background: none;
    padding: 0;
    outline: none;
    position: absolute;

    &.noPointers {
      pointer-events: none;
    }
  }

  // sizes
  &.small {
    @include font-style-small;

    height: $input-height-small;

    &.hasIconRight input {
      padding-right: $input-padding-h + $icon-size-small + $icon-margin;
    }

    &.hasIconLeft input {
      padding-left: $input-padding-h + $icon-size-small + $icon-margin;
    }

    .iconButton {
      width: $icon-size-small;
      height: $icon-size-small;
    }
  }

  &.medium {
    @include font-style-default;

    height: $input-height-medium;

    &.hasIconRight input {
      padding-right: $input-padding-h + $icon-size-medium + $icon-margin;
    }

    &.hasIconLeft input {
      padding-left: $input-padding-h + $icon-size-medium + $icon-margin;
    }

    .iconButton {
      width: $icon-size-medium;
      height: $icon-size-medium;
    }
  }

  &.large {
    @include font-style-subtitle;

    font-weight: $font-weight-regular;
    height: $input-height-large;

    &.hasIconRight input {
      padding-right: $input-padding-h + $icon-size-large + $icon-margin;
    }

    &.hasIconLeft input {
      padding-left: $input-padding-h + $icon-size-large + $icon-margin;
    }

    .iconButton {
      width: $icon-size-large;
      height: $icon-size-large;
    }
  }
}