m2-ui/lib/theme-grace/sidebar.css

The package is provided web components and utilities based on vue and element-ui.

.m2-sidebar{position:absolute;width:var(--left-nav-width);height:100%;left:0;background-color:var(--color-text-white)}.m2-sidebar.sidebar-collapse{width:var(--left-nav-collapse-width)}.m2-sidebar .home-icon{position:fixed;display:block;top:var(--top-nav-height);width:var(--left-nav-width);background:var(--color-bg-white);height:var(--list-item-height);line-height:var(--list-item-height);padding-left:var(--list-item-padding-left);border-bottom:1px solid var(--color-bd-light);color:var(--color-text-dark);z-index:999}.m2-sidebar .home-icon.home-collapse{width:var(--left-nav-collapse-width);padding-left:0}.m2-sidebar .home-icon.home-collapse i{margin-left:var(--list-item-padding-left)}.m2-sidebar .home-icon.home-collapse:hover i{display:none}.m2-sidebar .home-icon.home-collapse:hover .home-hover-title{display:inline-block}.m2-sidebar .home-icon .home-hover-title{display:none;overflow:hidden;width:var(--left-nav-collapse-width);height:var(--list-item-height);line-height:20px;padding:4px 15px;letter-spacing:1px;text-align:center;white-space:normal;font-size:var(--font-12);-webkit-transition:all .2s linear;transition:all .2s linear}.m2-sidebar .home-icon:hover{color:var(--color-theme);background-color:var(--color-bg-hover)}[data-theme=skyblue] .m2-sidebar .home-icon:hover{color:var(--color-text-skyblue)}[data-theme=grassgreen] .m2-sidebar .home-icon:hover{color:var(--color-text-grassgreen)}.m2-sidebar .home-icon:hover i{color:var(--color-theme)}[data-theme=skyblue] .m2-sidebar .home-icon:hover i{color:var(--color-text-skyblue)}[data-theme=grassgreen] .m2-sidebar .home-icon:hover i{color:var(--color-text-grassgreen)}.m2-sidebar .home-icon i{margin-right:5px;font-size:16px}.m2-sidebar .el-menu{border-right:none;overflow-x:hidden;overflow-y:auto}.m2-sidebar .el-menu>a{display:inline-block;width:100%}.m2-sidebar .el-menu.has-home{margin-top:var(--list-item-height)}.m2-sidebar .el-menu.el-menu--collapse i.el-submenu__icon-arrow{display:none}.m2-sidebar .el-menu.el-menu--collapse .m2-menu-item-1.is-opened,.m2-sidebar .el-menu.el-menu--collapse .m2-menu-item-1:hover{background-color:var(--color-bg-hover)}.m2-sidebar .el-menu.el-menu--collapse .m2-menu-item-1.is-opened.el-menu-item,.m2-sidebar .el-menu.el-menu--collapse .m2-menu-item-1.is-opened>.el-submenu__title,.m2-sidebar .el-menu.el-menu--collapse .m2-menu-item-1:hover.el-menu-item,.m2-sidebar .el-menu.el-menu--collapse .m2-menu-item-1:hover>.el-submenu__title{padding-left:0!important}.m2-sidebar .el-menu.el-menu--collapse .m2-menu-item-1.is-opened.el-menu-item>.menu-hover-title,.m2-sidebar .el-menu.el-menu--collapse .m2-menu-item-1.is-opened>.el-submenu__title>.menu-hover-title,.m2-sidebar .el-menu.el-menu--collapse .m2-menu-item-1:hover.el-menu-item>.menu-hover-title,.m2-sidebar .el-menu.el-menu--collapse .m2-menu-item-1:hover>.el-submenu__title>.menu-hover-title{display:inline-block;color:var(--color-theme)}[data-theme=skyblue] .m2-sidebar .el-menu.el-menu--collapse .m2-menu-item-1.is-opened.el-menu-item>.menu-hover-title,[data-theme=skyblue] .m2-sidebar .el-menu.el-menu--collapse .m2-menu-item-1.is-opened>.el-submenu__title>.menu-hover-title,[data-theme=skyblue] .m2-sidebar .el-menu.el-menu--collapse .m2-menu-item-1:hover.el-menu-item>.menu-hover-title,[data-theme=skyblue] .m2-sidebar .el-menu.el-menu--collapse .m2-menu-item-1:hover>.el-submenu__title>.menu-hover-title{color:var(--color-text-skyblue)}[data-theme=grassgreen] .m2-sidebar .el-menu.el-menu--collapse .m2-menu-item-1.is-opened.el-menu-item>.menu-hover-title,[data-theme=grassgreen] .m2-sidebar .el-menu.el-menu--collapse .m2-menu-item-1.is-opened>.el-submenu__title>.menu-hover-title,[data-theme=grassgreen] .m2-sidebar .el-menu.el-menu--collapse .m2-menu-item-1:hover.el-menu-item>.menu-hover-title,[data-theme=grassgreen] .m2-sidebar .el-menu.el-menu--collapse .m2-menu-item-1:hover>.el-submenu__title>.menu-hover-title{color:var(--color-text-grassgreen)}.m2-sidebar .el-menu.el-menu--collapse .m2-menu-item-1.is-opened.el-menu-item>i,.m2-sidebar .el-menu.el-menu--collapse .m2-menu-item-1.is-opened>.el-submenu__title>i,.m2-sidebar .el-menu.el-menu--collapse .m2-menu-item-1:hover.el-menu-item>i,.m2-sidebar .el-menu.el-menu--collapse .m2-menu-item-1:hover>.el-submenu__title>i{display:none}.m2-sidebar .el-menu .el-menu-item,.m2-sidebar .el-menu .el-submenu__title{height:var(--list-item-height);line-height:var(--list-item-height);cursor:pointer}.m2-sidebar .el-menu .el-menu-item i,.m2-sidebar .el-menu .el-submenu__title i{margin-right:5px;vertical-align:middle}.m2-sidebar .el-menu .el-menu-item.is-active,.m2-sidebar .el-menu .el-submenu__title.is-active{color:var(--color-theme)!important}[data-theme=skyblue] .m2-sidebar .el-menu .el-menu-item.is-active,[data-theme=skyblue] .m2-sidebar .el-menu .el-submenu__title.is-active{color:var(--color-text-skyblue)!important}[data-theme=grassgreen] .m2-sidebar .el-menu .el-menu-item.is-active,[data-theme=grassgreen] .m2-sidebar .el-menu .el-submenu__title.is-active{color:var(--color-text-grassgreen)!important}.m2-sidebar .el-menu .el-menu-item:hover,.m2-sidebar .el-menu .el-submenu__title:hover,.m2-sidebar-menu-popper .el-menu-item.is-active,.m2-sidebar-menu-popper .el-menu-item:hover,.m2-sidebar-menu-popper .el-submenu__title.is-active,.m2-sidebar-menu-popper .el-submenu__title:hover{color:var(--color-theme)!important}[data-theme=skyblue] .m2-sidebar .el-menu .el-menu-item:hover,[data-theme=skyblue] .m2-sidebar .el-menu .el-submenu__title:hover{color:var(--color-text-skyblue)!important}[data-theme=grassgreen] .m2-sidebar .el-menu .el-menu-item:hover,[data-theme=grassgreen] .m2-sidebar .el-menu .el-submenu__title:hover{color:var(--color-text-grassgreen)!important}.m2-sidebar .el-menu .el-menu-item:hover i,.m2-sidebar .el-menu .el-submenu__title:hover i{color:var(--color-theme)}[data-theme=skyblue] .m2-sidebar .el-menu .el-menu-item:hover i,[data-theme=skyblue] .m2-sidebar .el-menu .el-submenu__title:hover i{color:var(--color-text-skyblue)}[data-theme=grassgreen] .m2-sidebar .el-menu .el-menu-item:hover i,[data-theme=grassgreen] .m2-sidebar .el-menu .el-submenu__title:hover i{color:var(--color-text-grassgreen)}.m2-sidebar .el-menu .m2-menu-item-1.el-menu-item,.m2-sidebar .el-menu .m2-menu-item-1>.el-submenu__title{padding-left:var(--list-item-padding-left)!important;color:var(--color-text-dark)}.m2-sidebar .el-menu .m2-menu-item-1.el-menu-item>.menu-hover-title,.m2-sidebar .el-menu .m2-menu-item-1>.el-submenu__title>.menu-hover-title{display:none;overflow:hidden;width:var(--left-nav-collapse-width);height:var(--list-item-height);line-height:20px;padding:4px 10px;letter-spacing:1px;text-align:center;white-space:normal;font-size:var(--font-12);-webkit-transition:all .2s linear;transition:all .2s linear}.m2-sidebar .el-menu .m2-menu-item-1.el-menu-item>.menu-hover-title.short-title,.m2-sidebar .el-menu .m2-menu-item-1>.el-submenu__title>.menu-hover-title.short-title{padding:4px 15px}.m2-sidebar .el-menu .m2-menu-item-1.el-menu-item>.menu-hover-title.mini-title,.m2-sidebar .el-menu .m2-menu-item-1>.el-submenu__title>.menu-hover-title.mini-title{padding:15px}.m2-sidebar .el-menu .m2-menu-item-2.el-menu-item,.m2-sidebar .el-menu .m2-menu-item-2>.el-submenu__title{padding-left:calc(var(--list-item-padding-left) + var(--list-item-base-padding-left))!important;color:var(--color-text-black);font-size:var(--font-13)}.m2-sidebar .el-menu .m2-menu-item-3.el-menu-item,.m2-sidebar .el-menu .m2-menu-item-3>.el-submenu__title{padding-left:calc(var(--list-item-padding-left) + var(--list-item-base-padding-left) * 2)!important;color:var(--color-text-gray);font-size:var(--font-13)}.m2-sidebar .toggle-sidebar{position:fixed;width:var(--left-nav-width);height:var(--list-item-height);line-height:var(--list-item-height);bottom:0;cursor:pointer;border-top:1px solid var(--color-bd-light);background-color:var(--color-bg-white);z-index:999}.m2-sidebar .toggle-sidebar.toggle-collapse{width:var(--left-nav-collapse-width)}.m2-sidebar .toggle-sidebar i{position:absolute;right:20px;bottom:15px;font-size:24px}.m2-sidebar-menu-popper{margin-left:0}.m2-sidebar-menu-popper .el-menu-item,.m2-sidebar-menu-popper .el-submenu__title{height:var(--list-item-height)!important;line-height:var(--list-item-height)!important;font-size:var(--font-13)}[data-theme=skyblue] .m2-sidebar-menu-popper .el-menu-item.is-active,[data-theme=skyblue] .m2-sidebar-menu-popper .el-menu-item:hover,[data-theme=skyblue] .m2-sidebar-menu-popper .el-submenu__title.is-active,[data-theme=skyblue] .m2-sidebar-menu-popper .el-submenu__title:hover{color:var(--color-text-skyblue)!important}[data-theme=grassgreen] .m2-sidebar-menu-popper .el-menu-item.is-active,[data-theme=grassgreen] .m2-sidebar-menu-popper .el-menu-item:hover,[data-theme=grassgreen] .m2-sidebar-menu-popper .el-submenu__title.is-active,[data-theme=grassgreen] .m2-sidebar-menu-popper .el-submenu__title:hover{color:var(--color-text-grassgreen)!important}