From e94ff25cd6449f793d962ea15bfa26b2e1d57c19 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Sat, 1 Oct 2016 22:29:11 +0200 Subject: [PATCH] Improved visuals of tab menus on mobile devices --- wcfsetup/install/files/style/ui/tabMenu.scss | 26 +++++++++++++------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/wcfsetup/install/files/style/ui/tabMenu.scss b/wcfsetup/install/files/style/ui/tabMenu.scss index 658a616e3c..38c360759d 100644 --- a/wcfsetup/install/files/style/ui/tabMenu.scss +++ b/wcfsetup/install/files/style/ui/tabMenu.scss @@ -20,14 +20,20 @@ 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 { @@ -109,7 +115,7 @@ top: 0; transition: opacity .24s linear, visibility 0s linear .24s; visibility: hidden; - width: 15px; + width: 30px; z-index: 50; &.active { @@ -124,10 +130,12 @@ } .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; } -- 2.20.1