react-toolbox/components/autocomplete/style.scss

@import "../variables";
@import "../mixins";

//-- Variables
$autocomplete-value-background: unquote("rgb(#{$color-primary})");
$autocomplete-value-color: unquote("rgb(#{$color-primary-contrast})");
$autocomplete-label-color: unquote("rgb(#{$color-primary})");
$autocomplete-suggestions-background: unquote("rgb(#{$color-white})");
$autocomplete-suggestion-active-background: unquote("rgb(#{$palette-grey-200})");

//-- Local styles
.container {
  position: relative;
}

.label {
  display: inline-block;
  margin-bottom: $unit * .5;
  font-size: 1.3 * $unit;
  color: $autocomplete-label-color;
}

.value {
  display: inline-block;
  padding: $unit * .5 $unit;
  margin: 0 $unit $unit 0;
  font-size: 1.4 * $unit;
  color: $autocomplete-value-color;
  cursor: pointer;
  background-color: $autocomplete-value-background;
  border-radius: 3px;
}

.suggestions {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 0;
  max-height: 50vh;
  margin-top: - $input-margin-bottom;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: $autocomplete-suggestions-background;
  opacity: 0;
  transition-timing-function: $animation-curve-default;
  transition-duration: .2s;
  transition-property: height, box-shadow, opacity, transform;
  transform: translateY(- $unit);
}

.suggestions-active {
  @extend .suggestions;
  height: auto;
  box-shadow: $zdepth-shadow-1;
  opacity: 1;
  transform: translateY(0%);
}

.suggestion {
  padding: $unit;
  cursor: pointer;
}

.suggestion-active {
  @extend .suggestion;
  background-color: $autocomplete-suggestion-active-background;
}