energylink/public/sass/components/_gf-form.scss

$gf-form-margin: 3px;
$input-border: 1px solid $input-border-color;

.gf-form {
  margin-bottom: $gf-form-margin;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  position: relative;

  &--offset-1 {
    margin-left: $spacer;
  }

  &--grow {
    flex-grow: 1;
  }

  &--flex-end {
    justify-content: flex-end;
  }

  &--alt {
    flex-direction: column;
    align-items: flex-start;

    .gf-form-label {
      padding: 4px 0;
    }
  }
}

.gf-form--has-input-icon {
  position: relative;
  margin-right: $gf-form-margin;

  .gf-form-input-icon {
    position: absolute;
    top: 50%;
    margin-top: -9px;
    font-size: $font-size-lg;
    left: 10px;
    color: $input-color-placeholder;
  }

  > input {
    padding-left: 35px;

    &:focus + .gf-form-input-icon {
      color: $text-muted;
    }
  }

  .Select--multi .Select-multi-value-wrapper,
  .Select-placeholder {
    padding-left: 30px;
  }
}

.gf-form-disabled {
  color: $text-color-weak;

  .gf-form-select-wrapper::after {
    color: $text-color-weak;
  }

  a,
  .gf-form-input {
    color: $text-color-weak;
  }
}

.gf-form-group {
  margin-bottom: $spacer * 2.5;
}

.gf-form-inline {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;

  .gf-form + .gf-form {
    margin-right: $gf-form-margin;
  }
}

.gf-form-button-row {
  padding-top: $spacer * 1.5;
  a,
  button {
    margin-right: $spacer;
  }
}

.gf-form-label {
  padding: $input-padding-y $input-padding-x;
  flex-shrink: 0;
  font-weight: $font-weight-semi-bold;
  font-size: $font-size-sm;

  background-color: $input-label-bg;
  display: block;

  border: $input-btn-border-width solid $input-label-border-color;
  border-right: none;
  border-radius: $label-border-radius;

  &--grow {
    flex-grow: 1;
    min-height: 2.6rem;
  }

  &--error {
    color: $critical;
  }

  &--small {
    padding: ($input-padding-y / 2) ($input-padding-x / 2);
    font-size: $font-size-xs;
  }

  &:disabled {
    color: $text-color-weak;
  }
}

.gf-form-label + .gf-form-label {
  margin-right: $gf-form-margin;
}

.gf-form-pre {
  display: block;
  flex-grow: 1;
  margin: 0;
  margin-right: $gf-form-margin;
  border: $input-btn-border-width solid transparent;
  border-left: none;
  @include border-radius($label-border-radius-sm);
}

.gf-form-checkbox {
  flex-shrink: 0;
  padding: $input-padding-y $input-padding-x;
  line-height: $input-line-height;

  .checkbox-label {
    display: inline;
    cursor: pointer;
    padding: $input-padding-y 0.4rem;
    line-height: $input-line-height;
  }
}

.gf-form-textarea {
  max-width: 650px;
}

.gf-form-input {
  display: block;
  width: 100%;
  padding: $input-padding-y $input-padding-x;
  margin-right: $gf-form-margin;
  font-size: $font-size-md;
  line-height: $input-line-height;
  color: $input-color;
  background-color: $input-bg;
  background-image: none;
  background-clip: padding-box;
  border: $input-border;
  border-radius: $input-border-radius;
  @include box-shadow($input-box-shadow);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  // text areas should be scrollable
  @at-root textarea#{&} {
    overflow: auto;
    white-space: pre-wrap;
  }

  // Unstyle the caret on `<select>`s in IE10+.
  &::-ms-expand {
    background-color: transparent;
    border: 0;
    display: none;
  }

  &.gf-input-small {
    padding: $input-padding-y/3 $input-padding-x/3;
    font-size: $font-size-xs;
  }

  // Customize the `:focus` state to imitate native WebKit styles.
  @include form-control-focus();

  // Placeholder
  &::placeholder {
    color: $input-color-placeholder;
    opacity: 1;
  }

  &:disabled,
  &[readonly] {
    background-color: $input-bg-disabled;
    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
    opacity: 1;
  }

  &:disabled {
    cursor: $cursor-disabled;
  }

  &.gf-size-auto {
    width: auto;
  }

  &--dropdown {
    padding-right: $input-padding-x*2;

    &::after {
      position: absolute;
      top: 36%;
      right: 11px;
      font-size: 11px;
      background-color: transparent;
      color: $text-color;
      font: normal normal normal $font-size-sm/1 FontAwesome;
      content: '\f0d7';
      pointer-events: none;
    }
  }

  &--small {
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: $font-size-sm;
  }

  &--plaintext {
    white-space: unset;
  }
}

