[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;
		
		}
	}
	
	.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	}
	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	}
	283	}
bb6ef47e MW	284	}
	285
	286	.boxesTop {
	287	border-bottom: 1px solid $wcfContentBorderInner;
	288	}
	289
	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
8b59f5ea MW	308	.icon {
	309	color: $wcfSidebarText;
	310	}
	311
bb6ef47e MW	312	small,
	313	.dimmed {
	314	color: $wcfSidebarDimmedText;
	315
	316	a {
	317	color: $wcfSidebarDimmedLink;
	318
	319	&:hover {
	320	color: $wcfSidebarDimmedLinkActive;
	321	}
	322	}
	323	}
	324
e9f3957f MW	325	.boxTitle {
	326	color: $wcfSidebarHeadlineLink;
	327
	328	&:hover {
	329	color: $wcfSidebarHeadlineLinkActive;
	330	}
	331	}
	332
bb6ef47e	333	.box {
0e8421c9 MW	334	&:not(.boxBorderless) {
0e8421c9 MW	335	background-color: $wcfSidebarBackground;
0e8421c9	336
f216765b AE	337	@include screen-md-down {
f216765b AE	338	padding: 20px 10px;
63e2f52f AE	339
63e2f52f AE	340	.boxMenu {
f216765b AE	341	margin-left: -10px;
f216765b AE	342	margin-right: -10px;
63e2f52f AE	343	}
	344	}
	345
f216765b AE	346	@include screen-lg {
f216765b AE	347	padding: 20px;
63e2f52f AE	348
63e2f52f AE	349	.boxMenu {
f216765b AE	350	margin-left: -20px;
f216765b AE	351	margin-right: -20px;
63e2f52f	352	}
0e8421c9 MW	353	}
0e8421c9 MW	354	}
bb6ef47e MW	355
bb6ef47e MW	356	&:not(:first-child) {
95961bdf	357	margin-top: 30px;
bb6ef47e	358	}
487db634 MW	359
	360	&.boxAlternative {
	361	background-color: transparent;
	362	border: 1px solid $wcfContentBorderInner;
	363	}
	364
	365	&.boxError {
	366	background-color: $wcfStatusErrorBackground;
	367	color: $wcfStatusErrorText;
	368	}
	369
	370	&.boxInfo {
	371	background-color: $wcfStatusInfoBackground;
	372	color: $wcfStatusInfoText;
	373	}
	374
	375	&.boxSuccess {
	376	background-color: $wcfStatusSuccessBackground;
	377	color: $wcfStatusSuccessText;
	378	}
	379
	380	&.boxWarning {
	381	background-color: $wcfStatusWarningBackground;
	382	color: $wcfStatusWarningText;
	383	}
0e8421c9 MW	384
	385	.boxMenu {
	386	.boxMenuLink {
	387	display: block;
	388	padding: 5px 20px;
	389
	390	.badge {
	391	float: right;
	392	}
	393	}
	394
	395	li.active > .boxMenuLink {
	396	background-color: $wcfContentBackground;
	397	}
	398
	399	.boxMenuDepth1 .boxMenuLink {
	400	padding-left: 40px;
	401	}
	402
	403	.boxMenuDepth2 .boxMenuLink {
	404	padding-left: 60px;
	405	}
d9a5604a AE	406
d9a5604a AE	407	@include screen-md-down {
4af25ab6 MW	408	position: relative;
	409
	410	.boxMenuLink {
	411	overflow: hidden;
	412	text-overflow: ellipsis;
	413	white-space: nowrap;
	414	}
	415
	416	&:not(.open) {
	417	> li:first-child,
	418	> li.active:not(:first-child) {
	419	pointer-events: none;
	420
	421	> a::after {
	422	content: $fa-var-caret-down;
	423	font-family: FontAwesome;
	424	font-size: 14px;
	425	margin-left: 7px;
	426	}
	427	}
	428
	429	> li:first-child ~ li {
	430	display: none;
	431	}
	432
	433	> li.active:not(:first-child) {
	434	display: block;
	435	position: absolute;
	436	left: 0;
	437	right: 0;
	438	top: 0;
	439	}
	440	}
d9a5604a	441	}
0e8421c9	442	}
bb6ef47e MW	443	}
bb6ef47e MW	444
fd94097c MW	445	@include screen-xs {
	446	.boxImage {
	447	align-items: center;
	448	display: flex;
	449	justify-content: center;
	450	margin-bottom: 20px;
	451	max-height: 100px;
	452	overflow: hidden;
bb6ef47e MW	453	}
	454	}
	455
