html.disableScrolling {
overflow: hidden !important;
body {
overflow: hidden !important;
@include screen-md-down {
position: fixed !important;
}
}
}
html, body {
font-weight: 400;
height: 100%;
@include wcfLineHeight;
@include wcfFontDefault;
}
body {
background-color: $wcfContentBackground;
color: $wcfContentText;
font-family: $wcfFontFamily;
position: relative;
width: 100%;
word-wrap: break-word;
}
a {
color: $wcfContentLink;
cursor: pointer;
text-decoration: none;
&:hover {
color: $wcfContentLinkActive;
text-decoration: none;
}
}
.pageContainer {
display: flex;
height: 100%;
flex-direction: column;
}
/* COLUMN LAYOUT */
.pageHeaderContainer,
.boxesHeaderBoxes,
.pageNavigation,
.pageFooter,
.boxesTop,
.boxesBottom,
.boxesFooterBoxes {
flex: 0 0 auto;
}
.main {
flex: 1 0 auto;
@include screen-xs {
padding: 20px 0;
width: 100%;
}
@include screen-sm-md {
padding: 40px 0;
width: 100%;
}
@include screen-lg {
padding: 60px 0;
}
}
/* use flex-box to enforce a proper side-by-side layout on desktop */
@include screen-lg {
.main > div {
display: flex;
}
.content {
flex: 1 1 0px;
// sidebar follows
&:not(:last-child) {
flex-basis: calc(100% - 340px);
max-width: calc(100% - 340px); // IE fix
}
& + .sidebar {
margin-left: 30px;
}
}
.sidebar {
flex: 0 0 310px;
overflow: hidden;
&:first-child {
margin-right: 30px;
}
& + .content {
flex-basis: calc(100% - 340px);
max-width: calc(100% - 340px); // IE fix
// sidebar follows
&:not(:last-child) {
flex-basis: calc(100% - 680px);
max-width: calc(100% - 680px); // IE fix
}
}
}
}
/* mobile arranges the sidebar and content vertically:
becomes:
*/
@include screen-md-down {
.sidebar {
margin: 0 -10px;
}
.sidebar + .content,
.content + .sidebar {
// gap between sidebars and content
margin-top: 30px;
}
}
.sideBySide {
margin-top: 20px;
@include screen-md-up {
display: table;
table-layout: fixed;
width: 100%;
> .section {
display: table-cell;
vertical-align: top;
width: 49%;
& + .section {
padding-left: 2%;
}
}
}
}