@{alain-default-prefix}__aside {
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
margin-top: @alain-default-header-hg;
|
width: @alain-default-aside-wd;
|
background-color: @alain-default-aside-bg;
|
transition: width 0.2s @alain-default-ease, translate 0.2s @alain-default-ease;
|
z-index: @zindex + 5;
|
overflow: hidden;
|
backface-visibility: hidden;
|
-webkit-overflow-scrolling: touch;
|
&:after {
|
content: '';
|
position: absolute;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
border-right: 1px solid @alain-default-content-heading-border;
|
}
|
&-inner {
|
overflow-x: hidden;
|
overflow-y: scroll; // margin-right: -17px;
|
height: 100%;
|
-webkit-overflow-scrolling: touch;
|
/*IE10,IE11*/
|
-ms-scroll-chaining: chained;
|
-ms-overflow-style: none;
|
-ms-content-zooming: zoom;
|
-ms-scroll-rails: none;
|
-ms-content-zoom-limit-min: 100%;
|
-ms-content-zoom-limit-max: 500%;
|
-ms-scroll-snap-type: proximity;
|
-ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
|
-ms-overflow-style: none;
|
&::-webkit-scrollbar {
|
height: @alain-default-aside-scrollbar-width;
|
width: @alain-default-aside-scrollbar-height;
|
}
|
&::-webkit-scrollbar-track {
|
-webkit-box-shadow: inset 0 0 @alain-default-aside-scrollbar-width
|
@alain-default-aside-scrollbar-track-color;
|
}
|
&::-webkit-scrollbar-thumb {
|
background-color: @alain-default-aside-scrollbar-thumb-color;
|
}
|
}
|
}
|
|
// Desktop
|
@media (min-width: @mobile-min) {
|
@{alain-default-prefix}__collapsed {
|
@{alain-default-prefix}__aside {
|
width: @alain-default-aside-collapsed-wd;
|
}
|
}
|
}
|
|
// Under pad
|
@media (max-width: @mobile-max) {
|
@{alain-default-prefix}__aside,
|
@{alain-default-prefix}__content {
|
transition: transform 0.3s ease;
|
}
|
@{alain-default-prefix}__content {
|
transform: translate3d(@alain-default-aside-wd, 0, 0);
|
}
|
@{alain-default-prefix}__collapsed {
|
@{alain-default-prefix}__aside {
|
transform: translate3d(-100%, 0, 0);
|
}
|
@{alain-default-prefix}__content {
|
transform: translateZ(0);
|
}
|
}
|
}
|
