amazeui/widget/menu/src/menu.one.less

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

/**
  * Menu Theme: one
  * Author: one (hzp@yunshipei.com)
  */

.am-menu-one {
  @menu-nav-height: 40px;

  @menu-nav-bg: #f5f5f5;
  @menu-nav-link-color: #7d7d7d;
  @menu-nav-link-active-color: @gray;
  @menu-nav-active-border-color: @one-primary;

  @menu-nav-sub-bg: #fff;
  @menu-nav-sub-link-color: @gray;

  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 10px;
  background-color: @menu-nav-bg;
  box-shadow: 0 2px 10px #d7d7d7;
  height: @menu-nav-height;

  .am-menu-nav-wrap {
    overflow: hidden;
  }

  .am-menu-nav {
    height: @menu-nav-height;
    .clearfix();

    & > li {
      float: left;
      clear: none;
      width: auto;

      & > a {
        display: block;
        height: @menu-nav-height;
        line-height: @menu-nav-height;
        padding: 0 10px;
        color: @menu-nav-link-color;
      }
    }

    .am-active {
      & > a {
        color: @menu-nav-link-active-color;
        border-bottom: 2px solid @menu-nav-active-border-color;
      }
    }

    .am-open {
      & > a {
        position: relative;

        &:before {
          position: absolute;
          top: 100%;
          left: 50%;
          margin-top: -6px;
          margin-left: -6px;
          content: '';
          .caret-up(6px, @menu-nav-active-border-color);
        }
      }
    }
  }

  .am-menu-nav-sub-wrap {
    position: relative;
    z-index: @z-index-menu;
  }

  .am-menu-sub {
    position: absolute;
    top: 1px;
    left: -5px;
    right: -5px;
    background-color: @menu-nav-sub-bg;
    border-radius: 2px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);

    li {
      text-align: center;
    }

    a {
      padding: 0;
      color: @menu-nav-sub-link-color;
      line-height: @menu-nav-height;
    }
  }

  .hook-am-menu-one;
}

.hook-am-menu-one() {}