Amend standard 'search' icon size, position and CSS rules

Updating 'search' icon to latest WVUI/OOUI optimized, reduced path. Also
- amending size of search input and position of icon in input slightly to
  align it closer to standard text inputs
- simplify CSS by getting rid of selector which is targeting both, input and
  button and applying rules only where needed
- fixing code comments
- increasing icon size to `16px` equivalent `em` to enable user text zooming
  preference applied to search icon as well. `16px` is a compromise towards the
  old look and feel of the previous icon bringing it closer to standard icon size in
  legacy Vector.

This change affects both modern and legacy versions of Vector.

Bug: T266166
Change-Id: Ib4c0c74d3cac30e1893f4c76e56e1197652d41ba

resources/skins.vector.styles/SearchBox.less

@@ -2,11 +2,9 @@
 @import 'mediawiki.ui/variables.less';
 @import '../../variables.less';
 
-/* Search */
-#p-search {
-	h3 {
-		.mixin-screen-reader-text();
-	}
+// Search portlet.
+#p-search h3 {
+	.mixin-screen-reader-text();
 }
 
 // Defined as `div`.
@@ -14,14 +12,6 @@
 #simpleSearch {
 	position: relative;
 	height: 100%;
-
-	// Styles for both the search input and the button.
-	input {
-		margin: 0;
-		// Match WVUI.
-		font-family: inherit;
-		height: 2.28571429em; // 32px
-	}
 }
 
 // The search input.
@@ -29,12 +19,16 @@
 	background-color: rgba( 255, 255, 255, 0.5 );
 	color: @color-base--emphasized;
 	width: 100%;
+	// Reduce height slightly from standard to match legacy Vector tabs.
+	height: unit( 28 / @font-size-browser / @font-size-search-input, em ); // Equals `2.15384615em`.
 	.box-sizing( border-box );
 	border: @border-base;
 	border-radius: @border-radius-base;
 	// `padding-right` equals to `#searchbutton` width below.
-	padding: 0.4em @width-search-button 0.4em 0.4em;
+	padding: 5px @width-search-button 5px 0.4em;
 	.box-shadow( @boxShadowWidget );
+	// Match WVUI.
+	font-family: inherit;
 	font-size: @font-size-search-input;
 	direction: ltr;
 	.transition( ~'border-color 250ms, box-shadow 250ms' );
@@ -69,8 +63,8 @@
 	}
 }
 
-// The buttons. They are displayed in the same position, and if both are
-// present the fulltext search one obscures the 'Go' one.
+// The search buttons. Fallback and search button are displayed in the same position,
+// and if both are present the fulltext search one obscures the 'Go' one.
 #searchButton,
 #mw-searchButton {
 	background-color: transparent;
@@ -79,12 +73,12 @@
 	bottom: @border-width-base;
 	// `@border-width-base * 2` is in regards to harmonize position start and end.
 	right: @border-width-base;
-	min-width: 24px;
+	min-width: @min-width-search-button;
 	width: @width-search-button;
 	border: 0;
 	padding: 0;
 	cursor: pointer;
-	// Equal `font-size` to search input for `padding` calculationo.
+	// Equal `font-size` to search input for `padding` calculation.
 	font-size: @font-size-search-input;
 	/* Opera 12 on RTL flips the text in a funny way without this. */
 	/* @noflip */
@@ -97,6 +91,6 @@
 }
 
 #searchButton {
-	background: no-repeat center/12px url( images/search.svg );
+	background: no-repeat center/unit( 16 / @font-size-browser / @font-size-search-input, em ) url( images/search.svg );
 	opacity: 0.67;
 }

resources/skins.vector.styles/images/search.svg

@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-	<g fill="#000">
-		<path d="M7.5 13c3.04 0 5.5-2.46 5.5-5.5S10.54 2 7.5 2 2 4.46 2 7.5 4.46 13 7.5 13zm4.55.46A7.432 7.432 0 017.5 15C3.36 15 0 11.64 0 7.5S3.36 0 7.5 0C11.64 0 15 3.36 15 7.5c0 1.71-.57 3.29-1.54 4.55l6.49 6.49-1.41 1.41-6.49-6.49z"></path>
-	</g>
+	<title>
+		search
+	</title>
+	<path d="M7.5 13a5.5 5.5 0 100-11 5.5 5.5 0 000 11zm4.55.46A7.43 7.43 0 017.5 15a7.5 7.5 0 115.96-2.95l6.49 6.49-1.41 1.41-6.49-6.49z"/>
 </svg>

variables.less

@@ -109,7 +109,8 @@
 @font-size-tabs: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.
 
 // Search
-@width-search-button: unit( 24 / @font-size-browser / @font-size-search-input, em );
+@min-width-search-button: 28px;
+@width-search-button: unit( 28 / @font-size-browser / @font-size-search-input, em );
 @font-size-search-input: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.
 
 // Z-indices