react-toolbox/components/dropdown/style.scss

@import "../base";
@import "./config";
@import "../input/config";

.root {
  position: relative;
  width: inherit;
  margin-bottom: $dropdown-offset;
  color: $color-text;
  cursor: pointer;
  border-bottom: 1px solid $color-divider;
  &:not(.active) {
    > .values {
      max-height: 0;
      visibility: hidden;
    }
  }
  &.active {
    > .label, > .value {
      opacity: .5;
    }
    > .values {
      max-height: $dropdown-overflow-max-height;
      visibility: visible;
      box-shadow: $zdepth-shadow-1;
    }
  }
  &.disabled {
    color: $color-text-secondary;
    pointer-events: none;
    cursor: normal;
    border-bottom-style: dotted;
    > .value:after {
      transform: scale(0);
    }
  }
  &:not(.up) > .values {
    top: 0;
    bottom: auto;
  }
  &.up > .values {
    top: auto;
    bottom: 0;
  }
}

.label {
  font-size: $font-size-tiny;
  color: $color-text-secondary;
}

.values {
  position: absolute;
  z-index: 2;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  list-style: none;
  background-color: $dropdown-color-white;
  border-radius: $dropdown-value-border-radius;
  transition-timing-function: $animation-curve-default;
  transition-duration: $animation-duration;
  transition-property: max-height, box-shadow;
  > * {
    position: relative;
    padding: $unit;
    overflow: hidden;
    cursor: pointer;
    &:hover {
      background-color: $dropdown-value-hover-background;
    }
    &.selected {
      color: $dropdown-color-primary;
    }
  }
}

.value {
  display: block;
  > span {
    display: inline-block;
    height: $input-field-height;
    font-size: $input-field-font-size;
    line-height: $input-field-height;
  }
  > :not(span) {
    margin: ($dropdown-offset / 2) 0;
  }
  &:after {
    $size: ($input-field-height / 7);
    $border: $size solid transparent;
    position: absolute;
    right: ($dropdown-offset / 2);
    bottom: $dropdown-offset;
    width: 0;
    height: 0;
    content: "";
    border-top: $size solid $color-divider;
    border-right: $border;
    border-left: $border;
    transition: transform $animation-duration $animation-curve-default;
  }
}