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

Virtual selector component for react.js

.selector-container {
  font-size: @font-size-base;
  position: relative;
  display: inline-block;
  line-height: @line-height-base;
  color: @text-color;
}

.selector-selection {
  border: 1px solid transparent;
  background-color: #fff;
  border-top-left-radius: @border-radius-base;
  border-top-right-radius: @border-radius-base;
  border-bottom-left-radius: @border-radius-base;
  border-bottom-right-radius: @border-radius-base;
  &:after {
    content: '';
    border-color: @dropdown-caret-color transparent transparent transparent;
    border-style: solid;
    border-width: @caret-width-base @caret-width-base 0 @caret-width-base;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -2px;
  }
}

// === 打开之后的样式
.selector-opened {
  z-index: 1000000;
  .selector-selection {
    box-shadow: @form-control-focus-box-shadow;
    transition: @form-control-transition;
    &:after {
      border-color: transparent transparent @dropdown-caret-color transparent;
      border-width: 0px @caret-width-base @caret-width-base @caret-width-base;
    }
  }
}

.selector-renderer {
  margin: 0 35px 0 0;
  padding: 0;
}

.selector-choice {
  list-style: none;
  display: inline-block;
  cursor: pointer;
}

.selector-choice-remove {
  margin-right: 5px;
  cursor: pointer;
}

.selector-clearer {
  height: 16px;
  line-height: 1;
  position: absolute;
  top: 50%;
  margin-top: -8px;
  right: 22px;
  cursor: pointer;
}

.group-title {
  padding: 6px 12px;
  display: block;
  font-weight: bold;
}

.group-option {
  list-style: none;
  padding-left: 0;
}

.selector-option {
  list-style: none;
  padding: 6px 12px;
  display: block;
  cursor: pointer;
  &.option-selected,
  &:hover:not(.option-disabled) {
    color: #fff;
    background-color: @option-hover-bg-base;
  }
  &.option-disabled {
    color: @input-bg-disabled;
    cursor: @cursor-disabled;
  }
}

.selector-filter {
  padding: 6px 12px;
  background-color: #fff;
  background-image: none;
  border: 1px transparent solid;
  display: block;
  width: 100%;
  font-size: 14px;
  line-height: @line-height-base;
  border-radius: @border-radius-base;
  box-sizing: border-box;
}

.selector-placeholder {
  cursor: pointer;
}

.selector-dropdown.selector-dropdown-up {
  border-top-left-radius: @border-radius-base;
  border-top-right-radius: @border-radius-base;
}

.selector-dropdown.selector-dropdown-down {
  border-bottom-left-radius: @border-radius-base;
  border-bottom-right-radius: @border-radius-base;
}

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

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


.selector-default {
  .selector-theme-variant(@state-color-default, @input-border, @input-border-focus, @input-bg-disabled);
}

.selector-warning {
  .selector-theme-variant(@state-warning-text; @state-warning-text; @state-warning-text; @state-warning-bg);
}

.selector-danger {
  .selector-theme-variant(@state-danger-text; @state-danger-text; @state-danger-text; @state-danger-bg);
}

.selector-success {
  .selector-theme-variant(@state-success-text; @state-success-text; @state-success-text; @state-success-bg);
}

.selector-sm {
  .selector-sizing(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small; @input-height-small; @mutiple-choice-margin-small);
}

.selector-lg {
  .selector-sizing(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large; @input-height-large; @mutiple-choice-margin-large);
}


.input-group {
  .selector-container {
    .input-group-selector();
  }
  .input-group-addon + .selector-container .selector-selection {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }
}

.has-warning {
  .selector-container {
    .selector-theme-variant(@state-warning-text; @state-warning-text; @state-warning-text; @state-warning-bg);
  }
}

.has-success {
  .selector-container {
    .selector-theme-variant(@state-success-text; @state-success-text; @state-success-text; @state-success-bg);
  }
}

.has-error {
  .selector-container {
    .selector-theme-variant(@state-danger-text; @state-danger-text; @state-danger-text; @state-danger-bg);
  }
}

[class*=col-] {
  > .selector-container {
    width: 100%;
    display: block;
  }
}