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-gray;

  @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 $color-red;
      }
    }

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

.usa-input {
  margin: ($gap * 4) ($gap * 2) ($gap * 4) 0;

  @include media($medium-screen) {
    margin: ($gap * 4) 0;
  }

  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;
    }

  }

  .usa-input__title {
    display: flex;
    align-items: center;

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

  .usa-input__help {
    @include h5;
    font-weight: normal;

    @include line-max;

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

  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;
      }
    }
  }

  .usa-input__choices { // checkbox & radio sets
    legend {
      padding: 0 0 $gap 0;
      @include h4;

      label {
        font-weight: $font-bold;
      }

    }

    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;
      }
    }
  }

  .usa-input__message {
    @include h5;
    display: inline-block;
  }

  &--validation {

    &--anything,
    &--workspaceName,
    &--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;
    }
  }

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

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

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

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;
  }

}