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

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