virtual-selector/src/stylesheet/components/virtual-selector-dropdown.less

Virtual selector component for react.js

// Dropdown style.
.selector-container {
  &.selector-dropdown {
    width: auto;
    line-height: 1.42857143;
    margin: 0;
    z-index: 10000;
    position: absolute;
    margin-top: -@border-width;
    box-sizing: border-box;
    border-width: @border-width;
    border-color: @color-default;
    border-style: solid;
    vertical-align: middle;
    background-color: #FFF;
  }
  .selector-results {
    margin: 0;
    height: auto;
    max-height: 200px;
    overflow-y: auto;
    padding-left: 0;
    list-style: none;
  }

  .group-title {
    width: 100%;
    padding: 4px 6px;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    font-weight: bold;
    position: relative;
    &:after {
      content: ' ';
      border-color: #5fbeaa transparent transparent transparent;
      border-style: solid;
      border-width: 4px 4px 0 4px;
      position: absolute;
      top: 50%;
      right: 10px;
      margin-top: -2px;
    }
  }

  .group-option {
    padding-left: 0px;
    text-indent: 15px;
  }  

  .selector-empty,
  .selector-option {
    cursor: pointer;
    padding: 4px 6px;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .selector-option:hover {
    color: #FFF;
    background-color: @color-default;
    &:after,
    &::after {
      color: #FFF
    }
  }

  .option-prepare {
    color: #FFF;
    background-color: @color-default;
  }

  .option-disabled {
    color: #FFF !important;
    background-color: #CCC !important;
  }

  .option-selected {
    &:after,
    &::after {
      position: absolute;
      right: 10px;
      font-weight: bold;
      content: '•';
    }
    &.option-prepare {
      &:after,
      &::after {
        color: #FFF;
      }
    }
  }
  &.selector-dropdown-up {
    border-radius: 2px 2px 0 0;
  }

  &.selector-dropdown-down {
    border-radius: 0 0 2px 2px; 
  }
}