Merge branch '2.1'

[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 {
	@include wcfFontHeadline;
	
	& + .boxContent {
		margin-top: 20px;
	}
	
	.badge {
		top: -2px;
	}
}

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

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

.boxContentSeparator {
	background: $wcfContentBorderInner;
	border: 0;
	height: 1px;
	margin: 30px auto;
	width: 60%;
}

/* styling for boxes in <hero> position */
.boxesHero {
	.boxContainer {
		@include screen-md-down {
			padding: 40px 0;
		}
		
		@include screen-lg {
			padding: 60px 0;
		}
	}
	
	.box {
		text-align: center;
		
		&:not(:last-child) {
			@include screen-md-down {
				margin-bottom: 40px;
			}
			
			@include screen-lg {
				margin-bottom: 60px;
			}
		}
	}
	
	.boxTitle {
		@include wcfFontTitle;
	}
	
	.boxWithImage {
		display: flex;
		flex-wrap: wrap;
		
		.boxImage,
		.boxTitle,
		.boxContent {
			flex: 0 0 100%;
		}
		
		.boxImage {
			align-items: center;
			display: flex;
			justify-content: center;
			max-height: 750px;
			order: 3;
			overflow: hidden;
			
			@include screen-md-down {
				margin-top: 20px;
			}
			
			@include screen-lg {
				margin-top: 30px;
			}
		}
	}
}

/* styling for boxes in <headerBoxes> position */
.boxesHeaderBoxes {
	background-color: $wcfFooterBoxBackground;
	color: $wcfFooterBoxText;
	
	a {
		color: $wcfFooterBoxLink;
		
		&:hover {
			color: $wcfFooterBoxLinkActive;
		}
	}
	
	.icon {
		color: $wcfFooterBoxText;
	}
	
	.boxContainer {
		@include screen-sm-up {
			display: flex;
			flex-wrap: wrap;
		}
		
		@include screen-md-down {
			padding: 40px 0;
			margin-bottom: -40px;
			margin-left: -10px;
			margin-right: -10px;
		}
		
		@include screen-lg {
			padding: 60px 0;
			margin-bottom: -60px;
			margin-left: -15px;
			margin-right: -15px;
		}
	}
	
	.box {
		overflow: hidden;
		padding-left: 15px;
		padding-right: 15px;
		
		@include screen-md-down {
			margin-bottom: 40px;
		}
		
		@include screen-sm-md {
			flex: 0 0 50%;
			max-width: 50%;
			
			&.boxFullWidth {
				flex-basis: 100%;
				max-width: 100%;
			}
			
			/* one item */
			&:first-child:nth-last-child(1) {
				flex-basis: 100%;
				max-width: 100%;
			}
		}
		
		@include screen-lg {
			flex: 0 0 25%;
			margin-bottom: 60px;
			max-width: 25%;
			
			&.boxFullWidth {
				flex-basis: 100%;
				max-width: 100%;
			}
			
			/* one item */
			&:first-child:nth-last-child(1) {
				flex-basis: 100%;
				max-width: 100%;
			}
			
			/* two items */
			&:first-child:nth-last-child(2),
			&:first-child:nth-last-child(2) ~ .box {
				flex-basis: 50%;
				max-width: 50%;
			}
			
			/* three items */
			&:first-child:nth-last-child(3),
			&:first-child:nth-last-child(3) ~ .box {
				flex-basis: 33.3333%;
				max-width: 33.3333%;
			}
		}
	}
	
	.boxImage {
		align-items: center;
		display: flex;
		justify-content: center;
		margin-bottom: 20px;
		max-height: 100px;
		overflow: hidden;
	}
}

/* styling for boxes in <top>/<bottom> position */
.boxesTop,
.boxesBottom {
	.box {
		@include screen-md-down {
			margin-bottom: 40px;
			margin-top: 40px;
		}
		
		@include screen-lg {
			margin-bottom: 60px;
			margin-top: 60px;
		}
	}
	
	.boxTitle {
		color: $wcfContentHeadlineText;
		
		@include wcfFontSection;
		
		a {
			color: $wcfContentHeadlineLink;
			
			&:hover {
				color: $wcfContentHeadlineLinkActive;
			}
		}
	}
	
	@include screen-xs {
		.boxImage {
			align-items: center;
			display: flex;
			justify-content: center;
			margin-bottom: 20px;
			max-height: 100px;
			overflow: hidden;
		}
	}
	
	@include screen-sm-up {
		.boxImage {
			width: 30%;
		}
		
		.boxWithImage {
			@include clearfix;
			
			&:nth-child(odd) {
				.boxImage {
					float: left;
				}
				
				.boxTitle,
				.boxContent {
					@include screen-md-down {
						margin-left: calc(30% + 15px);
					}
					
					@include screen-lg {
						margin-left: calc(30% + 30px);
					}
				}
			}
			
			&:nth-child(even) {
				.boxImage {
					float: right;
				}
				
				.boxTitle,
				.boxContent {
					@include screen-md-down {
						margin-right: calc(30% + 15px);
					}
					
					@include screen-lg {
						margin-right: calc(30% + 30px);
					}
				}
			}
		}
	}
}

.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;
		
		&:hover {
			color: $wcfSidebarLinkActive;
		
		}
	}
	
	> .boxContainer {
		@include screen-sm {
			-webkit-columns: 2;
			-moz-columns: 2;
			columns: 2;
		}
		
		@include screen-md {
			-webkit-columns: 3;
			-moz-columns: 3;
			columns: 3;
		}
		
		@include screen-sm-md {
			margin-bottom: -30px;
			
			-webkit-column-gap: 30px;
			-moz-column-gap: 30px;
			column-gap: 30px;
			
			> .box {
				/* Sections should never be split, but Firefox, IE and Edge don't seem
			           to care about this despite advertising the support for it. We can work
			           around this by using `overflow: hidden` which magically does the job,
			           but doesn't affect Chrome which properly breaks anyway. */
				overflow: hidden; /* Fix for Firefox, IE and Edge */
				
				// WebKit fix
				background-clip: padding-box;
				border-bottom: 30px solid transparent;
				display: block;
				margin: 0 !important;
				width: 100%;
				
				-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
				page-break-inside: avoid; /* Firefox */
				break-inside: avoid; /* IE 10+ */
			}
		}
	}
	
	.icon {
		color: $wcfSidebarText;
	}
	
	small,
	.dimmed {
		color: $wcfSidebarDimmedText;
		
		a {
			color: $wcfSidebarDimmedLink;
			
			&:hover {
				color: $wcfSidebarDimmedLinkActive;
			}
		}
	}
	
	.boxTitle {
		color: $wcfSidebarHeadlineText;
		
		a {
			color: $wcfSidebarHeadlineLink;
			
			&:hover {
				color: $wcfSidebarHeadlineLinkActive;
				
			}
		}
	}
	
	.box {
		&:not(.boxBorderless) {
			background-color: $wcfSidebarBackground;
			
			@include screen-md-down {
				padding: 20px 10px;
				
				.boxMenu {
					margin-left: -10px;
					margin-right: -10px;
				}
			}
			
			@include screen-lg {
				padding: 20px;
				
				.boxMenu {
					margin-left: -20px;
					margin-right: -20px;
				}
			}
		}
		
		&:not(:first-child) {
			margin-top: 30px;
		}
		
		&.boxError,
		&.boxInfo,
		&.boxSuccess,
		&.boxWarning {
			a:not(.button) {
				@include wcfFontBold;
				
				&:hover {
					text-decoration: underline;
				}
			}
		}
		
		&.boxError {
			background-color: $wcfStatusErrorBackground;
			color: $wcfStatusErrorText;
			
			a:not(.button) {
				color: $wcfStatusErrorLink;
				
				&:hover {
					color: $wcfStatusErrorLinkActive;
				}
			}
		}
		
		&.boxInfo {
			background-color: $wcfStatusInfoBackground;
			color: $wcfStatusInfoText;
			
			a:not(.button) {
				color: $wcfStatusInfoLink;
				
				&:hover {
					color: $wcfStatusInfoLinkActive;
				}
			}
		}
		
		&.boxSuccess {
			background-color: $wcfStatusSuccessBackground;
			color: $wcfStatusSuccessText;
			
			a:not(.button) {
				color: $wcfStatusSuccessLink;
				
				&:hover {
					color: $wcfStatusSuccessLinkActive;
				}
			}
		}
		
		&.boxWarning {
			background-color: $wcfStatusWarningBackground;
			color: $wcfStatusWarningText;
			
			a:not(.button) {
				color: $wcfStatusWarningLink;
				
				&:hover {
					color: $wcfStatusWarningLinkActive;
				}
			}
		}
		
		.boxMenu {
			.boxMenuLink {
				align-items: flex-start;
				display: flex;
				padding: 5px 20px;
				
				.boxMenuLinkTitle {
					flex: 1 1 auto;
				}
				
				.badge {
					flex: 0 0 auto;
				}
			}
			
			li.active > .boxMenuLink {
				background-color: $wcfContentBackground;
			}
			
			.boxMenuDepth1 .boxMenuLink {
				padding-left: 40px;
			}
			
			.boxMenuDepth2 .boxMenuLink {
				padding-left: 60px;
			}
			
			@include screen-md-down {
				position: relative;
				
				.boxMenuLink,
				.boxMenuLinkTitle {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				
				&:not(.open):not(.forceOpen) {
					> li:first-child,
					> li.active:not(:first-child) {
						pointer-events: none;
						
						> a::after {
							content: $fa-var-caret-down;
							font-family: FontAwesome;
							font-size: 14px;
							margin-left: 7px;
						}
						
						.boxMenuDepth1,
						.boxMenuDepth2 {
							position: relative;
							
							> li {
								&:not(.active) {
									display: none;
								}
								
								&.active {
									left: 0;
									position: absolute;
									right: 0;
									top: 0;
									transform: translateY(-100%);
									
									> a::after {
										content: $fa-var-caret-down;
										font-family: FontAwesome;
										font-size: 14px;
										margin-left: 7px;
									}
								}
							}
						}
					}
					
					> li:first-child ~ li {
						display: none;
					}
					
					> li.active:not(:first-child) {
						display: block;
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
					}
				}
			}
		}
	}
	
	@include screen-xs {
		.boxImage {
			align-items: center;
			display: flex;
			justify-content: center;
			margin-bottom: 20px;
			max-height: 100px;
			overflow: hidden;
		}
	}
	
	@include screen-sm-md {
		.boxWithImage {
			@include clearfix;
			
			.boxTitle,
			.boxContent {
				margin-left: calc(30% + 15px);
			}
		}
		
		.boxImage {
			float: left;
			width: 30%;
		}
	}
	
	@include screen-lg {
		.boxImage {
			align-items: center;
			display: flex;
			justify-content: center;
			margin-bottom: 20px;
			max-height: 100px;
			overflow: hidden;
		}
	}
}

