@charrue/layout/dist/index.css

基于vue2与element-ui, 解决中后台布局的问题，提供自动生成菜单与定制页面布局, 提供自动生成菜单与定制页面布局

.charrue-content,.fixed-header+.charrue-layout-content-main{margin-top:var(--charrue-header-height,50px)}.charrue-layout{position:relative;height:100%;width:100%;display:flex}.charrue-layout-body{flex:1;min-height:100%;transition:margin-left .28s;position:relative}.charrue-content{height:calc(100vh - var(--charrue-header-height,50px));width:100%;position:relative;overflow:auto;box-sizing:border-box}.charrue-content-footer,.charrue-content-header{flex:0 0 auto}.charrue-content-body{flex:1}.charrue-header{display:flex;align-items:center;justify-content:space-between;height:var(--charrue-header-height,50px);overflow:hidden;position:relative;background-color:var(--charrue-header-bg-color,#fff);color:var(--charrue-header-text-color,#a6adb4);box-shadow:0 1px 4px rgba(0,21,41,.08)}.charrue-header.fixed-header{position:fixed;top:0;right:0;z-index:9;transition:width .28s}.charrue-header>.charrue-header-inner{flex:1;display:flex;justify-content:space-between;align-items:center;height:100%}.charrue-header>.charrue-header-inner .charrue-header-left,.charrue-header>.charrue-header-inner .charrue-header-right{display:flex;align-items:center;padding-left:24px;padding-right:24px;height:100%}.charrue-header>.charrue-header-inner .charrue-layout-trigger{display:flex;align-items:center;height:var(--charrue-header-height,50px);line-height:var(--charrue-header-height,50px);padding:0 16px;cursor:pointer;transition:background .3s;-webkit-tap-highlight-color:transparent}.charrue-header>.charrue-header-inner .charrue-layout-trigger:hover{background:rgba(0,0,0,.025)}.charrue-header>.charrue-header-inner .charrue-layout-trigger .charrue-layout-default-trigger{display:inline-block;vertical-align:middle;width:20px;height:20px}.charrue-header>.charrue-header-inner .charrue-layout-trigger .charrue-layout-default-trigger.is-active{transform:rotate(180deg)}.charrue-sidebar-root .charrue-sidebar-placeholder{transition:all .3s}.charrue-sidebar-root .charrue-sidebar-inner{display:flex;flex-direction:column;left:0;top:0;bottom:0;z-index:10;background-color:var(--charrue-sidebar-bg-color,#001529);transition:all .3s;overflow-x:hidden}.charrue-sidebar-root .charrue-sidebar-inner::before{content:"";position:absolute;top:0;bottom:0;right:0;height:100%;width:1px;background:var(--charrue-sidebar-border-color,transparent);z-index:11}.charrue-sidebar-root .charrue-sidebar-inner.collapse{overflow:hidden}.charrue-sidebar-root .charrue-sidebar-inner>.charrue-logo-container{height:64px;position:relative;line-height:64px;padding:8px 12px;transition:all .3s;background-color:var(--charrue-sidebar-bg-color,#001529);overflow:hidden}.charrue-sidebar-root .charrue-sidebar-inner>.charrue-logo-container img{display:inline-block;vertical-align:middle;height:32px;width:32px;line-height:32px}.charrue-sidebar-root .charrue-sidebar-inner>.charrue-logo-container h1{color:var(--charrue-sidebar-text-color,#a6adb4);display:inline-block;vertical-align:middle;font-size:var(--charrue-title-font-size,18px);margin:0 0 0 16px;font-weight:600}.charrue-sidebar-menu-children .el-menu-item .icon,.charrue-sidebar-menu-children .el-sub-menu .icon,.charrue-sidebar-menu-children .el-submenu .icon{margin-right:10px}.charrue-sidebar-root .charrue-sidebar-inner>.charrue-sidebar-menu-root{flex:1;width:100%;box-sizing:border-box}.charrue-sidebar-root .el-menu{color:var(--charrue-sidebar-text-color,#a6adb4);--el-menu-text-color:var(--charrue-sidebar-text-color, $charrue-sidebar-text-color);background-color:var(--charrue-sidebar-bg-color,#001529);--el-menu-bg-color:var(--charrue-sidebar-bg-color, $charrue-sidebar-bg-color);border-right:0}.charrue-sidebar-root .el-menu--collapse .el-sub-menu__title .charrue-sidebar-menu-title,.charrue-sidebar-root .el-menu--collapse .el-submenu__title .charrue-sidebar-menu-title{display:none;margin-left:0}.charrue-sidebar-root .el-menu--collapse .charrue-submenu-title-with-icon~.el-sub-menu__icon-arrow,.charrue-sidebar-root .el-menu--collapse .charrue-submenu-title-with-icon~.el-submenu__icon-arrow{display:none}.el-menu.el-menu--popup .charrue-sidebar-menu-children{color:var(--charrue-sidebar-text-color,#a6adb4);--el-menu-text-color:var(--charrue-sidebar-text-color, $charrue-sidebar-text-color);background-color:var(--charrue-sidebar-bg-color,#001529);--el-menu-bg-color:var(--charrue-sidebar-bg-color, $charrue-sidebar-bg-color)}.el-popup-parent--hidden .fixed-header{padding-right:15px}.charrue-sidebar-menu-title{margin-left:8px}.charrue-menu-router-link{text-decoration:none;height:100%;width:100%;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.charrue-menu-router-link .el-menu-item{width:100%}.charrue-sidebar-menu-children .el-menu-item{width:100%;text-align:left;color:var(--charrue-sidebar-text-color,#a6adb4);--el-menu-text-color:var(--charrue-sidebar-text-color, $charrue-sidebar-text-color)}.charrue-sidebar-menu-children .el-menu-item .charrue-sidebar-menu-icon,.charrue-sidebar-menu-children .el-menu-item .el-sub-menu__icon-arrow,.charrue-sidebar-menu-children .el-menu-item .el-submenu__icon-arrow{color:var(--charrue-sidebar-text-color,#a6adb4);--el-menu-text-color:var(--charrue-sidebar-text-color, $charrue-sidebar-text-color)}.charrue-sidebar-menu-children .el-menu-item:hover{color:var(--charrue-sidebar-hover-text-color,#fff);background-color:var(--charrue-sidebar-hover-bg-color,#1890ff);--el-menu-active-color:var(--charrue-sidebar-hover-bg-color, $charrue-sidebar-hover-bg-color)}.charrue-sidebar-menu-children .el-menu-item:hover .charrue-sidebar-menu-icon,.charrue-sidebar-menu-children .el-menu-item:hover .el-sub-menu__icon-arrow,.charrue-sidebar-menu-children .el-menu-item:hover .el-submenu__icon-arrow,.charrue-sidebar-menu-children .el-menu-item:hover a{color:var(--charrue-sidebar-hover-text-color,#fff);text-decoration:none}.charrue-sidebar-menu-children .el-menu-item a{color:var(--charrue-sidebar-text-color,#a6adb4);--el-menu-text-color:var(--charrue-sidebar-text-color, $charrue-sidebar-text-color);background-color:var(--charrue-sidebar-bg-color,#001529);--el-menu-bg-color:var(--charrue-sidebar-bg-color, $charrue-sidebar-bg-color);text-decoration:none;outline:0}.charrue-sidebar-menu-children .el-menu-item.is-active,.charrue-sidebar-menu-children .el-menu-item.is-active .charrue-sidebar-menu-icon,.charrue-sidebar-menu-children .el-menu-item.is-active .el-sub-menu__icon-arrow,.charrue-sidebar-menu-children .el-menu-item.is-active .el-submenu__icon-arrow,.charrue-sidebar-menu-children .el-menu-item.is-active a{color:var(--charrue-sidebar-active-text-color,var(--charrue-sidebar-hover-text-color,#fff))}.charrue-sidebar-menu-children .el-menu-item.is-active{background-color:var(--charrue-sidebar-active-bg-color,var(--charrue-sidebar-hover-bg-color,#1890ff))}.charrue-sidebar-menu-children .el-sub-menu__title,.charrue-sidebar-menu-children .el-submenu__title{text-align:left;color:var(--charrue-sidebar-text-color,#a6adb4);--el-menu-text-color:var(--charrue-sidebar-text-color, $charrue-sidebar-text-color)}.charrue-sidebar-menu-children .el-sub-menu__title .charrue-sidebar-menu-icon,.charrue-sidebar-menu-children .el-submenu__title .charrue-sidebar-menu-icon{color:var(--charrue-sidebar-text-color,#a6adb4);--el-menu-text-color:var(--charrue-sidebar-text-color, $charrue-sidebar-text-color)}.charrue-sidebar-menu-children .el-sub-menu__title:hover,.charrue-sidebar-menu-children .el-submenu__title:hover{color:var(--charrue-sidebar-hover-text-color,#fff);background-color:var(--charrue-sidebar-hover-bg-color,#1890ff);--el-menu-active-color:var(--charrue-sidebar-hover-bg-color, $charrue-sidebar-hover-bg-color)}.charrue-sidebar-menu-children .el-sub-menu__title:hover .charrue-sidebar-menu-icon,.charrue-sidebar-menu-children .el-sub-menu__title:hover .el-sub-menu__icon-arrow,.charrue-sidebar-menu-children .el-sub-menu__title:hover .el-submenu__icon-arrow,.charrue-sidebar-menu-children .el-submenu__title:hover .charrue-sidebar-menu-icon,.charrue-sidebar-menu-children .el-submenu__title:hover .el-sub-menu__icon-arrow,.charrue-sidebar-menu-children .el-submenu__title:hover .el-submenu__icon-arrow{color:var(--charrue-sidebar-hover-text-color,#fff)}.charrue-sidebar-menu-children .el-sub-menu__title__icon-arrow,.charrue-sidebar-menu-children .el-submenu__title__icon-arrow{margin-top:-4px}.charrue-sidebar-menu-children .el-sub-menu.is-active,.charrue-sidebar-menu-children .el-sub-menu.is-active .el-menu,.charrue-sidebar-menu-children .el-submenu.is-active,.charrue-sidebar-menu-children .el-submenu.is-active .el-menu{background-color:var(--charrue-sidebar-submenu-active-bg-color,#000c17)}.el-menu--popup{padding:0}