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

$gf-form-margin: 0.2rem;
$gf-form-label-margin: 0.2rem;

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

  .checkbox-label {
    display: inline;
    cursor: pointer;
    padding: 8px 7px 8px 4px;
  }

  .cr1 {
    margin-left: 8px;
  }
}

.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-flex {
    flex-grow: 1;
  }
}

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

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

  background-color: $input-label-bg;
  display: block;
  font-size: $font-size-sm;
  margin-right: $gf-form-label-margin;
  border: $input-btn-border-width solid transparent;
  @include border-radius($label-border-radius-sm);
}

.gf-form-checkbox {
  flex-shrink: 0;
}

@each $size, $value in $form-sizes {
  .gf-size-#{$size} { width: $value; }

  .gf-size-max-#{$size} {
    flex-grow: 1;
    max-width: $value;
  }
}

.gf-size-max { width: 100%; }
.gf-size-auto { width: auto; }

.gf-form-input {
  display: block;
  width: 100%;
  padding: $input-padding-y $input-padding-x;
  font-size: $font-size-base;
  line-height: $input-line-height;
  color: $input-color;
  background-color: $input-bg;
  background-image: none;
  background-clip: padding-box;
  border: $input-btn-border-width solid $input-bg;
  @include border-radius($input-border-radius-sm);
  @include box-shadow($input-box-shadow);
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

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

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

  // Placeholder
  &::placeholder {
    color: $input-color-placeholder;
    // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
    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; }
}

.gf-form-input > select {
  width: 115%;
  min-width: 110%;
  max-width: 115%;
  height: 24px;
  margin: 0;
  padding: 0 20px 0 0;
  border: 0;
  outline: none;
  background: transparent;
  color: $input-color;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-indent: .01px;
  text-overflow: '';
  -webkit-appearance: none;
  -moz-appearance: menulist-text; // was set to "window" and caused odd display on windos and linux.
  appearance: none;
}

// This hides native dropdown button arrow in IE
.gf-form-input > select::-ms-expand {
  display: none;
}

.gf-form-input:after > select:after {
  position: absolute;
  top: 50%;
  right: 10px;
  height: 12px;
  margin-top: -6px;
  padding: 0;
  background-color: transparent;
  color: $input-color;
  font: normal normal normal 14px/1 FontAwesome;
  text-align: center;
  content: '\f0d7';
  pointer-events: none;
}

.gf-form-input > select:focus {
  outline: none;
}

// This hides focus around selected option in FF
.gf-form-input > select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #adafae;
}

// .gf-form-input {
//   margin: 0;
//   background: $input-color;
// }

.gf-form-select-interior {
  margin: 0;
  background-color: $input-bg;
  border: 1px solid $input-bg;
}

.gf-form-input > select {
  height: 34px;
  line-height: 34px;
}

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