amazeui/widget/menu/src/menu.slide1.less

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

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

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

  @menu-nav-bg: #f5f5f5;
  @menu-nav-link-color: @gray-dark;
  @menu-nav-link-height: 38px;

  @menu-nav-top-active-color: @global-primary;
  @menu-nav-sub-bg: @global-primary;
  @menu-nav-sub-link-color: #fff;

  @menu-nav-sub-border-radius: @global-radius;

  .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 {
    background-color: @menu-nav-bg;
    padding-top: 8px;
    padding-bottom: 8px;

    &.am-in {
      &:before {
        .am-icon-font;
        content: @fa-var-caret-up;
        font-size: 24px;
        color: @menu-nav-bg;
        position: absolute;
        right: 16px;
        top: -16px;
      }
    }

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

    > li {
      > a {
        color: @menu-nav-link-color;
        .text-overflow(block);
      }
    }

    > .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);
          }
        }
      }
    }
  }

  .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-slide1;

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

    .am-menu-nav {
      background-color: @menu-nav-bg;
      display: block;

      &.am-in:before {
        display: none;
      }

      li {
        width: auto;
        clear: none;
        a {
          padding-left: 1.5rem;
          padding-right: 1.5rem;
        }
      }
    }
  }
}

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

// TODO: 全宽样式支持