amazeui/widget/menu/src/menu.offcanvas2.less

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

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

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

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

  @menu-nav-link-color: #ccc;
  @menu-nav-link-bg: lighten(@offcanvas-bar-background, 5%);
  @menu-nav-link-hover-color: #fff;

  @menu-nav-link-active-bg: darken(@offcanvas-bar-background, 5%);
  @menu-nav-link-active-color: #fff;
  @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 {
    padding: 10px 5px;
    > li {
      padding: 5px;
      > a {
        transition: all 0.3s;
        background-color: @menu-nav-link-bg;
        color: @menu-nav-link-color;
        .text-overflow(block);
        border: 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);
        height: @menu-nav-link-height;
        line-height: @menu-nav-link-height;
        padding: 0;
        text-align: center;
      }
    }

    // Hover
    & > li > a:hover,
    & > li > a:focus {
      background-color: @menu-nav-link-active-bg;
      color: @menu-nav-link-hover-color;
      outline: none;
    }

    // Active
    & > .am-active > a {
      background-color: @menu-nav-link-active-bg;
      color: @menu-nav-link-active-color;
    }
  }

  .hook-am-menu-offcanvas2;
}

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