zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

style:refine sidebar css

This commit is contained in:
Pan 2017-11-02 15:51:29 +08:00
parent aaf24b4654
commit c53fb7fbb1
3 changed files with 47 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/TodoList/index.scss
View File

@ -4,10 +4,13 @@
color: #4d4d4d; color: #4d4d4d;
min-width: 230px; min-width: 230px;
max-width: 550px; max-width: 550px;
margin: 40PX auto 0; margin: 40px auto 0;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
font-weight: 300; font-weight: 300;
background: #fff;
z-index: 1;
position: relative;
button { button {
margin: 0; margin: 0;
padding: 0; padding: 0;

40
src/styles/sidebar.scss
View File

@ -1,4 +1,38 @@
// 主体区域
.main-container {
min-height: 100%;
transition: margin-left 0.28s;
margin-left: 180px;
}
// 侧边栏 // 侧边栏
.hideSidebar {
.sidebar-container {
width: 36px!important; // overflow: inherit;
}
.main-container {
margin-left: 36px;
}
}
// .horizontal-collapse-transition{
// transition: width 0.28s!important;
// }
.sidebar-container {
// transition: width 0.28s ease-out;
transition: width 0.28s!important;
width: 180px!important;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 1001; // overflow-y: auto;
&::-webkit-scrollbar {
display: none
}
}
.sidebar-container>.el-menu { .sidebar-container>.el-menu {
width: 100%!important; width: 100%!important;
min-height: 100%; min-height: 100%;
@ -66,7 +100,7 @@
text-align: left; text-align: left;
text-indent: 20px; text-indent: 20px;
top: 0px; top: 0px;
background-color: #1f2d3d; background-color: #2B2C2D!important;
opacity: 1; opacity: 1;
} }
} }
@ -74,4 +108,8 @@
.el-submenu .el-menu-item { .el-submenu .el-menu-item {
min-width: 180px!important; min-width: 180px!important;
background-color: #2B2C2D!important;
&:hover {
background-color: rgb(67, 74, 80)!important;
}
} }

34
src/views/layout/Layout.vue
View File

@ -31,35 +31,9 @@ export default {
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss"; @import "src/styles/mixin.scss";
.app-wrapper { .app-wrapper {
@include clearfix; @include clearfix;
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
&.hideSidebar {
.sidebar-container{
width:36px;
overflow: inherit;
}
.main-container {
margin-left: 36px;
}
}
.sidebar-container {
transition: width 0.28s ease-out;
width: 180px;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 1001;
overflow-y: auto;
&::-webkit-scrollbar {display:none}
}
.main-container {
min-height: 100%;
transition: margin-left 0.28s ease-out;
margin-left: 180px;
}
} }
</style> </style>