Merge branch '5.2' into 5.3

[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;
				}
			}
			
			&:nth-child(even) {
				.boxImage {
					float: right;
				}
			}
		}
	}
	
	@include screen-sm-md {
		.boxWithImage {
			&:nth-child(odd) {
				.boxImage {
					margin: 0 10px 10px 0;
				}
			}
			
			&:nth-child(even) {
				.boxImage {
					margin: 0 0 10px 10px;
				}
			}
		}
	}
	
	@include screen-lg {
		.boxWithImage {
			&:nth-child(odd) {
				.boxImage {
					margin: 0 20px 20px 0;
				}
			}
			
			&:nth-child(even) {
				.boxImage {
					margin: 0 0 20px 20px;
				}
			}
		}
	}
}

.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;
				color: $wcfContentLink;
				
				&:hover {
					color: $wcfContentLinkActive;
				}
			}
			
			.boxMenuDepth1 .boxMenuLink {
				padding-left: 40px;
			}
			
			.boxMenuDepth2 .boxMenuLink {
				padding-left: 60px;
			}
			
			.boxMenuItem .boxMenuLink {
				padding-left: 100px;
			}
			
			.boxMenuItemDepth1 .boxMenuLink {
				padding-left: 20px;
			}
			
			.boxMenuItemDepth2 .boxMenuLink {
				padding-left: 40px;
			}
			
			.boxMenuItemDepth3 .boxMenuLink {
				padding-left: 60px;
			}
			
			.boxMenuItemDepth4 .boxMenuLink {
				padding-left: 80px;
			}
		}
	}
	
	@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;
	}
	
	.boxMenuDepth1 li.active > .boxMenuLink {
		padding-left: 30px;
	}
	
	.boxMenuDepth2 li.active > .boxMenuLink {
		padding-left: 50px;
	}
}

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

/* collapsible sidebar for mobile devices */
@include screen-md-down {
	.main > .layoutBoundary {
		display: flex;
		flex-wrap: wrap;
		
		> .content {
			flex: 0 0 100%;
			order: 3;
		}
		
		> .boxesSidebarLeft {
			order: 1;
		}
		
		> .boxesSidebarRight {
			order: 2;
		}
	}
	
	.boxesSidebarLeft,
	.boxesSidebarRight {
		flex: 1 0 100%;
		pointer-events: none;
		
		> .boxContainer {
			pointer-events: all;
		}
		
		&:not(.open) {
			flex: 1 50%;
			
			> .boxContainer {
				display: none;
			}
		}
		
		&::before {
			background-color: $wcfSidebarBackground;
			color: $wcfSidebarLink;
			content: attr(data-show-sidebar);
			display: block;
			padding: 10px 0;
			pointer-events: all;
			text-align: center;
		}
		
		&.open::before {
			content: attr(data-hide-sidebar);
			margin-bottom: 20px;
		}
	}
	
	.boxesSidebarLeft.boxesSidebarLeftHasMenu {
		&::before {
			content: attr(data-show-navigation);
		}
		
		&.open::before {
			content: attr(data-hide-navigation);
		}
	}
	
	.boxesSidebarLeft:not(.open) + .content + .boxesSidebarRight:not(.open) {
		border-left: 1px solid $wcfContentBackground;
		margin-left: 10px;
		margin-top: 0;
	}
	
	.content:first-child + .boxesSidebarRight {
		margin-bottom: 20px;
		margin-top: 0;
	}
}

/* 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;
			}
		}
	}
	
	.boxInfo {
		background-color: $wcfStatusInfoBackground;
		color: $wcfStatusInfoText;
		padding: 20px;
		text-align: center;
		
		a:not(.button) {
			color: $wcfStatusInfoLink;
			
			@include wcfFontBold;
			
			&:hover {
				color: $wcfStatusInfoLinkActive;
				text-decoration: underline;
			}
		}
		
		.formSubmit {
			margin-top: 20px;
		}
	}
	
	@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;
		}
		
		.boxImage {
			float: left;
			width: 30%;
		}
	}
	
	@include screen-sm-md {
		.boxImage {
			margin: 0 10px 10px 0;
		}
	}
	
	@include screen-lg {
		.boxImage {
			margin: 0 20px 20px 0;
		}
	}
}

.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;
		}
		
		.boxImage {
			float: left;
			width: 30%;
		}
	}
	
	@include screen-sm-md {
		.boxImage {
			margin: 0 10px 10px 0;
		}
	}
	
	@include screen-lg {
		.boxImage {
			margin: 0 20px 20px 0;
		}
	}
	
	.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;
				}
			}
		}
	}
}

.boxWithEditButton {
	position: relative;
	
	
	
	.boxEditButton {
		color: inherit;
		opacity: 0;
		position: absolute;
		top: 4px;
		transition: opacity .12s ease-in-out;
		right: 4px;
		
		&:hover {
			color: inherit;
		}
		
		> .icon {
			color: inherit;
		}
	}
}

html:not(.touch) .boxWithEditButton:hover .boxEditButton {
	opacity: 1;
}

.boxMenuResetFilter {
	margin-top: 10px;
}