Added proper styling for sub tab menus

diff --git a/wcfsetup/install/files/style/ui/tabMenu.scss b/wcfsetup/install/files/style/ui/tabMenu.scss
index 7ba1950b74f1af6ac844efd01d7190d87b1ae9e4..80d6c8b0765148d55cd38099a161b6d76e32c6ff 100644 (file)
--- a/wcfsetup/install/files/style/ui/tabMenu.scss
+++ b/wcfsetup/install/files/style/ui/tabMenu.scss
@@ -54,8 +54,11 @@
                        }
                        
                        > li {
+                               padding: 5px 0;
+                               
                                &.active {
                                        pointer-events: none;
+                                       
                                        > a::after {
                                                content: $fa-var-caret-down;
                                                font-family: FontAwesome;
@@ -87,44 +90,76 @@
        margin-top: 10px;
        position: relative;
        
-       > ul > li > a {
-               display: block;
-               padding: 5px 0;
-               
-               @include wcfFontHeadline;
-       }
-       
-       > ul {
-               border-bottom: 1px solid $wcfContentBorderInner;
-               
-               @include inlineList;
-               
-               > li {
-                       position: relative;
+       @include screen-md-up {
+               > ul {
+                       border-bottom: 1px solid $wcfContentBorderInner;
                        
-                       &::before {
-                               border-top: 1px solid $wcfContentLink;
-                               bottom: -1px;
-                               content: "";
-                               left: 50%;
-                               position: absolute;
-                               width: 0;
-                       }
+                       @include inlineList;
                        
-                       &.active::before {
-                               left: 0;
-                               transition: left .12s linear, width .12s linear;
-                               width: 100%;
+                       > li {
+                               position: relative;
+                               
+                               &::before {
+                                       border-top: 1px solid $wcfContentLink;
+                                       bottom: -1px;
+                                       content: "";
+                                       left: 50%;
+                                       position: absolute;
+                                       width: 0;
+                               }
+                               
+                               &.active::before {
+                                       left: 0;
+                                       transition: left .12s linear, width .12s linear;
+                                       width: 100%;
+                               }
+                               
+                               &:not(:last-child) {
+                                       margin-right: 20px;
+                               }
+                               
+                               &.active > a {
+                                       cursor: default;
+                               }
+                               
+                               > a {
+                                       display: block;
+                                       padding: 5px 0;
+                                       
+                                       @include wcfFontHeadline;
+                               }
                        }
+               }
+       }
+       
+       @include screen-sm-down {
+               > ul {
+                       border-bottom: 1px solid $wcfContentLink;
+                       display: block;
+                       padding-bottom: 5px;
                        
-                       &:not(:last-child) {
-                               margin-right: 20px;
+                       &:not(.active) > li:not(.active) {
+                               display: none;
                        }
                        
-                       &.active > a {
-                               cursor: default;
+                       > li {
+                               padding: 5px 0;
+                               
+                               &.active {
+                                       pointer-events: none;
+                                       
+                                       > a::after {
+                                               content: $fa-var-caret-down;
+                                               font-family: FontAwesome;
+                                               margin-left: 7px;
+                                       }
+                               }
                        }
                }
+               
+               > span {
+                       display: none;
+               }
        }
        
        & + .tabMenuContent {