From: jrobson <jrobson@wikimedia.org>
Date: Wed, 8 Jan 2014 17:59:18 +0000 (-0800)
Subject: Vector: Rewrite vectorTabs with nesting
X-Git-Tag: 1.31.0-rc.0~17294
X-Git-Url: http://git.cyclocoop.org//%27%40script%40/%27?a=commitdiff_plain;h=8b9c5c8ba2536e57f2cafe5cee08d071b1a1d738;p=lhc%2Fweb%2Fwiklou.git

Vector: Rewrite vectorTabs with nesting

Change-Id: I598c90495b542996ab32209bfeaeb3d451d6d01e
---

diff --git a/skins/vector/components/tabs.less b/skins/vector/components/tabs.less
index 63f2ed11e1..43e77cd8e5 100644
--- a/skins/vector/components/tabs.less
+++ b/skins/vector/components/tabs.less
@@ -13,100 +13,105 @@ div.vectorTabs {
 	/* @noflip */
 	float: left;
 	height: 2.5em;
-}
-
-div.vectorTabs {
 	.background-image('images/tab-break.png');
 	background-position: bottom left;
 	background-repeat: no-repeat;
 	padding-left: 1px;
-}
-
-div.vectorTabs ul {
-	/* @noflip */
-	float: left;
-	height: 100%;
-	list-style-type: none;
-	list-style-image: none;
-	margin: 0;
-	padding: 0;
-}
 
-/* OVERRIDDEN BY COMPLIANT BROWSERS */
-div.vectorTabs ul li {
-	/* @noflip */
-	float: left;
-	line-height: 1.125em;
-	display: inline-block;
-	height: 100%;
-	margin: 0;
-	padding: 0;
-	background-color: #f3f3f3;
-	.background-image('images/tab-normal-fade.png');
-	background-position: bottom left;
-	background-repeat: repeat-x;
-	white-space: nowrap;
-}
-
-/* IGNORED BY IE6 */
-div.vectorTabs ul > li {
-	display: block;
-}
-
-div.vectorTabs li.selected {
-	.background-image('images/tab-current-fade.png');
-}
-
-/* OVERRIDDEN BY COMPLIANT BROWSERS */
-div.vectorTabs li a {
-	display: inline-block;
-	height: 1.9em;
-	padding-left: 0.5em;
-	padding-right: 0.5em;
-	color: @menu-link-color;
-	cursor: pointer;
-	font-size: 0.8em;
-}
-
-/* IGNORED BY IE6 */
-div.vectorTabs li > a {
-	display: block;
-}
-
-div.vectorTabs li.icon a {
-	background-position: bottom right;
-	background-repeat: no-repeat;
-}
-
-/* OVERRIDDEN BY COMPLIANT BROWSERS */
-div.vectorTabs span a {
-	display: inline-block;
-	padding-top: 1.25em;
-}
-
-/* IGNORED BY IE6 */
-div.vectorTabs span > a {
-	/* @noflip */
-	float: left;
-	display: block;
-}
-
-div.vectorTabs span {
-	display: inline-block;
-	.background-image('images/tab-break.png');
-	background-position: bottom right;
-	background-repeat: no-repeat;
-}
-
-div.vectorTabs li.selected a,
-div.vectorTabs li.selected a:visited{
-	color: #333;
-	text-decoration: none;
-}
-
-div.vectorTabs li.new a,
-div.vectorTabs li.new a:visited{
-	color: #a55858;
+	ul {
+		/* @noflip */
+		float: left;
+		height: 100%;
+		list-style-type: none;
+		list-style-image: none;
+		margin: 0;
+		padding: 0;
+		.background-image('images/tab-break.png');
+		background-position: right bottom;
+		background-repeat: no-repeat;
+
+		li {
+			/* @noflip */
+			float: left;
+			line-height: 1.125em;
+			/* For IE6, overridden later to display:block by modern browsers */
+			display: inline-block;
+			height: 100%;
+			margin: 0;
+			padding: 0;
+			background-color: #f3f3f3;
+			.background-image('images/tab-normal-fade.png');
+			background-position: bottom left;
+			background-repeat: repeat-x;
+			white-space: nowrap;
+		}
+
+		/* IGNORED BY IE6 which doesn't support child selector */
+		> li {
+			display: block;
+		}
+	}
+
+	li {
+		&.new {
+			a,
+			a:visited{
+				color: #a55858;
+			}
+		}
+
+		&.selected {
+			.background-image('images/tab-current-fade.png');
+			a,
+			a:visited{
+				color: #333;
+				text-decoration: none;
+			}
+		}
+
+		&.icon {
+			a {
+				background-position: bottom right;
+				background-repeat: no-repeat;
+			}
+		}
+
+		a {
+			/* For IE6, overridden later to display:block by modern browsers */
+			display: inline-block;
+			height: 1.9em;
+			padding-left: 0.5em;
+			padding-right: 0.5em;
+			color: @menu-link-color;
+			cursor: pointer;
+			font-size: 0.8em;
+		}
+
+		/* Ignored by IE6 which doesn't support child selector */
+		> a {
+			display: block;
+		}
+	}
+
+	span {
+		display: inline-block;
+		.background-image('images/tab-break.png');
+		background-position: bottom right;
+		background-repeat: no-repeat;
+
+		a  {
+			/* For IE6, overridden later to display:block by modern browsers */
+			display: inline-block;
+			padding-top: 1.25em;
+		}
+
+		/* Ignored by IE6 which doesn't support child selector */
+		> a {
+			/* @noflip */
+			float: left;
+			display: block;
+		}
+	}
 }
 
 /* Variants and Actions */
@@ -265,10 +270,4 @@ div.vectorMenu li.selected a:visited {
 	text-decoration: none;
 }
 
-div.vectorTabs ul {
-	.background-image('images/tab-break.png');
-	background-position: right bottom;
-	background-repeat: no-repeat;
-}
-
 @import 'watchstar.less';