From 484077de01fbb15f81b69676f75b03677aea7f2e Mon Sep 17 00:00:00 2001
From: Volker E <volker.e@wikimedia.org>
Date: Wed, 18 Sep 2019 15:26:38 -0700
Subject: [PATCH] Increase distance of button to container

Increasing the distance of the button slightly changes the position
from end, putting the icon in a more appropriate place (harmonized
whitespace of input value and icon).
Also simplifying `font-size` calculations readability and equalling
their values in search input and button.

Bug: T225331
Change-Id: I57f7efc61f3b770d7470d820402e2ea533364238
---
 components/common.less |  2 +-
 components/search.less | 12 ++++++++----
 variables.less         |  6 +++++-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/components/common.less b/components/common.less
index 300faa39..323202cd 100644
--- a/components/common.less
+++ b/components/common.less
@@ -7,7 +7,7 @@
 
 /* Framework */
 html {
-	font-size: @html-font-size;
+	font-size: @font-size-root;
 }
 
 html,
diff --git a/components/search.less b/components/search.less
index 78495cd7..cca5e7f5 100644
--- a/components/search.less
+++ b/components/search.less
@@ -38,15 +38,16 @@
 }
 
 // The search input.
+
 #searchInput {
 	width: 100%;
 	.box-sizing( border-box );
 	border: @border-width-base solid @colorGray10;
 	border-radius: @borderRadius;
 	// `padding-right` equals to `#searchbutton` width below.
-	padding: 0.4em 1.818em 0.4em 0.4em;
+	padding: 0.4em @width-search-button 0.4em 0.4em;
 	.box-shadow( @boxShadowWidget );
-	font-size: 0.8125em; // Equals to `13px` at browser default of `16px`.
+	font-size: @font-size-search-input;
 	direction: ltr;
 	.transition( ~'border-color 250ms, box-shadow 250ms' );
 	// Support: Webkit browsers. Undo the proprietary styles applied to `type=search` fields,
@@ -84,12 +85,15 @@
 	position: absolute;
 	top: @border-width-base;
 	bottom: @border-width-base;
+	// `@border-width-base * 2` is in regards to harmonize position start and end.
 	right: @border-width-base;
-	min-width: 20px;
-	width: 1.818em; // Equals to `20px` at `11px` base.
+	min-width: 24px;
+	width: @width-search-button;
 	border: 0;
 	padding: 0;
 	cursor: pointer;
+	// Equal `font-size` to search input for `padding` calculationo.
+	font-size: @font-size-search-input;
 	/* Opera 12 on RTL flips the text in a funny way without this. */
 	/* @noflip */
 	direction: ltr;
diff --git a/variables.less b/variables.less
index 7e3883d3..e819761e 100644
--- a/variables.less
+++ b/variables.less
@@ -1,6 +1,6 @@
 @import 'mediawiki.ui/variables';
 
-@html-font-size: 100%;
+@font-size-root: 100%;
 @font-size-browser: 16; // Assumed browser default of `16px`
 
 @font-family-serif: 'Linux Libertine', 'Georgia', 'Times', serif;
@@ -44,3 +44,7 @@
 @background-position-menu-personal-icon: left ( 4 / @font-size-browser / @font-size-menu-personal );
 @font-size-menu-personal: 0.75em;
 @line-height-menu-personal: 14 / @font-size-browser / @font-size-menu-personal; // equals `1.667em`≈`14px`
+
+// Search
+@width-search-button: 24 / @font-size-browser / @font-size-search-input;
+@font-size-search-input: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.