From: Alexander Ebert <ebert@woltlab.com>
Date: Thu, 14 Nov 2019 14:47:30 +0000 (+0100)
Subject: Rewrote `flex` shorthand for compatibility with IE11
X-Git-Tag: 5.2.0_Beta_3~6
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=212264b7ae803f1d5f9a6dfc3063b13eab12aced;p=GitHub%2FWoltLab%2FWCF.git

Rewrote `flex` shorthand for compatibility with IE11

See #3101
---

diff --git a/wcfsetup/install/files/style/layout/containerList.scss b/wcfsetup/install/files/style/layout/containerList.scss
index 31868388d0..8de5a7c21f 100644
--- a/wcfsetup/install/files/style/layout/containerList.scss
+++ b/wcfsetup/install/files/style/layout/containerList.scss
@@ -220,9 +220,10 @@
 		}
 		
 		&.tripleColumned > li {
-			flex: 0 0 calc(100% / 3);
-			/* work-around for IE10 */
-			width: calc(100% / 3);
+			/* The `flex` shorthand fails in IE11 if `calc()` is used. */
+			flex-grow: 0;
+			flex-shrink: 0;
+			flex-basis: calc(100% / 3);
 			
 			&:nth-child(3n+1):nth-last-child(-n+3),
 			&:nth-child(3n+1):nth-last-child(-n+3) ~ li {
@@ -272,9 +273,10 @@
 		}
 		
 		&.tripleColumned > li {
-			flex: 0 0 calc(100% / 3);
-			/* work-around for IE10 */
-			width: calc(100% / 3);
+			/* The `flex` shorthand fails in IE11 if `calc()` is used. */
+			flex-grow: 0;
+			flex-shrink: 0;
+			flex-basis: calc(100% / 3);
 		}
 	}
 }
diff --git a/wcfsetup/install/files/style/ui/article.scss b/wcfsetup/install/files/style/ui/article.scss
index c43220087a..4a79494b44 100644
--- a/wcfsetup/install/files/style/ui/article.scss
+++ b/wcfsetup/install/files/style/ui/article.scss
@@ -310,16 +310,20 @@ html[dir="rtl"] {
 	@include screen-lg {
 		.articleList {
 			> li {
-				flex: 0 0 calc(100%/3 - 10px);
-				max-width: calc(100%/3 - 10px);
+				/* The `flex` shorthand fails in IE11 if `calc()` is used. */
+				flex-grow: 0;
+				flex-shrink: 0;
+				flex-basis: calc(100% / 3 - 10px);
 			}
 		}
 
 		.boxFullWidth {
 			.articleList {
 				> li {
-					flex: 0 0 calc(100%/6 - 10px);
-					max-width: calc(100%/6 - 10px);
+					/* The `flex` shorthand fails in IE11 if `calc()` is used. */
+					flex-grow: 0;
+					flex-shrink: 0;
+					flex-basis: calc(100% / 6 - 10px);
 				}
 			}
 		}
@@ -328,8 +332,10 @@ html[dir="rtl"] {
 	@include screen-sm-up {
 		.articleList {
 			> li {
-				flex: 0 0 calc(100%/3 - 10px);
-				max-width: calc(100%/3 - 10px);
+				/* The `flex` shorthand fails in IE11 if `calc()` is used. */
+				flex-grow: 0;
+				flex-shrink: 0;
+				flex-basis: calc(100% / 3 - 10px);
 			}
 		}
 	}
diff --git a/wcfsetup/install/files/style/ui/attachment.scss b/wcfsetup/install/files/style/ui/attachment.scss
index 32ddfcb55b..2eaa4a11b8 100644
--- a/wcfsetup/install/files/style/ui/attachment.scss
+++ b/wcfsetup/install/files/style/ui/attachment.scss
@@ -146,8 +146,10 @@
 				   items to be exactly 1 pixel wider than the available space.
 				   Reserving 21px covers all sort of rounding errors, without
 				   being visually noticeable */
-				flex: 0 0 calc(50% - 21px);
-				max-width: calc(50% - 21px); /* IE fix */
+				/* The `flex` shorthand fails in IE11 if `calc()` is used. */
+				flex-grow: 0;
+				flex-shrink: 0;
+				flex-basis: calc(50% - 21px);
 				margin-right: 20px;
 			}
 		}
diff --git a/wcfsetup/install/files/style/ui/contentItem.scss b/wcfsetup/install/files/style/ui/contentItem.scss
index adb49c94fc..6505017484 100644
--- a/wcfsetup/install/files/style/ui/contentItem.scss
+++ b/wcfsetup/install/files/style/ui/contentItem.scss
@@ -16,13 +16,17 @@
 }
 
 .contentItemSingleColumn {
-	flex: 0 0 calc(100% - 20px);
-	max-width: calc(100% - 20px); /* IE 11 */
+	/* The `flex` shorthand fails in IE11 if `calc()` is used. */
+	flex-grow: 0;
+	flex-shrink: 0;
+	flex-basis: calc(100% - 20px);
 }
 
 .contentItemMultiColumn {
-	flex: 0 0 calc(50% - 20px);
-	max-width: calc(50% - 20px); /* IE 11 */
+	/* The `flex` shorthand fails in IE11 if `calc()` is used. */
+	flex-grow: 0;
+	flex-shrink: 0;
+	flex-basis: calc(50% - 20px);
 }
 
 .contentItemLink {
@@ -204,8 +208,10 @@
 	/* There are no sidebars, use a three column layout. */
 	.content:first-child:last-child {
 		.contentItemMultiColumn {
-			flex: 0 0 calc(100% / 3 - 20px);
-			max-width: calc(100% / 3 - 20px); /* IE 11 */
+			/* The `flex` shorthand fails in IE11 if `calc()` is used. */
+			flex-grow: 0;
+			flex-shrink: 0;
+			flex-basis: calc(100% / 3 - 20px);
 		}
 	}
 }