fd94097c MW	456	@include screen-sm-md {
	457	.boxWithImage {
	458	@include clearfix;
	459
	460	.boxTitle,
	461	.boxContent {
	462	margin-left: calc(30% + 15px);
	463	}
	464	}
	465
	466	.boxImage {
	467	float: left;
	468	width: 30%;
	469	}
bb6ef47e	470	}
fd94097c MW	471
	472	@include screen-lg {
	473	.boxImage {
	474	align-items: center;
	475	display: flex;
	476	justify-content: center;
	477	margin-bottom: 20px;
	478	max-height: 100px;
	479	overflow: hidden;
	480	}
	481	}
bb6ef47e MW	482	}
	483
	484	/* styling for boxes in <contentTop>/<contentBottom> position */
	485	.boxesContentTop,
	486	.boxesContentBottom {
bb6ef47e MW	487	.box {
bb6ef47e MW	488	&:not(:first-child) {
10ff3d63	489	margin-top: 40px;
bb6ef47e MW	490	}
	491	}
	492
72a7f9cd MW	493	.boxTitle {
	494	color: $wcfContentHeadlineText;
	495
5908f54f	496	@include wcfFontSection;
fd94097c	497
72a7f9cd MW	498	a {
	499	color: $wcfContentHeadlineLink;
	500
	501	&:hover {
	502	color: $wcfContentHeadlineLinkActive;
	503	}
	504	}
	505	}
	506
fd94097c MW	507	@include screen-xs {
	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	}
bb6ef47e	516	}
fd94097c MW	517
	518	@include screen-sm-up {
	519	.boxWithImage {
	520	@include clearfix;
	521
	522	.boxTitle,
	523	.boxContent {
	524	@include screen-md-down {
	525	margin-left: calc(30% + 15px);
	526	}
	527
	528	@include screen-lg {
	529	margin-left: calc(30% + 30px);
	530	}
	531	}
	532	}
	533
	534	.boxImage {
	535	float: left;
	536	width: 30%;
	537	}
	538	}
