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

A high quality UI Toolkit based on Vue.js

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

.@{vui-cascader} {
  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:@cascader-selection-border-color;
    border-radius:@cascader-selection-border-radius;
    background-color:@cascader-selection-background-color;
    overflow:hidden;
    transition:all @transition-duration @transition-timing-function;

    &-value,
    &-placeholder,
    &-input {
      display:block;
      box-sizing:border-box;
      width:100%;
      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;
    }

    &-value {
      color:@cascader-selection-font-color;
    }

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

    &-input {
      position:absolute;
      top:0;
      left:0;
      color:@cascader-selection-font-color;

      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:@cascader-selection-arrow-color;
      transition:top @transition-duration @transition-timing-function, right @transition-duration @transition-timing-function;

      &:before,
      &:after {
        content:"";
        top:0;
        position:absolute;
        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;
      color:@cascader-selection-btn-clear-color;
      box-sizing:border-box;
      transition:top @transition-duration @transition-timing-function, right @transition-duration @transition-timing-function, color @transition-duration @transition-timing-function;

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

  &-small &-selection {
    border-width:0;
    height:@cascader-selection-size-sm;

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

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

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

    &-btn-clear {
      top:(@cascader-selection-size-sm - @cascader-selection-btn-clear-size-sm) / 2;
      right:@cascader-selection-padding-sm;
      font-size:@cascader-selection-btn-clear-size-sm;
    }
  }
  &-small&-bordered &-selection {
    border-width:1px;

    &-value,
    &-placeholder,
    &-input {
      height:@cascader-selection-size-sm - 2px;
      line-height:@cascader-selection-size-sm - 2px;
    }

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

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

  &-medium &-selection {
    border-width:0;
    height:@cascader-selection-size-md;

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

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

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

    &-btn-clear {
      top:(@cascader-selection-size-md - @cascader-selection-btn-clear-size-md) / 2;
      right:@cascader-selection-padding-md;
      font-size:@cascader-selection-btn-clear-size-md;
    }
  }
  &-medium&-bordered &-selection {
    border-width:1px;

    &-value,
    &-placeholder,
    &-input {
      height:@cascader-selection-size-md - 2px;
      line-height:@cascader-selection-size-md - 2px;
    }

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

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

  &-large &-selection {
    border-width:0;
    height:@cascader-selection-size-lg;

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

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

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

    &-btn-clear {
      top:(@cascader-selection-size-lg - @cascader-selection-btn-clear-size-lg) / 2;
      right:@cascader-selection-padding-lg;
      font-size:@cascader-selection-btn-clear-size-lg;
    }
  }
  &-bordered&-large &-selection {
    border-width:1px;

    &-value,
    &-placeholder,
    &-input {
      height:@cascader-selection-size-lg - 2px;
      line-height:@cascader-selection-size-lg - 2px;
    }

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

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

  &-hovered {
    z-index:1;
  }
  &-hovered &-selection {
    border-color:@cascader-selection-hover-border-color;
  }

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

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

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

  &-disabled {

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

    &-value {
      color:@cascader-selection-disabled-font-color;
    }
  }

  &-dropdown {
    position:absolute;
    top:0;
    left:0;
    display:block;
    box-sizing:border-box;
    max-height:@cascader-dropdown-max-height;
    border-radius:@cascader-dropdown-border-radius;
    background-color:@cascader-dropdown-background-color;
    box-shadow:@cascader-dropdown-box-shadow;
    margin:4px 0;
    overflow:auto;

    &[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-list {
    display:flex;
    flex-flow:row nowrap;
    justify-content:flex-start;
    align-items:stretch;
  }
  &-menu-list &-menu {
    min-width:@cascader-menu-min-width;
  }

  &-menu {
    display:block;
    max-height:@cascader-menu-max-height;
    padding:4px 0;
    overflow:auto;
    vertical-align:top;

    & + & {
      border-left:1px solid @cascader-menu-border-color;
    }

    &-item {
      position:relative;
      cursor:pointer;
      display:flex;
      flex-flow:row nowrap;
      justify-content:flex-start;
      align-items:center;
      height:@cascader-menu-item-height;
      margin:0;
      padding:@cascader-menu-item-padding-horizontal;
      color:@cascader-menu-item-font-color;
      font-size:@cascader-menu-item-font-size;
      text-align:left;
      transition:all @transition-duration @transition-timing-function;

      &-label {
        flex:1;
        display:block;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;

        b {
          color:@error-color;
        }
      }

      &-arrow {
        display:block;
        margin-left:@cascader-menu-item-arrow-margin-left;
        opacity:0.8;
        font-size:@cascader-menu-item-arrow-size;
        transform:scale(0.8);
      }

      &-hovered {
        background-color:@cascader-menu-item-hover-background-color;
        color:@cascader-menu-item-hover-font-color;
      }

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

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

  &-empty {
    position:relative;
    cursor:default;
    padding:@padding-md 0;
  }
}