selector2/src/stylesheet/components/selector2-mixin.less

Virtual selector component for react.js

.selector-theme-variant (@text-color; @closed-color; @opened-color; @bg-color) {
  color: @text-color;

  .selector-filter,
  .selector-selection,
  &.selector-dropdown {
    border-color: @closed-color;
  }

  .selector-selection:after {
    border-color: @text-color transparent transparent transparent;
  }

  &.selector-opened .selector-selection:after {
    border-color: transparent transparent @text-color transparent;
  }

  .option-selected,
  .selector-option:hover:not(.option-disabled),
  .selector-multiple .selector-choice {
    color: @text-color;
    background-color: @bg-color;
  }

  &.selector-opened .selector-selection {
    border-color: @opened-color;
    box-shadow: @form-control-default-box-shadow, 0 0 8px rgba(red(@opened-color), green(@opened-color), blue(@opened-color), 0.6);
  }
}




.selector-sizing (@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius; @min-height; @choice-margin) {
  .selector-selection {
    border-radius: @border-radius;
  }

  &.selector-opened .selector-selection {
    border-radius: 0;
  }

  .selector-single {
    font-size: @font-size;
    line-height: @line-height;
    padding: @padding-vertical @padding-horizontal;
  }

  &.selector-dropdown-up .selector-selection {
    border-bottom-left-radius: @border-radius;
    border-bottom-right-radius: @border-radius;
  }

  &.selector-dropdown-down .selector-selection {
    border-top-left-radius: @border-radius;
    border-top-right-radius: @border-radius;
  }

  .selector-multiple {
    min-height: @min-height;
    padding-bottom: @choice-margin;
    .selector-choice {
      font-size: @font-size;
      line-height: @line-height;
      margin-top: @choice-margin;
      margin-left: @choice-margin;
    }
    .selector-loading,
    .selector-placeholder {
      padding: 0;
      font-size: @font-size;
      margin-top: @choice-margin;
      margin-left: @choice-margin;
      line-height: @line-height;
    }
  }
}


.input-group-selector () {
  width: 100%;
  display: block;

  &:first-child .selector-selection {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  &:last-child .selector-selection {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }

  &.selector-dropdown-up .selector-selection {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  &.selector-dropdown-down .selector-selection {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}