@ustack/uskin/css/components/dropdown.less

A graceful framework which provides developers another chance to build an amazing site.

// Mixins

// Variables
@dropdown_zindex: 1001;
@dropdown_min_width: 135px;
@dropdown_border_radius: 2px;
@dropdown_v_padding: 10px;
@dropdown_h_padding: 0;
@dropdown_header_bg_color: @color_info;
@dropdown_normal_bg_color: @color_info_200;
@dropdown_danger_bg_color: @color_delete_200;
@dropdown_color: @color_font;
@dropdown_header_color: @color_font_700;
@dropdown_border_color: @color_grey;
@dropdown_border_block_color: @color_grey_600;
@dropdown_list_icon_color: @color_grey_700;
@dropdown_bg_color: #fff;
@dropdown_disabled_font_color: @color_font_400;

.dropdown {
  position: absolute;
  padding: @dropdown_v_padding @dropdown_h_padding;
  z-index: @dropdown_zindex;
  min-width: @dropdown_min_width;
  border: 1px solid @dropdown_border_color;
  border-radius: @dropdown_border_radius;
  background-color: @dropdown_bg_color;
  box-shadow: 0 2px 8px 2px rgba(0,0,0,0.12);
  user-select: none;

  &::before {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background-color: @dropdown_header_bg_color;
    content: "";
  }

  ul {
    position: relative;

    &:first-child {
      &:before {
        display: none;
      }
    }

    &:before {
      display: block;
      margin: 0 16px 5px;
      height: 5px;
      border-bottom: 1px solid @dropdown_border_block_color;
      content: "";
    }

    li {
      &.dropdown-header {
        height: 20px;
        line-height: 20px;
        font-weight: normal;
        padding-left: 16px;
        color: @dropdown_header_color;

        &:hover,
        &:active,
        &:focus {
          background-color: transparent;
        }
      }

      &:hover,
      &:active,
      &:focus {
        background-color: @dropdown_normal_bg_color;
        > .dropdown-sub {
          display: block;
        }
      }

      &.disabled {
        color: @dropdown_disabled_font_color;
        background-color: transparent !important;
        cursor: not-allowed;
      }

      &.has-submenu {
        > a::after {
          display: block;
          content: "";
          float: right;
          width: 0;
          height: 0;
          border-color: transparent;
          border-style: solid;
          border-width: 5px 0 5px 5px;
          border-left-color: @dropdown_list_icon_color;
          margin-top: 10px;
          margin-right: -10px;
        }
      }

      a {
        display: block;
        padding: 0 20px;
        height: 30px;
        line-height: 30px;
        color: @dropdown_color;
        cursor: pointer;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      &.danger a {
        &:hover,
        &:active,
        &:focus {
          background-color: @dropdown_danger_bg_color;
        }
      }

      &.disabled a {
        color: @dropdown_disabled_font_color;
        background-color: transparent;
        cursor: not-allowed;
      }

      > .dropdown-sub {
        left: 100%;
        top: 0;
        position: absolute;
        display: none;
        &::before {
          display: none;
        }
      }
    }
  }
}