m2-webui/packages/theme-grace/lib/content.css

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

.m2-content .m2-back-top i,.m2-sidebar .el-menu .el-tooltip{outline:0}.m2-sidebar{position:absolute;width:210px;height:100%;left:0;background-color:#fff}.m2-sidebar .el-menu.el-menu--collapse,.m2-sidebar.sidebar-collapse{width:50px}.m2-sidebar .el-menu{border-right:none;overflow-x:hidden;overflow-y:auto}.m2-sidebar .el-menu.el-menu--inline{padding-top:0;overflow-y:hidden}.m2-sidebar .el-menu.el-menu--inline .el-menu-item,.m2-sidebar .el-menu.el-menu--inline .el-submenu__title{color:#666}.m2-sidebar .el-menu.el-menu--collapse .el-tooltip{position:absolute;left:0;top:0;height:100%;width:100%;display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center}.m2-sidebar .el-menu.el-menu--collapse .el-menu-item i.menu-icon,.m2-sidebar .el-menu.el-menu--collapse .el-submenu__title i.menu-icon{margin:0}.m2-sidebar .el-menu .el-menu-item,.m2-sidebar .el-menu .el-submenu__title{height:40px;line-height:40px;cursor:pointer}.m2-sidebar .el-menu .el-menu-item i.menu-icon,.m2-sidebar .el-menu .el-submenu__title i.menu-icon{margin-right:10px;vertical-align:middle;width:20px;font-size:20px;text-align:center;color:#333}.m2-sidebar .el-menu .el-menu-item.is-active,.m2-sidebar .el-menu .el-menu-item:hover,.m2-sidebar .el-menu .el-submenu__title.is-active,.m2-sidebar .el-menu .el-submenu__title:hover{color:#3464e0!important;background-color:#f5f7f9}[data-theme=skyblue] .m2-sidebar .el-menu .el-menu-item.is-active,[data-theme=skyblue] .m2-sidebar .el-menu .el-menu-item:hover,[data-theme=skyblue] .m2-sidebar .el-menu .el-submenu__title.is-active,[data-theme=skyblue] .m2-sidebar .el-menu .el-submenu__title:hover{color:#3464e0!important}[data-theme=grassgreen] .m2-sidebar .el-menu .el-menu-item.is-active,[data-theme=grassgreen] .m2-sidebar .el-menu .el-menu-item:hover,[data-theme=grassgreen] .m2-sidebar .el-menu .el-submenu__title.is-active,[data-theme=grassgreen] .m2-sidebar .el-menu .el-submenu__title:hover{color:#0ad0b6!important}.m2-sidebar .el-menu .el-menu-item.is-active i,.m2-sidebar .el-menu .el-menu-item:hover i,.m2-sidebar .el-menu .el-submenu__title.is-active i,.m2-sidebar .el-menu .el-submenu__title:hover i,[data-theme=skyblue] .m2-sidebar .el-menu .el-menu-item.is-active i,[data-theme=skyblue] .m2-sidebar .el-menu .el-menu-item:hover i,[data-theme=skyblue] .m2-sidebar .el-menu .el-submenu__title.is-active i,[data-theme=skyblue] .m2-sidebar .el-menu .el-submenu__title:hover i{color:#3464e0}[data-theme=grassgreen] .m2-sidebar .el-menu .el-menu-item.is-active i,[data-theme=grassgreen] .m2-sidebar .el-menu .el-menu-item:hover i,[data-theme=grassgreen] .m2-sidebar .el-menu .el-submenu__title.is-active i,[data-theme=grassgreen] .m2-sidebar .el-menu .el-submenu__title:hover i{color:#0ad0b6}.m2-sidebar .el-menu .el-menu-item .badge,.m2-sidebar .el-menu .el-submenu__title .badge{margin-left:5px;background-color:#f81d22;border-radius:10px;color:#fff;display:inline-block;font-size:12px;height:18px;line-height:18px;padding:0 6px;text-align:center;white-space:nowrap;-webkit-box-sizing:content-box;box-sizing:content-box}.m2-sidebar .toggle-sidebar{position:absolute;bottom:10px;padding:0 10px;width:210px;height:40px;line-height:40px;border-top:1px solid #f5f7f9;background-color:#fff;z-index:999;text-align:right}.m2-sidebar .toggle-sidebar .toggle-icon{display:inline-block;margin-top:10px;width:20px;height:20px;background:url(../img/fold-gray.svg) center no-repeat;cursor:pointer}.m2-sidebar .toggle-sidebar .toggle-icon:hover{background-image:url(../img/fold-blue.svg)}.m2-sidebar .toggle-sidebar .toggle-icon.unfold{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.m2-sidebar .toggle-sidebar.toggle-collapse{width:50px;text-align:center}.m2-sidebar .m2-menu-item-2.el-menu-item,.m2-sidebar .m2-menu-item-2>.el-submenu__title{padding-left:50px!important}.m2-sidebar .m2-menu-item-3.el-menu-item,.m2-sidebar .m2-menu-item-3>.el-submenu__title{padding-left:80px!important}.m2-sidebar .m2-menu-item-4.el-menu-item,.m2-sidebar .m2-menu-item-4>.el-submenu__title{padding-left:110px!important}.m2-sidebar .m2-menu-item-5.el-menu-item,.m2-sidebar .m2-menu-item-5>.el-submenu__title{padding-left:140px!important}.m2-sidebar-menu-popper{margin-left:0}.m2-sidebar-menu-popper .el-menu--popup{border-radius:6px;padding:10px 0}.m2-sidebar-menu-popper .el-menu-item,.m2-sidebar-menu-popper .el-submenu__title{height:40px!important;line-height:40px!important;font-size:14px;color:#666}.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:#3464e0!important;background-color:#f5f7f9}[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:#3464e0!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:#0ad0b6!important}.m2-sidebar-menu-popper .el-menu-item.is-active i,.m2-sidebar-menu-popper .el-menu-item.is-active i.menu-icon,.m2-sidebar-menu-popper .el-menu-item:hover i,.m2-sidebar-menu-popper .el-menu-item:hover i.menu-icon,.m2-sidebar-menu-popper .el-submenu__title.is-active i,.m2-sidebar-menu-popper .el-submenu__title.is-active i.menu-icon,.m2-sidebar-menu-popper .el-submenu__title:hover i,.m2-sidebar-menu-popper .el-submenu__title:hover i.menu-icon,[data-theme=skyblue] .m2-sidebar-menu-popper .el-menu-item.is-active i,[data-theme=skyblue] .m2-sidebar-menu-popper .el-menu-item.is-active i.menu-icon,[data-theme=skyblue] .m2-sidebar-menu-popper .el-menu-item:hover i,[data-theme=skyblue] .m2-sidebar-menu-popper .el-menu-item:hover i.menu-icon,[data-theme=skyblue] .m2-sidebar-menu-popper .el-submenu__title.is-active i,[data-theme=skyblue] .m2-sidebar-menu-popper .el-submenu__title.is-active i.menu-icon,[data-theme=skyblue] .m2-sidebar-menu-popper .el-submenu__title:hover i,[data-theme=skyblue] .m2-sidebar-menu-popper .el-submenu__title:hover i.menu-icon{color:#3464e0}[data-theme=grassgreen] .m2-sidebar-menu-popper .el-menu-item.is-active i,[data-theme=grassgreen] .m2-sidebar-menu-popper .el-menu-item.is-active i.menu-icon,[data-theme=grassgreen] .m2-sidebar-menu-popper .el-menu-item:hover i,[data-theme=grassgreen] .m2-sidebar-menu-popper .el-menu-item:hover i.menu-icon,[data-theme=grassgreen] .m2-sidebar-menu-popper .el-submenu__title.is-active i,[data-theme=grassgreen] .m2-sidebar-menu-popper .el-submenu__title.is-active i.menu-icon,[data-theme=grassgreen] .m2-sidebar-menu-popper .el-submenu__title:hover i,[data-theme=grassgreen] .m2-sidebar-menu-popper .el-submenu__title:hover i.menu-icon{color:#0ad0b6}.m2-sidebar-menu-popper .el-menu-item i.menu-icon,.m2-sidebar-menu-popper .el-submenu__title i.menu-icon{margin-right:10px;vertical-align:middle;width:20px;font-size:20px;text-align:center;color:#666}.m2-sidebar-menu-popper .badge{margin-left:5px;background-color:#f81d22;border-radius:10px;color:#fff;display:inline-block;font-size:12px;height:18px;line-height:18px;padding:0 6px;text-align:center;white-space:nowrap;-webkit-box-sizing:content-box;box-sizing:content-box}.m2-sidebar-menu-tooltip-popper{font-size:14px}.m2-sidebar-menu-tooltip-popper.is-dark{background-color:#333;opacity:.9}.m2-router-view .page-container{width:100%;height:100%;overflow:auto}.m2-content{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-preferred-size:auto;flex-basis:auto;overflow:auto;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;height:calc(100vh - 60px)}.m2-content .page-nav{position:relative;padding-top:10px;width:210px;background-color:#fff;-webkit-transition:all .5s linear;transition:all .5s linear;-webkit-box-shadow:0 0 7px 0 rgba(171,171,171,.2);box-shadow:0 0 7px 0 rgba(171,171,171,.2);overflow:hidden}.m2-content .page-nav.nav-collapse{width:50px}.m2-content .page-content{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:auto;background-color:#f0f4f9}.m2-content .page-content .el-breadcrumb{position:relative;height:40px;line-height:40px;padding:0 15px;background:#fff;border-bottom:1px solid #f5f7f9}.m2-content .page-content .m2-router-view{height:100%;width:100%;overflow:auto;padding:10px}.m2-content .m2-back-top{bottom:20px!important;color:#3464e0}[data-theme=skyblue] .m2-content .m2-back-top{color:#3464e0}[data-theme=grassgreen] .m2-content .m2-back-top{color:#0ad0b6}.m2-backtop-popper{border:1px solid #dcdcdc!important}.m2-backtop-popper .popper__arrow{border-top-color:#dcdcdc!important}