From 13215a881dbb1df8673d1f1fae3871bbab66cec3 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Mon, 11 May 2015 19:53:12 +0200
Subject: [PATCH] Moved LESS for tab menus into a separate file

---
 wcfsetup/install/files/style/tabMenu.less | 194 ++++++++++++++++++++++
 1 file changed, 194 insertions(+)

diff --git a/wcfsetup/install/files/style/tabMenu.less b/wcfsetup/install/files/style/tabMenu.less
index e69de29bb2..0d92174364 100644
--- a/wcfsetup/install/files/style/tabMenu.less
+++ b/wcfsetup/install/files/style/tabMenu.less
@@ -0,0 +1,194 @@
+.tabMenu {
+	display: block;
+	margin-top: @wcfGapLarge;
+	position: relative;
+	text-align: left;
+	
+	> ul {
+		background-color: @wcfContainerAccentBackgroundColor;
+		border-color: @wcfContainerBorderColor;
+		border-style: solid;
+		border-width: 1px 1px 0 1px;
+		display: inline-block;
+		font-size: 0;
+		position: relative;
+		white-space: nowrap;
+		word-wrap: normal;
+		
+		.textShadow(@wcfContainerBackgroundColor);
+		
+		> li {
+			display: inline-block;
+			outline: 0;
+			
+			&.ui-state-active {
+				> a {
+					background-color: @wcfContainerBackgroundColor;
+					border-color: @wcfContainerBorderColor @wcfContainerBorderColor @wcfContainerBackgroundColor;
+					border-style: solid;
+					border-width: 1px;
+					color: @wcfLinkColor;
+					font-weight: bold;
+					z-index: 30;
+				}
+			}
+			
+			> a {
+				color: @wcfDimmedColor;
+				display: inline-block;
+				font-size: 1.1rem;
+				outline: 0;
+				padding: 7px 10px;
+				position: relative;
+				text-decoration: none;
+				z-index: 10;
+				
+				> .badge {
+					top: -1px;
+				}
+			}
+			
+			&:not(.ui-state-active) {
+				> a:hover {
+					color: @wcfLinkColor;
+				}
+			}
+		}
+	}
+}
+
+@media only screen and (max-width: 800px) {
+	.tabMenu {
+		> ul > li.ui-state-active {
+			margin-top: -1px;
+			
+			&:first-child {
+				margin-left: -1px;
+			}
+			
+			&:last-child {
+				margin-right: -1px;
+			}
+		}
+	
+	}
+}
+
+@media all and (min-width: 801px) {
+	.tabMenu > ul {
+		padding: 0 5px 3px 5px;
+		
+		> li {
+			> a {
+				bottom: -3px;
+				padding: 1px 10px 3px;
+			}
+			
+			&.ui-state-active {
+				> a {
+					font-size: 1.3rem;
+					margin-top: -10px;
+					padding: 10px 15px 5px;
+				}
+				
+				&:first-child {
+					margin-left: -6px;
+				}
+				
+				&:last-child {
+					margin-right: -6px;
+				}
+			}
+		}
+	}
+}
+
+.tabMenu > ul > li.ui-state-active > a,
+.tabMenu > ul > li.ui-state-disabled > a,
+.tabMenu > ul > li.ui-state-processing > a {
+	cursor: default;
+}
+
+.tabMenuContent {
+	display: block;
+	margin-top: -1px;
+	min-height: @wcfGapLarge;
+	position: relative;
+	z-index: 20; /* Prevents border overlay during transition */
+	
+	&.hidden {
+		display: none;
+	}
+}
+
+/* sub tabs */
+.tabMenuContainer {
+	&.containerPadding > .menu {
+		margin: -@wcfGapMedium -@wcfGapLarge @wcfGapMedium -@wcfGapLarge; /* reverse paddings from .containerPadding */
+	}
+	
+	> .menu {
+		border-bottom: 1px solid @wcfContainerBorderColor;
+		padding: @wcfGapTiny @wcfGapSmall;
+		
+		.linearGradient(@wcfContainerBackgroundColor, @wcfContainerBackgroundColor, @wcfContainerAccentBackgroundColor);
+		
+		ul {
+			display: inline-block;
+			font-size: 0;
+			white-space: nowrap;
+			
+			li {
+				display: inline-block;
+				outline: 0;
+				vertical-align: bottom;
+				
+				&.ui-state-active a,
+				&.ui-state-active a:hover {
+					background-color: @wcfButtonPrimaryBackgroundColor;
+					border-color: @wcfButtonPrimaryBorderColor;
+					color: @wcfButtonPrimaryColor;
+					cursor: default;
+				}
+				
+				a {
+					background-color: @wcfContainerBackgroundColor;
+					border: 1px solid @wcfContainerBorderColor;
+					border-radius: @wcfButtonBorderRadius;
+					color: @wcfButtonColor;
+					display: block;
+					font-size: @wcfSmallFontSize;
+					margin: @wcfGapTiny 0;
+					outline: 0;
+					padding: @wcfGapTiny @wcfGapSmall;
+					
+					&:hover {
+						background-color: @wcfButtonHoverBackgroundColor;
+						border-color: @wcfButtonHoverBorderColor;
+						color: @wcfButtonHoverColor;
+						text-decoration: none;
+					}
+				}
+				
+				&:not(:last-child) {
+					padding-right: @wcfGapTiny;
+				}
+				
+				&.dropdown > a {
+					font-size: 1.0rem;
+					padding: 4px 7px 2px;
+				}
+			}
+		}
+	}
+}
+
+@media only screen and (max-width: 800px) {
+	.tabMenuContainer.containerPadding > .menu {
+		margin: -@wcfGapSmall -@wcfGapMedium @wcfGapSmall -@wcfGapMedium; /* reverse paddings from .containerPadding */
+	}
+}
+
+.containerPadding > .tabMenuContainer:last-child {
+	margin-bottom: @wcfGapSmall;
+}
-- 
2.20.1