From 132ed8f5e013f19f67b34edbf58c31bb3f959bbe Mon Sep 17 00:00:00 2001
From: jrobson <jrobson@wikimedia.org>
Date: Wed, 8 Jan 2014 10:22:17 -0800
Subject: [PATCH] Vector: Rewrite search with nesting

Change-Id: Id375b0f2036ea0fdc010712e7721b57fc4ebfa8f
---
 skins/vector/components/search.less | 151 ++++++++++++++--------------
 1 file changed, 77 insertions(+), 74 deletions(-)

diff --git a/skins/vector/components/search.less b/skins/vector/components/search.less
index d4820102ef..5d716b6237 100644
--- a/skins/vector/components/search.less
+++ b/skins/vector/components/search.less
@@ -1,20 +1,21 @@
 /* Search */
-#p-search h3 {
-	display: none;
-}
 #p-search {
 	/* @noflip */
 	float: left;
-}
-#p-search {
 	margin-right: 0.5em;
 	margin-left: 0.5em;
+
+	h3 {
+		display: none;
+	}
+
+	form,
+	input {
+		margin: 0;
+		margin-top: 0.4em;
+	}
 }
-#p-search form,
-#p-search input {
-	margin: 0;
-	margin-top: 0.4em;
-}
+
 div#simpleSearch {
 	display: block;
 	width: 14em;
@@ -28,68 +29,70 @@ div#simpleSearch {
 	.background-image('images/search-fade.png');
 	background-position: top left;
 	background-repeat: repeat-x;
-}
-div#simpleSearch input:focus {
-	outline: none;
-}
-div#simpleSearch input {
-	color: black;
-}
-div#simpleSearch input.placeholder {
-	color: #999;
-}
-div#simpleSearch input::-webkit-input-placeholder {
-	color: #999;
-}
-div#simpleSearch input:-moz-placeholder {
-	color: #999;
-}
-div#simpleSearch input:-ms-input-placeholder {
-	color: #999;
-}
-div#simpleSearch input#searchInput {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 90%;
-	margin: 0;
-	padding: 0;
-	padding-left: 0.2em;
-	padding-top: 0.2em;
-	padding-bottom: 0.2em;
-	outline: none;
-	border: none;
-	/*
-	 * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
-	 * this from ever being shown anyways.
-	*/
-	font-size: 13px;
-	background-color: transparent;
-	direction: ltr;
-}
-div#simpleSearch button#searchButton {
-	position: absolute;
-	width: 10%;
-	right: 0;
-	top: 0;
-	padding: 0;
-	padding-top: 0.3em;
-	padding-bottom: 0.2em;
-	padding-right: 0.4em;
-	margin: 0;
-	border: none;
-	cursor: pointer;
-	background-color: transparent;
-	background-image: none;
-}
-/* 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;
+
+	input {
+		color: black;
+		&:focus {
+			outline: none;
+		}
+
+		&.placeholder {
+			color: #999;
+		}
+
+		&:-ms-input-placeholder,
+		&:-moz-placeholder,
+		&::-webkit-input-placeholder {
+			color: #999;
+		}
+
+		&#searchInput {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 90%;
+			margin: 0;
+			padding: 0;
+			padding-left: 0.2em;
+			padding-top: 0.2em;
+			padding-bottom: 0.2em;
+			outline: none;
+			border: none;
+			/*
+			 * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
+			 * this from ever being shown anyways.
+			*/
+			font-size: 13px;
+			background-color: transparent;
+			direction: ltr;
+		}
+	}
+
+	button#searchButton {
+		position: absolute;
+		width: 10%;
+		right: 0;
+		top: 0;
+		padding: 0;
+		padding-top: 0.3em;
+		padding-bottom: 0.2em;
+		padding-right: 0.4em;
+		margin: 0;
+		border: none;
+		cursor: pointer;
+		background-color: transparent;
+		background-image: none;
+
+		/* OVERRIDDEN BY COMPLIANT BROWSERS */
+		img {
+			border: none;
+			margin: 0;
+			margin-top: -3px;
+			padding: 0;
+		}
+		/* IGNORED BY IE6 */
+		> img {
+			margin: 0;
+		}
+	}
 }
-- 
2.20.1