Improved visuals of tab menus on mobile devices
authorAlexander Ebert <ebert@woltlab.com>
Sat, 1 Oct 2016 20:29:11 +0000 (22:29 +0200)
committerAlexander Ebert <ebert@woltlab.com>
Sat, 1 Oct 2016 20:29:32 +0000 (22:29 +0200)
wcfsetup/install/files/style/ui/tabMenu.scss

index 658a616e3c457e34b01b9dfb8f9017b7b3fa148a..38c360759dd1fad86fddd22ad8b1d8316c43f168 100644 (file)
                                width: 0;
                        }
                        
-                       &.active::before {
-                               left: 0;
-                               transition: left .12s linear, width .12s linear;
-                               width: 100%;
-                       }
-                       
-                       &.active > a {
-                               cursor: default;
+                       &.active{
+                               // this causes the item to stand above the fade-effect caused
+                               // by the overflow overlays
+                               z-index: 100;
+                               
+                               &::before {
+                                       left: 0;
+                                       transition: left .12s linear, width .12s linear;
+                                       width: 100%;
+                               }
+                               
+                               > a {
+                                       cursor: default;
+                               }
                        }
                        
                        > a {
        top: 0;
        transition: opacity .24s linear, visibility 0s linear .24s;
        visibility: hidden;
-       width: 15px;
+       width: 30px;
        z-index: 50;
        
        &.active {
 }
 
 .tabMenuOverlayLeft {
+       background: linear-gradient(to left, transparentize($wcfContentBackground, 100%) 0%, $wcfContentBackground 50%);
        left: 0;
 }
 
 .tabMenuOverlayRight {
+       background: linear-gradient(to right, transparentize($wcfContentBackground, 100%) 0%, $wcfContentBackground 50%);
        justify-content: flex-end;
        right: 0;
 }