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

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

@menu_font_title_color: @color_font_400;
@menu_font_item_color: @color_font_800;
@menu_font_selected_color: @color_info;

@menu_bg_color: #fff;
@menu_line_color: @color_grey_600;

.menu {
  background-color: @menu_bg_color;
  width: 200px;
  height: inherit;
  overflow-y: auto;
  overflow-x: hidden;
  user-select: none;
  border-right: 1px solid @menu_line_color;

  > li {
    &:first-child, &:first-child > div {
      > h6 + ul {
        margin-top: 0;
      }
      > ul {
        margin-top: 20px;
      }
    }

    &, & > div {
      h6 {
        padding: 16px 20px 8px;
        color: @menu_font_title_color;
        font-weight: normal;
        &.menu-title-toggle {
          cursor: pointer;
          .icon-arrow-up {
            float: right;
            transition: all .3s ease;
            &.rotate {
              transform: rotate(180deg);
            }
          }
        }
      }
      ul {
        &.menu-item-toggle {
          transition: height .3s ease;
          overflow: hidden;
        }

        > li {
          display: block;
          padding-left: 20px;
          height: 40px;
          line-height: 40px;
          font-size: 13px;
          color: @menu_font_item_color;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          cursor: pointer;

          &:hover {
            color: @menu_font_selected_color;
          }
          &.menu-item-selected {
            height: 38px;
            line-height: 38px;
            color: @menu_font_selected_color;
            background-color: @menu_bg_color;
            border-top: 1px solid @menu_line_color;
            border-bottom: 1px solid @menu_line_color;
            cursor: default;

            &::after {
              content: "";
              width: 1px;
              height: 38px;
              background-color: @menu_bg_color;
              float: right;
              margin-right: -1px;
            }
          }
          .glyphicon {
            margin-right: 12px;
            margin-top: -1px;
            width: 16px;
            height: 16px;
            font-size: 16px;
          }
          span {
            vertical-align: middle;
          }
        }
      }
    }
  }
}