zui/src/less/modules/menu.less

一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。

/// ========================================================================
/// ZUI: menu.less
/// http://openzui.com
/// ========================================================================
/// Copyright 2014-2020 cnezsoft.com; Licensed MIT
/// ========================================================================


// Menu style for module menu.js

.menu {
  > .btn {
    width: 100%;
    display: block;
    margin-bottom: 5px;
    padding-left: 0;
    padding-right: 0;

    & + .nav {
      margin-top: 15px;
    }
  }

  > .nav {
    > li {
      float: none;

      &.nav-parent {
        > a > .nav-parent-fold-icon {
          position: absolute;
          right: 10px;
          top: 11px;
          display: block;
          transition: all 0.5s;
          .opacity(0.45);
        }

        > a:hover > .nav-parent-fold-icon {
          .opacity(0.75);
        }
      }

      > .nav {
        background-color: lighten(@color-gray-pale, 2%);
        display: none;

        > li {
          > a {
            padding-left: 35px;
            border: 1px solid @nav-primary-border-color;
            margin-top: -1px;

            &:hover,
            &:focus {
              background-color: darken(@nav-link-hover-bg, 5%);
            }
          }

          // Active state
          &.active > a {
            &,
            &:hover,
            &:focus {
              background-color: @component-active-bg;
              border-color: @component-active-bg;
              color: @component-active-color;
              [class*='icon-'] {
                color: @color-light;
              }
            }
          }
        }
      }

      > a,
      > .nav > li > a {
        > [class*='icon-'] {
          display: inline-block;
          margin-right: 5px;
          color: @color-gray;
        }
      }

      + li {
        margin-top: -1px;
        margin-left: 0; // no need for this gap between nav items
      }

      &,
      > a {
        margin-left: 0;
      }

      &:first-child {
        margin-top: 0;
        > a,
        &.nav-heading {
          margin-left: 0;
          .border-bottom-radius(0);
          .border-top-radius(@border-radius-base);
        }
      }

      &:last-child {
        > a {
          .border-top-radius(0);
          .border-bottom-radius(@border-radius-base);
        }
      }

      &:first-child {
        > a,
        &.nav-heading {
          .border-top-radius(@border-radius-base);
        }
      }

      // Active state
      &.active > a {
        &,
        &:hover,
        &:focus {
          [class*='icon-'] {
            color: @color-light;
          }
        }
      }

      &.show {
        > a {
          &,
          &:hover,
          &:focus {
            color: @color-fore;
            background-color: @color-back;
            border-color: @nav-primary-border-color;

            > [class*='icon-'] {
              color: @color-fore;
            }
          }

          &:hover {
            background-color: @nav-link-hover-bg;
          }
        }


        &:last-child {
          > a {
            .border-bottom-radius(0);
          }

          > .nav > li:last-child > a {
            .border-bottom-radius(@border-radius-base);
          }
        }

        > .nav {
          display: block;
        }
      }

      &.nav-heading {
        border: 1px solid @color-gray-light;
        background-color: @color-gray-pale;
      }
    }
  }
}