@pageWidth: 1020px;
@containerWidth: 980px;
-@sideWidth: 200px;
-@fullWidthSideWidth: 40px;
+@contentWidth: 780px;
@sideMargin: 10px;
+@sideWidth: @containerWidth - @contentWidth - @sideMargin;
html {
overflow-y: scroll;
width: @containerWidth;
margin: 0 auto;
.box-sizing(border-box);
- .trans(width);
}
.container-full-width {
- width: ~"calc(100% - @{fullWidthSideWidth})";
+ width: ~"calc(100% - 40px)";
.container-main {
width: 100%;
}
.container-side {
- position: absolute;
- .translate(-100%, 0);
- opacity: 0;
+ display: none;
}
}
.container-side {
width: @sideWidth;
.box-sizing(border-box);
- .trans;
}
.container-side-left {
float: left;
padding-right: @sideMargin;
+ border-right: 1px solid @barBackgroundColor;
+}
+
+.container-side-left + .container-main {
+ padding-left: @sideMargin;
}
.container-side-right {
float: right;
padding-left: @sideMargin;
+ border-left: 1px solid @barBackgroundColor;
+}
+
+.container-side-right + .container-main {
+ padding-right: @sideMargin;
}
.container-main {
float: left;
- width: @containerWidth - @sideWidth;
- .box-sizing(border-box);
- .trans(width);
+ width: @contentWidth;
}
.face-bar {