cmc-web/packages/common/css/lib/components/sidebar.scss

131 lines
3.0 KiB
SCSS
Raw Normal View History

2024-08-20 12:11:31 +00:00
.sidebar-container {
z-index: 3;
width: 180px !important;
transition: width 0.18s;
.scrollbar-wrapper {
height: calc(100vh - 50px);
.el-scrollbar__wrap{
overflow-x: hidden;
}
}
.sidebar-menu {
width: 180px;
height: calc(100vh - 50px);
border: 0;
}
.sidebar-menu::-webkit-scrollbar {
display: none;
}
.el-submenu__title > i,
.el-menu-item > i{
margin-right: 6px;
}
.el-submenu.is-opened .el-submenu__title{
color: #fff !important;
& > i {
color: #fff !important;
}
}
.el-menu-item.is-active i {
color: #fff !important;
}
.el-submenu .el-menu-item{
min-width: 180px !important;
background: #15171d !important;
&.is-active{
background: #1890ff !important;
}
}
.menu-wrapper .el-menu-item{
&.is-active{
background: #1890ff !important;
}
}
.el-menu--collapse {
width: 64px;
overflow: inherit;
}
.logo {
height: 50px;
position: relative;
line-height: 50px;
transition: all 0.3s;
background: #21242e;
overflow: hidden;
text-align: center;
img {
display: inline-block;
vertical-align: middle;
height: 32px;
}
.short-logo{
display: none;
}
h1 {
color: #fff;
display: inline-block;
vertical-align: middle;
font-size: 18px;
margin: 0 0 0 8px;
font-family: "Myriad Pro", "Helvetica Neue", Arial, Helvetica,
sans-serif;
font-weight: 600;
}
}
}
.hideSidebar {
.sidebar-container {
width: 64px !important;
.el-menu--collapse {
.el-submenu {
overflow: hidden;
&>.el-submenu__title {
&>span {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
}
.el-submenu__icon-arrow{
display: none;
}
}
}
}
.logo{
img{
display: none;
}
.short-logo{
display: inline-block;
}
}
}
}
.top-menu{
float: left;
}
// 顶部布局
.el-menu--horizontal {
border: none !important;
&>.menu-wrapper{
float: left;
}
.el-menu-item>i, .el-submenu__title>i {
margin-right: 6px;
}
.el-menu-item {
float: left;
height: 60px;
line-height: 60px;
margin: 0;
//border-bottom: 2px solid transparent;
color: #909399;
&.is-active {
//border-bottom: 2px solid #409eff;
color: #303133;
}
}
}