element-ui/packages/theme-default/src/cascader.css

A Component Library for Vue.js.

@charset "UTF-8";
@import "./input.css";
@import "./common/var.css";

@component-namespace el {

  @b cascader {
    display: inline-block;
    position: relative;

    .el-input,
    .el-input__inner {
      cursor: pointer;
    }

    .el-input__icon {
      transition: none;
    }

    .el-icon-caret-bottom {
      transition: transform .3s;

      @when reverse {
        transform: rotateZ(180deg);
      }
    }

    .el-icon-circle-close {
      z-index: calc(var(--index-normal) + 1);
    }

    @e label {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      line-height: 36px;
      padding: 0 25px 0 10px;
      color: var(--input-color);
      width: 100%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      box-sizing: border-box;
      cursor: pointer;
      font-size: 14px;
      text-align: left;
      span {
        color: var(--color-light-silver);
      }
    }

    @m large {
      font-size: var(--input-large-font-size);

      .el-cascader__label {
        line-height: calc(var(--input-large-height) - 2);
      }
    }
    @m small {
      font-size: var(--input-small-font-size);

      .el-cascader__label {
        line-height: calc(var(--input-small-height) - 2);
      }
    }
    @when disabled {
      .el-cascader__label {
        z-index: calc(var(--index-normal) + 1);
        color: var(--disabled-color-base);
      }
    }
  }

  @b cascader-menus {
    white-space: nowrap;
    background: #fff;
    position: absolute;
    margin: 5px 0;
    z-index: calc(var(--index-normal) + 1);
    border: var(--select-dropdown-border);
    border-radius: var(--border-radius-small);
    box-shadow: var(--select-dropdown-shadow);
  }

  @b cascader-menu {
    display: inline-block;
    vertical-align: top;
    height: 204px;
    overflow: auto;
    border-right: var(--select-dropdown-border);
    background-color: var(--select-dropdown-background);
    box-sizing: border-box;
    margin: 0;
    padding: 6px 0;
    min-width: 160px;

    &:last-child {
      border-right: 0;
    }

    @e item {
      font-size: var(--select-font-size);
      padding: 8px 30px 8px 10px;
      position: relative;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--select-option-color);
      height: var(--select-option-height);
      line-height: 1.5;
      box-sizing: border-box;
      cursor: pointer;

      @e keyword {
        font-weight: bold;
      }
      
      @m extensible {
        &:after {
          font-family: 'element-icons';
          content: "\e606";
          font-size: 12px;
          transform: scale(0.8);
          color: rgb(191, 203, 217);
          position: absolute;
          right: 10px;
          margin-top: 1px;
        }
      }

      @when disabled {
        color: var(--select-option-disabled-color);
        background-color: var(--select-option-disabled-background);
        cursor: not-allowed;

        &:hover {
          background-color: var(--color-white);
        }
      }

      @when active {
        color: var(--color-white);
        background-color: var(--select-option-selected);

        &:hover {
          background-color: var(--select-option-selected-hover);
        }
      }

      &:hover {
        background-color: var(--select-option-hover-background);
      }

      &.selected {
        color: var(--color-white);
        background-color: var(--select-option-selected);

        &.hover {
          background-color: var(--select-option-selected-hover);
        }
      }
    }

    @m flexible {
      height: auto;
      max-height: 180px;
      overflow: auto;

      .el-cascader-menu__item {
        overflow: visible;
      }
    }
  }
}