@import './variables.scss';
|
#app {
|
.main-container {
|
height: 100%;
|
transition: margin-left .28s;
|
margin-left: $sideBarWidth;
|
position: relative;
|
}
|
|
.sidebar-container {
|
position: fixed;
|
height: 100%;
|
width: $sideBarWidth !important;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
overflow: hidden;
|
background: $menuBg;
|
transition: all .28s;
|
|
.scrollbar-wrapper {
|
overflow-x: hidden !important;
|
}
|
|
.el-scrollbar {
|
height: 100%;
|
}
|
|
.svg-icon {
|
margin-right: 16px;
|
}
|
}
|
|
.hidcontainer {
|
.sidebar-container {
|
width: 54px !important;
|
transition: all .28s;
|
}
|
|
.main-container {
|
margin-left: 54px;
|
}
|
|
.svg-icon {
|
margin-right: 20px;
|
}
|
}
|
::-webkit-scrollbar {
|
width:5px;
|
height:10px;
|
|
}
|
|
/*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果*/
|
::-webkit-scrollbar-track {
|
width: 6px;
|
background-color:#eee;
|
-webkit-border-radius: 2em;
|
-moz-border-radius: 2em;
|
border-radius:2em;
|
|
}
|
|
/*滚动条的设置*/
|
|
::-webkit-scrollbar-thumb {
|
background-color:#cccccc;
|
background-clip:padding-box;
|
min-height:28px;
|
-webkit-border-radius: 2em;
|
-moz-border-radius: 2em;
|
border-radius:2em;
|
|
}
|
/*滚动条移上去的背景*/
|
|
::-webkit-scrollbar-thumb:hover {
|
background-color:#c5cfe4;
|
|
}
|
|
|
}
|
