blueprint-react-select

_control.scss

// Copyright 2017 Palantir Technologies, Inc. All rights reserved.
// Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
// of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
// and https://github.com/palantir/blueprint/blob/master/PATENTS

@import "~@blueprintjs/core/src/components/forms/common";
@import "./common";

// ReactSelect does not conform to our naming scheme
// stylelint-disable selector-class-pattern

.Select {
  position: relative;

  .pt-label & {
    margin-top: $pt-grid-size / 2;
  }
}

.Select-control {
  height: auto;
}

.Select-input {
  height: auto;
  padding: 0;

  // the input that users type into
  // inherits `display: inline-block` from "react-input-autosize"
  > input {
    // full reset so the input practically disappears
    display: inline-block;
    margin: 0;
    outline: none;
    border: 0 none;
    box-shadow: none;
    background: none transparent;
    cursor: default;
    height: $pt-input-height;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    // gotta hide this one bit on chrome
    -webkit-appearance: none; //stylelint-disable-line property-no-vendor-prefix

    .is-focused & {
      cursor: text;
    }

    .pt-large & {
      height: $pt-input-height-large;
    }

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

  // fake-hide the input when the control is pseudo-focused
  .has-value.is-pseudo-focused & {
    opacity: 0;
  }
}

// placeholder so these styles can override shared .pt-select and .pt-input styles
%select-control {
  display: table;
  width: 100%;
  padding: 0 $pt-grid-size;
}

// This mixin repurposes placeholder pseudo states as React Select modifier class states.
@mixin control-states() {
  &.is-open > .Select-control {
    @extend :active;
    @extend :focus;
  }

  &.is-focused > .Select-control {
    @extend :focus;
  }

  &.is-disabled > .Select-control {
    @extend :disabled;
  }
}

.Select:not(.is-searchable):not(.Select--multi) {
  @include control-states();

  > .Select-control {
    @extend %pt-select;
    @extend %select-control;
    font-family: $din-family;

    .pt-dark & {
      @extend %pt-dark-select;
    }
  }

  &.pt-large > .Select-control {
    @extend %pt-select-large;
    padding: 0 $pt-grid-size;
  }

  &.is-focused > .Select-control {
    @include focus-outline();

    .pt-focus-disabled & {
      outline: none;
    }
  }
}

.is-searchable,
.Select--multi {
  @include control-states();

  > .Select-control {
    @extend %select-control;
    @include pt-input();

    line-height: initial;
    font-family: $din-family;

    .pt-dark & {
      @include pt-dark-input();
    }
  }

  &.pt-large > .Select-control {
    @include pt-input-large();
    padding-right: $pt-grid-size;
  }

  &.is-focused > .Select-control {
    cursor: text;
  }
}

.is-searchable {
  .Select-placeholder,
  &.Select:not(.Select--multi) .Select-value {
    line-height: $pt-input-height;
  }

  &.pt-large {
    .Select-placeholder,
    &.Select:not(.Select--multi) .Select-value {
      line-height: $pt-input-height-large;
    }
  }
}

// input placeholder element
.Select-placeholder,
.Select:not(.Select--multi) .Select-value {
  @include overflow-ellipsis();
  @include position(absolute, 0);

  max-width: 100%;
  padding-right: $pt-input-height + $pt-grid-size * 2;
  padding-left: $input-padding-horizontal;
  line-height: $pt-input-height - $button-border-width * 2;
  color: inherit;
}

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

  .pt-dark & {
    color: $dark-select-input-placeholder;
  }
}

.pt-large .Select-placeholder,
.Select.pt-large:not(.Select--multi) .Select-value {
  padding-right: $pt-input-height-large + $pt-grid-size * 3;
  line-height: $pt-input-height-large - $button-border-width * 2;
}

// these rules use !important because the equivalent rules in react-select.css
// have 4 levels of nesting!! `A > B > C D`
// stylelint-disable declaration-no-important
.has-value:not(.Select--multi) .Select-value-label {
  color: inherit !important;
}

.is-searchable.has-value.is-open:not(.Select--multi) .Select-value-label {
  color: $select-input-placeholder !important;

  .pt-dark & {
    color: $dark-select-input-placeholder !important;
  }
}
// stylelint-enable declaration-no-important