.boxesSidebarLeft .box .boxMenu li.active > .boxMenuLink {
	margin-left: 10px;
	padding-left: 10px;
}

.boxesSidebarRight .box .boxMenu li.active > .boxMenuLink {
	margin-right: 10px;
	padding-right: 10px;
}

/* styling for boxes in <contentTop>/<contentBottom> position */
.boxesContentTop,
.boxesContentBottom {
	.box {
		&:not(:first-child) {
			margin-top: 40px;
		}
	}
	
	.boxTitle {
		color: $wcfContentHeadlineText;
		
		@include wcfFontSection;
		
		a {
			color: $wcfContentHeadlineLink;
			
			&:hover {
				color: $wcfContentHeadlineLinkActive;
			}
		}
	}
	
	@include screen-xs {
		.boxImage {
			align-items: center;
			display: flex;
			justify-content: center;
			margin-bottom: 20px;
			max-height: 100px;
			overflow: hidden;
		}
	}
	
	@include screen-sm-up {
		.boxWithImage {
			@include clearfix;
			
			.boxTitle,
			.boxContent {
				@include screen-md-down {
					margin-left: calc(30% + 15px);
				}
				
				@include screen-lg {
					margin-left: calc(30% + 30px);
				}
			}
		}
		
		.boxImage {
			float: left;
			width: 30%;
		}
	}
}

