_select.scss

// @page Pattern Library/Forms
// @name Selects
//
// @description
//   Select boxes allow users to choose an option or options from a list of options.
//
//   #### Best practices
//   * Use select boxes when choosing one or more options from a list of related, but mutually exclusive options e.g. profession, title, month.
//   * It can be tempting to put many things in a select box for users to choose from. Try to keep the list of options to between 4 and 15 so the user doesn't become overwhelmed with choices.
//
// @state .us-form-select--multiple - Removes the drop down arrow and adjusts the padding of <option> elements. Useful when using <select> elements that have the size="" attribute set to anything higher than 1.
// @state .us-form-select--blocked - Fluid style.
// @state .us-form-select--error - Visual feedback for when the input has an error.
// @state .us-form-select--success - Visual feedback for when success needs to be communicated to the user.
// @state .us-form-select--disabled - Inactive state for select boxes. You may also just add the disabled attribute to the <select> element in order to achieve the same effect.
//
// @markup
//   <select class="us-form-select {$modifiers}">
//     <option>A select menu</option>
//     <option>With lots of options</option>
//     <option>And a few more</option>
//   </select>

$select-default-color: $c-form-element-border !default;
$select-hover-color: $c-form-element-border-hover !default;

@function select-arrow($color) {
  @return url("data:image/svg+xml;charset=utf-8;base64," + base64encode("<svg version='1.1' baseProfile='tiny' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='40px' height='6px' viewBox='0 0 40 6'><polygon fill='#{$color}' points='25.3,0 20.3,6 15.3,0 '/></svg>"));
}

@mixin select-background($color, $color--active: false) {
  background-image: select-arrow($color);

  &:hover,
  &:focus {
    background-image: select-arrow(if($color--active, $color--active, $color));
  }
}

// [deprecated]
.us-form-select-wrap {
  position: relative;
  display: inline-block;
}

.us-form-select {
  @extend %base-form-element;
  @include select-background($select-default-color, $select-hover-color);
  @include input-sizing();
  max-width: 100%;
  padding-right: 40px;
  cursor: pointer;
  background-position: 100% 50%;
  background-repeat: no-repeat;
  outline: 0;

  // [nodoc] Fix for FF < 35 https://gist.github.com/joaocunha/6273016/
  @-moz-document url-prefix() {
    text-indent: .01px;
    text-overflow: "";
    -moz-appearance: none;
  }

  &:focus {
    &:-moz-focusring {
      color: transparent;
      text-shadow: 0 0 0 $c-form-element-text;
    }
  }

  &::-ms-expand {
    display: none;
  }

  @if $media-query-legacy-support {
    .ie8 & {
      padding: $form-element-base-padding;
    }
  }

  .ie9 & {
    padding: $form-element-base-padding;
  }
}

.us-form-select-wrap--multiple, // [deprecated]
.us-form-select--multiple,
.us-form-select[multiple],
.us-form-select[size] {
  &,
  .us-form-select {
    height: auto;
    overflow: hidden {
      x: auto;
      y: auto;
    };
    vertical-align: middle;
    cursor: default;
    background-image: none;
    -webkit-overflow-scrolling: touch;
  }

  &:hover,
  &:focus {
    background-image: none;
  }

  option {
    cursor: pointer;
  }

  &::-webkit-scrollbar {
    width: 16px;
    height: 16px;

    &:window-inactive {
      opacity: 0;
    }
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .2);
    border: 4px solid rgba(0, 0, 0, 0);
    border-radius: 8px;
    background-clip: padding-box;
  }

  &::-webkit-scrollbar-corner {
    background-color: transparent;
  }
}

.us-form-select-wrap--blocked, // [deprecated]
.us-form-select--blocked {
  width: 100%;
}

.us-form-select-wrap--disabled, // [deprecated]
.us-form-select--disabled,
.us-form-select:disabled {
  &,
  .us-form-select {
    @include form-element-disabled;
    @include select-background($c-form-element-disabled-fg);
  }
}

.us-form-select--error {
  @extend %base-form-element--error;
}

.us-form-select--success {
  @extend %base-form-element--success;
}