atst/styles/elements/_inputs.scss

/*
 * Inputs
 * @see https://designsystem.digital.gov/components/form-controls/
 * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_inputs.scss
 */

@mixin input-icon {
  width: 1.6rem;
  height: 1.6rem;
  display: block;
}

@mixin input-state($state) {
  $border-width: 1px;
  $state-color: $color-blue;

  @if $state == "error" {
    $border-width: 2px;
    $state-color: $color-red;
  } @else if $state == "warning" {
    $border-width: 2px;
    $state-color: $color-gold;
  } @else if $state == "success" {
    $border-width: 2px;
    $state-color: $color-green;
  }

  .icon-validation {
    @include icon-color($state-color);
  }

  .usa-input__message {
    color: $state-color;
  }

  input,
  textarea,
  select,
  .selector__button {
    border-color: $state-color;
    border-width: $border-width;
  }

  fieldset {
    input[type="radio"] {
      + label::before {
        box-shadow: 0 0 0 1px $color-white, 0 0 0 3px $state-color;
      }
    }

    input[type="checkbox"] {
      + label::before {
        box-shadow: 0 0 0 2px $state-color;
      }
    }
  }
}

.usa-input {
  margin: ($gap * 2) 0;
  max-width: 75rem;

  &-label-helper {
    font-size: $small-font-size;
    margin-left: $gap;
    margin-right: $gap;
  }

  label {
    padding: 0 0 ($gap / 2) 0;
    margin: 0;

    @include h4;
    @include line-max;

    position: relative;
    clear: both;

    dd {
      font-weight: normal;
    }

    .icon-validation {
      position: absolute;
      top: 100%;
      margin-top: 1.4rem;
      margin-left: $gap;
    }
  }

  &__title {
    align-items: center;
    font-weight: $font-normal;

    &-inline {
      display: inline-block;
    }

    .icon-tooltip {
      padding: 0 ($gap / 2);
      cursor: default;
      margin: 0 0 0 ($gap / 2);
    }

    &__view-only {
      margin: 0;
    }
  }

  &__help {
    @include h5;

    font-weight: normal;

    @include line-max;

    .icon-link {
      padding: 0 ($gap / 2);
    }
  }

  &__coming-soon {
    @include h5;

    font-weight: normal;

    @include line-max;

    color: $color-gray-medium;
  }

  input,
  textarea,
  select,
  .selector__button {
    @include line-max;

    margin: 0;
    box-sizing: border-box;
    resize: none;

    &::placeholder {
      color: $color-gray;
      font-style: italic;
    }

    &:hover,
    &:focus {
      border-color: $color-blue !important;
      color: $color-blue-darker;
      box-shadow: inset 0 0 0 1px $color-blue;

      &::placeholder {
        color: $color-blue;
      }
    }
  }

  input:read-only {
    color: grey;
  }

  &__choices {
    // checkbox & radio sets
    legend {
      padding: 0 0 ($gap / 2) 0;

      @include h4;

      .icon {
        margin-top: 0;
        margin-bottom: 0;
      }

      label {
        margin-left: 3rem;

        &:before {
          position: absolute;
          left: -3rem;
        }
      }
    }

    select {
      max-width: 30em;
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;

      > li {
        margin: 0;

        [type="radio"] + label,
        [type="checkbox"] + label {
          margin: 0;

          &:hover {
            color: $color-blue;

            &:before {
              box-shadow: 0 0 0 1px $color-white, 0 0 0 3px $color-blue;
            }
          }
        }
      }
    }

    label {
      font-weight: normal;
      margin: 0;
    }

    .usa-input__message {
      display: block;
    }

    &.usa-input__choices--inline {
      label {
        display: inline-block;
        padding-right: $gap * 3;
      }
    }
  }

  &__message {
    @include h5;

    display: inline-block;
  }

  &--validation {
    &--anything,
    &--applicationName,
    &--portfolioName,
    &--requiredField,
    &--defaultStringField,
    &--defaultTextAreaField,
    &--taskOrderNumber,
    &--email {
      input {
        max-width: 30em;
      }

      .icon-validation {
        left: 30em;
      }
    }

    &--paragraph {
      textarea {
        max-width: 30em;
      }

      .icon-validation {
        left: 30em;
      }
    }

    &--integer,
    &--dollars,
    &--gigabytes,
    &--treasuryCode,
    &--peNumber {
      input {
        max-width: 16em;
      }

      .icon-validation {
        left: 16em;
      }
    }

    &--date,
    &--usPhone,
    &--baCode {
      input {
        max-width: 10em;
      }

      .icon-validation {
        left: 10em;
      }
    }

    &--dodId {
      input {
        max-width: 18em;
      }

      .icon-validation {
        left: 18em;
      }
    }
  }

  &.no-max-width {
    padding-right: $gap * 3;

    input,
    textarea,
    select,
    label {
      max-width: none;
    }

    .icon-validation {
      left: auto;
      right: -$gap * 4;
    }
  }

  @include input-state("default");

  &.usa-input--error {
    @include input-state("error");
  }

  &.usa-input--warning {
    @include input-state("warning");
  }

  &.usa-input--success {
    @include input-state("success");
  }

  [type="file"] {
    height: auto;
  }
}

select {
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.usa-date-input label {
  margin-top: 0;
}

.input-label {
  margin-top: 1rem;
}

.usa-fieldset-inputs {
  margin-top: 2.25rem;

  label:first-child {
    padding-bottom: 0.5rem;
  }
}

.usa-search {
  padding-top: 2px;
  margin-right: 2rem;

  input[type="search"] {
    height: 4.4rem;
    font-size: 1.7rem;
    color: $color-black;
  }

  button {
    min-height: 4.4rem;
  }
}

.phone-input {
  display: flex;
  flex-direction: row;

  &__phone {
    margin-right: $gap * 4;

    .usa-input {
      margin: 0;

      input,
      label,
      .usa-input__message {
        max-width: 20rem;
      }

      .icon-validation {
        left: 20rem;
      }
    }
  }

  &__extension {
    margin-left: $gap * 4;

    .usa-input {
      margin: 0;

      input {
        max-width: 12rem;
      }

      .icon-validation {
        left: 12rem;
      }
    }
  }
}

.input--disabled {
  color: $color-gray-lighter;

  input[disabled] {
    border-color: $color-gray-lighter;
    cursor: not-allowed;

    &:hover {
      border-color: $color-gray-lighter !important;
      box-shadow: none;
    }
  }

  &.usa-input--success {
    input[disabled] {
      color: $color-gray-light;
    }
  }
}