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

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

.m2-header{width:100%;-webkit-box-sizing:border-box;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}