%SHRINK-ITEM-LI {
    .group-name,
    .link-span {
        display: none;
    }
    &:hover {
        .triangle-left {
            width: 0;
            height: 0;
            border-top: 5px solid transparent;
            border-right: 6px solid #000;
            border-bottom: 5px solid transparent;
            position: absolute;
            left: 55px;
            margin-top: 20px;
            z-index: 3;
        }
        .group-name {
            position: absolute;
            left: 60px;
            z-index: 3;
            background-color: #000;
            height: 30px;
            line-height: 30px;
            display: inline-block;
            padding: 0 10px;
            white-space: nowrap;
            border-radius: 3px;
            text-indent: 0;
            color: #fff;
            margin-top: 10px;
            span,
            p {
                color: #fff;
            }
        }
    }
}

sidebar-common-component {
    .eo-sidebar {
        background-color: #fff;
        position: fixed;
        height: 100%;
        left: 0;
        z-index: 5;
        top: 51px;
        .common-sidebar {
            border-right: 1px solid #e5e5e5;
            height: 100%;
            .shrink-a {
                position: absolute;
                left: 229px;
                margin-top: 40px;
                z-index: 2;
                visibility: hidden;
                .title-li {
                    @include eo-line(25px, 24px);
                    width: auto;
                    .iconfont {
                        font-size: 24px;
                        color: #999;
                        border-radius: 50%;
                        background-color: #fff;
                        &:hover {
                            color: #333;
                        }
                    }
                }
            }
            .container-item-li {
                .second-sidebar {
                    display: none;
                }
            }
            .item-li {
                @include eo-line(50px);
                width: 240px;
                text-indent: 15px;
                cursor: pointer;
                * {
                    cursor: pointer;
                }
                span {
                    font-size: 14px;
                }
                .iconfont {
                    margin-right: 12px;
                    font-size: 20px;
                    width: 35px;
                }
                .un-read-span {
                    margin-left: 5px;
                }
                &:hover {
                    background-color: #e3f1e5;
                }
            }
            .divide-li {
                border-top: 1px solid #e5e5e5;
                @include eo-line(50px, 50px);
            }
            .divide-bottom-li{
                border-bottom: 1px solid #e5e5e5;
                @include eo-line(50px, 50px);
            }
            .elem-active {
                .second-sidebar {
                    display: inherit;
                }
                .item-li {
                    background-color: #ecf8ee;
                    span {
                        color: #4CAF50;
                    }
                }
            }
            .disable-menu-li {
                background-color: #fafafa;
                cursor: default;
                span {
                    color: #999;
                    cursor: default;
                }
                &:hover {
                    background-color: #fafafa;
                }
            }
        }
        &:hover {
            .common-sidebar {
                .shrink-a {
                    visibility: visible;
                }
            }
        }
        .had-child-div {
            .item-li {
                width: 50px;
                border-left: none;
                .title-icon {
                    margin-right: 0;
                }
                @extend %SHRINK-ITEM-LI;
            }
        }
    }
    .second-sidebar {
        //二级菜单样式
        background-color: #fff;
        border-right: 1px solid #e5e5e5;
        position: fixed;
        height: 100%;
        left: 50px;
        z-index: 1;
        top: 51px;
        border-left: 1px solid #e5e5e5;
        .back-li,
        .ui-sref-li {
            @include eo-line(50px);
            width: 190px;
            text-indent: 8px;
            span {
                font-size: 14px;
            }
            .iconfont {
                margin-right: 10px;
                font-size: 16px;
            }
            font-size: 12px;
            span {
                font-size: 14px;
            }
            .iconfont {
                margin-right: 3px;
                font-size: 13px;
            }
        }
        .back-li {
            border-bottom: 1px solid #f2f2f2;
            @include eo-line(49px);
            span {
                color: #999;
            }
        }
        .ui-sref-li {
            &:hover {
                background-color: #e3f1e5;
            }
        }
        .active {
            .ui-sref-li {
                background-color: #ecf8ee;
                span {
                    color: #4CAF50;
                }
            }
        }
    }
}

.shrink-div,
.shrink-inside-div {
    .eo-sidebar {
        .common-sidebar {
            overflow: hidden;
            .shrink-a {
                left: 38px;
            }
            .item-li {
                width: 50px;
                border-left: none;
                .title-icon {
                    margin-right: 0;
                }
                @extend %SHRINK-ITEM-LI;
            }
        }
        .elem-active {
            .second-sidebar {
                display: none;
            }
        }
    }
}
