vui-design/src/style/components/select.less

A high quality UI Toolkit based on Vue.js

@vui-select: ~"@{vui}-select";

.@{vui-select} {
  // base
  position:relative;
  display:inline-block;
  box-sizing:border-box;
  vertical-align:middle;
  line-height:normal;

  &-selection {
    position:relative;
    cursor:pointer;
    display:block;
    box-sizing:border-box;
    width:100%;
    border-style:solid;
    border-color:@select-selection-border-color;
    border-radius:@select-selection-border-radius;
    background-color:@select-selection-background-color;
    overflow:hidden;
    transition:all @transition-duration @transition-timing-function;

    &-item-list {
      .clearfix;
    }

    &-item {
      display:flex;
      justify-content:flex-start;
      align-items:center;
      box-sizing:border-box;
      color:@select-selection-font-color;
      transition:height @transition-duration @transition-timing-function, padding @transition-duration @transition-timing-function, font-size @transition-duration @transition-timing-function, line-height @transition-duration @transition-timing-function;

      &-content {
        flex:1;
        display:block;
        box-sizing:border-box;

        .writeEllipsis;
      }

      &-btn-deselect {
        cursor:pointer;
        display:flex;
        justify-content:center;
        align-items:center;
        box-sizing:border-box;
        height:100%;
        font-size:12px;
        opacity:0.45;
        transition:all @transition-duration @transition-timing-function;

        &:hover {
          opacity:1;
        }
      }
    }

    &-placeholder,
    &-input {
      display:block;
      box-sizing:border-box;
      text-align:left;
      transition:height @transition-duration @transition-timing-function, padding @transition-duration @transition-timing-function, font-size @transition-duration @transition-timing-function, line-height @transition-duration @transition-timing-function;

      .writeEllipsis;
    }

    &-placeholder {
      color:@select-selection-placeholder-font-color;
    }

    &-input {
      color:@select-selection-font-color;

      pre {
        display:block;
        width:100%;
        height:100%;
        text-align:left;
        opacity:0;
      }

      input {
        position:absolute;
        top:0;
        left:0;
        cursor:inherit;
        display:block;
        box-sizing:border-box;
        width:100%;
        height:100%;
        border:none;
        background-color:transparent;
        padding:inherit;
        color:inherit;
        font-size:inherit;
        font-family:inherit;
        text-align:left;
      }
    }

    &-arrow {
      position:absolute;
      cursor:inherit;
      display:block;
      box-sizing:border-box;
      height:2px;
      color:@select-selection-arrow-color;
      transition:top @transition-duration @transition-timing-function, right @transition-duration @transition-timing-function;

      &:before,
      &:after {
        content:"";
        position:absolute;
        top:0;
        height:2px;
        background-color:currentColor;
        transform-origin:center center;
        transition:background-color @transition-duration @transition-timing-function, transform @transition-duration @transition-timing-function;
      }

      &:before {
        left:0;
        transform:rotate(45deg) scaleY(0.5);
      }

      &:after {
        right:0;
        transform:rotate(-45deg) scaleY(0.5);
      }
    }

    &-btn-clear {
      position:absolute;
      cursor:pointer;
      display:flex;
      justify-content:center;
      align-items:center;
      box-sizing:border-box;
      color:@select-selection-btn-clear-color;
      transition:top @transition-duration @transition-timing-function, right @transition-duration @transition-timing-function, color @transition-duration @transition-timing-function;

      &:hover {
        color:@select-selection-btn-clear-hover-color;
      }
    }
  }

  // single
  &-single {
    width:auto;
  }

  &-single &-selection {
    border-width:0;

    &-item {
      width:100%;
    }

    &-placeholder {
      width:100%;
    }

    &-input {
      position:absolute;
      top:0;
      left:0;
      width:100%;
    }
  }
  &-single&-bordered &-selection {
    border-width:1px;
  }

  &-single&-small &-selection {
    height:@select-selection-size-sm;

    &-item,
    &-placeholder,
    &-input {
      height:@select-selection-size-sm;
      padding:0 @select-selection-padding-sm * 2 + @select-selection-btn-clear-size-sm 0 @select-selection-padding-sm;
      font-size:@select-selection-font-size-sm;
      line-height:@select-selection-size-sm;
    }

    &-arrow {
      top:(@select-selection-size-sm - 2px) / 2;
      right:@select-selection-padding-sm + (@select-selection-btn-clear-size-sm - 10px) / 2;
      width:10px;

      &:before,
      &:after {
        width:6px;
      }
    }

    &-btn-clear {
      top:(@select-selection-size-sm - @select-selection-btn-clear-size-sm) / 2;
      right:@select-selection-padding-sm;
      font-size:@select-selection-btn-clear-size-sm;
    }
  }
  &-single&-small&-bordered &-selection {
    &-item,
    &-placeholder,
    &-input {
      height:@select-selection-size-sm - 2px;
      line-height:@select-selection-size-sm - 2px;
    }

    &-arrow {
      top:(@select-selection-size-sm - 2px - 2px) / 2;
    }

    &-btn-clear {
      top:(@select-selection-size-sm - 2px - @select-selection-btn-clear-size-sm) / 2;
    }
  }

  &-single&-medium &-selection {
    height:@select-selection-size-md;

    &-item,
    &-placeholder,
    &-input {
      height:@select-selection-size-md;
      padding:0 @select-selection-padding-md * 2 + @select-selection-btn-clear-size-md 0 @select-selection-padding-md;
      font-size:@select-selection-font-size-md;
      line-height:@select-selection-size-md;
    }

    &-arrow {
      top:(@select-selection-size-md - 2px) / 2;
      right:@select-selection-padding-md + (@select-selection-btn-clear-size-md - 12px) / 2;
      width:12px;

      &:before,
      &:after {
        width:7px;
      }
    }

    &-btn-clear {
      top:(@select-selection-size-md - @select-selection-btn-clear-size-md) / 2;
      right:@select-selection-padding-md;
      font-size:@select-selection-btn-clear-size-md;
    }
  }
  &-single&-medium&-bordered &-selection {
    &-item,
    &-placeholder,
    &-input {
      height:@select-selection-size-md - 2px;
      line-height:@select-selection-size-md - 2px;
    }

    &-arrow {
      top:(@select-selection-size-md - 2px - 2px) / 2;
    }

    &-btn-clear {
      top:(@select-selection-size-md - 2px - @select-selection-btn-clear-size-md) / 2;
    }
  }

  &-single&-large &-selection {
    height:@select-selection-size-lg;

    &-item,
    &-placeholder,
    &-input {
      height:@select-selection-size-lg;
      padding:0 @select-selection-padding-lg * 2 + @select-selection-btn-clear-size-lg 0 @select-selection-padding-lg;
      font-size:@select-selection-font-size-lg;
      line-height:@select-selection-size-lg;
    }

    &-arrow {
      top:(@select-selection-size-lg - 2px) / 2;
      right:@select-selection-padding-lg + (@select-selection-btn-clear-size-lg - 14px) / 2;
      width:14px;

      &:before,
      &:after {
        width:8px;
      }
    }

    &-btn-clear {
      top:(@select-selection-size-lg - @select-selection-btn-clear-size-lg) / 2;
      right:@select-selection-padding-lg;
      font-size:@select-selection-btn-clear-size-lg;
    }
  }
  &-single&-large&-bordered &-selection {
    &-item,
    &-placeholder,
    &-input {
      height:@select-selection-size-lg - 2px;
      line-height:@select-selection-size-lg - 2px;
    }

    &-arrow {
      top:(@select-selection-size-lg - 2px - 2px) / 2;
    }

    &-btn-clear {
      top:(@select-selection-size-lg - 2px - @select-selection-btn-clear-size-lg) / 2;
    }
  }

  // multiple
  &-multiple {
    width:100%;
  }

  &-multiple &-selection {
    border-width:0;

    &-item {
      float:left;
      border:1px solid tint(@select-selection-border-color, 50%);
      border-radius:@select-selection-border-radius;
      background-color:@select-selection-disabled-background-color;
    }

    &-placeholder {
      position:absolute;
      top:0;
      left:0;
      width:100%;
    }

    &-input {
      position:relative;
      float:left;
    }
  }
  &-multiple&-bordered &-selection {
    border-width:1px;
  }

  &-multiple&-small &-selection {
    min-height:@select-selection-size-sm;
    padding:2px;

    &-item {
      max-width:calc(100% - 2px);
      height:@select-selection-size-sm - 4px - 2px;
      margin:1px;
      padding:0 4px;
      font-size:@select-selection-font-size-sm;
      line-height:@select-selection-size-sm - 4px - 2px - 2px;

      &-btn-deselect {
        margin-left:4px;
        transform:scale(0.65);
      }
    }

    &-placeholder {
      height:@select-selection-size-sm;
      padding:0 @select-selection-padding-sm;
      font-size:@select-selection-font-size-sm;
      line-height:@select-selection-size-sm;
    }

    &-input {
      min-width:6px;
      max-width:calc(100% - (@select-selection-padding-sm - 2px) - 1px);
      height:@select-selection-size-sm - 4px - 2px;
      margin:1px;
      margin-left:@select-selection-padding-sm - 2px;
      font-size:@select-selection-font-size-sm;
    }

    &-btn-clear {
      top:(@select-selection-size-sm - @select-selection-btn-clear-size-sm) / 2;
      right:@select-selection-padding-sm;
      font-size:@select-selection-btn-clear-size-sm;
    }
  }
  &-multiple&-small &-selection-item + &-selection-input {
    max-width:calc(100% - 2px);
    margin-left:1px;
  }
  &-multiple&-small&-bordered &-selection {
    padding:1px;

    &-item {
      height:@select-selection-size-sm - 2px - 2px - 2px;
      line-height:@select-selection-size-sm - 2px - 2px - 2px - 2px;
    }

    &-placeholder {
      height:@select-selection-size-sm - 2px;
      line-height:@select-selection-size-sm - 2px;
    }

    &-input {
      max-width:calc(100% - (@select-selection-padding-sm - 1px) - 1px);
      height:@select-selection-size-sm - 2px - 2px - 2px;
      margin-left:@select-selection-padding-sm - 1px;
    }

    &-btn-clear {
      top:(@select-selection-size-sm - 2px - @select-selection-btn-clear-size-sm) / 2;
    }
  }
  &-multiple&-small&-bordered &-selection-item + &-selection-input {
    max-width:calc(100% - 2px);
    margin-left:1px;
  }

  &-multiple&-medium &-selection {
    min-height:@select-selection-size-md;
    padding:3px;

    &-item {
      max-width:calc(100% - 4px);
      height:@select-selection-size-md - 6px - 4px;
      margin:2px;
      padding:0 6px;
      font-size:@select-selection-font-size-md;
      line-height:@select-selection-size-md - 6px - 4px - 2px;

      &-btn-deselect {
        margin-left:6px;
        transform:scale(0.75);
      }
    }

    &-placeholder {
      height:@select-selection-size-md;
      padding:0 @select-selection-padding-md;
      font-size:@select-selection-font-size-md;
      line-height:@select-selection-size-md;
    }

    &-input {
      min-width:10px;
      max-width:calc(100% - (@select-selection-padding-md - 3px) - 2px);
      height:@select-selection-size-md - 6px - 4px;
      margin:2px;
      margin-left:@select-selection-padding-md - 3px;
      font-size:@select-selection-font-size-md;
    }

    &-btn-clear {
      top:(@select-selection-size-md - @select-selection-btn-clear-size-md) / 2;
      right:@select-selection-padding-md;
      font-size:@select-selection-btn-clear-size-md;
    }
  }
  &-multiple&-medium &-selection-item + &-selection-input {
    max-width:calc(100% - 4px);
    margin-left:2px;
  }
  &-multiple&-medium&-bordered &-selection {
    padding:2px;

    &-item {
      height:@select-selection-size-md - 2px - 4px - 4px;
      line-height:@select-selection-size-md - 2px - 4px - 4px - 2px;
    }

    &-placeholder {
      height:@select-selection-size-md - 2px;
      line-height:@select-selection-size-md - 2px;
    }

    &-input {
      max-width:calc(100% - (@select-selection-padding-md - 2px) - 2px);
      height:@select-selection-size-md - 2px - 4px - 4px;
      margin-left:@select-selection-padding-md - 2px;
    }

    &-btn-clear {
      top:(@select-selection-size-md - 2px - @select-selection-btn-clear-size-md) / 2;
    }
  }
  &-multiple&-medium&-bordered &-selection-item + &-selection-input {
    max-width:calc(100% - 4px);
    margin-left:2px;
  }

  &-multiple&-large &-selection {
    min-height:@select-selection-size-lg;
    padding:4px;

    &-item {
      max-width:calc(100% - 6px);
      height:@select-selection-size-lg - 8px - 6px;
      margin:3px;
      padding:0 8px;
      font-size:@select-selection-font-size-lg;
      line-height:@select-selection-size-lg - 8px - 6px - 2px;

      &-btn-deselect {
        margin-left:8px;
        transform:scale(0.85);
      }
    }

    &-placeholder {
      height:@select-selection-size-lg;
      padding:0 @select-selection-padding-lg;
      font-size:@select-selection-font-size-lg;
      line-height:@select-selection-size-lg;
    }

    &-input {
      min-width:14px;
      max-width:calc(100% - (@select-selection-padding-lg - 4px) - 3px);
      height:@select-selection-size-lg - 8px - 6px;
      margin:3px;
      margin-left:@select-selection-padding-lg - 4px;
      font-size:@select-selection-font-size-lg;
    }

    &-btn-clear {
      top:(@select-selection-size-lg - @select-selection-btn-clear-size-lg) / 2;
      right:@select-selection-padding-lg;
      font-size:@select-selection-btn-clear-size-lg;
    }
  }
  &-multiple&-large &-selection-item + &-selection-input {
    max-width:calc(100% - 6px);
    margin-left:3px;
  }
  &-multiple&-large&-bordered &-selection {
    padding:3px;

    &-item {
      height:@select-selection-size-lg - 2px - 6px - 6px;
      line-height:@select-selection-size-lg - 2px - 6px - 6px - 2px;
    }

    &-placeholder {
      height:@select-selection-size-lg - 2px;
      line-height:@select-selection-size-lg - 2px;
    }

    &-input {
      max-width:calc(100% - (@select-selection-padding-lg - 3px) - 3px);
      height:@select-selection-size-lg - 2px - 6px - 6px;
      margin-left:@select-selection-padding-lg - 3px;
    }

    &-btn-clear {
      top:(@select-selection-size-lg - 2px - @select-selection-btn-clear-size-lg) / 2;
    }
  }
  &-multiple&-large&-bordered &-selection-item + &-selection-input {
    max-width:calc(100% - 6px);
    margin-left:3px;
  }

  // status
  &-hovered {
    z-index:1;
  }
  &-hovered &-selection {
    border-color:@select-selection-hover-border-color;

    &-item {
      
    }

    &-arrow {
      &:before {

      }

      &:after {

      }
    }
  }

  &-focused {
    z-index:2;
  }
  &-focused &-selection {
    border-color:@select-selection-hover-border-color;

    &-item {
      
    }

    &-arrow {
      &:before {

      }

      &:after {

      }
    }
  }

  &-actived {
    z-index:2;
  }
  &-actived &-selection {
    border-color:@select-selection-active-border-color;

    &-item {
      
    }

    &-arrow {
      &:before {
        transform:rotate(-45deg) scaleY(0.5);
      }

      &:after {
        transform:rotate(45deg) scaleY(0.5);
      }
    }
  }

  &-disabled {

  }
  &-disabled &-selection {
    cursor:not-allowed;
    border-color:@select-selection-disabled-border-color;
    background-color:@select-selection-disabled-background-color;

    &-item {
      color:@select-selection-disabled-font-color;
    }

    &-arrow {
      &:before {

      }

      &:after {

      }
    }
  }

  // dropdown
  &-dropdown {
    position:absolute;
    top:0;
    left:0;
    display:block;
    box-sizing:border-box;
    border-radius:@select-dropdown-border-radius;
    background-color:@select-dropdown-background-color;
    box-shadow:@select-dropdown-box-shadow;
    margin:4px 0;
    overflow:hidden;

    &[data-placement="top"] {
      transform-origin:bottom center;
    }
    &[data-placement="top-start"] {
      transform-origin:bottom left;
    }
    &[data-placement="top-end"] {
      transform-origin:bottom right;
    }
    &[data-placement="bottom"] {
      transform-origin:top center;
    }
    &[data-placement="bottom-start"] {
      transform-origin:top left;
    }
    &[data-placement="bottom-end"] {
      transform-origin:top right;
    }

    &-scale-enter-active,
    &-scale-leave-active {
      opacity:1;
      transform:scaleY(1);
      transition:opacity @transition-duration @transition-timing-function, transform @transition-duration @transition-timing-function;
    }

    &-scale-enter,
    &-scale-leave-active {
      opacity:0;
      transform:scaleY(0.8);
    }
  }

  // menu
  &-menu {
    &-wrapper {
      display:block;
      max-height:@select-menu-wrapper-max-height;
      padding:4px 0;
      overflow:auto;
    }

    &-item-group {
      display:flex;
      justify-content:flex-start;
      align-items:center;
      box-sizing:border-box;
      height:@select-menu-item-group-height;
      margin:0;
      padding:0 @select-menu-item-group-padding-horizontal;
      color:@select-menu-item-group-font-color;
      font-size:@select-menu-item-group-font-size;
      line-height:@select-menu-item-group-height;

      &&-level-1 {
        padding-left:@select-menu-item-group-padding-horizontal;
      }
      &&-level-2 {
        padding-left:@select-menu-item-group-padding-horizontal * 2;
      }

      &-content {
        flex:1;
        display:block;
        box-sizing:border-box;
        
        .writeEllipsis;
      }
    }

    &-item {
      position:relative;
      cursor:pointer;
      display:flex;
      justify-content:flex-start;
      align-items:center;
      box-sizing:border-box;
      height:@select-menu-item-height;
      margin:0;
      padding:0 @select-menu-item-padding-horizontal;
      color:@select-menu-item-font-color;
      font-size:@select-menu-item-font-size;
      line-height:@select-menu-item-height;
      transition:background-color @transition-duration @transition-timing-function, color @transition-duration @transition-timing-function;

      &&-level-1 {
        padding-left:@select-menu-item-padding-horizontal;
      }
      &&-level-2 {
        padding-left:@select-menu-item-padding-horizontal * 2;
      }

      &-content {
        flex:1;
        display:block;
        box-sizing:border-box;
        
        .writeEllipsis;
      }

      &-icon {
        display:flex;
        justify-content:center;
        align-items:center;
        box-sizing:border-box;
        margin-left:@select-menu-item-icon-margin-left;
        font-size:@select-menu-item-icon-size;

        svg {
          width:1em;
          height:1em;
          fill:currentColor;
        }
      }

      &-actived {
        background-color:@select-menu-item-hover-background-color;
        color:@select-menu-item-hover-font-color;
      }

      &-selected {
        background-color:@select-menu-item-selected-background-color;
        color:@select-menu-item-selected-font-color;
      }

      &-disabled {
        cursor:not-allowed;
        background-color:@select-menu-item-disabled-background-color;
        color:@select-menu-item-disabled-font-color;
      }
    }
  }

  // spin
  &-spin {
    display:flex;
    justify-content:flex-start;
    align-items:center;
    box-sizing:border-box;
    height:@select-menu-item-height;
    margin:4px 0;
    padding:0 @select-menu-item-padding-horizontal;
    color:@select-menu-item-disabled-font-color;
    font-size:@select-menu-item-font-size;

    &-message {
      flex:1;
      display:block;
      box-sizing:border-box;
      margin-left:@margin-xs;

      .writeEllipsis;
    }
  }

  // empty
  &-empty {
    position:relative;
    cursor:default;
    margin:4px 0;
    padding:@padding-md 0;
  }
}