atui/src/styles/dropdowns.less

components built with Vue.js

// Dropdown
// --------------------------------------------------
@prefix-cls-dropdown: e("@{prefix-cls}-dropdown");

@dropdown-bg:                    #fff;
@dropdown-border:                tint(@primary-color, 40%);
@dropdown-fallback-border:       #ccc;
@dropdown-divider-bg:            #d9d9d9;

@dropdown-link-color:            @gray-dark;
@dropdown-link-hover-bg:         tint(@primary-color, 95%);
@dropdown-link-active-bg:        tint(@primary-color, 40%);
@dropdown-link-disabled-color:   @gray-light;

@dropdown-header-color:          @gray-light;
@dropdown-caret-color:           #bfbfbf;

.@{prefix-cls-dropdown}-cont {
  display: inline-block;
  vertical-align: middle;

  .@{prefix-cls}-icon {
    font-size: 12px !important;
  }

  .@{prefix-cls}-icon-down {
    display: inline-block;
    transition: all .3s ease;
  }
}

.hover-trigger:hover {
  .@{prefix-cls-dropdown}-menu {
    display: block;
    margin: 0;
  }
}

.@{prefix-cls-dropdown}-menu-cont {
  display: inline-block;
}
.@{prefix-cls-dropdown}-menu {
  min-width: 100%;
  max-height: 250px;
  overflow-y: auto;
  padding: 0;
  list-style: none;
  text-align: left;
  background-color: @dropdown-bg;
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  background-clip: padding-box;
  border: 1px solid #bfbfbf;
  border-radius: 4px;

  .@{prefix-cls-dropdown}-option, li > a {
    cursor: pointer;
    display: block;
    padding: 0 10px;
    clear: both;
    font-weight: normal;
    font-size: 12px;
    line-height: 27px;
    color: @dropdown-link-color;
    white-space: nowrap;
    user-select: none;

    &:hover, &:focus, &.@{prefix-cls-dropdown}-option-active,&.@{prefix-cls-dropdown}-option-chosen {
      text-decoration: none;
      background-color: @dropdown-link-hover-bg;
    }
  }

  // Active state
  & > .@{prefix-cls-dropdown}-option-disabled {
    &,
      // Nuke hover/focus effects
    &:hover,
    &:focus {
      text-decoration: none;
      background-color: transparent;
      background-image: none; // Remove CSS gradient
      .reset-filter();
      color: @dropdown-link-disabled-color;
      cursor: @cursor-disabled;
    }
  }

  & > .@{prefix-cls-dropdown}-option-disabled {
    &,
      // Nuke hover/focus effects
    &:hover,
    &:focus {
      text-decoration: none;
      background-color: transparent;
      background-image: none; // Remove CSS gradient
      .reset-filter();
      color: @dropdown-link-disabled-color;
      cursor: @cursor-disabled;
    }
  }
}

// Open state for the dropdown
.@{prefix-cls-dropdown}-open {
  .@{prefix-cls}-icon-down {
    transform: rotate(180deg);
  }
}

.@{prefix-cls-dropdown}-divider {
  border-bottom: 1px solid @dropdown-divider-bg;
}