Study/web/src/style/side.scss

72 lines
1.3 KiB
SCSS

@import '@/style/basics.scss';
.el-aside {
-webkit-transition: width .2s;
transition: width .2s;
width: $width-aside;
background-color: $bg-aside;
height: 100%;
position: fixed;
font-size: 0;
top: 0;
bottom: 0;
left: 0;
z-index: 1001;
overflow: hidden;
color: $aside-color;
.el-menu {
border-right: none;
}
.tilte {
min-height: $height-aside-tilte;
line-height: $height-aside-tilte;
background: $bg-aside;
text-align: center;
.logoimg {
width: $width-aside-img;
height: $height-aside-img;
vertical-align: middle;
background: #fff;
border-radius: 50%;
padding: 3px;
}
.tit-text {
display: inline-block;
color: $aside-color;
font-weight: 600;
font-size: 20px;
vertical-align: middle;
padding-left: 10px;
}
}
}
.hideside {
.aside {
width: $width-hideside-aside;
}
}
.mobile.hideside {
.el-aside {
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transform: translate3d(-210px, 0, 0);
transform: translate3d(-220px, 0, 0);
}
}
.mobile {
.el-aside {
-webkit-transition: -webkit-transform .28s;
transition: -webkit-transform .28s;
transition: transform .28s;
transition: transform .28s, -webkit-transform .28s;
margin-left: -54px;
}
}