vue-yizun-ui/src/package/theme/menu.less

易尊前端组件库

@import "./base.less";

.re-menu{
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;

  &.transition{
    transition: height .4s ease;
  }

  &>.re-menu-item:hover{
    background-color: fade(@primary,10%);
    transition: background-color .4s ease;
  }

  &>.re-menu-item{
    cursor: pointer;
    display: block;
    padding: 12px 20px;
    margin: 2px 0;
    color: #313a46;
    font-size: 14px;

    &>i[class*=re-icon-]{
      margin-right: 5px;
    }

    &.active{
      color: @primary;
      transition: color .4s ease;
    }

    & .re-menu-item{
      padding: 8px 20px 8px 43px;
      font-size: 14px;
    }

    &.re-menu-group {
     padding: 0;
    }
  }

  .re-submenu {
    color: #313a46;

    &>.re-menu-title{
      cursor: pointer;
      padding: 12px 20px;
      position: relative;

      &:hover{
        background-color: fade(@primary,10%);
        transition: background-color .4s ease;
      }
      &>i[class*=re-icon-]{
        margin-right: 5px;
      }
      &>i.re-menu-arrow{
        position: absolute;
        right: 0;
        width: 10px;
        height: 10px;
        top: 50%;
        transform: translateY(-50%);
        right: 20px;
        @color:#ccc;

        &::after,&::before {
          content: "";
          position: absolute;
          width:1px;
          height: 7px;
          background-color: @color;
          left: 4px;
          top: 7px;
          transform-origin: top center;
          transition: all .2s ease
        }

        &::after{
          transform: rotate(135deg);
        }
        &::before{
          transform: rotate(-135deg);
        }
      }
    }

    &.is-opened>.re-menu-title>i.re-menu-arrow{
      &::after{
        top: 2px;
        transform: rotate(45deg);
      }
      &::before{
        top: 2px;
        transform: rotate(-45deg);
      }
    }
  }

  .re-menu-group{
    .re-menu-item;

    .re-menu-title{
      font-size: 12px;
      position: relative;
      cursor: auto;
      color: #ccc;
      padding: 8px 20px 8px 43px;
    }
  }
}