bb6ef47e MW	539	}
bb6ef47e MW	540
0b6161c6 MW	541	.boxesContentTop:not(:first-child) {
0b6161c6 MW	542	margin-top: 40px;
bb6ef47e MW	543	}
	544
	545	.boxesContentBottom {
10ff3d63	546	margin-top: 40px;
bb6ef47e MW	547	}
	548
	549	/* styling for boxes in <footerBoxes> position */
	550	.boxesFooterBoxes {
	551	background-color: $wcfFooterBoxBackground;
	552	color: $wcfFooterBoxText;
bb6ef47e MW	553
	554	a {
	555	color: $wcfFooterBoxLink;
	556
bb6ef47e MW	557	&:hover {
bb6ef47e MW	558	color: $wcfFooterBoxLinkActive;
bb6ef47e MW	559	}
	560	}
	561
	562	.icon {
	563	color: $wcfFooterBoxText;
	564	}
	565
c734a302	566	.boxContainer {
f216765b	567	@include screen-sm-down {
fd94097c	568	padding: 40px 0;
f216765b AE	569	}
f216765b AE	570
7102d090 AE	571	@include screen-md-down {
	572	margin-left: -10px;
	573	margin-right: -10px;
	574	}
	575
f216765b	576	@include screen-md-up {
63e2f52f AE	577	display: flex;
63e2f52f AE	578	flex-wrap: wrap;
fd94097c MW	579	margin-bottom: -60px;
fd94097c MW	580	padding: 60px 0;
c3d0938e	581	}
7102d090 AE	582
	583	@include screen-lg {
	584	margin-left: -15px;
	585	margin-right: -15px;
	586	}
bb6ef47e MW	587	}
	588
	589	.box {
95961bdf	590	overflow: hidden;
fd94097c MW	591	padding-left: 15px;
fd94097c MW	592	padding-right: 15px;
bb6ef47e	593
f216765b	594	@include screen-sm-down {
fd94097c MW	595	&:not(:last-child) {
	596	margin-bottom: 40px;
	597	}
f216765b AE	598	}
	599
	600	@include screen-md-up {
63e2f52f	601	flex: 0 0 50%;
fd94097c	602	margin-bottom: 60px;
63e2f52f AE	603
	604	&.boxFullWidth {
	605	flex-basis: 100%;
	606	}
	607	}
bb6ef47e MW	608	}
bb6ef47e MW	609
72a7f9cd MW	610	.boxTitle {
	611	color: $wcfFooterBoxHeadlineText;
	612
	613	a {
	614	color: $wcfFooterBoxHeadlineLink;
	615
	616	&:hover {
	617	color: $wcfFooterBoxHeadlineLinkActive;
	618	}
	619	}
	620	}
	621
bb6ef47e	622	.boxImage {
fd94097c MW	623	align-items: center;
	624	display: flex;
	625	justify-content: center;
	626	margin-bottom: 20px;
	627	max-height: 100px;
	628	overflow: hidden;
bb6ef47e MW	629	}
	630	}
	631
	632	/* styling for boxes in <footer> position */
	633	.boxesFooter {
0b6161c6 MW	634	background-color: $wcfFooterBackground;
0b6161c6 MW	635	color: $wcfFooterText;
11f96819	636	padding: 20px 0;
0b6161c6 MW	637
	638	.icon {
	639	color: $wcfFooterText;
	640	}
	641
	642	a {
	643	color: $wcfFooterLink;
	644
	645	&:hover {
	646	color: $wcfFooterLinkActive;
0b6161c6 MW	647	}
	648	}
	649
bb6ef47e MW	650	.box {
bb6ef47e MW	651	&:not(:first-child) {
95961bdf	652	margin-top: 20px;
bb6ef47e MW	653	}
	654	}
	655
fd94097c MW	656	@include screen-xs {
	657	.boxImage {
	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
fd94097c MW	667	@include screen-sm-up {
	668	.boxWithImage {
	669	@include clearfix;
	670
	671	.boxTitle,
	672	.boxContent {
	673	@include screen-md-down {
	674	margin-left: calc(30% + 15px);
	675	}
	676
	677	@include screen-lg {
	678	margin-left: calc(30% + 30px);
	679	}
	680	}
	681	}
	682
	683	.boxImage {
	684	float: left;
	685	width: 30%;
	686	}
bb6ef47e	687	}
948d7051 MW	688
948d7051 MW	689	.boxMenu {
f2e6770c	690	display: inline-flex;
948d7051 MW	691	margin-left: -10px;
	692	margin-right: -10px;
	693
948d7051	694	> li {
f2e6770c	695	flex: 0 0 auto;
948d7051 MW	696	padding-left: 10px;
948d7051 MW	697	padding-right: 10px;
f2e6770c MW	698	}
	699	}
	700
	701	.footerLinks {
6063a7ec AE	702	&:not(:first-child) {
	703	margin-top: 40px;
	704	}
	705
f2e6770c MW	706	.boxMenu {
	707	display: flex;
	708	flex-wrap: wrap;
	709	margin-bottom: -20px;
948d7051	710
f2e6770c MW	711	.boxMenuLink {
	712	display: inline-block;
	713	}
	714
	715	> li {
	716	flex: 0 0 25%;
	717	margin-bottom: 20px;
	718
948d7051	719	> .boxMenuLink {
5908f54f	720	@include wcfFontHeadline;
948d7051 MW	721
	722	margin-bottom: 10px;
	723	}
	724
	725	> ol {
	726	a {
	727	// use text color instead
	728	color: $wcfFooterText;
	729	}
	730	}
	731	}
	732	}
	733	}
9ba60a8e AE	734
	735	.styleChanger {
	736	@include screen-sm-down {
	737	display: none;
	738	}
	739
	740	@include screen-md-up {
	741	float: right;
	742	padding-left: 20px;
	743	}
	744	}
bb6ef47e	745	}