[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;
		text-align: center;
		
		@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 {
			// WebKit fix
			margin-top: -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
				display: inline-block;
				margin-top: 30px !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;
		}
		
		&.boxAlternative {
			background-color: transparent;
			border: 1px solid $wcfContentBorderInner;
		}
		
		&.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;
		}
	}
	
	.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;
	144	padding-right: 15px;
	145	text-align: center;
95961bdf	146
fd94097c MW	147	@include screen-md-down {
	148	margin-bottom: 40px;
	149	}
	150
	151	@include screen-sm-md {
	152	flex: 0 0 50%;
	153
	154	&.boxFullWidth {
	155	flex-basis: 100%;
	156	}
	157
	158	/* one item */
	159	&:first-child:nth-last-child(1) {
	160	flex-basis: 100%;
0b6161c6	161	}
bb6ef47e	162	}
937f57cf	163
fd94097c	164	@include screen-lg {
0b6161c6	165	flex: 0 0 25%;
fd94097c	166	margin-bottom: 60px;
0b6161c6 MW	167
	168	&.boxFullWidth {
	169	flex-basis: 100%;
	170	}
	171
	172	/* one item */
	173	&:first-child:nth-last-child(1) {
	174	flex-basis: 100%;
	175	}
	176
	177	/* two items */
	178	&:first-child:nth-last-child(2),
	179	&:first-child:nth-last-child(2) ~ .box {
	180	flex-basis: 50%;
	181	}
	182
	183	/* three items */
	184	&:first-child:nth-last-child(3),
	185	&:first-child:nth-last-child(3) ~ .box {
	186	flex-basis: 33.3333%;
	187	}
937f57cf	188	}
bb6ef47e MW	189	}
	190
	191	.boxImage {
fd94097c MW	192	align-items: center;
	193	display: flex;
	194	justify-content: center;
	195	margin-bottom: 20px;
	196	max-height: 100px;
	197	overflow: hidden;
bb6ef47e MW	198	}
	199	}
	200
	201	/* styling for boxes in <top>/<bottom> position */
	202	.boxesTop,
	203	.boxesBottom {
bb6ef47e	204	.box {
fd94097c MW	205	@include screen-md-down {
	206	margin-bottom: 40px;
	207	margin-top: 40px;
	208	}
	209
	210	@include screen-lg {
	211	margin-bottom: 60px;
	212	margin-top: 60px;
	213	}
bb6ef47e MW	214	}
bb6ef47e MW	215
10ff3d63 MW	216	.boxTitle {
	217	color: $wcfContentHeadlineText;
	218
5908f54f	219	@include wcfFontSection;
10ff3d63 MW	220
	221	a {
	222	color: $wcfContentHeadlineLink;
	223
	224	&:hover {
	225	color: $wcfContentHeadlineLinkActive;
	226	}
	227	}
	228	}
	229
fd94097c MW	230	@include screen-xs {
	231	.boxImage {
	232	align-items: center;
	233	display: flex;
	234	justify-content: center;
	235	margin-bottom: 20px;
	236	max-height: 100px;
	237	overflow: hidden;
bb6ef47e MW	238	}
	239	}
	240
fd94097c MW	241	@include screen-sm-up {
	242	.boxImage {
	243	width: 30%;
	244	}
	245
	246	.boxWithImage {
	247	@include clearfix;
	248
	249	&:nth-child(odd) {
	250	.boxImage {
	251	float: left;
	252	}
	253
	254	.boxTitle,
	255	.boxContent {
	256	@include screen-md-down {
	257	margin-left: calc(30% + 15px);
	258	}
	259
	260	@include screen-lg {
	261	margin-left: calc(30% + 30px);
	262	}
	263	}
	264	}
	265
	266	&:nth-child(even) {
	267	.boxImage {
	268	float: right;
	269	}
	270
	271	.boxTitle,
	272	.boxContent {
	273	@include screen-md-down {
	274	margin-right: calc(30% + 15px);
	275	}
	276
	277	@include screen-lg {
	278	margin-right: calc(30% + 30px);
	279	}
	280	}
	281	}
	282	}
c5dd767e	283	}
bb6ef47e MW	284	}
	285
	286	.boxesTop {
	287	border-bottom: 1px solid $wcfContentBorderInner;
c5dd767e MS	288	}
c5dd767e MS	289
bb6ef47e MW	290	.boxesBottom {
	291	border-top: 1px solid $wcfContentBorderInner;
	292	}
	293
	294	/* styling for boxes in <sidebarLeft>/<sidebarRight> position */
	295	.boxesSidebarLeft,
	296	.boxesSidebarRight {
	297	color: $wcfSidebarText;
	298
	299	a {
	300	color: $wcfSidebarLink;
	301
bb6ef47e MW	302	&:hover {
bb6ef47e MW	303	color: $wcfSidebarLinkActive;
8b59f5ea	304
bb6ef47e MW	305	}
	306	}
	307
e4c07d67 AE	308	> .boxContainer {
	309	@include screen-sm {
	310	-webkit-columns: 2;
	311	-moz-columns: 2;
	312	columns: 2;
	313	}
	314
	315	@include screen-md {
	316	-webkit-columns: 3;
	317	-moz-columns: 3;
	318	columns: 3;
	319	}
	320
	321	@include screen-sm-md {
	322	// WebKit fix
	323	margin-top: -30px;
	324
	325	-webkit-column-gap: 30px;
	326	-moz-column-gap: 30px;
	327	column-gap: 30px;
	328
	329	> .box {
	330	/* Sections should never be split, but Firefox, IE and Edge don't seem
	331	to care about this despite advertising the support for it. We can work
	332	around this by using `overflow: hidden` which magically does the job,
	333	but doesn't affect Chrome which properly breaks anyway. */
	334	overflow: hidden; /* Fix for Firefox, IE and Edge */
	335
	336	// WebKit fix
	337	display: inline-block;
	338	margin-top: 30px !important;
	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 MW	399
	400	&.boxAlternative {
	401	background-color: transparent;
	402	border: 1px solid $wcfContentBorderInner;
	403	}
	404
	405	&.boxError {
	406	background-color: $wcfStatusErrorBackground;
	407	color: $wcfStatusErrorText;
	408	}
	409
	410	&.boxInfo {
	411	background-color: $wcfStatusInfoBackground;
	412	color: $wcfStatusInfoText;
	413	}
	414
	415	&.boxSuccess {
	416	background-color: $wcfStatusSuccessBackground;
	417	color: $wcfStatusSuccessText;
	418	}
	419
	420	&.boxWarning {
	421	background-color: $wcfStatusWarningBackground;
	422	color: $wcfStatusWarningText;
	423	}
0e8421c9 MW	424
	425	.boxMenu {
	426	.boxMenuLink {
	427	display: block;
	428	padding: 5px 20px;
	429
	430	.badge {
	431	float: right;
	432	}
	433	}
	434
	435	li.active > .boxMenuLink {
	436	background-color: $wcfContentBackground;
	437	}
	438
	439	.boxMenuDepth1 .boxMenuLink {
	440	padding-left: 40px;
	441	}
	442
	443	.boxMenuDepth2 .boxMenuLink {
	444	padding-left: 60px;
	445	}
d9a5604a AE	446
d9a5604a AE	447	@include screen-md-down {
4af25ab6 MW	448	position: relative;
	449
	450	.boxMenuLink {
	451	overflow: hidden;
	452	text-overflow: ellipsis;
	453	white-space: nowrap;
	454	}
	455
	456	&:not(.open) {
	457	> li:first-child,
	458	> li.active:not(:first-child) {
	459	pointer-events: none;
	460
	461	> a::after {
	462	content: $fa-var-caret-down;
	463	font-family: FontAwesome;
	464	font-size: 14px;
	465	margin-left: 7px;
	466	}
	467	}
	468
	469	> li:first-child ~ li {
	470	display: none;
	471	}
	472
	473	> li.active:not(:first-child) {
	474	display: block;
	475	position: absolute;
	476	left: 0;
	477	right: 0;
	478	top: 0;
	479	}
	480	}
d9a5604a	481	}
0e8421c9	482	}
bb6ef47e MW	483	}
bb6ef47e MW	484
fd94097c MW	485	@include screen-xs {
	486	.boxImage {
	487	align-items: center;
	488	display: flex;
	489	justify-content: center;
	490	margin-bottom: 20px;
	491	max-height: 100px;
	492	overflow: hidden;
bb6ef47e MW	493	}
	494	}
	495
fd94097c MW	496	@include screen-sm-md {
	497	.boxWithImage {
	498	@include clearfix;
	499
	500	.boxTitle,
	501	.boxContent {
	502	margin-left: calc(30% + 15px);
	503	}
	504	}
	505
	506	.boxImage {
	507	float: left;
	508	width: 30%;
	509	}
bb6ef47e	510	}
fd94097c MW	511
	512	@include screen-lg {
	513	.boxImage {
	514	align-items: center;
	515	display: flex;
	516	justify-content: center;
	517	margin-bottom: 20px;
	518	max-height: 100px;
	519	overflow: hidden;
	520	}
c5dd767e	521	}
bb6ef47e MW	522	}
	523
	524	/* styling for boxes in <contentTop>/<contentBottom> position */
	525	.boxesContentTop,
	526	.boxesContentBottom {
bb6ef47e MW	527	.box {
bb6ef47e MW	528	&:not(:first-child) {
10ff3d63	529	margin-top: 40px;
bb6ef47e MW	530	}
	531	}
	532
72a7f9cd MW	533	.boxTitle {
	534	color: $wcfContentHeadlineText;
	535
5908f54f	536	@include wcfFontSection;
fd94097c	537
72a7f9cd MW	538	a {
	539	color: $wcfContentHeadlineLink;
	540
	541	&:hover {
	542	color: $wcfContentHeadlineLinkActive;
	543	}
	544	}
	545	}
	546
fd94097c MW	547	@include screen-xs {
	548	.boxImage {
	549	align-items: center;
	550	display: flex;
	551	justify-content: center;
	552	margin-bottom: 20px;
	553	max-height: 100px;
	554	overflow: hidden;
	555	}
bb6ef47e	556	}
fd94097c MW	557
	558	@include screen-sm-up {
	559	.boxWithImage {
	560	@include clearfix;
	561
	562	.boxTitle,
	563	.boxContent {
	564	@include screen-md-down {
	565	margin-left: calc(30% + 15px);
	566	}
	567
	568	@include screen-lg {
	569	margin-left: calc(30% + 30px);
	570	}
	571	}
	572	}
	573
	574	.boxImage {
	575	float: left;
	576	width: 30%;
	577	}
c5dd767e	578	}
bb6ef47e MW	579	}
bb6ef47e MW	580
0b6161c6 MW	581	.boxesContentTop:not(:first-child) {
0b6161c6 MW	582	margin-top: 40px;
bb6ef47e MW	583	}
	584
	585	.boxesContentBottom {
10ff3d63	586	margin-top: 40px;
bb6ef47e MW	587	}
	588
	589	/* styling for boxes in <footerBoxes> position */
	590	.boxesFooterBoxes {
	591	background-color: $wcfFooterBoxBackground;
	592	color: $wcfFooterBoxText;
bb6ef47e MW	593
	594	a {
	595	color: $wcfFooterBoxLink;
	596
bb6ef47e MW	597	&:hover {
bb6ef47e MW	598	color: $wcfFooterBoxLinkActive;
bb6ef47e MW	599	}
	600	}
	601
	602	.icon {
	603	color: $wcfFooterBoxText;
	604	}
	605
c734a302	606	.boxContainer {
f216765b	607	@include screen-sm-down {
fd94097c	608	padding: 40px 0;
f216765b AE	609	}
f216765b AE	610
7102d090 AE	611	@include screen-md-down {
	612	margin-left: -10px;
	613	margin-right: -10px;
	614	}
	615
f216765b	616	@include screen-md-up {
63e2f52f AE	617	display: flex;
63e2f52f AE	618	flex-wrap: wrap;
fd94097c MW	619	margin-bottom: -60px;
fd94097c MW	620	padding: 60px 0;
c3d0938e	621	}
7102d090 AE	622
	623	@include screen-lg {
	624	margin-left: -15px;
	625	margin-right: -15px;
	626	}
bb6ef47e MW	627	}
	628
	629	.box {
95961bdf	630	overflow: hidden;
fd94097c MW	631	padding-left: 15px;
fd94097c MW	632	padding-right: 15px;
bb6ef47e	633
f216765b	634	@include screen-sm-down {
fd94097c MW	635	&:not(:last-child) {
fd94097c MW	636	margin-bottom: 40px;
c5dd767e	637	}
f216765b AE	638	}
	639
	640	@include screen-md-up {
63e2f52f	641	flex: 0 0 50%;
fd94097c	642	margin-bottom: 60px;
63e2f52f AE	643
	644	&.boxFullWidth {
	645	flex-basis: 100%;
	646	}
	647	}
bb6ef47e MW	648	}
bb6ef47e MW	649
72a7f9cd MW	650	.boxTitle {
	651	color: $wcfFooterBoxHeadlineText;
	652
	653	a {
	654	color: $wcfFooterBoxHeadlineLink;
	655
	656	&:hover {
	657	color: $wcfFooterBoxHeadlineLinkActive;
	658	}
	659	}
	660	}
	661
bb6ef47e	662	.boxImage {
fd94097c MW	663	align-items: center;
	664	display: flex;
	665	justify-content: center;
	666	margin-bottom: 20px;
	667	max-height: 100px;
	668	overflow: hidden;
bb6ef47e MW	669	}
	670	}
	671
	672	/* styling for boxes in <footer> position */
	673	.boxesFooter {
0b6161c6 MW	674	background-color: $wcfFooterBackground;
0b6161c6 MW	675	color: $wcfFooterText;
11f96819	676	padding: 20px 0;
0b6161c6 MW	677
	678	.icon {
	679	color: $wcfFooterText;
	680	}
	681
	682	a {
	683	color: $wcfFooterLink;
	684
	685	&:hover {
	686	color: $wcfFooterLinkActive;
0b6161c6 MW	687	}
	688	}
	689
bb6ef47e MW	690	.box {
bb6ef47e MW	691	&:not(:first-child) {
95961bdf	692	margin-top: 20px;
bb6ef47e MW	693	}
	694	}
	695
fd94097c MW	696	@include screen-xs {
	697	.boxImage {
	698	align-items: center;
	699	display: flex;
	700	justify-content: center;
	701	margin-bottom: 20px;
	702	max-height: 100px;
	703	overflow: hidden;
bb6ef47e MW	704	}
	705	}
	706
fd94097c MW	707	@include screen-sm-up {
	708	.boxWithImage {
	709	@include clearfix;
	710
	711	.boxTitle,
	712	.boxContent {
	713	@include screen-md-down {
	714	margin-left: calc(30% + 15px);
	715	}
	716
	717	@include screen-lg {
	718	margin-left: calc(30% + 30px);
	719	}
	720	}
	721	}
	722
	723	.boxImage {
	724	float: left;
	725	width: 30%;
	726	}
bb6ef47e	727	}
948d7051 MW	728
948d7051 MW	729	.boxMenu {
f2e6770c	730	display: inline-flex;
948d7051 MW	731	margin-left: -10px;
	732	margin-right: -10px;
	733
948d7051	734	> li {
f2e6770c	735	flex: 0 0 auto;
948d7051 MW	736	padding-left: 10px;
948d7051 MW	737	padding-right: 10px;
f2e6770c MW	738	}
	739	}
	740
	741	.footerLinks {
6063a7ec AE	742	&:not(:first-child) {
	743	margin-top: 40px;
	744	}
	745
f2e6770c MW	746	.boxMenu {
	747	display: flex;
	748	flex-wrap: wrap;
	749	margin-bottom: -20px;
948d7051	750
f2e6770c MW	751	.boxMenuLink {
	752	display: inline-block;
	753	}
	754
	755	> li {
	756	flex: 0 0 25%;
	757	margin-bottom: 20px;
	758
948d7051	759	> .boxMenuLink {
5908f54f	760	@include wcfFontHeadline;
948d7051 MW	761
	762	margin-bottom: 10px;
	763	}
	764
	765	> ol {
	766	a {
	767	// use text color instead
	768	color: $wcfFooterText;
	769	}
	770	}
	771	}
	772	}
	773	}
9ba60a8e AE	774
	775	.styleChanger {
	776	@include screen-sm-down {
	777	display: none;
	778	}
	779
	780	@include screen-md-up {
	781	float: right;
	782	padding-left: 20px;
	783	}
	784	}
bb6ef47e	785	}