[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: $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 {
			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 {
				align-items: flex-start;
				display: flex;
				padding: 5px 20px;
				
				.boxMenuLinkTitle {
					flex: 1 1 auto;
				}
				
				.badge {
					flex: 0 0 auto;
				}
			}
			
			li.active > .boxMenuLink {
				background-color: $wcfContentBackground;
			}
			
			.boxMenuDepth1 .boxMenuLink {
				padding-left: 40px;
			}
			
			.boxMenuDepth2 .boxMenuLink {
				padding-left: 60px;
			}
			
			@include screen-md-down {
				position: relative;
				
				.boxMenuLink {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				
				&:not(.open):not(.forceOpen) {
					> li:first-child,
					> li.active:not(:first-child) {
						pointer-events: none;
						
						> a::after {
							content: $fa-var-caret-down;
							font-family: FontAwesome;
							font-size: 14px;
							margin-left: 7px;
						}
						
						.boxMenuDepth1,
						.boxMenuDepth2 {
							position: relative;
							
							> li {
								&:not(.active) {
									display: none;
								}
								
								&.active {
									left: 0;
									position: absolute;
									right: 0;
									top: 0;
									transform: translateY(-100%);
									
									> a::after {
										content: $fa-var-caret-down;
										font-family: FontAwesome;
										font-size: 14px;
										margin-left: 7px;
									}
								}
							}
						}
					}
					
					> li:first-child ~ li {
						display: none;
					}
					
					> li.active:not(:first-child) {
						display: block;
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
					}
				}
			}
		}
	}
	
	@include screen-xs {
		.boxImage {
			align-items: center;
			display: flex;
			justify-content: center;
			margin-bottom: 20px;
			max-height: 100px;
			overflow: hidden;
		}
	}
	
	@include screen-sm-md {
		.boxWithImage {
			@include clearfix;
			
			.boxTitle,
			.boxContent {
				margin-left: calc(30% + 15px);
			}
		}
		
		.boxImage {
			float: left;
			width: 30%;
		}
	}
	
	@include screen-lg {
		.boxImage {
			align-items: center;
			display: flex;
			justify-content: center;
			margin-bottom: 20px;
			max-height: 100px;
			overflow: hidden;
		}
	}
}

