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

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

.m2-header-wrapper{position:fixed;width:100%;top:0;background:-webkit-gradient(linear,left top,right top,from(var(--color-theme)),to(var(--color-primary)));background:linear-gradient(to right,var(--color-theme),var(--color-primary));color:var(--color-text-white);z-index:999}[data-theme=skyblue] .m2-header-wrapper{background:-webkit-gradient(linear,left top,right top,from(var(--color-bg-skyblue)),to(var(--color-bg-lightblue)));background:linear-gradient(to right,var(--color-bg-skyblue),var(--color-bg-lightblue))}[data-theme=grassgreen] .m2-header-wrapper{background:-webkit-gradient(linear,left top,right top,from(var(--color-bg-grassgreen)),to(var(--color-bg-lightgreen)));background:linear-gradient(to right,var(--color-bg-grassgreen),var(--color-bg-lightgreen))}.m2-header-wrapper .header-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:var(--top-nav-height);line-height:var(--top-nav-height)}.m2-header-wrapper .header-inner a{display:inline-block;color:var(--color-text-white);margin-right:15px}.m2-header-wrapper .header-inner a:last-child{margin-right:0}.m2-navigation{margin-left:-20px}.m2-navigation /deep/ .el-menu{background-color:var(--color-transparen)}.m2-navigation /deep/ .el-menu.el-menu--horizontal{border-bottom:none}.m2-navigation /deep/ .el-menu .el-submenu .el-submenu__title{width:135px;background-color:var(--color-transparen);color:var(--color-text-white)!important}.m2-navigation /deep/ .el-menu .el-submenu .el-submenu__title [class*=el-icon-]{color:var(--color-text-white)}.m2-navigation /deep/ .el-menu .el-submenu .el-submenu__title .el-submenu__icon-arrow{display:none}.m2-nav-menu-popper .el-menu .el-menu-item,.m2-nav-menu-popper .el-menu .el-submenu__title{position:relative;padding-left:55px;color:var(--color-text-dark)}.m2-nav-menu-popper .el-menu .el-menu-item i,.m2-nav-menu-popper .el-menu .el-submenu__title i{color:var(--color-text-dark)}.m2-nav-menu-popper .el-menu .el-menu-item i:first-child:not(.el-submenu__icon-arrow),.m2-nav-menu-popper .el-menu .el-submenu__title i:first-child:not(.el-submenu__icon-arrow){position:absolute;left:30px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-size:var(--font-16)}.m2-nav-menu-popper .el-menu .el-menu-item:hover,.m2-nav-menu-popper .el-menu .el-submenu__title:hover,.m2-nav-menu-popper .el-menu .is-opened>.el-submenu__title{color:var(--color-theme);background-color:var(--color-bg-hover)}[data-theme=skyblue] .m2-nav-menu-popper .el-menu .el-menu-item:hover,[data-theme=skyblue] .m2-nav-menu-popper .el-menu .el-submenu__title:hover,[data-theme=skyblue] .m2-nav-menu-popper .el-menu .is-opened>.el-submenu__title{color:var(--color-text-skyblue)}[data-theme=grassgreen] .m2-nav-menu-popper .el-menu .el-menu-item:hover,[data-theme=grassgreen] .m2-nav-menu-popper .el-menu .el-submenu__title:hover,[data-theme=grassgreen] .m2-nav-menu-popper .el-menu .is-opened>.el-submenu__title{color:var(--color-text-grassgreen)}.m2-nav-menu-popper .el-menu .el-menu-item:hover [class*=el-icon-],.m2-nav-menu-popper .el-menu .el-submenu__title:hover [class*=el-icon-],.m2-nav-menu-popper .el-menu .is-opened>.el-submenu__title [class*=el-icon-]{color:var(--color-theme)}[data-theme=skyblue] .m2-nav-menu-popper .el-menu .el-menu-item:hover [class*=el-icon-],[data-theme=skyblue] .m2-nav-menu-popper .el-menu .el-submenu__title:hover [class*=el-icon-],[data-theme=skyblue] .m2-nav-menu-popper .el-menu .is-opened>.el-submenu__title [class*=el-icon-]{color:var(--color-text-skyblue)}[data-theme=grassgreen] .m2-nav-menu-popper .el-menu .el-menu-item:hover [class*=el-icon-],[data-theme=grassgreen] .m2-nav-menu-popper .el-menu .el-submenu__title:hover [class*=el-icon-],[data-theme=grassgreen] .m2-nav-menu-popper .el-menu .is-opened>.el-submenu__title [class*=el-icon-]{color:var(--color-text-grassgreen)}.m2-header .header-left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:268px;padding-left:0;margin-left:15px}.m2-header .header-left.has-nav{width:360px;padding-left:var(--list-item-padding-left);margin-left:0}.m2-header .header-left .nav{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}.m2-header .header-left .nav i{margin-right:5px;font-size:18px}.m2-header .header-left .nav:after{position:absolute;content:'';top:24px;right:5px;width:1px;height:12px;border-left:1px solid var(--color-divider);border-left:1px solid rgba(255,255,255,.3)}.m2-header .header-left .logo{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-left:-25px;background:url(../img/logo-bg.png) center no-repeat;background-size:cover}.m2-header .header-left .logo>a{display:inline-block;width:100%;text-indent:72px;font-size:18px;background:url(../img/logo.png) 32px center no-repeat}.m2-header .header-right{display:-webkit-box;display:-ms-flexbox;display:flex;padding-right:70px}.m2-header .header-right .search{width:300px;padding-right:40px}.m2-header .header-right .search .keyword .el-input__inner{height:36px;line-height:36px;border:none;font-size:var(--font-12);border-radius:var(--border-radius)}.m2-header .header-right .search .keyword .el-input__inner+.el-input__suffix{cursor:pointer}