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 875d46b9d4bd5172116eef05ebcce9e150e89163..31e704ea47d226ee705dc776a5e95509a1789b66 100644 (file)
--- 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;
        }