.gf-form-hint {
  width: 100%;
}

.gf-form-hint-text {
  display: block;
  text-align: right;
  padding-top: 0.5em;
}

.gf-form-select-wrapper {
  margin-right: $gf-form-margin;
  position: relative;
  background-color: $input-bg;

  .gf-form-select-icon {
    position: absolute;
    z-index: 1;
    left: $input-padding-x;
    top: 50%;
    margin-top: -7px;

    & + .gf-form-input {
      position: relative;
      z-index: 2;
      padding-left: $input-padding-x*3;
      background-color: transparent;

      option {
        // Firefox
        color: $black;
      }
    }
  }

  .gf-form-input {
    margin-right: 0;
  }

  select.gf-form-input {
    text-indent: 0.01px;
    text-overflow: '';
    padding-right: $input-padding-x*3;
    appearance: none;

    &:-moz-focusring {
      outline: none;
      color: transparent;
      text-shadow: 0 0 0 $text-color;
    }

    &.ng-empty {
      color: $text-color-weak;
    }
  }

  &::after {
    position: absolute;
    top: 36%;
    right: 11px;
    background-color: transparent;
    color: $text-color;
    font: normal normal normal $font-size-sm/1 FontAwesome;
    content: '\f0d7';
    pointer-events: none;
    font-size: 11px;
  }

  &--has-help-icon {
    &::after {
      right: $input-padding-x*3;
    }
  }
}

.gf-form--v-stretch {
  align-items: stretch;
}

.gf-form-btn {
  padding: $input-padding-y $input-padding-x;
  margin-right: $gf-form-margin;
  line-height: $input-line-height;
  font-size: $font-size-sm;

  flex-shrink: 0;
  flex-grow: 0;
}

.natural-language-input {
  &input[type='number'] {
    font-size: $font-size-base;
    line-height: $input-line-height;
    margin: -6px -5px 0 5px;
    padding: $input-padding-y/2 $input-padding-x/2;
  }
}

.gf-form-dropdown-typeahead {
  margin-right: $gf-form-margin;
  position: relative;
  background-color: $input-bg;
  border: $input-border;
  border-radius: $input-border-radius;

  &::after {
    position: absolute;
    top: 35%;
    right: $input-padding-x;
    background-color: transparent;
    color: $input-color;
    font: normal normal normal $font-size-sm/1 FontAwesome;
    content: '\f0d7';
    pointer-events: none;
    font-size: 11px;
  }

  .gf-form-input {
    border: none;
  }
}

.gf-form-help-icon {
  flex-grow: 0;
  padding-left: $spacer;
  color: $text-color-weak;

  &--bold {
    color: $text-color-emphasis;
    padding-left: 0;
  }

  &--right-absolute {
    position: absolute;
    right: $spacer;
    top: 10px;
  }

  &--right-normal {
    float: right;
  }

  &--header {
    margin-bottom: $gf-form-margin;
  }

  &--no-padding {
    padding-left: 0;
  }
}

select.gf-form-input ~ .gf-form-help-icon {
  right: 10px;
}

.gf-form-icon--right-absolute {
  position: absolute;
  right: $spacer;
  top: 10px;
  color: $text-muted;
}

.cta-form {
  position: relative;
  padding: 1.5rem;
  background-color: $empty-list-cta-bg;
  margin-bottom: 2rem;
  border-top: 3px solid $green;
}

.cta-form__close {
  position: absolute;
  right: 0;
  top: 0;
}