From bea00af010e9b8107b0442198d9c0ca2c91ebd39 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Sun, 10 Jul 2016 19:58:44 +0200
Subject: [PATCH] Added proper styling for sub tab menus

---
 wcfsetup/install/files/style/ui/tabMenu.scss | 95 +++++++++++++-------
 1 file changed, 65 insertions(+), 30 deletions(-)

diff --git a/wcfsetup/install/files/style/ui/tabMenu.scss b/wcfsetup/install/files/style/ui/tabMenu.scss
index 7ba1950b74..80d6c8b076 100644
--- 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 {
-- 
2.20.1