@@ -213,8 +219,10 @@
 @include screen-md {
 	/* The sidebar, if any, is not adjacent to the content, use a three column layout. */
 	.contentItemMultiColumn {
-		flex: 0 0 calc(100% / 3 - 20px);
-		max-width: calc(100% / 3 - 20px); /* IE 11 */
+		/* The `flex` shorthand fails in IE11 if `calc()` is used. */
+		flex-grow: 0;
+		flex-shrink: 0;
+		flex-basis: calc(100% / 3 - 20px);
 	}
 }
 
diff --git a/wcfsetup/install/files/style/ui/uploadHandler.scss b/wcfsetup/install/files/style/ui/uploadHandler.scss
index 0079372d4b..c2a1bf556e 100644
--- a/wcfsetup/install/files/style/ui/uploadHandler.scss
+++ b/wcfsetup/install/files/style/ui/uploadHandler.scss
@@ -20,8 +20,10 @@
 				   items to be exactly 1 pixel wider than the available space.
 				   Reserving 21px covers all sort of rounding errors, without
 				   being visually noticeable */
-				flex: 0 0 calc(50% - 21px);
-				max-width: calc(50% - 21px); /* IE fix */
+				/* The `flex` shorthand fails in IE11 if `calc()` is used. */
+				flex-grow: 0;
+				flex-shrink: 0;
+				flex-basis: calc(50% - 21px);
 				margin-right: 20px;
 			}
 		}
@@ -52,4 +54,4 @@
 			top: 0;
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/wcfsetup/install/files/style/ui/userProfile.scss b/wcfsetup/install/files/style/ui/userProfile.scss
index fc1fcb6682..e16d7d0262 100644
--- a/wcfsetup/install/files/style/ui/userProfile.scss
+++ b/wcfsetup/install/files/style/ui/userProfile.scss
@@ -47,7 +47,10 @@
 		}
 		
 		.contentHeaderTitle {
-			flex: 0 0 calc(100% - 111px);
+			/* The `flex` shorthand fails in IE11 if `calc()` is used. */
+			flex-grow: 0;
+			flex-shrink: 0;
+			flex-basis: calc(100% - 111px);
 			max-width: calc(100% - 11px);
 		}
 	}
@@ -65,8 +68,10 @@
 		}
 		
 		.contentHeaderTitle {
-			flex: 0 0 calc(100% - 58px);
-			max-width: calc(100% - 58px);
+			/* The `flex` shorthand fails in IE11 if `calc()` is used. */
+			flex-grow: 0;
+			flex-shrink: 0;
+			flex-basis: calc(100% - 58px);
 		}
 		
 		.contentHeaderNavigation {