From bbe19ba34cab6ce61d7a0a765ae8e400e5a9494c Mon Sep 17 00:00:00 2001
From: Kevin Israel <pleasestand@live.com>
Date: Mon, 3 Feb 2014 15:06:15 -0500
Subject: [PATCH] Use nesting in search.less again

Follows-up 27068d52076c.

I diffed the generated CSS, finding it functionally identical, and the
old and new source files, finding the diff much more readable.

Change-Id: I249be21d4c18f60a34d4dc6f1d7340f3a7061f00
---
 skins/vector/components/search.less | 176 +++++++++++++---------------
 1 file changed, 84 insertions(+), 92 deletions(-)

diff --git a/skins/vector/components/search.less b/skins/vector/components/search.less
index f3073f14c7..07ea8337f9 100644
--- a/skins/vector/components/search.less
+++ b/skins/vector/components/search.less
@@ -29,91 +29,85 @@ div#simpleSearch {
 	.background-image('images/search-fade.png');
 	background-position: top left;
 	background-repeat: repeat-x;
-}
-
-// Styles for both the search input and the button
-div#simpleSearch input {
-	position: absolute;
-	margin: 0;
-	padding: 0;
-	border: 0;
-	color: black;
-	background-color: transparent;
-}
-
-// The search input
-div#simpleSearch #searchInput {
-	top: 0;
-	left: 0;
-	width: 90%;
-	padding: 0.2em 0 0.2em 0.2em;
-	font-size: 13px;
-	direction: ltr;
-}
-
-div#simpleSearch #searchInput:focus {
-	outline: none;
-}
-
-div#simpleSearch input {
-	color: black;
-}
 
-// Placeholder colors. These rules MAY NOT be merged because of how
-// CSS requires browsers to parse unrecognized selectors!
-div#simpleSearch #searchInput.placeholder {
-	color: #999;
-}
-div#simpleSearch #searchInput::-webkit-input-placeholder {
-	color: #999;
-}
-div#simpleSearch #searchInput:-moz-placeholder {
-	color: #999;
-}
-div#simpleSearch #searchInput:-ms-input-placeholder {
-	color: #999;
-}
+	// Styles for both the search input and the button
+	input {
+		position: absolute;
+		margin: 0;
+		padding: 0;
+		border: 0;
+		background-color: transparent;
+		color: black;
+	}
 
-// Undo the styles Webkit browsers apply to type=search fields,
-// we provide our own
-div#simpleSearch #searchInput {
-	-webkit-appearance: textfield;
-}
-div#simpleSearch #searchInput::-webkit-search-decoration,
-div#simpleSearch #searchInput::-webkit-search-cancel-button,
-div#simpleSearch #searchInput::-webkit-search-results-button,
-div#simpleSearch #searchInput::-webkit-search-results-decoration {
-	-webkit-appearance: textfield;
-}
+	// The search input
+	#searchInput {
+		top: 0;
+		left: 0;
+		width: 90%;
+		padding: 0.2em 0 0.2em 0.2em;
+		font-size: 13px;
+		direction: ltr;
+
+		&:focus {
+			outline: none;
+		}
+
+		// These rules MAY NOT be merged because of how CSS requires browsers
+		// to parse unrecognized selectors!
+		&.placeholder {
+			color: #999;
+		}
+		&:-ms-input-placeholder {
+			color: #999;
+		}
+		&:-moz-placeholder {
+			color: #999;
+		}
+		&::-webkit-input-placeholder {
+			color: #999;
+		}
+
+		// Undo the styles Webkit browsers apply to type=search fields,
+		// we provide our own
+		-webkit-appearance: textfield;
+
+		&::-webkit-search-decoration,
+		&::-webkit-search-cancel-button,
+		&::-webkit-search-results-button,
+		&::-webkit-search-results-decoration {
+			-webkit-appearance: textfield;
+		}
+	}
 
-// The buttons. They are displayed in the same position, and if both are
-// present the fulltext search one obscures the 'Go' one.
-div#simpleSearch #searchButton,
-div#simpleSearch #mw-searchButton {
-	top: 0;
-	right: 0;
-	width: 10%;
-	height: 100%;
-	cursor: pointer;
-	/* Hide button text and replace it with the image. */
-	text-indent: 100%;
-	/* Needed to make IE6 respect the text-indent. */
-	line-height: 1;
-	/* Opera 12 on RTL flips the text in a funny way without this. */
-	/* @noflip */
-	direction: ltr;
-	white-space: nowrap;
-	overflow: hidden;
-	.background-image-svg('images/search-ltr.svg', 'images/search-ltr.png');
-	background-position: center center;
-	background-repeat: no-repeat;
-}
+	// The buttons. They are displayed in the same position, and if both are
+	// present the fulltext search one obscures the 'Go' one.
+	#searchButton,
+	#mw-searchButton {
+		top: 0;
+		right: 0;
+		width: 10%;
+		height: 100%;
+		cursor: pointer;
+		/* Hide button text and replace it with the image. */
+		text-indent: 100%;
+		/* Needed to make IE6 respect the text-indent. */
+		line-height: 1;
+		/* Opera 12 on RTL flips the text in a funny way without this. */
+		/* @noflip */
+		direction: ltr;
+		white-space: nowrap;
+		overflow: hidden;
+		.background-image-svg('images/search-ltr.svg', 'images/search-ltr.png');
+		background-position: center center;
+		background-repeat: no-repeat;
+	}
 
-div#simpleSearch #mw-searchButton {
-	z-index: 1;
+	#mw-searchButton {
+		z-index: 1;
+	}
 }
 
-
 // The following styles exist only for backwards-compatibility with
 // cached HTML and are to be removed before 1.23 release.
 
@@ -137,18 +131,16 @@ div#simpleSearch button#searchButton {
 	border: none;
 	background-image: none;
 	text-indent: 0;
-}
 
-/* OVERRIDDEN BY COMPLIANT BROWSERS */
-div#simpleSearch button#searchButton img {
-	border: none;
-	margin: 0;
-	margin-top: -3px;
-	padding: 0;
-}
-
-/* IGNORED BY IE6 */
-div#simpleSearch button#searchButton > img {
-	margin: 0;
+	/* OVERRIDDEN BY COMPLIANT BROWSERS */
+	img {
+		border: none;
+		margin: 0;
+		margin-top: -3px;
+		padding: 0;
+	}
+	/* IGNORED BY IE6 */
+	> img {
+		margin: 0;
+	}
 }
-
-- 
2.20.1