Use prettier for SCSS (#3895)

[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%;
			}
		}
	}
}