Merge branch '3.0'

[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / layout / layout.scss

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:
   
   <leftSidebar> <content> <rightSidebar>
   
   becomes:
   
   <leftSidebar>
   <content>
   <rightSidebar>
*/
@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%;
			}
		}
	}
}