energylink/public/sass/components/_form_select_box.scss

$select-input-height: 35px;
$select-menu-max-height: 300px;
$select-item-font-size: $font-size-base;
$select-item-bg: $dropdownBackground;
$select-item-fg: $input-color;
$select-option-bg: $menu-dropdown-bg;
$select-option-color: $input-color;
$select-noresults-color: $text-color;
$select-input-bg: $input-bg;
$select-input-border-color: $input-border-color;
$select-menu-box-shadow: $menu-dropdown-shadow;
$select-text-color: $text-color;
$select-input-bg-disabled: $input-bg-disabled;
$select-option-selected-bg: $dropdownLinkBackgroundActive;

// @import '../../../node_modules/react-select/scss/default.scss';

@mixin select-control() {
  width: 100%;
  margin-right: $gf-form-margin;
  @include border-radius($input-border-radius-sm);
  background-color: $input-bg;
}

@mixin select-control-focus() {
  border-color: $input-border-focus;
  outline: none;
  $shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px $input-box-shadow-focus;
  @include box-shadow($shadow);
}

// new react-select WIP
.gf-form-select2__control {
  @include select-control();
  border-color: $dark-3;

  border: 1px solid #262628;
  color: #d8d9da;
  cursor: default;
  display: table;
  border-spacing: 0;
  border-collapse: separate;
  height: $select-input-height;
  outline: none;
  overflow: hidden;
  position: relative;
}

.gf-form-select2__control--is-focused {
  background-color: $input-bg;
  @include select-control-focus();
}

.gf-form-select2__control--is-disabled {
  background-color: $select-input-bg-disabled;
}

.gf-form-select2__control--menu-right {
  .gf-form-select2__menu {
    right: 0;
    left: unset;
  }
}

.gf-form-select2__input {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  padding: 8px 10px;
}

.gf-form-select2__menu {
  background: $select-input-bg-disabled;
  position: absolute;
  z-index: 2;
}

.gf-form-select2__option {
  border-left: 2px solid transparent;

  &.gf-form-select2__option--is-focused,
  &.gf-form-select2__option--is-selected {
    background-color: $dropdownLinkBackgroundHover;
    color: $dropdownLinkColorHover;
    @include left-brand-border-gradient();
    .fa {
      color: white;
    }
  }
}

.gf-form-select2__value-container {
  display: table-cell;
  padding: 8px 10px;
}

.gf-form-select2__indicators {
  display: table-cell;
  vertical-align: middle;
  padding-right: 5px;
  width: 25px;
}

.gf-form-select2__select-arrow {
  border-color: #999 transparent transparent;
  border-style: solid;
  border-width: 5px 5px 2.5px;
  display: inline-block;
  height: 0;
  width: 0;
  position: relative;

  &.gf-form-select2__select-arrow--reversed {
    border-color: transparent transparent #999;
    top: -2px;
    border-width: 0 5px 5px;
  }
}

// react-select tweaks
.gf-form-input--form-dropdown {
  padding: 0;
  border: 0;
  overflow: visible;

  .Select-placeholder {
    color: $input-color-placeholder;
  }

  > .Select-control {
    @include select-control();
    border-color: $dark-3;

    input {
      min-width: 1rem;
    }

    .Select-clear,
    .Select-arrow {
      margin-right: 8px;
    }

    .Select-value {
      display: inline-block;
      padding: $input-padding-y $input-padding-x;
      font-size: $font-size-md;
      line-height: $input-line-height;
      vertical-align: baseline;
      white-space: nowrap;
    }
  }

  &.is-open > .Select-control {
    background: transparent;
    border-color: $dark-3;
  }

  &.is-focused > .Select-control {
    background-color: $input-bg;
    @include select-control-focus();
  }

  &.is-focused:not(.is-open) > .Select-control {
    background-color: $input-bg;
    @include select-control-focus();
  }

  .Select-menu-outer {
    border: 0;
    width: auto;
  }

  .Select-option {
    border-left: 2px solid transparent;
  }

  .Select-option.is-focused {
    background-color: $dropdownLinkBackgroundHover;
    color: $dropdownLinkColorHover;
    @include left-brand-border-gradient();
  }
}

.gf-form-input--form-dropdown-right {
  .Select-menu-outer {
    right: 0;
    left: unset;
  }
}