atui/src/styles/cascader.less

components built with Vue.js

// Cascader
// --------------------------------------------------
@prefix-cls-cascader: e("@{prefix-cls}-cascader");

.@{prefix-cls-cascader} {
  position: relative;
  display: inline-block;
}
.@{prefix-cls-cascader}-picker {
  position: relative;
  display: inline-block;
  cursor: pointer;
  vertical-align: middle;
}
.@{prefix-cls-cascader}-menus {
  font-size: 12px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.17);
  white-space: nowrap;
}
.@{prefix-cls-cascader}-menu {
  display: inline-block;
  vertical-align: top;
  min-width: 111px;
  height: 180px;
  list-style: none;
  margin: 0;
  padding: 0;
  border-right: 1px solid #d9d9d9;
  overflow: auto;
}

.@{prefix-cls-cascader}-menu:last-child {
  border-right-color: transparent;
  margin-right: -1px
}

.@{prefix-cls-cascader}-menu-item {
  padding: 7px 16px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all .3s ease;
  &:hover, &:focus {
    background-color: tint(@primary-color, 95%);
  }
  &.@{prefix-cls-cascader}-selected {
    &,
    &:hover,
    &:focus {
      outline: 0;
      color: #fff;
      background-color: tint(@primary-color, 40%);
    }
  }

  &.@{prefix-cls-cascader}-disabled {
    cursor: not-allowed;
    color: #ccc;
  }
  &.@{prefix-cls-cascader}-disabled:hover {
    background: transparent;
  }
}

.@{prefix-cls-cascader}-menu-item-expand {
    position: relative;
}

.@{prefix-cls-cascader}-menu-item-expand:after {
    content: '\E600';
    font-family: 'anticon';
    display: inline-block;
    font-size: 12px;
    transform: scale(.66666667) rotate(0deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
    zoom: 1;
    color: #999;
    position: absolute;
    right: 15px;
}