// all the icon buttons
.Select-arrow-zone,
.Select-clear-zone,
.Select-loading-zone {
  display: table-cell;
  position: relative;
  cursor: pointer;
  width: $pt-grid-size * 2;
  height: $pt-input-height - $button-border-width * 2;
  padding: 0;
  vertical-align: middle;
  text-align: center;
  color: $pt-icon-color;

  &:hover {
    color: $pt-icon-color-hover;
  }

  .is-disabled & {
    cursor: default;
    color: $pt-icon-color-disabled;
    pointer-events: none;

    .pt-dark & {
      color: $pt-dark-icon-color-disabled;
    }
  }

  .pt-dark & {
    color: $pt-dark-icon-color;

    &:hover {
      color: $pt-dark-icon-color-hover;
    }
  }
}

.Select-arrow-zone,
.Select-clear-zone {
  @include pt-icon();
}

.pt-large {
  .Select-clear-zone,
  .Select-loading-zone {
    width: $pt-grid-size * 3;
  }
}

// dropdown arrow indicator
.Select-arrow {
  display: inline;
  border: none;

  &::before {
    content: $pt-icon-caret-down;
  }
}

// the little cross that clears the field
.Select-clear-zone {
  @include animation(Select-animation-fadeIn 200ms);
}

.Select-clear {
  display: inline-block;
  line-height: 1;
  font-size: 0;

  &::before {
    font-size: $pt-icon-size-standard;
    content: $pt-icon-small-cross;
  }
}

// loading indicator
.Select-loading {
  display: inline-block;
  position: relative;
  margin-top: $pt-grid-size / 2;
  border: floor(($pt-icon-size-standard / 5)) solid rgba($gray1, 0.2);
  border-right-color: $blue3;
  border-radius: 50%;
  box-sizing: border-box;
  width: $pt-icon-size-standard;
  height: $pt-icon-size-standard;
  vertical-align: baseline;
  animation: loading-spin 400ms infinite linear;

}

@keyframes Select-animation-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes loading-spin {
  to { transform: rotate(1turn); }
}

_menu.scss

// Copyright 2017 Palantir Technologies, Inc. All rights reserved.
// Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
// of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
// and https://github.com/palantir/blueprint/blob/master/PATENTS

@import "~@blueprintjs/core/src/components/menu/common";
@import "./common";

// ReactSelect does not conform to our naming scheme
// stylelint-disable selector-class-pattern

.Select-menu-outer {
  // Unfortunately, having both border-radius and allows scrolling using overflow defined on the same
  // element forces the browser to repaint on scroll.  However, if these definitions are split into an
  // outer and an inner element, the browser is able to optimize the scrolling behavior and does not
  // have to repaint on scroll.

  position: absolute;
  top: 100%;
  z-index: $pt-z-index-overlay;
  margin: 0;
  border: none;
  border-radius: $pt-border-radius;
  box-shadow: $pt-popover-box-shadow;
  box-sizing: border-box;
  background-color: $white;
  width: 100%;
  max-height: $select-menu-max-height;
  -webkit-overflow-scrolling: touch;

  .pt-dark & {
    box-shadow: $pt-dark-popover-box-shadow;
    background-color: $dark-menu-background-color;
  }

  .pt-large & {
    max-height: $large-select-menu-max-height;
  }
}

.Select-menu {
  max-height: $select-menu-max-height;
  overflow-y: auto;
  padding: $pt-grid-size / 2;

  .pt-large & {
    max-height: $large-select-menu-max-height;
  }
}

.Select-option {
  @include menu-item($disabled-selector: ".is-disabled", $hover-selector: ".is-focused");
  background: none;

  .pt-large & {
    @include menu-item-large();
  }

  // override react-select's default CSS with proper specificity in order to match menu styles
  &.is-selected {
    background: none;
  }

  &:last-child {
    border-radius: $menu-item-border-radius;
  }

}

.Select-noresults {
  display: block;
  border-radius: $pt-border-radius - 1px;
  cursor: default;
  padding: $select-menu-item-padding;
  line-height: $pt-icon-size-standard;

  .pt-large & {
    @include menu-item-large();
  }
}

_multi.scss

// Copyright 2017 Palantir Technologies, Inc. All rights reserved.
// Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
// of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
// and https://github.com/palantir/blueprint/blob/master/PATENTS

@import "~@blueprintjs/core/src/components/tag/common";
@import "./common";

// ReactSelect does not conform to our naming scheme
// stylelint-disable selector-class-pattern

