amazeui/widget/menu/src/menu.dropdown1.less

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

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

.am-menu-dropdown1 {
  @menu-toggle-color: #fff;
  @menu-nav-link-height: 49px;
  @menu-nav-top-link-color: #fff;
  @menu-nav-top-link-bg: @global-primary;
  @menu-nav-top-link-active-color: #fff;
  @menu-nav-top-link-active-bg: darken(@global-primary, 5%);
  @menu-nav-sub-link-height: 44px;
  @menu-nav-sub-link-color: #555;
  @menu-nav-sub-link-icon-color: #aaa;
  @menu-nav-sub-link-bg: #fff;

  @menu-nav-border-color: darken(@menu-nav-top-link-bg, 8%);

  position: relative;

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

  a {
    transition: all .4s;
    .text-overflow();
  }

  .am-menu-nav {
    position: absolute;
    left: 0;
    right: 0;
    z-index: @z-index-menu;

    a {
      padding: 0.8rem;
    }

    > li {
      width: 100%; // disable block-grid

      &.am-parent {
        > a {
          position: relative;
          &::before {
            content: @fa-var-plus;
            position: absolute;
            right: 1rem;
            top: 1.4rem;
          }
        }

        // active
        &.am-open {
          > a {
            background-color: @menu-nav-top-link-active-bg;
            border-bottom: none;
            color: @menu-nav-top-link-active-color;

            &:before {
              content: @fa-var-minus;
            }

            &:after {
              content: "";
              .caret-down(8px, @menu-nav-top-link-active-bg);
              position: absolute;
              top: 100%;
              left: 50%;
              margin-left: -4px;
            }
          }
        }
      }

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

  .am-menu-sub {
    background-color: @menu-nav-sub-link-bg;

    a {
      color: @menu-nav-sub-link-color;
      height: @menu-nav-sub-link-height;
      line-height: @menu-nav-sub-link-height;
      text-indent: 5px;
      padding: 0;

      &:before {
        content: @fa-var-angle-right;
        color: @menu-nav-sub-link-icon-color;
        font-size: 16px;
        margin-right: 5px;
      }
    }
  }

  .hook-am-menu-dropdown1;

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

    .am-menu-nav {
      &.am-collapse {
        display: block;
      }

      .am-menu-sub {
        background-color: ;//@menu-sub-bg;
        display: block;
        & > li {
          clear: none;

        }
      }

      .am-menu-lv2 {
        & > li {
          clear: none;
          width: auto;
        }
      }
    }
  }*/
}

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

// TODO: 响应式样式