amazeui/widget/menu/src/menu.stack.less

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

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

.am-menu-stack {
  @menu-nav-padding-vertical: 10px;
  @menu-nav-padding-horizontal: 15px;

  @menu-nav-top-link-height: 49px;
  @menu-nav-sub-link-height: 44px;

  @menu-nav-top-bg: #f5f5f5;
  @menu-nav-top-link-color: #333;
  @menu-nav-top-link-hover-bg: #e5e5e5;
  @menu-nav-top-link-hover-color: #222;

  @menu-nav-sub-link-color: #444;
  @menu-nav-sub-link-hover-color: #333;

  @menu-nav-border-color: #dedede;

  @menu-nav-sub-padding-horizontal: 2rem;

  .am-menu-nav {
    border-bottom: 1px solid @menu-nav-border-color;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);

    // item with submenu
    > .am-parent {
      > a {
        transition: all .3s;

        &:after {
          content: @fa-var-angle-right;
          position: absolute;
          right: 1.5rem;
          top: 1.3rem;
          transition: all .15s;
        }
      }
      &.am-open {
        > a {
          &:after {
            transform: rotate(90deg);
          }
        }
      }
    }

    > li > a {
      position: relative;
      color: @menu-nav-top-link-color;
      background-color: @menu-nav-top-bg;
      border-top: 1px solid @menu-nav-border-color;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
      height: @menu-nav-top-link-height;
      line-height: @menu-nav-top-link-height;
      text-indent: 10px;
      padding: 0;
    }

    > .am-open > a,
    > li > a:hover,
    > li > a:focus {
      background-color: @menu-nav-top-link-hover-bg;
      color: @menu-nav-top-link-hover-color;
      outline: none;
    }
  }

  .am-menu-sub {
    padding: 0;
    font-size: 1.4rem;
    border-top: 1px solid @menu-nav-border-color;

    a {
      border-bottom: 1px solid @menu-nav-border-color;
      padding-left: @menu-nav-sub-padding-horizontal;
      color: @menu-nav-sub-link-color;

      &:hover {
        color: @menu-nav-sub-link-hover-color;
      }
    }

    li:last-child a {
      border-bottom: none;
    }

    & > li {
      & > a {
        height: @menu-nav-sub-link-height;
        line-height: @menu-nav-sub-link-height;
        text-indent: 15px;
        padding: 0;
      }
    }
  }

  .hook-am-menu-stack;

  @media @medium-up {
    .am-menu-nav {
      background-color: @menu-nav-top-bg;

      > li {
        float: left;
        width: auto;
        clear: none !important;
        display: inline-block;

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

        &.am-parent {
          > a {
            &:after {
              position: static;
              content: @fa-var-angle-down;
            }
          }
          &.am-open {
            a {
              border-bottom: none;
              &:after {
                transform: rotateX(-180deg);
              }
            }
            .am-menu-sub {
              background-color: @menu-nav-top-link-hover-bg;
            }
          }
        }
      }
    }

    .am-menu-sub {
      position: absolute;
      left: 0;
      right: 0;
      background-color: #ddd;
      border-top: none;

      li {
        width: auto;
        float: left;
        clear: none;
      }
    }
  }
}

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