amazeui/widget/menu/src/menu.dropdown2.less

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

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

.am-menu-dropdown2 {
  @menu-toggle-color: #fff;

  @menu-nav-top-link-color: @gray-dark;
  @menu-nav-top-link-active-color: @global-primary;
  @menu-nav-top-link-bg: #f5f5f5;

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

  @menu-nav-top-link-height: 38px;
  @menu-nav-sub-link-height: 35px;

  .am-menu-toggle {
    position: absolute;
    right: 5px;
    top: -47px;
    display: block;
    .square(44px);
    line-height: 44px;
    text-align: center;
    color: @menu-toggle-color;
  }

  .am-menu-nav {
    position: absolute;
    left: 0;
    right: 0;
    background-color: @menu-nav-top-link-bg;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    z-index: @z-index-menu;
    padding-top: 8px;
    padding-bottom: 8px;

    a {
      height: @menu-nav-top-link-height;
      line-height: @menu-nav-top-link-height;
      padding: 0;
      text-align: center;
    }

    & > li {
      // parent links
      > a {
        color: @menu-nav-top-link-color;
      }

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

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

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

            &:after {
              // content: @fa-var-angle-up;
              color: @menu-nav-top-link-active-color;
              transform: rotate(180deg);
            }

            &:before {
              position: absolute;
              top: 100%;
              margin-top: -16px;
              left: 50%;
              margin-left: -12px;
              font-size: 24px;
              content: @fa-var-caret-up;
              color: rgba(0, 0, 0, 0.2);
            }
          }
        }
      }
    }
  }

  .am-menu-sub {
    position: absolute;
    left: 5px;
    right: 5px;
    padding: 8px 0;
    border-radius: 2px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
    background-color: @menu-nav-sub-link-bg;
    z-index: @z-index-menu + 5;

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

  .hook-am-menu-dropdown2;

  @media @medium-up {
    .am-menu-toggle {
      display: none !important;
    }

    .am-menu-nav {
      position: static;
      display: block;

      & > li {
        float: none;
        width: auto;
        display: inline-block;

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

    .am-menu-sub {
      left: auto;
      right: auto;

      & > li {
        float: none;
        width: auto;
      }

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

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