amazeui/widget/menu/src/menu.default.less

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

/**
  * Menu Theme: default
  * Author: Minwe (minwe@yunshipei.com)
  */

.am-menu-default {
  @menu-nav-link-height: 36px;
  @menu-nav-link-color: @global-primary;
  @menu-nav-top-active-color: darken(@global-primary, 15%);
  @menu-nav-sub-bg: #f1f1f1;
  @menu-nav-sub-border-radius: @global-radius;
  @menu-nav-sub-link-color: @gray;

  .am-menu-nav {
    padding-top: 8px;
    padding-bottom: 8px;

    a {
      text-align: center;
      height: @menu-nav-link-height;
      line-height: @menu-nav-link-height;
      .text-overflow(block);
      padding: 0;
      color: @menu-nav-link-color;
    }

    > .am-parent {
      > a {
        position: relative;
        transition: .15s;

        &:after {
          content: @fa-var-angle-down;
          margin-left: 5px;
          transition: .15s;
        }

        &:before {
          position: absolute;
          top: 100%;
          margin-top: -16px;
          left: 50%;
          margin-left: -12px;
          content: @fa-var-caret-up;
          display: none;
          color: @menu-nav-sub-bg;
          font-size: 24px;
        }
      }

      &.am-open {
        > a {
          color: @menu-nav-top-active-color;

          &:before {
            display: block;
          }

          &:after {
            transform: rotate(-180deg);
            // .rotateX(-180deg)
          }
        }
      }
    }
  }

  .am-menu-sub {
    position: absolute;
    left: 5px;
    right: 5px;
    background-color: @menu-nav-sub-bg;
    border-radius: @menu-nav-sub-border-radius;

    padding-top: 8px;
    padding-bottom: 8px;

    > li > a {
      color: @menu-nav-sub-link-color;
    }
  }

  .hook-am-menu-default;

  @media @medium-up {
    .am-menu-nav {
      li {
        width: auto;
        float: left;
        clear: none;
        display: inline;
      }

      a {
        padding-left: 1.5rem;
        padding-right: .5rem;
      }
    }
  }
}

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