Style overhaul / added box layout

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

/* default styling for all boxes */ 
.box {
	box-sizing: border-box;
}

.boxImage {
	img {
		max-width: 100%;
	}
}

.boxTitle {
	@extend .wcfFontHeadline;
	
	& + .boxContent {
		margin-top: 10px;
	}
}

.boxContent {
	& + .boxContent,
	& + .boxTitle {
		margin-top: 20px;
	}
}

/* styling for boxes in <hero> position */
.boxesHero {
	.box {
		padding: 40px;
		text-align: center;
	}
	
	.boxTitle {
		@extend .wcfFontTitle;
		
		& + .boxContent {
			margin-top: 20px;
		}
	}
	
	.boxWithImage {
		display: flex;
		flex-wrap: wrap;
		
		.boxImage,
		.boxTitle,
		.boxContent {
			flex: 0 0 100%;
		}
		
		.boxImage {
			order: 3;
			margin-top: 40px;
		}
	}
}

/* styling for boxes in <headerBoxes> position */
.boxesHeaderBoxes {
	background-color: rgb(247, 248, 250); // @todo
	
	.layoutBoundary {
		display: flex;
		flex-wrap: wrap;
		padding: 40px 0;
	}
	
	.box {
		flex: 0 0 25%;
		padding-right: 10px;
		padding-left: 10px;
		
		&:nth-child(4n+1):not(:first-child) {
			margin-top: 20px;
		}
		
		/* one item */
		&:first-child:nth-last-child(1) {
			flex-basis: 100%;
		}
		
		/* two items */
		&:first-child:nth-last-child(2),
		&:first-child:nth-last-child(2) ~ .box {
			flex-basis: 50%;
		}
		
		/* three items */
		&:first-child:nth-last-child(3),
		&:first-child:nth-last-child(3) ~ .box {
			flex-basis: 33.3333%;
		}
	}
	
	.boxImage {
		margin-bottom: 10px;
		text-align: center;
	}
}

/* styling for boxes in <top>/<bottom> position */
.boxesTop,
.boxesBottom {
	border-bottom: 1px solid $wcfContentBorderInner;
	
	.layoutBoundary {
		padding: 40px 0;
	}
	
	.box {
		&:not(:first-child) {
			margin-top: 40px;
		}
	}
	
	.boxWithImage {
		@extend .clearfix;
		
		.boxTitle,
		.boxContent {
			margin-left: calc(20% + 30px);
		}
	}
	
	.boxImage {
		float: left;
		width: 20%;
	}
}

.boxesTop {
	border-bottom: 1px solid $wcfContentBorderInner;
}	
	
.boxesBottom {
	border-top: 1px solid $wcfContentBorderInner;
}

/* styling for boxes in <sidebarLeft>/<sidebarRight> position */
.boxesSidebarLeft,
.boxesSidebarRight {
	color: $wcfSidebarText;
	
	a {
		color: $wcfSidebarLink;
		
		> .icon {
			color: $wcfSidebarLink;
		}
		
		&:hover {
			color: $wcfSidebarLinkActive;
			
			> .icon {
				color: $wcfSidebarLinkActive;
			}
		}
	}
	
	small,
	.dimmed {
		color: $wcfSidebarDimmedText;
		
		a {
			color: $wcfSidebarDimmedLink;
			
			&:hover {
				color: $wcfSidebarDimmedLinkActive;
			}
		}
	}
	
	.box {
		background-color: $wcfSidebarBackground;
		padding: 20px;
		
		&:not(:first-child) {
			margin-top: 20px;
		}
	}
	
	.boxWithImage {
		@extend .clearfix;
		
		.boxTitle,
		.boxContent {
			margin-left: calc(20% + 10px);
		}
	}
	
	.boxImage {
		float: left;
		width: 20%;
	}
}

/* styling for boxes in <contentTop>/<contentBottom> position */
.boxesContentTop,
.boxesContentBottom {
	.boxTitle {
		color: $wcfContentHeadlineText;
		
		a {
			color: $wcfContentHeadlineLink;
			
			&:hover {
				color: $wcfContentHeadlineLinkActive;
			}
		}
	}
	
	.box {
		&:not(:first-child) {
			margin-top: 30px;
		}
	}
	
	.boxWithImage {
		@extend .clearfix;
		
		.boxTitle,
		.boxContent {
			margin-left: calc(20% + 20px);
		}
	}
	
	.boxImage {
		float: left;
		width: 20%;
	}
}

.boxesContentTop {
	margin-bottom: 40px;
}

.boxesContentBottom {
	margin-top: 40px;
}

/* styling for boxes in <footerBoxes> position */
.boxesFooterBoxes {
	background-color: $wcfFooterBoxBackground;
	color: $wcfFooterBoxText;
	flex: 0 0 auto;
	z-index: 40;
	
	a {
		color: $wcfFooterBoxLink;
		
		.icon {
			color: $wcfFooterBoxLink;
		}
		
		&:hover {
			color: $wcfFooterBoxLinkActive;
			
			.icon {
				color: $wcfFooterBoxLinkActive;
			}
		}
	}
	
	.icon {
		color: $wcfFooterBoxText;
	}
	
	.layoutBoundary {
		display: flex;
		flex-wrap: wrap;
		padding: 40px 0;
	}
	
	.box {
		flex: 0 0 50%;
		
		&:nth-child(n+3) {
			margin-top: 40px;
		}
		
		&:nth-child(even) {
			padding-left: 10px;
		}
		
		&:nth-child(odd) {
			padding-right: 10px;
		}
	}
	
	.boxImage {
		margin-bottom: 10px;
		text-align: center;
	}
}

/* styling for boxes in <footer> position */
.boxesFooter {
	margin-bottom: 40px;
	
	.box {
		&:not(:first-child) {
			margin-top: 40px;
		}
	}
	
	.boxWithImage {
		@extend .clearfix;
		
		.boxTitle,
		.boxContent {
			margin-left: calc(20% + 30px);
		}
	}
	
	.boxImage {
		float: left;
		width: 20%;
	}
}