.boxesContentTop:not(:first-child) {
	margin-top: 40px;
}

.boxesContentBottom {
	margin-top: 40px;
}

/* styling for boxes in <footerBoxes> position */
.boxesFooterBoxes {
	background-color: $wcfFooterBoxBackground;
	color: $wcfFooterBoxText;
	
	a {
		color: $wcfFooterBoxLink;
		
		&:hover {
			color: $wcfFooterBoxLinkActive;
		}
	}
	
	.icon {
		color: $wcfFooterBoxText;
	}
	
	.boxContainer {
		@include screen-sm-down {
			padding: 40px 0;
		}
		
		@include screen-md-down {
			margin-left: -10px;
			margin-right: -10px;
		}
		
		@include screen-md-up {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: -60px;
			padding: 60px 0;
		}
		
		@include screen-lg {
			margin-left: -15px;
			margin-right: -15px;
		}
	}
	
	.box {
		overflow: hidden;
		padding-left: 15px;
		padding-right: 15px;
		
		@include screen-sm-down {
			&:not(:last-child) {
				margin-bottom: 40px;
			}
		}
		
		@include screen-md-up {
			flex: 0 0 50%;
			margin-bottom: 60px;
			max-width: 50%;
			
			&.boxFullWidth {
				flex-basis: 100%;
				max-width: 100%;
			}
		}
	}
	
	.boxTitle {
		color: $wcfFooterBoxHeadlineText;
		
		a {
			color: $wcfFooterBoxHeadlineLink;
			
			&:hover {
				color: $wcfFooterBoxHeadlineLinkActive;
			}
		}
	}
	
	.boxImage {
		align-items: center;
		display: flex;
		justify-content: center;
		margin-bottom: 20px;
		max-height: 100px;
		overflow: hidden;
	}
}

