From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 26 Aug 2016 15:10:09 +0000 (+0200)
Subject: Sidebar boxes are now split into columns on tablets
X-Git-Tag: 3.0.0_Beta_1~471
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=e4c07d6780809b14c4ad32884d91ea503c1bc85c;p=GitHub%2FWoltLab%2FWCF.git

Sidebar boxes are now split into columns on tablets
---

diff --git a/wcfsetup/install/files/style/layout/box.scss b/wcfsetup/install/files/style/layout/box.scss
index 875d46b9d4..31e704ea47 100644
--- a/wcfsetup/install/files/style/layout/box.scss
+++ b/wcfsetup/install/files/style/layout/box.scss
@@ -305,6 +305,46 @@
 		}
 	}
 	
+	> .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;
 	}