.Select--multi {
  .Select-control {
    padding-left: $tag-margin;
  }

  .Select-input {
    margin-left: $tag-margin;
    height: $pt-input-height;
    vertical-align: middle;
  }

  &.has-value .Select-input {
    margin-left: 0;
  }

  .Select-value,
  &.is-disabled .Select-value {
    // disabled selector can't be expressed here because it's already nested
    // so modifier classes cannot be added to parent.
    @include tag("&");
    @include tag-minimal();
    margin: $tag-margin $tag-margin 0 0;
    vertical-align: top;
  }

  &.is-disabled .Select-value {
    padding-right: $tag-padding * 3;
  }

  .Select-value-icon {
    @include tag-remove();
    @include tag-remove-minimal();
    border: none;
    font-size: 0;

    &::before {
      font-size: $pt-icon-size-standard;
    }
  }

  .Select-value-label {
    padding: 0;
    vertical-align: baseline;
  }

  &.pt-large {
    .Select-input {
      height: $pt-input-height-large;
    }

    .Select-value {
      @include tag-large("&");
    }

    .Select-value-icon {
      @include tag-remove-large();
      font-size: 0;

      &::before {
        font-size: $pt-icon-size-large;
      }
    }

    &.is-disabled .Select-value {
      padding-right: $tag-padding-large * 2;
    }
  }
}

blueprint-react-select.css

@charset "UTF-8";
/**
 * Copyright 2017 Palantir Technologies, Inc. All rights reserved.
 * Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
 * of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
 * and https://github.com/palantir/blueprint/blob/master/PATENTS
 */

.Select:not(.is-searchable):not(.Select--multi) > .Select-control {
  display: inline-block;
  border: 1px solid;
  border-radius: 3px;
  cursor: pointer;
  padding: 0 10px;
  vertical-align: middle;
  font-size: 14px;
  background: #f5f8fa;
  background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #f5f8fa;
  border-color: rgba(16, 22, 26, 0.1) rgba(16, 22, 26, 0.1) rgba(16, 22, 26, 0.17) rgba(16, 22, 26, 0.1);
  box-shadow: 0 1px 1px rgba(16, 22, 26, 0.1);
  background-clip: padding-box;
  color: #182026;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 3px;
  height: 30px;
  padding: 0 25px 0 10px; }
  .Select:not(.is-searchable):not(.Select--multi) > .Select-control:hover {
    background: #ebf1f5;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #ebf1f5;
    border-color: rgba(16, 22, 26, 0.2) rgba(16, 22, 26, 0.2) rgba(16, 22, 26, 0.27) rgba(16, 22, 26, 0.2);
    box-shadow: 0 1px 1px rgba(16, 22, 26, 0.1);
    background-clip: padding-box; }
  .Select.is-open:not(.is-searchable):not(.Select--multi) > .Select-control, .Select:not(.is-searchable):not(.Select--multi) > .Select-control:active {
    border-color: rgba(16, 22, 26, 0.35) rgba(16, 22, 26, 0.25) rgba(16, 22, 26, 0.25) rgba(16, 22, 26, 0.25);
    box-shadow: inset 0 1px 1px rgba(16, 22, 26, 0.1);
    background-color: #ced9e0;
    background-image: none; }
  .Select.is-disabled:not(.is-searchable):not(.Select--multi) > .Select-control, .Select:not(.is-searchable):not(.Select--multi) > .Select-control:disabled {
    outline: none;
    border-color: transparent;
    box-shadow: none;
    background-clip: border-box;
    background-color: rgba(206, 217, 224, 0.5);
    background-image: none;
    cursor: not-allowed;
    color: rgba(92, 112, 128, 0.5); }

.Select:not(.is-searchable):not(.Select--multi).pt-large > .Select-control {
  height: 40px;
  padding-right: 35px;
  font-size: 16px; }