/* styling for boxes in <footer> position */
.boxesFooter {
	background-color: $wcfFooterBackground;
	color: $wcfFooterText;
	padding: 20px 0;
	
	.icon {
		color: $wcfFooterText;
	}
	
	a {
		color: $wcfFooterLink;
		
		&:hover {
			color: $wcfFooterLinkActive;
			text-decoration: underline;
		}
	}
	
	.box {
		&:not(:first-child) {
			margin-top: 20px;
		}
	}
	
	.boxTitle {
		color: $wcfFooterHeadlineText;
		
		a {
			color: $wcfFooterHeadlineLink;
			
			&:hover {
				color: $wcfFooterHeadlineLinkActive;
			}
		}
	}
	
	@include screen-xs {
		.boxImage {
			align-items: center;
			display: flex;
			justify-content: center;
			margin-bottom: 20px;
			max-height: 100px;
			overflow: hidden;
		}
	}
	
	@include screen-sm-up {
		.boxWithImage {
			@include clearfix;
			
			.boxTitle,
			.boxContent {
				@include screen-md-down {
					margin-left: calc(30% + 15px);
				}
				
				@include screen-lg {
					margin-left: calc(30% + 30px);
				}
			}
		}
		
		.boxImage {
			float: left;
			width: 30%;
		}
	}
	
	.boxMenuLinkGroup {
		.boxMenu {
			> li {
				> ol {
					a {
						// use text color instead
						color: $wcfFooterText;
					}
				}
			}
		}
	}
	
	.styleChanger {
		@include screen-sm-down {
			display: none;
		}
		
		@include screen-md-up {
			float: right;
			padding-left: 20px;
		}
	}
}

.boxesTop,
.boxesBottom,
.boxesFooter {
	.boxMenu {
		display: inline-flex;
		flex-wrap: wrap;
		margin-left: -10px;
		margin-right: -10px;
		
		> li {
			flex: 0 0 auto;
			padding-left: 10px;
			padding-right: 10px;
		}
	}
	
	.boxMenuLinkGroup {
		&:not(:first-child) {
			margin-top: 40px;
		}
		
		.boxMenu {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: -20px;
			
			.boxMenuLink {
				display: inline-block;
			}
			
			> li {
				@include screen-md-up {
					flex: 0 0 25%;
					max-width: 25%;
				}
				
				@include screen-sm-down {
					flex: 1 1 100%;
				}
				
				margin-bottom: 20px;
				
				> .boxMenuLink {
					@include wcfFontHeadline;
					
					margin-bottom: 10px;
				}
			}
		}
	}
}