[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%;
			
			&.boxFullWidth {
				flex-basis: 100%;
			}
			
			/* one item */
			&:first-child:nth-last-child(1) {
				flex-basis: 100%;
			}
		}
		
		@include screen-lg {
			flex: 0 0 25%;
			margin-bottom: 60px;
			
			&.boxFullWidth {
				flex-basis: 100%;
			}
			
			/* 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 {
		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: $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 {
			background-color: $wcfStatusErrorBackground;
			color: $wcfStatusErrorText;
		}
		
		&.boxInfo {
			background-color: $wcfStatusInfoBackground;
			color: $wcfStatusInfoText;
		}
		
		&.boxSuccess {
			background-color: $wcfStatusSuccessBackground;
			color: $wcfStatusSuccessText;
		}
		
		&.boxWarning {
			background-color: $wcfStatusWarningBackground;
			color: $wcfStatusWarningText;
		}
		
		.boxMenu {
			.boxMenuLink {
				display: block;
				padding: 5px 20px;
				
				.badge {
					float: right;
				}
			}
			
			li.active > .boxMenuLink {
				background-color: $wcfContentBackground;
			}
			
			.boxMenuDepth1 .boxMenuLink {
				padding-left: 40px;
			}
			
			.boxMenuDepth2 .boxMenuLink {
				padding-left: 60px;
			}
			
			@include screen-md-down {
				position: relative;
				
				.boxMenuLink {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				
				&:not(.open) {
					> 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;
						}
					}
					
					> 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;
		}
	}
}

/* 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;
			
			&.boxFullWidth {
				flex-basis: 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;
		}
	}
	
	@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%;
		}
	}
	
	.boxMenu {
		display: inline-flex;
		margin-left: -10px;
		margin-right: -10px;
		
		> li {
			flex: 0 0 auto;
			padding-left: 10px;
			padding-right: 10px;
		}
	}
	
	.footerLinks {
		&:not(:first-child) {
			margin-top: 40px;
		}
		
		.boxMenu {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: -20px;
			
			.boxMenuLink {
				display: inline-block;
			}
			
			> li {
				flex: 0 0 25%;
				margin-bottom: 20px;
				
				> .boxMenuLink {
					@include wcfFontHeadline;
					
					margin-bottom: 10px;
				}
				
				> ol {
					a {
						// use text color instead
						color: $wcfFooterText;
					}
				}
			}
		}
	}
	
	.styleChanger {
		@include screen-sm-down {
			display: none;
		}
		
		@include screen-md-up {
			float: right;
			padding-left: 20px;
		}
	}
}
Commit	Line	Data
bb6ef47e MW	1	/* default styling for all boxes */
	2	.box {
	3	box-sizing: border-box;
	4	}
	5
	6	.boxImage {
	7	img {
	8	max-width: 100%;
	9	}
	10	}
	11
	12	.boxTitle {
5908f54f	13	@include wcfFontHeadline;
bb6ef47e MW	14
bb6ef47e MW	15	& + .boxContent {
95961bdf MW	16	margin-top: 20px;
	17	}
	18
	19	.badge {
	20	top: -2px;
bb6ef47e MW	21	}
	22	}
	23
	24	.boxContent {
0b6161c6 MW	25	& + .boxContent {
	26	margin-top: 20px;
	27	}
	28	}
	29
	30	.boxContent {
bb6ef47e	31	& + .boxTitle {
b4e94f83	32	margin-top: 30px;
bb6ef47e MW	33	}
	34	}
	35
0b6161c6 MW	36	.boxContentSeparator {
	37	background: $wcfContentBorderInner;
	38	border: 0;
	39	height: 1px;
	40	margin: 30px auto;
	41	width: 60%;
	42	}
	43
bb6ef47e MW	44	/* styling for boxes in <hero> position */
bb6ef47e MW	45	.boxesHero {
fd94097c MW	46	.boxContainer {
	47	@include screen-md-down {
	48	padding: 40px 0;
	49	}
	50
	51	@include screen-lg {
	52	padding: 60px 0;
	53	}
	54	}
	55
bb6ef47e	56	.box {
bb6ef47e	57	text-align: center;
fd94097c MW	58
	59	&:not(:last-child) {
	60	@include screen-md-down {
	61	margin-bottom: 40px;
	62	}
	63
	64	@include screen-lg {
	65	margin-bottom: 60px;
	66	}
c5dd767e	67	}
bb6ef47e MW	68	}
	69
	70	.boxTitle {
5908f54f	71	@include wcfFontTitle;
bb6ef47e MW	72	}
	73
	74	.boxWithImage {
	75	display: flex;
	76	flex-wrap: wrap;
	77
	78	.boxImage,
	79	.boxTitle,
	80	.boxContent {
	81	flex: 0 0 100%;
	82	}
	83
	84	.boxImage {
fd94097c MW	85	align-items: center;
	86	display: flex;
	87	justify-content: center;
	88	max-height: 750px;
bb6ef47e	89	order: 3;
fd94097c MW	90	overflow: hidden;
	91
	92	@include screen-md-down {
	93	margin-top: 20px;
	94	}
	95
	96	@include screen-lg {
	97	margin-top: 30px;
	98	}
bb6ef47e MW	99	}
	100	}
	101	}
	102
	103	/* styling for boxes in <headerBoxes> position */
	104	.boxesHeaderBoxes {
0b6161c6 MW	105	background-color: $wcfFooterBoxBackground;
	106	color: $wcfFooterBoxText;
	107
	108	a {
	109	color: $wcfFooterBoxLink;
	110
	111	&:hover {
	112	color: $wcfFooterBoxLinkActive;
0b6161c6 MW	113	}
	114	}
	115
	116	.icon {
8b59f5ea	117	color: $wcfFooterBoxText;
0b6161c6	118	}
bb6ef47e	119
c734a302	120	.boxContainer {
fd94097c	121	@include screen-sm-up {
0b6161c6 MW	122	display: flex;
0b6161c6 MW	123	flex-wrap: wrap;
fd94097c MW	124	}
	125
	126	@include screen-md-down {
0b6161c6	127	padding: 40px 0;
fd94097c	128	margin-bottom: -40px;
7102d090 AE	129	margin-left: -10px;
7102d090 AE	130	margin-right: -10px;
fd94097c MW	131	}
	132
	133	@include screen-lg {
	134	padding: 60px 0;
	135	margin-bottom: -60px;
7102d090 AE	136	margin-left: -15px;
7102d090 AE	137	margin-right: -15px;
0b6161c6	138	}
bb6ef47e MW	139	}
	140
	141	.box {
95961bdf	142	overflow: hidden;
fd94097c MW	143	padding-left: 15px;
fd94097c MW	144	padding-right: 15px;
95961bdf	145
fd94097c MW	146	@include screen-md-down {
	147	margin-bottom: 40px;
	148	}
	149
	150	@include screen-sm-md {
	151	flex: 0 0 50%;
	152
	153	&.boxFullWidth {
	154	flex-basis: 100%;
	155	}
	156
	157	/* one item */
	158	&:first-child:nth-last-child(1) {
	159	flex-basis: 100%;
0b6161c6	160	}
bb6ef47e	161	}
937f57cf	162
fd94097c	163	@include screen-lg {
0b6161c6	164	flex: 0 0 25%;
fd94097c	165	margin-bottom: 60px;
0b6161c6 MW	166
	167	&.boxFullWidth {
	168	flex-basis: 100%;
	169	}
	170
	171	/* one item */
	172	&:first-child:nth-last-child(1) {
	173	flex-basis: 100%;
	174	}
	175
	176	/* two items */
	177	&:first-child:nth-last-child(2),
	178	&:first-child:nth-last-child(2) ~ .box {
	179	flex-basis: 50%;
	180	}
	181
	182	/* three items */
	183	&:first-child:nth-last-child(3),
	184	&:first-child:nth-last-child(3) ~ .box {
	185	flex-basis: 33.3333%;
	186	}
937f57cf	187	}
bb6ef47e MW	188	}
	189
	190	.boxImage {
fd94097c MW	191	align-items: center;
	192	display: flex;
	193	justify-content: center;
	194	margin-bottom: 20px;
	195	max-height: 100px;
	196	overflow: hidden;
bb6ef47e MW	197	}
	198	}
	199
	200	/* styling for boxes in <top>/<bottom> position */
	201	.boxesTop,
	202	.boxesBottom {
bb6ef47e	203	.box {
fd94097c MW	204	@include screen-md-down {
	205	margin-bottom: 40px;
	206	margin-top: 40px;
	207	}
	208
	209	@include screen-lg {
	210	margin-bottom: 60px;
	211	margin-top: 60px;
	212	}
bb6ef47e MW	213	}
bb6ef47e MW	214
10ff3d63 MW	215	.boxTitle {
	216	color: $wcfContentHeadlineText;
	217
5908f54f	218	@include wcfFontSection;
10ff3d63 MW	219
	220	a {
	221	color: $wcfContentHeadlineLink;
	222
	223	&:hover {
	224	color: $wcfContentHeadlineLinkActive;
	225	}
	226	}
	227	}
	228
fd94097c MW	229	@include screen-xs {
	230	.boxImage {
	231	align-items: center;
	232	display: flex;
	233	justify-content: center;
	234	margin-bottom: 20px;
	235	max-height: 100px;
	236	overflow: hidden;
bb6ef47e MW	237	}
	238	}
	239
fd94097c MW	240	@include screen-sm-up {
	241	.boxImage {
	242	width: 30%;
	243	}
	244
	245	.boxWithImage {
	246	@include clearfix;
	247
	248	&:nth-child(odd) {
	249	.boxImage {
	250	float: left;
	251	}
	252
	253	.boxTitle,
	254	.boxContent {
	255	@include screen-md-down {
	256	margin-left: calc(30% + 15px);
	257	}
	258
	259	@include screen-lg {
	260	margin-left: calc(30% + 30px);
	261	}
	262	}
	263	}
	264
	265	&:nth-child(even) {
	266	.boxImage {
	267	float: right;
	268	}
	269
	270	.boxTitle,
	271	.boxContent {
	272	@include screen-md-down {
	273	margin-right: calc(30% + 15px);
	274	}
	275
	276	@include screen-lg {
	277	margin-right: calc(30% + 30px);
	278	}
	279	}
	280	}
	281	}
c5dd767e	282	}
bb6ef47e MW	283	}
	284
	285	.boxesTop {
	286	border-bottom: 1px solid $wcfContentBorderInner;
c5dd767e MS	287	}
c5dd767e MS	288
bb6ef47e MW	289	.boxesBottom {
	290	border-top: 1px solid $wcfContentBorderInner;
	291	}
	292
	293	/* styling for boxes in <sidebarLeft>/<sidebarRight> position */
	294	.boxesSidebarLeft,
	295	.boxesSidebarRight {
	296	color: $wcfSidebarText;
	297
	298	a {
	299	color: $wcfSidebarLink;
	300
bb6ef47e MW	301	&:hover {
bb6ef47e MW	302	color: $wcfSidebarLinkActive;
8b59f5ea	303
bb6ef47e MW	304	}
	305	}
	306
e4c07d67 AE	307	> .boxContainer {
	308	@include screen-sm {
	309	-webkit-columns: 2;
	310	-moz-columns: 2;
	311	columns: 2;
	312	}
	313
	314	@include screen-md {
	315	-webkit-columns: 3;
	316	-moz-columns: 3;
	317	columns: 3;
	318	}
	319
	320	@include screen-sm-md {
fdf34eae	321	margin-bottom: -30px;
e4c07d67 AE	322
	323	-webkit-column-gap: 30px;
	324	-moz-column-gap: 30px;
	325	column-gap: 30px;
	326
	327	> .box {
	328	/* Sections should never be split, but Firefox, IE and Edge don't seem
	329	to care about this despite advertising the support for it. We can work
	330	around this by using `overflow: hidden` which magically does the job,
	331	but doesn't affect Chrome which properly breaks anyway. */
	332	overflow: hidden; /* Fix for Firefox, IE and Edge */
	333
	334	// WebKit fix
fdf34eae AE	335	background-clip: padding-box;
	336	border-bottom: 30px solid transparent;
	337	display: block;
	338	margin: 0 !important;
e4c07d67 AE	339	width: 100%;
	340
	341	-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
	342	page-break-inside: avoid; /* Firefox */
	343	break-inside: avoid; /* IE 10+ */
	344	}
	345	}
	346	}
	347
8b59f5ea MW	348	.icon {
	349	color: $wcfSidebarText;
	350	}
	351
bb6ef47e MW	352	small,
	353	.dimmed {
	354	color: $wcfSidebarDimmedText;
	355
	356	a {
	357	color: $wcfSidebarDimmedLink;
	358
	359	&:hover {
	360	color: $wcfSidebarDimmedLinkActive;
	361	}
	362	}
	363	}
	364
e9f3957f MW	365	.boxTitle {
	366	color: $wcfSidebarHeadlineLink;
	367
	368	&:hover {
	369	color: $wcfSidebarHeadlineLinkActive;
	370	}
	371	}
	372
bb6ef47e	373	.box {
0e8421c9 MW	374	&:not(.boxBorderless) {
0e8421c9 MW	375	background-color: $wcfSidebarBackground;
0e8421c9	376
f216765b AE	377	@include screen-md-down {
f216765b AE	378	padding: 20px 10px;
63e2f52f AE	379
63e2f52f AE	380	.boxMenu {
f216765b AE	381	margin-left: -10px;
f216765b AE	382	margin-right: -10px;
63e2f52f AE	383	}
	384	}
	385
f216765b AE	386	@include screen-lg {
f216765b AE	387	padding: 20px;
63e2f52f AE	388
63e2f52f AE	389	.boxMenu {
f216765b AE	390	margin-left: -20px;
f216765b AE	391	margin-right: -20px;
63e2f52f	392	}
0e8421c9 MW	393	}
0e8421c9 MW	394	}
bb6ef47e MW	395
bb6ef47e MW	396	&:not(:first-child) {
95961bdf	397	margin-top: 30px;
bb6ef47e	398	}
487db634	399
487db634 MW	400	&.boxError {
	401	background-color: $wcfStatusErrorBackground;
	402	color: $wcfStatusErrorText;
	403	}
	404
	405	&.boxInfo {
	406	background-color: $wcfStatusInfoBackground;
	407	color: $wcfStatusInfoText;
	408	}
	409
	410	&.boxSuccess {
	411	background-color: $wcfStatusSuccessBackground;
	412	color: $wcfStatusSuccessText;
	413	}
	414
	415	&.boxWarning {
	416	background-color: $wcfStatusWarningBackground;
	417	color: $wcfStatusWarningText;
	418	}
0e8421c9 MW	419
	420	.boxMenu {
	421	.boxMenuLink {
	422	display: block;
	423	padding: 5px 20px;
	424
	425	.badge {
	426	float: right;
	427	}
	428	}
	429
	430	li.active > .boxMenuLink {
	431	background-color: $wcfContentBackground;
	432	}
	433
	434	.boxMenuDepth1 .boxMenuLink {
	435	padding-left: 40px;
	436	}
	437
	438	.boxMenuDepth2 .boxMenuLink {
	439	padding-left: 60px;
	440	}
d9a5604a AE	441
d9a5604a AE	442	@include screen-md-down {
4af25ab6 MW	443	position: relative;
	444
	445	.boxMenuLink {
	446	overflow: hidden;
	447	text-overflow: ellipsis;
	448	white-space: nowrap;
	449	}
	450
	451	&:not(.open) {
	452	> li:first-child,
	453	> li.active:not(:first-child) {
	454	pointer-events: none;
	455
	456	> a::after {
	457	content: $fa-var-caret-down;
	458	font-family: FontAwesome;
	459	font-size: 14px;
	460	margin-left: 7px;
	461	}
	462	}
	463
	464	> li:first-child ~ li {
	465	display: none;
	466	}
	467
	468	> li.active:not(:first-child) {
	469	display: block;
	470	position: absolute;
	471	left: 0;
	472	right: 0;
	473	top: 0;
	474	}
	475	}
d9a5604a	476	}
0e8421c9	477	}
bb6ef47e MW	478	}
bb6ef47e MW	479
fd94097c MW	480	@include screen-xs {
	481	.boxImage {
	482	align-items: center;
	483	display: flex;
	484	justify-content: center;
	485	margin-bottom: 20px;
	486	max-height: 100px;
	487	overflow: hidden;
bb6ef47e MW	488	}
	489	}
	490
fd94097c MW	491	@include screen-sm-md {
	492	.boxWithImage {
	493	@include clearfix;
	494
	495	.boxTitle,
	496	.boxContent {
	497	margin-left: calc(30% + 15px);
	498	}
	499	}
	500
	501	.boxImage {
	502	float: left;
	503	width: 30%;
	504	}
bb6ef47e	505	}
fd94097c MW	506
	507	@include screen-lg {
	508	.boxImage {
	509	align-items: center;
	510	display: flex;
	511	justify-content: center;
	512	margin-bottom: 20px;
	513	max-height: 100px;
	514	overflow: hidden;
	515	}
c5dd767e	516	}
bb6ef47e MW	517	}
	518
	519	/* styling for boxes in <contentTop>/<contentBottom> position */
	520	.boxesContentTop,
	521	.boxesContentBottom {
bb6ef47e MW	522	.box {
bb6ef47e MW	523	&:not(:first-child) {
10ff3d63	524	margin-top: 40px;
bb6ef47e MW	525	}
	526	}
	527
72a7f9cd MW	528	.boxTitle {
	529	color: $wcfContentHeadlineText;
	530
5908f54f	531	@include wcfFontSection;
fd94097c	532
72a7f9cd MW	533	a {
	534	color: $wcfContentHeadlineLink;
	535
	536	&:hover {
	537	color: $wcfContentHeadlineLinkActive;
	538	}
	539	}
	540	}
	541
fd94097c MW	542	@include screen-xs {
	543	.boxImage {
	544	align-items: center;
	545	display: flex;
	546	justify-content: center;
	547	margin-bottom: 20px;
	548	max-height: 100px;
	549	overflow: hidden;
	550	}
bb6ef47e	551	}
fd94097c MW	552
	553	@include screen-sm-up {
	554	.boxWithImage {
	555	@include clearfix;
	556
	557	.boxTitle,
	558	.boxContent {
	559	@include screen-md-down {
	560	margin-left: calc(30% + 15px);
	561	}
	562
	563	@include screen-lg {
	564	margin-left: calc(30% + 30px);
	565	}
	566	}
	567	}
	568
	569	.boxImage {
	570	float: left;
	571	width: 30%;
	572	}
c5dd767e	573	}
bb6ef47e MW	574	}
bb6ef47e MW	575
0b6161c6 MW	576	.boxesContentTop:not(:first-child) {
0b6161c6 MW	577	margin-top: 40px;
bb6ef47e MW	578	}
	579
	580	.boxesContentBottom {
10ff3d63	581	margin-top: 40px;
bb6ef47e MW	582	}
	583
	584	/* styling for boxes in <footerBoxes> position */
	585	.boxesFooterBoxes {
	586	background-color: $wcfFooterBoxBackground;
	587	color: $wcfFooterBoxText;
bb6ef47e MW	588
	589	a {
	590	color: $wcfFooterBoxLink;
	591
bb6ef47e MW	592	&:hover {
bb6ef47e MW	593	color: $wcfFooterBoxLinkActive;
bb6ef47e MW	594	}
	595	}
	596
	597	.icon {
	598	color: $wcfFooterBoxText;
	599	}
	600
c734a302	601	.boxContainer {
f216765b	602	@include screen-sm-down {
fd94097c	603	padding: 40px 0;
f216765b AE	604	}
f216765b AE	605
7102d090 AE	606	@include screen-md-down {
	607	margin-left: -10px;
	608	margin-right: -10px;
	609	}
	610
f216765b	611	@include screen-md-up {
63e2f52f AE	612	display: flex;
63e2f52f AE	613	flex-wrap: wrap;
fd94097c MW	614	margin-bottom: -60px;
fd94097c MW	615	padding: 60px 0;
c3d0938e	616	}
7102d090 AE	617
	618	@include screen-lg {
	619	margin-left: -15px;
	620	margin-right: -15px;
	621	}
bb6ef47e MW	622	}
	623
	624	.box {
95961bdf	625	overflow: hidden;
fd94097c MW	626	padding-left: 15px;
fd94097c MW	627	padding-right: 15px;
bb6ef47e	628
f216765b	629	@include screen-sm-down {
fd94097c MW	630	&:not(:last-child) {
fd94097c MW	631	margin-bottom: 40px;
c5dd767e	632	}
f216765b AE	633	}
	634
	635	@include screen-md-up {
63e2f52f	636	flex: 0 0 50%;
fd94097c	637	margin-bottom: 60px;
63e2f52f AE	638
	639	&.boxFullWidth {
	640	flex-basis: 100%;
	641	}
	642	}
bb6ef47e MW	643	}
bb6ef47e MW	644
72a7f9cd MW	645	.boxTitle {
	646	color: $wcfFooterBoxHeadlineText;
	647
	648	a {
	649	color: $wcfFooterBoxHeadlineLink;
	650
	651	&:hover {
	652	color: $wcfFooterBoxHeadlineLinkActive;
	653	}
	654	}
	655	}
	656
bb6ef47e	657	.boxImage {
fd94097c MW	658	align-items: center;
	659	display: flex;
	660	justify-content: center;
	661	margin-bottom: 20px;
	662	max-height: 100px;
	663	overflow: hidden;
bb6ef47e MW	664	}
	665	}
	666
	667	/* styling for boxes in <footer> position */
	668	.boxesFooter {
0b6161c6 MW	669	background-color: $wcfFooterBackground;
0b6161c6 MW	670	color: $wcfFooterText;
11f96819	671	padding: 20px 0;
0b6161c6 MW	672
	673	.icon {
	674	color: $wcfFooterText;
	675	}
	676
	677	a {
	678	color: $wcfFooterLink;
	679
	680	&:hover {
	681	color: $wcfFooterLinkActive;
2a5ae89f	682	text-decoration: underline;
0b6161c6 MW	683	}
	684	}
	685
bb6ef47e MW	686	.box {
bb6ef47e MW	687	&:not(:first-child) {
95961bdf	688	margin-top: 20px;
bb6ef47e MW	689	}
	690	}
	691
fd94097c MW	692	@include screen-xs {
	693	.boxImage {
	694	align-items: center;
	695	display: flex;
	696	justify-content: center;
	697	margin-bottom: 20px;
	698	max-height: 100px;
	699	overflow: hidden;
bb6ef47e MW	700	}
	701	}
	702
fd94097c MW	703	@include screen-sm-up {
	704	.boxWithImage {
	705	@include clearfix;
	706
	707	.boxTitle,
	708	.boxContent {
	709	@include screen-md-down {
	710	margin-left: calc(30% + 15px);
	711	}
	712
	713	@include screen-lg {
	714	margin-left: calc(30% + 30px);
	715	}
	716	}
	717	}
	718
	719	.boxImage {
	720	float: left;
	721	width: 30%;
	722	}
bb6ef47e	723	}
948d7051 MW	724
948d7051 MW	725	.boxMenu {
f2e6770c	726	display: inline-flex;
948d7051 MW	727	margin-left: -10px;
	728	margin-right: -10px;
	729
948d7051	730	> li {
f2e6770c	731	flex: 0 0 auto;
948d7051 MW	732	padding-left: 10px;
948d7051 MW	733	padding-right: 10px;
f2e6770c MW	734	}
	735	}
	736
	737	.footerLinks {
6063a7ec AE	738	&:not(:first-child) {
	739	margin-top: 40px;
	740	}
	741
f2e6770c MW	742	.boxMenu {
	743	display: flex;
	744	flex-wrap: wrap;
	745	margin-bottom: -20px;
948d7051	746
f2e6770c MW	747	.boxMenuLink {
	748	display: inline-block;
	749	}
	750
	751	> li {
	752	flex: 0 0 25%;
	753	margin-bottom: 20px;
	754
948d7051	755	> .boxMenuLink {
5908f54f	756	@include wcfFontHeadline;
948d7051 MW	757
	758	margin-bottom: 10px;
	759	}
	760
	761	> ol {
	762	a {
	763	// use text color instead
	764	color: $wcfFooterText;
	765	}
	766	}
	767	}
	768	}
	769	}
9ba60a8e AE	770
	771	.styleChanger {
	772	@include screen-sm-down {
	773	display: none;
	774	}
	775
	776	@include screen-md-up {
	777	float: right;
	778	padding-left: 20px;
	779	}
	780	}
bb6ef47e	781	}