.pt-dark .Select:not(.is-searchable):not(.Select--multi) > .Select-control {
  background: rgba(255, 255, 255, 0.1);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.06)) left no-repeat;
  border-color: rgba(16, 22, 26, 0.6);
  box-shadow: 0 1px 1px rgba(16, 22, 26, 0.2);
  background-clip: padding-box;
  color: #f5f8fa; }
  .pt-dark .Select:not(.is-searchable):not(.Select--multi) > .Select-control:hover, .pt-dark .Select.is-open:not(.is-searchable):not(.Select--multi) > .Select-control, .pt-dark .Select:not(.is-searchable):not(.Select--multi) > .Select-control:active {
    color: #f5f8fa; }
  .pt-dark .Select:not(.is-searchable):not(.Select--multi) > .Select-control:hover {
    background: rgba(255, 255, 255, 0.1);
    background: linear-gradient(to bottom, rgba(16, 22, 26, 0.1), rgba(16, 22, 26, 0.2)) left no-repeat, center no-repeat rgba(255, 255, 255, 0.1);
    border-color: rgba(16, 22, 26, 0.8);
    box-shadow: 0 1px 1px rgba(16, 22, 26, 0.2);
    background-clip: padding-box; }
  .pt-dark .Select.is-open:not(.is-searchable):not(.Select--multi) > .Select-control, .pt-dark .Select:not(.is-searchable):not(.Select--multi) > .Select-control:active {
    box-shadow: inset 0 1px 1px rgba(16, 22, 26, 0.2);
    background-color: rgba(16, 22, 26, 0.1);
    background-image: none; }
  .pt-dark .Select.is-disabled:not(.is-searchable):not(.Select--multi) > .Select-control, .pt-dark .Select:not(.is-searchable):not(.Select--multi) > .Select-control:disabled {
    border-color: rgba(206, 217, 224, 0.1);
    box-shadow: none;
    background-color: rgba(206, 217, 224, 0.1);
    background-image: none;
    color: rgba(191, 204, 214, 0.5); }

.Select {
  position: relative; }
  .pt-label .Select {
    margin-top: 5px; }

.Select-control {
  height: auto; }

.Select-input {
  height: auto;
  padding: 0; }
  .Select-input > input {
    display: inline-block;
    margin: 0;
    outline: none;
    border: 0 none;
    box-shadow: none;
    background: none transparent;
    cursor: default;
    height: 30px;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    -webkit-appearance: none; }
    .is-focused .Select-input > input {
      cursor: text; }
    .pt-large .Select-input > input {
      height: 40px; }
    .Select-input > input::-ms-clear {
      display: none; }
  .has-value.is-pseudo-focused .Select-input {
    opacity: 0; }

.Select:not(.is-searchable):not(.Select--multi) > .Select-control, .is-searchable > .Select-control,
.Select--multi > .Select-control {
  display: table;
  width: 100%;
  padding: 0 10px; }

.Select:not(.is-searchable):not(.Select--multi) > .Select-control {
  font-family: "DIN-Next", "Helvetica", sans-serif, "Icons16"; }

.Select:not(.is-searchable):not(.Select--multi).pt-large > .Select-control {
  padding: 0 10px; }

.Select:not(.is-searchable):not(.Select--multi).is-focused > .Select-control {
  outline: rgba(19, 124, 189, 0.5) auto 2px;
  outline-offset: 2px;
  -moz-outline-radius: 6px; }
  .pt-focus-disabled .Select:not(.is-searchable):not(.Select--multi).is-focused > .Select-control {
    outline: none; }

.is-searchable > .Select-control,
.Select--multi > .Select-control {
  outline: none;
  border: none;
  border-radius: 3px;
  box-shadow: 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), inset 0 0 0 1px rgba(16, 22, 26, 0.15), inset 0 1px 1px rgba(16, 22, 26, 0.2);
  background: #ffffff;
  height: 30px;
  padding: 0 10px;
  vertical-align: middle;
  line-height: 30px;
  color: #182026;
  font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", sans-serif, "Icons16";
  font-size: 14px;
  font-weight: 400;
  transition: box-shadow 100ms cubic-bezier(0.4, 1, 0.75, 0.9);
  line-height: initial;
  font-family: "DIN-Next", "Helvetica", sans-serif, "Icons16"; }
  .is-searchable > .Select-control::-webkit-input-placeholder,
  .Select--multi > .Select-control::-webkit-input-placeholder {
    opacity: 1;
    color: rgba(92, 112, 128, 0.5); }
  .is-searchable > .Select-control::-moz-placeholder,
  .Select--multi > .Select-control::-moz-placeholder {
    opacity: 1;
    color: rgba(92, 112, 128, 0.5); }
  .is-searchable > .Select-control:-moz-placeholder,
  .Select--multi > .Select-control:-moz-placeholder {
    opacity: 1;
    color: rgba(92, 112, 128, 0.5); }
  .is-searchable > .Select-control:-ms-input-placeholder,
  .Select--multi > .Select-control:-ms-input-placeholder {
    opacity: 1;
    color: rgba(92, 112, 128, 0.5); }
  .is-searchable > .Select-control:focus, .Select.is-searchable:not(.is-searchable):not(.Select--multi).is-open > .Select-control, .Select.is-searchable:not(.is-searchable):not(.Select--multi).is-focused > .Select-control, .is-searchable.is-open > .Select-control, .is-searchable.is-focused > .Select-control,
  .Select--multi > .Select-control:focus,
  .Select.Select--multi:not(.is-searchable):not(.Select--multi).is-open > .Select-control,
  .Select.Select--multi:not(.is-searchable):not(.Select--multi).is-focused > .Select-control,
  .Select--multi.is-open > .Select-control,
  .Select--multi.is-focused > .Select-control {
    box-shadow: 0 0 0 1px #137cbd, 0 0 0 3px rgba(19, 124, 189, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); }
  .is-searchable > .Select-control:disabled, .Select.is-searchable:not(.is-searchable):not(.Select--multi).is-disabled > .Select-control, .is-searchable.is-disabled > .Select-control, .is-searchable > .Select-control.pt-disabled,
  .Select--multi > .Select-control:disabled,
  .Select.Select--multi:not(.is-searchable):not(.Select--multi).is-disabled > .Select-control,
  .Select--multi.is-disabled > .Select-control,
  .Select--multi > .Select-control.pt-disabled {
    box-shadow: none;
    background: rgba(206, 217, 224, 0.5);
    cursor: not-allowed;
    color: rgba(92, 112, 128, 0.5);
    resize: none; }
  .is-searchable > .Select-control[type="search"], .is-searchable > .Select-control.pt-round,
  .Select--multi > .Select-control[type="search"],
  .Select--multi > .Select-control.pt-round {
    border-radius: 30px;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    padding-left: 10px; }
  .is-searchable > .Select-control[readonly],
  .Select--multi > .Select-control[readonly] {
    box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.15); }
  .pt-dark .is-searchable > .Select-control, .pt-dark
  .Select--multi > .Select-control {
    box-shadow: 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4);
    background: rgba(16, 22, 26, 0.3);
    color: #f5f8fa; }
    .pt-dark .is-searchable > .Select-control::-webkit-input-placeholder, .pt-dark
    .Select--multi > .Select-control::-webkit-input-placeholder {
      color: rgba(191, 204, 214, 0.5); }
    .pt-dark .is-searchable > .Select-control::-moz-placeholder, .pt-dark
    .Select--multi > .Select-control::-moz-placeholder {
      color: rgba(191, 204, 214, 0.5); }
    .pt-dark .is-searchable > .Select-control:-moz-placeholder, .pt-dark
    .Select--multi > .Select-control:-moz-placeholder {
      color: rgba(191, 204, 214, 0.5); }
    .pt-dark .is-searchable > .Select-control:-ms-input-placeholder, .pt-dark
    .Select--multi > .Select-control:-ms-input-placeholder {
      color: rgba(191, 204, 214, 0.5); }
    .pt-dark .is-searchable > .Select-control:focus, .pt-dark .Select.is-searchable:not(.is-searchable):not(.Select--multi).is-open > .Select-control, .pt-dark .Select.is-searchable:not(.is-searchable):not(.Select--multi).is-focused > .Select-control, .pt-dark .is-searchable.is-open > .Select-control, .pt-dark .is-searchable.is-focused > .Select-control, .pt-dark
    .Select--multi > .Select-control:focus, .pt-dark
    .Select.Select--multi:not(.is-searchable):not(.Select--multi).is-open > .Select-control, .pt-dark
    .Select.Select--multi:not(.is-searchable):not(.Select--multi).is-focused > .Select-control, .pt-dark
    .Select--multi.is-open > .Select-control, .pt-dark
    .Select--multi.is-focused > .Select-control {
      box-shadow: 0 0 0 1px #137cbd, 0 0 0 1px #137cbd, 0 0 0 3px rgba(19, 124, 189, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); }
    .pt-dark .is-searchable > .Select-control:disabled, .pt-dark .Select.is-searchable:not(.is-searchable):not(.Select--multi).is-disabled > .Select-control, .pt-dark .is-searchable.is-disabled > .Select-control, .pt-dark .is-searchable > .Select-control.pt-disabled, .pt-dark
    .Select--multi > .Select-control:disabled, .pt-dark
    .Select.Select--multi:not(.is-searchable):not(.Select--multi).is-disabled > .Select-control, .pt-dark
    .Select--multi.is-disabled > .Select-control, .pt-dark
    .Select--multi > .Select-control.pt-disabled {
      box-shadow: none;
      background: rgba(216, 225, 232, 0.1);
      color: rgba(255, 255, 255, 0.3); }
    .pt-dark .is-searchable > .Select-control[readonly], .pt-dark
    .Select--multi > .Select-control[readonly] {
      box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4); }

