amazeui/widget/menu/src/menu.offcanvas1.less

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

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

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

  @menu-nav-top-textIndent: 15px;

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

  @menu-nav-top-link-color: #ccc;
  @menu-nav-top-link-hover-bg: lighten(@offcanvas-bar-background, 8%);
  @menu-nav-top-link-hover-color: #fff;
  @menu-nav-top-link-active-bg: darken(@offcanvas-bar-background, 10%);
  @menu-nav-top-link-active-color: #fff;

  @menu-nav-sub-link-color: #eee;
  @menu-nav-sub-link-hover-color: #fff;

  @menu-nav-divider-border: darken(@offcanvas-bar-background, 10%);
  @menu-nav-border-color: rgba(0, 0, 0, 0.3);

  .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 {
    border-bottom: 1px solid @menu-nav-border-color;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);

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

    > .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-active > a {
      background-color: @menu-nav-top-link-active-bg;
      color: @menu-nav-top-link-active-color;
    }

    > .am-parent {
      > a {
        transition: all .3s;
        &:after {
          content: @fa-var-angle-left;
          position: absolute;
          right: 1.5rem;
          top: 1.3rem;
        }
      }

      &.am-open {
        > a {
          &:after {
            content: @fa-var-angle-down;
          }
        }
      }
    }
  }

  .am-menu-sub {
    border-top: 1px solid @menu-nav-border-color;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 5px 0 5px 15px;
    background-color: @menu-nav-top-link-active-bg;
    font-size: 1.4rem;

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

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

  .am-nav-divider {
    border-top: 1px solid @menu-nav-divider-border;
  }

  .hook-am-menu-offcanvas1;
}

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