m2-webui/lib/theme-grace/layout.css

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

.m2-container,.m2-content,.m2-header,.m2-sidebar .el-menu.el-menu--collapse .el-tooltip{-webkit-box-sizing:border-box}.m2-header{width:100%;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;color:#fff;height:60px;line-height:60px;font-size:14px;background-color:#1890ff;background:-webkit-gradient(linear,left top,right top,from(#3464e0),to(#1890ff));background:linear-gradient(to right,#3464e0,#1890ff)}[data-theme=skyblue] .m2-header{background-color:#1890ff}[data-theme=grassgreen] .m2-header{background-color:#4caf50}[data-theme=skyblue] .m2-header{background:-webkit-gradient(linear,left top,right top,from(#3464e0),to(#1890ff));background:linear-gradient(to right,#3464e0,#1890ff)}[data-theme=grassgreen] .m2-header{background:-webkit-gradient(linear,left top,right top,from(#009688),to(#4caf50));background:linear-gradient(to right,#009688,#4caf50)}.m2-header.m2-header-oc .header-inner{background:url(../img/logo-bg.png) no-repeat;background-position-x:140px}.m2-header .header-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.m2-header .header-inner .header-left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:210px;padding-left:15px}.m2-header .header-inner .header-left.has-nav{width:300px;padding-left:20px;margin-left:0}.m2-header .header-inner .header-left .nav{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-ms-flex:1;flex:1;cursor:pointer}.m2-header .header-inner .header-left .nav i{margin-right:5px;font-size:18px}.m2-header .header-inner .header-left .nav:after{position:absolute;content:'';top:24px;right:5px;width:1px;height:12px;border-left:1px solid #fff;border-left:1px solid rgba(255,255,255,.3)}.m2-header .header-inner .header-left .logo{-webkit-box-flex:3;-ms-flex:3;flex:3;width:100%;cursor:pointer}.m2-header .header-inner .header-left .logo .logo-icon{display:inline-block;width:100%;height:100%;padding-left:40px;background:url(../img/logo.png) center left no-repeat}.m2-header .header-inner .header-left .logo .logo-text{display:inline-block;font-size:18px;color:#fff}.m2-header .header-inner .header-center{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:40px}.m2-header .header-inner .header-center .m2-navbar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.m2-header .header-inner .header-center .m2-navbar li{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:120px;padding:0 10px;margin-right:10px;cursor:pointer}.m2-header .header-inner .header-center .m2-navbar li:last-child{margin-right:0}.m2-header .header-inner .header-center .m2-navbar li .el-dropdown{outline:0;color:#fff;width:100%;text-align:center}.m2-header .header-inner .header-center .m2-navbar li .nav-item{position:relative;color:#fff;outline:0}.m2-header .header-inner .header-center .m2-navbar li .nav-item.selected,.m2-header .header-inner .header-center .m2-navbar li .nav-item:hover{font-weight:600;font-size:16px}.m2-header .header-inner .header-center .m2-navbar li .nav-item.selected:after,.m2-header .header-inner .header-center .m2-navbar li .nav-item:hover:after{content:"";position:absolute;top:50%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);margin-top:16px;width:20px;height:3px;border-radius:3px;background-color:#fff}.m2-header .header-inner .header-right{display:-webkit-box;display:-ms-flexbox;display:flex;padding-right:30px;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.m2-header .header-inner .header-right .header-right-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.m2-header .header-inner .header-right .m2-search{width:300px;padding-right:40px}.m2-header .header-inner .header-right .m2-search .el-input__inner{height:36px;line-height:36px;border:none;font-size:12px;border-radius:6px}.m2-header .header-inner .header-right .m2-search .el-input__inner+.el-input__suffix{cursor:pointer}.m2-header .header-inner .header-right .m2-avatar{display:-webkit-box;display:-ms-flexbox;display:flex;margin-left:5px;height:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}.m2-header .header-inner .header-right .m2-avatar .m2-avatar-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#fff}.m2-header .header-inner .header-right .m2-avatar .m2-avatar-inner .el-icon-arrow-down{font-size:12px}.m2-header .header-inner .header-right .m2-avatar .avatar-item{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.m2-header .header-inner .header-right a{display:inline-block;color:#fff;margin-right:15px}.m2-header .header-inner .header-right a>i{font-size:20px}.m2-header .header-inner .header-right a:last-child{margin-right:0}.m2-drop-menu{width:240px!important;top:40px!important}.m2-drop-menu.app-drop-menu .el-dropdown-menu__item{height:36px}.m2-drop-menu .el-dropdown-menu__item a{display:inline-block;max-width:200px!important}.m2-drop-menu .el-dropdown-menu__item:hover,.m2-drop-menu .el-dropdown-menu__item:hover a{color:#3464e0;background-color:#f5f7f9}[data-theme=skyblue] .m2-drop-menu .el-dropdown-menu__item:hover,[data-theme=skyblue] .m2-drop-menu .el-dropdown-menu__item:hover a{color:#3464e0}[data-theme=grassgreen] .m2-drop-menu .el-dropdown-menu__item:hover,[data-theme=grassgreen] .m2-drop-menu .el-dropdown-menu__item:hover a{color:#0ad0b6}.m2-drop-menu .el-dropdown-menu__item i{width:15px;text-align:center}.m2-avatar-dropdown{width:150px!important}.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-tooltip{outline:0}.m2-sidebar .el-menu.el-menu--collapse .el-tooltip{position:absolute;left:0;top:0;height:100%;width:100%;display:inline-block;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;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}.m2-content .m2-back-top i{outline:0}[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}.m2-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-preferred-size:auto;flex-basis:auto;box-sizing:border-box;min-width:0}.m2-container.vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}