/* 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%;
		}
	}
	
	.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 {
				flex: 0 0 25%;
				margin-bottom: 20px;
				
				> .boxMenuLink {
					@include wcfFontHeadline;
					
					margin-bottom: 10px;
				}
			}
		}
	}
}
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	365	.boxTitle {
d3925b67	366	color: $wcfSidebarHeadlineText;
e9f3957f	367
d3925b67 MW	368	a {
	369	color: $wcfSidebarHeadlineLink;
	370
	371	&:hover {
	372	color: $wcfSidebarHeadlineLinkActive;
	373
	374	}
e9f3957f MW	375	}
	376	}
	377
bb6ef47e	378	.box {
0e8421c9 MW	379	&:not(.boxBorderless) {
0e8421c9 MW	380	background-color: $wcfSidebarBackground;
0e8421c9	381
f216765b AE	382	@include screen-md-down {
f216765b AE	383	padding: 20px 10px;
63e2f52f AE	384
63e2f52f AE	385	.boxMenu {
f216765b AE	386	margin-left: -10px;
f216765b AE	387	margin-right: -10px;
63e2f52f AE	388	}
	389	}
	390
f216765b AE	391	@include screen-lg {
f216765b AE	392	padding: 20px;
63e2f52f AE	393
63e2f52f AE	394	.boxMenu {
f216765b AE	395	margin-left: -20px;
f216765b AE	396	margin-right: -20px;
63e2f52f	397	}
0e8421c9 MW	398	}
0e8421c9 MW	399	}
bb6ef47e MW	400
bb6ef47e MW	401	&:not(:first-child) {
95961bdf	402	margin-top: 30px;
bb6ef47e	403	}
487db634	404
487db634 MW	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 {
47115034 MW	427	align-items: flex-start;
47115034 MW	428	display: flex;
0e8421c9 MW	429	padding: 5px 20px;
0e8421c9 MW	430
47115034 MW	431	.boxMenuLinkTitle {
	432	flex: 1 1 auto;
	433	}
	434
0e8421c9	435	.badge {
47115034	436	flex: 0 0 auto;
0e8421c9 MW	437	}
	438	}
	439
	440	li.active > .boxMenuLink {
	441	background-color: $wcfContentBackground;
	442	}
	443
	444	.boxMenuDepth1 .boxMenuLink {
	445	padding-left: 40px;
	446	}
	447
	448	.boxMenuDepth2 .boxMenuLink {
	449	padding-left: 60px;
	450	}
d9a5604a AE	451
d9a5604a AE	452	@include screen-md-down {
4af25ab6 MW	453	position: relative;
	454
	455	.boxMenuLink {
	456	overflow: hidden;
	457	text-overflow: ellipsis;
	458	white-space: nowrap;
	459	}
	460
9384e330	461	&:not(.open):not(.forceOpen) {
4af25ab6 MW	462	> li:first-child,
	463	> li.active:not(:first-child) {
	464	pointer-events: none;
	465
	466	> a::after {
	467	content: $fa-var-caret-down;
	468	font-family: FontAwesome;
	469	font-size: 14px;
	470	margin-left: 7px;
	471	}
dc6f1f37 AE	472
	473	.boxMenuDepth1,
	474	.boxMenuDepth2 {
	475	position: relative;
	476
	477	> li {
	478	&:not(.active) {
	479	display: none;
	480	}
	481
	482	&.active {
	483	left: 0;
	484	position: absolute;
	485	right: 0;
	486	top: 0;
	487	transform: translateY(-100%);
	488
	489	> a::after {
	490	content: $fa-var-caret-down;
	491	font-family: FontAwesome;
	492	font-size: 14px;
	493	margin-left: 7px;
	494	}
	495	}
	496	}
	497	}
4af25ab6 MW	498	}
	499
	500	> li:first-child ~ li {
	501	display: none;
	502	}
	503
	504	> li.active:not(:first-child) {
	505	display: block;
	506	position: absolute;
	507	left: 0;
	508	right: 0;
	509	top: 0;
	510	}
	511	}
d9a5604a	512	}
0e8421c9	513	}
bb6ef47e MW	514	}
bb6ef47e MW	515
fd94097c MW	516	@include screen-xs {
	517	.boxImage {
	518	align-items: center;
	519	display: flex;
	520	justify-content: center;
	521	margin-bottom: 20px;
	522	max-height: 100px;
	523	overflow: hidden;
bb6ef47e MW	524	}
	525	}
	526
fd94097c MW	527	@include screen-sm-md {
	528	.boxWithImage {
	529	@include clearfix;
	530
	531	.boxTitle,
	532	.boxContent {
	533	margin-left: calc(30% + 15px);
	534	}
	535	}
	536
	537	.boxImage {
	538	float: left;
	539	width: 30%;
	540	}
bb6ef47e	541	}
fd94097c MW	542
	543	@include screen-lg {
	544	.boxImage {
	545	align-items: center;
	546	display: flex;
	547	justify-content: center;
	548	margin-bottom: 20px;
	549	max-height: 100px;
	550	overflow: hidden;
	551	}
c5dd767e	552	}
bb6ef47e MW	553	}
	554
	555	/* styling for boxes in <contentTop>/<contentBottom> position */
	556	.boxesContentTop,
	557	.boxesContentBottom {
bb6ef47e MW	558	.box {
bb6ef47e MW	559	&:not(:first-child) {
10ff3d63	560	margin-top: 40px;
bb6ef47e MW	561	}
	562	}
	563
72a7f9cd MW	564	.boxTitle {
	565	color: $wcfContentHeadlineText;
	566
5908f54f	567	@include wcfFontSection;
fd94097c	568
72a7f9cd MW	569	a {
	570	color: $wcfContentHeadlineLink;
	571
	572	&:hover {
	573	color: $wcfContentHeadlineLinkActive;
	574	}
	575	}
	576	}
	577
fd94097c MW	578	@include screen-xs {
	579	.boxImage {
	580	align-items: center;
	581	display: flex;
	582	justify-content: center;
	583	margin-bottom: 20px;
	584	max-height: 100px;
	585	overflow: hidden;
	586	}
bb6ef47e	587	}
fd94097c MW	588
	589	@include screen-sm-up {
	590	.boxWithImage {
	591	@include clearfix;
	592
	593	.boxTitle,
	594	.boxContent {
	595	@include screen-md-down {
	596	margin-left: calc(30% + 15px);
	597	}
	598
	599	@include screen-lg {
	600	margin-left: calc(30% + 30px);
	601	}
	602	}
	603	}
	604
	605	.boxImage {
	606	float: left;
	607	width: 30%;
	608	}
c5dd767e	609	}
bb6ef47e MW	610	}
bb6ef47e MW	611
0b6161c6 MW	612	.boxesContentTop:not(:first-child) {
0b6161c6 MW	613	margin-top: 40px;
bb6ef47e MW	614	}
	615
	616	.boxesContentBottom {
10ff3d63	617	margin-top: 40px;
bb6ef47e MW	618	}
	619
	620	/* styling for boxes in <footerBoxes> position */
	621	.boxesFooterBoxes {
	622	background-color: $wcfFooterBoxBackground;
	623	color: $wcfFooterBoxText;
bb6ef47e MW	624
	625	a {
	626	color: $wcfFooterBoxLink;
	627
bb6ef47e MW	628	&:hover {
bb6ef47e MW	629	color: $wcfFooterBoxLinkActive;
bb6ef47e MW	630	}
	631	}
	632
	633	.icon {
	634	color: $wcfFooterBoxText;
	635	}
	636
c734a302	637	.boxContainer {
f216765b	638	@include screen-sm-down {
fd94097c	639	padding: 40px 0;
f216765b AE	640	}
f216765b AE	641
7102d090 AE	642	@include screen-md-down {
	643	margin-left: -10px;
	644	margin-right: -10px;
	645	}
	646
f216765b	647	@include screen-md-up {
63e2f52f AE	648	display: flex;
63e2f52f AE	649	flex-wrap: wrap;
fd94097c MW	650	margin-bottom: -60px;
fd94097c MW	651	padding: 60px 0;
c3d0938e	652	}
7102d090 AE	653
	654	@include screen-lg {
	655	margin-left: -15px;
	656	margin-right: -15px;
	657	}
bb6ef47e MW	658	}
	659
	660	.box {
95961bdf	661	overflow: hidden;
fd94097c MW	662	padding-left: 15px;
fd94097c MW	663	padding-right: 15px;
bb6ef47e	664
f216765b	665	@include screen-sm-down {
fd94097c MW	666	&:not(:last-child) {
fd94097c MW	667	margin-bottom: 40px;
c5dd767e	668	}
f216765b AE	669	}
	670
	671	@include screen-md-up {
63e2f52f	672	flex: 0 0 50%;
fd94097c	673	margin-bottom: 60px;
63e2f52f AE	674
	675	&.boxFullWidth {
	676	flex-basis: 100%;
	677	}
	678	}
bb6ef47e MW	679	}
bb6ef47e MW	680
72a7f9cd MW	681	.boxTitle {
	682	color: $wcfFooterBoxHeadlineText;
	683
	684	a {
	685	color: $wcfFooterBoxHeadlineLink;
	686
	687	&:hover {
	688	color: $wcfFooterBoxHeadlineLinkActive;
	689	}
	690	}
	691	}
	692
bb6ef47e	693	.boxImage {
fd94097c MW	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
	703	/* styling for boxes in <footer> position */
	704	.boxesFooter {
0b6161c6 MW	705	background-color: $wcfFooterBackground;
0b6161c6 MW	706	color: $wcfFooterText;
11f96819	707	padding: 20px 0;
0b6161c6 MW	708
	709	.icon {
	710	color: $wcfFooterText;
	711	}
	712
	713	a {
	714	color: $wcfFooterLink;
	715
	716	&:hover {
	717	color: $wcfFooterLinkActive;
2a5ae89f	718	text-decoration: underline;
0b6161c6 MW	719	}
	720	}
	721
bb6ef47e MW	722	.box {
bb6ef47e MW	723	&:not(:first-child) {
95961bdf	724	margin-top: 20px;
bb6ef47e MW	725	}
	726	}
	727
fd94097c MW	728	@include screen-xs {
	729	.boxImage {
	730	align-items: center;
	731	display: flex;
	732	justify-content: center;
	733	margin-bottom: 20px;
	734	max-height: 100px;
	735	overflow: hidden;
bb6ef47e MW	736	}
	737	}
	738
fd94097c MW	739	@include screen-sm-up {
	740	.boxWithImage {
	741	@include clearfix;
	742
	743	.boxTitle,
	744	.boxContent {
	745	@include screen-md-down {
	746	margin-left: calc(30% + 15px);
	747	}
	748
	749	@include screen-lg {
	750	margin-left: calc(30% + 30px);
	751	}
	752	}
	753	}
	754
	755	.boxImage {
	756	float: left;
	757	width: 30%;
	758	}
bb6ef47e	759	}
948d7051	760
10159160 MW	761	.boxMenuLinkGroup {
	762	.boxMenu {
	763	> li {
	764	> ol {
	765	a {
	766	// use text color instead
	767	color: $wcfFooterText;
	768	}
	769	}
	770	}
	771	}
	772	}
	773
	774	.styleChanger {
	775	@include screen-sm-down {
	776	display: none;
	777	}
	778
	779	@include screen-md-up {
	780	float: right;
	781	padding-left: 20px;
	782	}
	783	}
	784	}
	785
	786	.boxesTop,
	787	.boxesBottom,
	788	.boxesFooter {
948d7051	789	.boxMenu {
f2e6770c	790	display: inline-flex;
1ec71078	791	flex-wrap: wrap;
948d7051 MW	792	margin-left: -10px;
	793	margin-right: -10px;
	794
948d7051	795	> li {
f2e6770c	796	flex: 0 0 auto;
948d7051 MW	797	padding-left: 10px;
948d7051 MW	798	padding-right: 10px;
f2e6770c MW	799	}
	800	}
	801
10159160	802	.boxMenuLinkGroup {
6063a7ec AE	803	&:not(:first-child) {
	804	margin-top: 40px;
	805	}
	806
f2e6770c MW	807	.boxMenu {
	808	display: flex;
	809	flex-wrap: wrap;
	810	margin-bottom: -20px;
948d7051	811
f2e6770c MW	812	.boxMenuLink {
	813	display: inline-block;
	814	}
	815
	816	> li {
	817	flex: 0 0 25%;
	818	margin-bottom: 20px;
	819
948d7051	820	> .boxMenuLink {
5908f54f	821	@include wcfFontHeadline;
948d7051 MW	822
	823	margin-bottom: 10px;
	824	}
948d7051 MW	825	}
	826	}
	827	}
bb6ef47e	828	}