tplus-pos/dist/components/siderBar/style.less

pos module

.sider-bar-content-wrapper{
    background-color: rgb(70, 66, 99);
    height: 100%;
    z-index: 9;
    .sider-bar-content{
        height: 100%;
        .u-menu{
            border: none;
        }
        .tplus-sider-collapsed{
            .u-menu-submenu-title{
                .u-menu-submenu-arrow{
                    display: none;
                }
            }
        }
        .sider-bar-menu-item{
            transition: none !important;
            .u-menu-submenu-arrow{
                display: none;
            }
            .u-menu-submenu{
                ul {
                    background-color: rgb(70, 66, 99);
                    li {
                        background-color: rgb(70, 66, 99);
                    }
                    .u-menu-item-active {
                        background-color: rgba(0, 0, 0, .15);
                    }
                }
            }
            &:hover{
                ._tplus-animation_;
                background-color: transparent !important;
            }
            &.sider-bar-menu-item-click{
                box-shadow: -4px 8px 7px 0px rgba(236, 115, 8, .6) inset;
                background: #ff8c02 !important;
                //box-shadow: -4px 8px 7px 0px rgba(43, 40, 66, .9) inset;
                //background: #34314c !important;
            }
            height: 80px;
            background-color: transparent;
            padding: 12px 0px 0px 0px;
            .u-menu-submenu-title{
                overflow: visible;
                height: 100%;
                padding: 0px;
                &:hover{
                    background-color: rgba(0, 0, 0, 0);
                }
            }
            .menu-item-icon{
                width: 25px;
                height: 25px;
                display: block;
                margin: 0 auto;
            }
            .menu-submenu-total{
                position:absolute;
                top: 10px;
                left: 50px;
                width: 18px;
                height: 18px;
                line-height: 18px;
                text-align: center;
                font-size: 10px;
                background: #FF0000;
                border-radius: 50%;
                z-index: 99;
            }
            h1{
                font-size: 12px;
                color: rgba(255, 255, 255, 1);
                text-align: center;
            }
        }
        .sider-bar-menu-submenu{
            overflow: visible;
            .menu-submenu-content{
                position: relative;
       
                .menu-submenu-list-wrapper{
                    position: absolute;
                    top: 0;
                    left: 98px;
                    background: #474364;
                    border-radius: 4px;
                    &:before{
                        content: '';
                        display: block;
                        width: 0;
                        height: 0;
                        border-top: 5px solid transparent;
                        border-right: 6px solid #474364;
                        border-bottom: 5px solid transparent;
                        position: absolute;
                        left: -6px;
                        top: 16px;
                    }
                    .sub-menu-item{
                        height: 40px;
                        min-width: 120px;
                        box-sizing: border-box;
                        padding: 0px 20px;
                        position: relative;
                        span{
                            position: relative;
                            z-index: 9;
                        }

                    }
                    .sub-menu-item-active{
                        ._tplus-animation_;
                        &:before{
                            content: '';
                            height: 100%;
                            width: 4px;
                            display: block;
                            background-color: #FF8C25;
                            position: absolute;
                            left: 0px;
                        }
                        &:after{
                            content: '';
                            height: 100%;
                            width: 100%;
                            display: block;
                            background: linear-gradient(to right, rgba(255,140,37,.4), rgba(255,140,37,.05));
                            position: absolute;
                            left: 0;
                            top: 0;
                            ._tplus-animation_;
                        }
                    }
                    .sub-menu-item-total{
                        position: absolute;
                        top: 10px;
                        right: 10px;
                        width: 18px;
                        height: 18px;
                        line-height: 18px;
                        background: #FF0000;
                        border-radius: 50%;
                        font-size: 10px;
                        text-align: center;
                    }
                }
                .menu-submenu-list-active{
                    display: block;
                    transition: all .3s cubic-bezier(.645, .045, .355, 1),padding .3s cubic-bezier(.645, .045, .355, 1);
                }
            }
        }
        .sub-menu-item-icon{
            display: block;
            height: 80px;
            line-height: 80px;
        }
    }
}
._tplus-animation_{
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

@media (max-height: 680px) {
    .sider-bar-content-wrapper{
        .sider-bar-content{
            .sider-menu {
                .sider-bar-menu-item {
                    height: 66px;
                    padding: 5px 0px 0px 0px;
                    ._tplus-animation_;
                }
            }
        }
    }
}

@keyframes submenuZoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.2) translateX(-80%);
    transform: scale(0.2) translateX(-80%)
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1) translateX(0%);
    transform: scale(1) translateX(0%);
  }
}

@-webkit-keyframes submenuZoomOut {
  0% {
    -webkit-transform: scale(1) translateX(0%);
    transform: scale(1) translateX(0%);
  }
  99% {
    opacity: 0;
    -webkit-transform: scale(.2) translateX(-80%);
    transform: scale(.2) translateX(-80%);
    top: 0;
  }
  100% {
    top: 99999px;
  }
}

.submenu-zoom-enter {
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
}

.submenu-zoom-leave {
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
}

.submenu-zoom-leave.submenu-zoom-leave-active {
  -webkit-animation-name: submenuZoomOut;
  animation-name: submenuZoomOut;
  -webkit-animation-play-state: running;
  animation-play-state: running;
}

.submenu-zoom-enter.submenu-zoom-enter-active{
  -webkit-animation-name: submenuZoomIn;
  animation-name: submenuZoomIn;
  -webkit-animation-play-state: running;
  animation-play-state: running;
}