Vector: Rewrite search with nesting

Change-Id: Id375b0f2036ea0fdc010712e7721b57fc4ebfa8f

diff --git a/skins/vector/components/search.less b/skins/vector/components/search.less
index d482010..5d716b6 100644 (file)
--- 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;
+               }
+       }
 }