.is-searchable.pt-large > .Select-control,
.Select--multi.pt-large > .Select-control {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  padding-right: 10px; }
  .is-searchable.pt-large > .Select-control[type="search"], .is-searchable.pt-large > .Select-control.pt-round,
  .Select--multi.pt-large > .Select-control[type="search"],
  .Select--multi.pt-large > .Select-control.pt-round {
    padding: 0 15px; }

.is-searchable.is-focused > .Select-control,
.Select--multi.is-focused > .Select-control {
  cursor: text; }

.is-searchable .Select-placeholder,
.is-searchable.Select:not(.Select--multi) .Select-value {
  line-height: 30px; }

.is-searchable.pt-large .Select-placeholder,
.is-searchable.pt-large.Select:not(.Select--multi) .Select-value {
  line-height: 40px; }

.Select-placeholder,
.Select:not(.Select--multi) .Select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  padding-right: 50px;
  padding-left: 10px;
  line-height: 28px;
  color: inherit; }

.Select-placeholder {
  color: #a7b6c2; }
  .pt-dark .Select-placeholder {
    color: rgba(255, 255, 255, 0.3); }

.pt-large .Select-placeholder,
.Select.pt-large:not(.Select--multi) .Select-value {
  padding-right: 70px;
  line-height: 38px; }

.has-value:not(.Select--multi) .Select-value-label {
  color: inherit !important; }

.is-searchable.has-value.is-open:not(.Select--multi) .Select-value-label {
  color: #a7b6c2 !important; }
  .pt-dark .is-searchable.has-value.is-open:not(.Select--multi) .Select-value-label {
    color: rgba(255, 255, 255, 0.3) !important; }

.Select-arrow-zone,
.Select-clear-zone,
.Select-loading-zone {
  display: table-cell;
  position: relative;
  cursor: pointer;
  width: 20px;
  height: 28px;
  padding: 0;
  vertical-align: middle;
  text-align: center;
  color: #5c7080; }
  .Select-arrow-zone:hover,
  .Select-clear-zone:hover,
  .Select-loading-zone:hover {
    color: #182026; }
  .is-disabled .Select-arrow-zone, .is-disabled
  .Select-clear-zone, .is-disabled
  .Select-loading-zone {
    cursor: default;
    color: rgba(92, 112, 128, 0.5);
    pointer-events: none; }
    .pt-dark .is-disabled .Select-arrow-zone, .pt-dark .is-disabled
    .Select-clear-zone, .pt-dark .is-disabled
    .Select-loading-zone {
      color: rgba(191, 204, 214, 0.5); }
  .pt-dark .Select-arrow-zone, .pt-dark
  .Select-clear-zone, .pt-dark
  .Select-loading-zone {
    color: #bfccd6; }
    .pt-dark .Select-arrow-zone:hover, .pt-dark
    .Select-clear-zone:hover, .pt-dark
    .Select-loading-zone:hover {
      color: #f5f8fa; }

.Select-arrow-zone,
.Select-clear-zone {
  line-height: 1;
  font-family: "Icons16", sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased; }

.pt-large .Select-clear-zone,
.pt-large .Select-loading-zone {
  width: 30px; }

.Select-arrow {
  display: inline;
  border: none; }
  .Select-arrow::before {
    content: "⌄"; }

.Select-clear-zone {
  -webkit-animation: Select-animation-fadeIn 200ms;
  animation: Select-animation-fadeIn 200ms; }

.Select-clear {
  display: inline-block;
  line-height: 1;
  font-size: 0; }
  .Select-clear::before {
    font-size: 16px;
    content: ""; }

.Select-loading {
  display: inline-block;
  position: relative;
  margin-top: 5px;
  border: 3px solid rgba(92, 112, 128, 0.2);
  border-right-color: #137cbd;
  border-radius: 50%;
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  width: 16px;
  height: 16px;
  vertical-align: baseline;
  -webkit-animation: loading-spin 400ms infinite linear;
          animation: loading-spin 400ms infinite linear; }

@-webkit-keyframes Select-animation-fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes Select-animation-fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-webkit-keyframes loading-spin {
  to {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn); } }

@keyframes loading-spin {
  to {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn); } }

.Select-menu-outer {
  position: absolute;
  top: 100%;
  z-index: 20;
  margin: 0;
  border: none;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 2px 4px rgba(16, 22, 26, 0.2), 0 8px 24px rgba(16, 22, 26, 0.2);
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  background-color: #ffffff;
  width: 100%;
  max-height: 170px;
  -webkit-overflow-scrolling: touch; }
  .pt-dark .Select-menu-outer {
    box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 2px 4px rgba(16, 22, 26, 0.4), 0 8px 24px rgba(16, 22, 26, 0.4);
    background-color: #30404d; }
  .pt-large .Select-menu-outer {
    max-height: 225px; }

.Select-menu {
  max-height: 170px;
  overflow-y: auto;
  padding: 5px; }
  .pt-large .Select-menu {
    max-height: 225px; }

.Select-option {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  display: block;
  border-radius: 2px;
  padding: 7px;
  line-height: 16px;
  color: inherit;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background: none; }
  .Select-option:not(.is-disabled).is-focused {
    background: #137cbd;
    cursor: pointer;
    color: #ffffff; }
  .Select-option.is-disabled {
    cursor: not-allowed;
    color: rgba(92, 112, 128, 0.5); }
  .pt-dark .Select-option {
    color: inherit; }
    .pt-dark .Select-option.is-disabled {
      color: rgba(191, 204, 214, 0.5); }
  .pt-large .Select-option {
    padding: 10px 7px;
    line-height: 20px;
    font-size: 16px; }
  .Select-option.is-selected {
    background: none; }
  .Select-option:last-child {
    border-radius: 2px; }

.Select-noresults {
  display: block;
  border-radius: 2px;
  cursor: default;
  padding: 7px;
  line-height: 16px; }
  .pt-large .Select-noresults {
    padding: 10px 7px;
    line-height: 20px;
    font-size: 16px; }

.Select--multi .Select-control {
  padding-left: 5px; }

.Select--multi .Select-input {
  margin-left: 5px;
  height: 30px;
  vertical-align: middle; }

.Select--multi.has-value .Select-input {
  margin-left: 0; }

.Select--multi .Select-value,
.Select--multi.is-disabled .Select-value {
  display: inline-block;
  position: relative;
  border: none;
  border-radius: 3px;
  box-shadow: none;
  background: #5c7080;
  min-width: 20px;
  padding: 2px 6px;
  line-height: 16px;
  color: #f5f8fa;
  font-size: 12px;
  margin: 5px 5px 0 0;
  vertical-align: top; }
  .Select--multi .Select-value.pt-round,
  .Select--multi.is-disabled .Select-value.pt-round {
    border-radius: 10px; }
  .pt-dark .Select--multi .Select-value:not([class*="pt-intent-"]), .pt-dark
  .Select--multi.is-disabled .Select-value:not([class*="pt-intent-"]) {
    background: #bfccd6;
    color: #182026; }
  .Select--multi .Select-value,
  .Select--multi.is-disabled .Select-value {
    padding-right: 20px; }
  .Select--multi .Select-value.pt-intent-primary,
  .Select--multi.is-disabled .Select-value.pt-intent-primary {
    background: #137cbd;
    color: #ffffff; }
  .Select--multi .Select-value.pt-intent-success,
  .Select--multi.is-disabled .Select-value.pt-intent-success {
    background: #0f9960;
    color: #ffffff; }
  .Select--multi .Select-value.pt-intent-warning,
  .Select--multi.is-disabled .Select-value.pt-intent-warning {
    background: #d9822b;
    color: #ffffff; }
  .Select--multi .Select-value.pt-intent-danger,
  .Select--multi.is-disabled .Select-value.pt-intent-danger {
    background: #db3737;
    color: #ffffff; }
  .Select--multi .Select-value:not([class*="pt-intent-"]),
  .Select--multi.is-disabled .Select-value:not([class*="pt-intent-"]) {
    background: rgba(138, 155, 168, 0.2);
    color: #182026; }
    .pt-dark .Select--multi .Select-value:not([class*="pt-intent-"]), .pt-dark
    .Select--multi.is-disabled .Select-value:not([class*="pt-intent-"]) {
      background: rgba(138, 155, 168, 0.2);
      color: #f5f8fa; }
  .Select--multi .Select-value.pt-intent-primary,
  .Select--multi.is-disabled .Select-value.pt-intent-primary {
    background: rgba(19, 124, 189, 0.15);
    color: #106ba3; }
  .pt-dark .Select--multi .Select-value.pt-intent-primary, .pt-dark
  .Select--multi.is-disabled .Select-value.pt-intent-primary {
    background: rgba(19, 124, 189, 0.2);
    color: #2b95d6; }
  .Select--multi .Select-value.pt-intent-success,
  .Select--multi.is-disabled .Select-value.pt-intent-success {
    background: rgba(15, 153, 96, 0.15);
    color: #0d8050; }
  .pt-dark .Select--multi .Select-value.pt-intent-success, .pt-dark
  .Select--multi.is-disabled .Select-value.pt-intent-success {
    background: rgba(15, 153, 96, 0.2);
    color: #15b371; }
  .Select--multi .Select-value.pt-intent-warning,
  .Select--multi.is-disabled .Select-value.pt-intent-warning {
    background: rgba(217, 130, 43, 0.15);
    color: #bf7326; }
  .pt-dark .Select--multi .Select-value.pt-intent-warning, .pt-dark
  .Select--multi.is-disabled .Select-value.pt-intent-warning {
    background: rgba(217, 130, 43, 0.2);
    color: #f29d49; }
  .Select--multi .Select-value.pt-intent-danger,
  .Select--multi.is-disabled .Select-value.pt-intent-danger {
    background: rgba(219, 55, 55, 0.15);
    color: #c23030; }
  .pt-dark .Select--multi .Select-value.pt-intent-danger, .pt-dark
  .Select--multi.is-disabled .Select-value.pt-intent-danger {
    background: rgba(219, 55, 55, 0.2);
    color: #f55656; }

.Select--multi.is-disabled .Select-value {
  padding-right: 6px; }

.Select--multi .Select-value-icon {
  line-height: 1;
  font-family: "Icons16", sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.5;
  border: none;
  background: none;
  cursor: pointer;
  padding: 2px;
  color: #ffffff;
  color: inherit;
  border: none;
  font-size: 0; }
  .Select--multi .Select-value-icon:hover {
    opacity: 0.8;
    background: none;
    text-decoration: none; }
  .Select--multi .Select-value-icon::before {
    content: ""; }
  .pt-dark .pt-tag:not(.pt-minimal):not([class*="pt-intent-"]) .Select--multi .Select-value-icon {
    color: #182026; }
  .pt-intent-primary .Select--multi .Select-value-icon {
    color: #137cbd; }
  .pt-dark .pt-intent-primary .Select--multi .Select-value-icon {
    color: #137cbd; }
  .pt-intent-success .Select--multi .Select-value-icon {
    color: #0f9960; }
  .pt-dark .pt-intent-success .Select--multi .Select-value-icon {
    color: #0f9960; }
  .pt-intent-warning .Select--multi .Select-value-icon {
    color: #d9822b; }
  .pt-dark .pt-intent-warning .Select--multi .Select-value-icon {
    color: #d9822b; }
  .pt-intent-danger .Select--multi .Select-value-icon {
    color: #db3737; }
  .pt-dark .pt-intent-danger .Select--multi .Select-value-icon {
    color: #db3737; }
  .Select--multi .Select-value-icon::before {
    font-size: 16px; }

.Select--multi .Select-value-label {
  padding: 0;
  vertical-align: baseline; }

.Select--multi.pt-large .Select-input {
  height: 40px; }

.Select--multi.pt-large .Select-value {
  min-width: 30px;
  padding: 5px 10px;
  line-height: 20px;
  font-size: 14px; }
  .Select--multi.pt-large .Select-value.pt-round {
    border-radius: 15px; }
  .Select--multi.pt-large .Select-value {
    padding-right: 30px; }

.Select--multi.pt-large .Select-value-icon {
  line-height: 1;
  font-family: "Icons20", sans-serif;
  font-size: 20px;
  font-weight: 400;
  font-style: normal;
  margin-left: 5px;
  padding: 5px;
  font-size: 0; }
  .Select--multi.pt-large .Select-value-icon::before {
    font-size: 20px; }

.Select--multi.pt-large.is-disabled .Select-value {
  padding-right: 10px; }

blueprint-react-select.scss

// Copyright 2017 Palantir Technologies, Inc. All rights reserved.
// Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
// of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
// and https://github.com/palantir/blueprint/blob/master/PATENTS

@import "~@blueprintjs/core/src/common/variables";

$select-input-placeholder: $gray4;
$dark-select-input-placeholder: rgba($white, 0.3);

$select-menu-max-height: $pt-grid-size / 2 + $pt-button-height * 5.5;
$select-menu-item-padding: ($pt-input-height - $pt-icon-size-standard) / 2;

$large-select-menu-max-height: $pt-grid-size / 2 + $pt-button-height-large * 5.5;

Lifesaver!

Thank you so much!

hi. thanks for posting this.
what is @import "./common";. is there a common.scss ?

I could make it work by renaming blueprint-react-select.scss to common.scss as it has all the variable decl. Also, blueprint-react-select.scss, just imports al the component file.

din-family variable is undefined, but just commented out now.