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 31868388d078c4d06d2790476f6af2d6360c7f96..8de5a7c21f70ee2e1eb6174e7e8130dd74790132 100644 (file)
--- 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 c43220087a2d26df948e12f9122f469b2c0fa508..4a79494b44eedc84ecedf9a52f12f0d6def97874 100644 (file)
--- 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 32ddfcb55bcd77e493300457894bb52088f57c7c..2eaa4a11b807d92dd044b5b69f7b420f451dc35a 100644 (file)
--- 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 adb49c94fc50a0bf0fa8e308404089c116915dd7..65050174849ef8def3f526193849e04d382d6005 100644 (file)
--- 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 0079372d4b432b955082b6c07b0ce5a6153d4445..c2a1bf556ea667ee1bc50093a2ad6058fbe5162b 100644 (file)
--- 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 fc1fcb66822636bc4a4ac00b7f228ddef3b6747a..e16d7d02628f732c46900f45b98c5918be69174f 100644 (file)
--- 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 {