From f090f8528caa56509cc6ae3cdb0c38f42fee31dc Mon Sep 17 00:00:00 2001
From: Sergey Biryukov <sergeybiryukov@git.wordpress.org>
Date: Mon, 9 Dec 2019 20:24:17 +0000
Subject: [PATCH] Administration: Standardize form control height and alignment
 across the admin.

This improves the appearance of various form controls in the admin and addresses some visual inconsistencies in WordPress 5.3.

Props afercia, audrasjb, jameskoster, GDragoN, azaozz, michaelarestad, murgroland, SamuelFernandez, chetan200891, veminom, dlh.
Fixes #48420.

git-svn-id: https://develop.svn.wordpress.org/trunk@46866 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/color-picker.css       | 55 ++++++++--------
 src/wp-admin/css/common.css             | 12 ++--
 src/wp-admin/css/customize-controls.css | 19 ++----
 src/wp-admin/css/forms.css              | 86 +++++++++++++------------
 src/wp-admin/css/list-tables.css        | 25 ++++---
 src/wp-admin/css/themes.css             |  1 -
 src/wp-includes/css/buttons.css         | 25 ++++---
 src/wp-includes/css/editor.css          | 11 ++--
 src/wp-includes/css/media-views.css     |  8 ++-
 9 files changed, 125 insertions(+), 117 deletions(-)

diff --git a/src/wp-admin/css/color-picker.css b/src/wp-admin/css/color-picker.css
index 9869ccb2cc..3d3e5e8964 100644
--- a/src/wp-admin/css/color-picker.css
+++ b/src/wp-admin/css/color-picker.css
@@ -10,7 +10,7 @@
 
 /* Needs higher specificiity. */
 .wp-picker-container .wp-color-result.button {
-	min-height: 28px;
+	min-height: 30px;
 	margin: 0 6px 6px 0px;
 	padding: 0 0 0 30px;
 	font-size: 11px;
@@ -22,7 +22,7 @@
 	border-left: 1px solid #ccc;
 	color: #555;
 	display: block;
-	line-height: 2.36363636; /* 26px */
+	line-height: 2.54545455; /* 28px */
 	padding: 0 6px;
 	text-align: center;
 }
@@ -73,7 +73,9 @@
 .wp-picker-input-wrap .button.wp-picker-default,
 .wp-customizer .wp-picker-input-wrap .button.wp-picker-default {
 	margin-left: 6px;
-	padding: 2px 8px;
+	padding: 0 8px;
+	line-height: 2.54545455; /* 28px */
+	min-height: 30px;
 }
 
 .wp-picker-container .iris-square-slider .ui-slider-handle:focus {
@@ -87,14 +89,14 @@
 }
 
 .wp-picker-container input[type="text"].wp-color-picker {
-	width: 65px;
+	width: 4rem;
 	font-size: 12px;
 	font-family: monospace;
-	line-height: 1.33333333; /* 16px */
+	line-height: 2.33333333; /* 28px */
 	margin: 0;
-	padding: 5px;
+	padding: 0 5px;
 	vertical-align: top;
-	min-height: 28px;
+	min-height: 30px;
 }
 
 .wp-color-picker::-webkit-input-placeholder {
@@ -132,26 +134,38 @@
 
 @media screen and (max-width: 782px) {
 	.wp-picker-container input[type="text"].wp-color-picker {
-		width: 80px;
-		padding: 6px 5px 5px;
+		width: 5rem;
 		font-size: 16px;
-		line-height: 1.15;
+		line-height: 1.875; /* 30px */
+		min-height: 32px;
 	}
 
 	.wp-customizer .wp-picker-container input[type="text"].wp-color-picker {
-		padding: 5px 5px 4px;
+		padding: 0 5px;
+	}
+
+	.wp-picker-input-wrap .button.wp-picker-default {
+		padding: 0 8px;
+		line-height: 2.14285714; /* 30px */
+		min-height: 32px;
+	}
+
+	.wp-customizer .wp-picker-input-wrap .button.wp-picker-default {
+		padding: 0 8px;
+		font-size: 14px;
+		line-height: 2.14285714; /* 30px */
+		min-height: 32px;
 	}
 
 	.wp-picker-container .wp-color-result.button {
-		height: auto;
 		padding: 0 0 0 40px;
 		font-size: 14px;
-		line-height: 2.1;
+		line-height: 2.14285714; /* 30px */
 	}
 
 	.wp-customizer .wp-picker-container .wp-color-result.button {
-		font-size: 13px;
-		line-height: 2;
+		font-size: 14px;
+		line-height: 2.14285714; /* 30px */
 	}
 
 	.wp-picker-container .wp-color-result-text {
@@ -164,14 +178,3 @@
 		padding: 0 10px;
 	}
 }
-
-@media screen and (max-width: 640px) {
-	.wp-customizer .wp-picker-container .wp-color-result.button {
-		font-size: 14px;
-		line-height: 2.1;
-	}
-
-	.wp-customizer .wp-picker-container input[type="text"].wp-color-picker {
-		padding: 6px 5px;
-	}
-}
diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index f03fe26854..cf4a75be4d 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -924,11 +924,11 @@ span.required,
 
 #delete-action {
 	float: left;
-	line-height: 2.1;
+	line-height: 2.30769231; /* 30px */
 }
 
 #delete-link {
-	line-height: 2.1;
+	line-height: 2.30769231; /* 30px */
 	vertical-align: middle;
 	text-align: left;
 	margin-left: 8px;
@@ -945,7 +945,8 @@ span.required,
 }
 
 #publishing-action .spinner {
-	float: left;
+	float: none;
+	margin-top: 5px;
 }
 
 #misc-publishing-actions {
@@ -1086,12 +1087,9 @@ th.action-links {
 }
 
 .wp-filter .search-form input[type="search"] {
-	margin: 0;
+	margin: 1px 0;
 	width: 280px;
 	max-width: 100%;
-	font-size: inherit;
-	/* inherits font size 13px */
-	line-height: 2.15384615; /* 28px */
 }
 
 .wp-filter .search-form select {
diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index fbc6411488..b72c110a2c 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -159,6 +159,7 @@ body:not(.ready) #customize-save-button-wrapper .save {
 	float: left;
 	transform: none;
 	margin-top: 0;
+	line-height: 2;
 }
 
 body:not(.ready) #publish-settings,
@@ -912,12 +913,6 @@ p.customize-section-description {
 	margin-bottom: 12px;
 }
 
-.customize-control select,
-.customize-control input[type="radio"],
-.customize-control input[type="checkbox"] {
-	line-height: 2;
-}
-
 .customize-control input[type="text"],
 .customize-control input[type="password"],
 .customize-control input[type="email"],
@@ -940,8 +935,6 @@ p.customize-section-description {
 
 .customize-control select {
 	width: 100%;
-	height: 28px;
-	line-height: 2;
 }
 
 .customize-control select[multiple] {
@@ -2871,15 +2864,11 @@ body.adding-widget .add-new-widget:before,
 	}
 
 	.wp-core-ui.wp-customizer .button {
-		padding: 6px 14px;
-		line-height: normal;
+		min-height: 30px;
+		padding: 0 14px;
+		line-height: 2;
 		font-size: 14px;
 		vertical-align: middle;
-		height: auto;
-	}
-
-	#publish-settings {
-		height: 31px;
 	}
 
 	#customize-control-changeset_status .customize-inside-control-row {
diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
index 8eb9f90e74..485439bd87 100644
--- a/src/wp-admin/css/forms.css
+++ b/src/wp-admin/css/forms.css
@@ -28,7 +28,7 @@ label {
 
 input,
 select {
-	margin: 1px;
+	margin: 0 1px;
 }
 
 textarea.code {
@@ -308,48 +308,41 @@ input[type="radio"].disabled:checked:before {
 ------------------------------------------------------------------------------*/
 
 /* Select styles are based on the default button in buttons.css */
-.wp-admin select {
-	font-size: 13px;
-	line-height: 1.38461538; /* 18px */
+.wp-core-ui select {
+	font-size: 14px;
+	line-height: 2; /* 28px */
 	color: #32373c;
 	border-color: #7e8993;
 	box-shadow: none;
 	border-radius: 3px;
-	padding: 3px 24px 3px 8px;
-	min-height: 28px;
+	padding: 0 24px 0 8px;
+	min-height: 30px;
 	max-width: 25rem;
-	vertical-align: middle;
 	-webkit-appearance: none;
 	/* The SVG is arrow-down-alt2 from Dashicons. */
 	background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55%;
 	background-size: 16px 16px;
 	cursor: pointer;
-}
+	vertical-align: middle;
+}e
 
-/* Color and font size in the core form tables. */
-.wp-admin .form-table select {
-	font-size: 14px;
-	line-height: 1.28571428; /* 18px */
-	color: #32373c;
-}
-
-.wp-admin select:hover {
+.wp-core-ui select:hover {
 	color: #007cba;
 }
 
-.wp-admin select:focus {
+.wp-core-ui select:focus {
 	border-color: #007cba;
 	color: #016087;
 	box-shadow: 0 0 0 1px #007cba;
 }
 
-.wp-admin select:active {
+.wp-core-ui select:active {
 	border-color: #999;
 	box-shadow: none;
 }
 
-.wp-admin select.disabled,
-.wp-admin select:disabled {
+.wp-core-ui select.disabled,
+.wp-core-ui select:disabled {
 	color: #a0a5aa;
 	border-color: #ddd;
 	background-color: #f7f7f7;
@@ -363,32 +356,32 @@ input[type="radio"].disabled:checked:before {
 
 /* Reset Firefox inner outline that appears on :focus. */
 /* This ruleset overrides the color change on :focus thus needs to be after select:focus. */
-.wp-admin select:-moz-focusring {
+.wp-core-ui select:-moz-focusring {
 	color: transparent;
 	text-shadow: 0 0 0 #016087;
 }
 
 /* Remove background focus style from IE11 while keeping focus style available on option elements. */
-.wp-admin select::-ms-value {
+.wp-core-ui select::-ms-value {
 	background: transparent;
 	color: #555;
 }
 
-.wp-admin select:hover::-ms-value {
+.wp-core-ui select:hover::-ms-value {
 	color: #007cba;
 }
 
-.wp-admin select:focus::-ms-value {
+.wp-core-ui select:focus::-ms-value {
 	color: #016087;
 }
 
-.wp-admin select.disabled::-ms-value,
-.wp-admin select:disabled::-ms-value {
+.wp-core-ui select.disabled::-ms-value,
+.wp-core-ui select:disabled::-ms-value {
 	color: #a0a5aa;
 }
 
 /* Hide the native down arrow for select element on IE. */
-.wp-admin select::-ms-expand {
+.wp-core-ui select::-ms-expand {
 	display: none;
 }
 
@@ -407,7 +400,7 @@ input[type="radio"].disabled:checked:before {
 	margin-top: 0;
 }
 
-.wp-admin select[multiple] {
+.wp-core-ui select[multiple] {
 	height: auto;
 	padding-right: 8px;
 	background: #fff;
@@ -484,14 +477,7 @@ input[type="number"].tiny-text {
 #doaction,
 #doaction2,
 #post-query-submit {
-	margin: 1px 8px 0 0;
-}
-
-.tablenav #changeit,
-.tablenav #delete_all,
-.tablenav #clear-recent-list,
-.wp-filter #delete_all {
-	margin-top: 1px;
+	margin: 0 8px 0 0;
 }
 
 .tablenav .actions select {
@@ -508,6 +494,10 @@ input[type="number"].tiny-text {
 .wp-cancel-pw > .dashicons {
 	position: relative;
 	top: 3px;
+	width: 1.25rem;
+	height: 1.25rem;
+	top: 0.25rem;
+	font-size: 20px;
 }
 
 .wp-cancel-pw .dashicons-no {
@@ -601,9 +591,12 @@ fieldset label,
 .wp-pwd [type="password"] {
 	margin-bottom: 0;
 	/* Same height as the buttons */
-	line-height: 20px;
-	min-height: 28px;
-	max-height: 40px;
+	min-height: 30px;
+}
+
+/* Hide the Edge "reveal password" native button */
+.wp-pwd input::-ms-reveal {
+	display: none;
 }
 
 #pass1-text,
@@ -1325,6 +1318,8 @@ table.form-table td .updated p {
 	input[type="week"] {
 		-webkit-appearance: none;
 		padding: 3px 10px;
+		/* Only necessary for IE11 */
+		min-height: 40px;
 	}
 
 	::-webkit-datetime-edit {
@@ -1376,7 +1371,7 @@ table.form-table td .updated p {
 		margin-top: 10px;
 	}
 
-	.wp-admin select,
+	.wp-core-ui select,
 	.wp-admin .form-table select {
 		min-height: 40px;
 		font-size: 16px;
@@ -1526,6 +1521,10 @@ table.form-table td .updated p {
 		font-size: 14px;
 	}
 
+	.background-position-control .button-group > label {
+		font-size: 0;
+	}
+
 	.form-table fieldset label {
 		display: block;
 	}
@@ -1561,10 +1560,14 @@ table.form-table td .updated p {
 		position: absolute;
 		right: 0;
 		top: 0;
+		width: 2.375rem;
+		height: 2.375rem;
+		min-width: 40px;
+		min-height: 40px;
 	}
 
 	.wp-pwd button.wp-hide-pw {
-		right: 40px;
+		right: 2.5rem;
 	}
 
 	.wp-pwd button.button:hover,
@@ -1585,6 +1588,7 @@ table.form-table td .updated p {
 	.wp-pwd [type="text"],
 	.wp-pwd [type="password"] {
 		line-height: 2;
+		padding-right: 5rem;
 	}
 
 	.wp-cancel-pw .dashicons-no {
diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css
index 3de3f014c1..4e4f75aba5 100644
--- a/src/wp-admin/css/list-tables.css
+++ b/src/wp-admin/css/list-tables.css
@@ -638,6 +638,7 @@ th.asc a:focus span.sorting-indicator {
 	clear: both;
 	height: 30px;
 	margin: 6px 0 4px;
+	padding-top: 5px;
 	vertical-align: middle;
 }
 
@@ -647,7 +648,7 @@ th.asc a:focus span.sorting-indicator {
 
 .tablenav .tablenav-pages {
 	float: right;
-	margin: 3px 0 9px;
+	margin: 0 0 9px;
 }
 
 .tablenav .no-pages,
@@ -659,12 +660,12 @@ th.asc a:focus span.sorting-indicator {
 .tablenav .tablenav-pages .tablenav-pages-navspan {
 	display: inline-block;
 	vertical-align: baseline;
-	min-width: 28px;
-	min-height: 28px;
+	min-width: 30px;
+	min-height: 30px;
 	margin: 0;
 	padding: 0 4px;
 	font-size: 16px;
-	line-height: 1.5;
+	line-height: 1.625; /* 26px */
 	text-align: center;
 }
 
@@ -678,8 +679,7 @@ th.asc a:focus span.sorting-indicator {
 }
 
 .tablenav .actions {
-	overflow: hidden;
-	padding: 2px 8px 0 0;
+	padding: 0 8px 0 0;
 }
 
 .wp-filter .actions {
@@ -1034,11 +1034,9 @@ tr.inline-edit-row td,
 .inline-edit-row fieldset input[name=hh],
 .inline-edit-row fieldset input[name=mn],
 .inline-edit-row fieldset input[name=aa] {
-	font-size: 12px;
-	line-height: 1.16666666;
 	vertical-align: middle;
 	text-align: center;
-	padding: 6px 4px;
+	padding: 0 4px;
 }
 
 .inline-edit-row fieldset label input.inline-edit-password-input {
@@ -1952,6 +1950,15 @@ div.action-links,
 		box-sizing: border-box;
 	}
 
+	.inline-edit-row fieldset input[name=jj],
+	.inline-edit-row fieldset input[name=hh],
+	.inline-edit-row fieldset input[name=mn],
+	.inline-edit-row fieldset input[name=aa] {
+		font-size: 16px;
+		line-height: 2;
+		padding: 3px 4px;
+	}
+
 	.inline-edit-row fieldset ul.cat-checklist label,
 	.inline-edit-row #bulk-titles div {
 		font-size: 16px;
diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css
index e4f73890ee..2b26a75f49 100644
--- a/src/wp-admin/css/themes.css
+++ b/src/wp-admin/css/themes.css
@@ -34,7 +34,6 @@ body.js .theme-browser.search-loading {
 	left: 20px;
 	margin: 0;
 	width: 280px;
-	font-size: inherit;
 }
 
 /* Position admin messages */
diff --git a/src/wp-includes/css/buttons.css b/src/wp-includes/css/buttons.css
index c2388cd19f..86844ddde0 100644
--- a/src/wp-includes/css/buttons.css
+++ b/src/wp-includes/css/buttons.css
@@ -46,8 +46,8 @@ TABLE OF CONTENTS:
 	display: inline-block;
 	text-decoration: none;
 	font-size: 13px;
-	line-height: 2;
-	min-height: 28px;
+	line-height: 2.15384615; /* 28px */
+	min-height: 30px;
 	margin: 0;
 	padding: 0 10px;
 	cursor: pointer;
@@ -71,15 +71,15 @@ TABLE OF CONTENTS:
 
 .wp-core-ui .button.button-large,
 .wp-core-ui .button-group.button-large .button {
-	min-height: 30px;
-	line-height: 2.15384615;
-	padding: 0 12px 2px;
+	min-height: 32px;
+	line-height: 2.30769231; /* 30px */
+	padding: 0 12px;
 }
 
 .wp-core-ui .button.button-small,
 .wp-core-ui .button-group.button-small .button {
-	min-height: 24px;
-	line-height: 2;
+	min-height: 26px;
+	line-height: 2.18181818; /* 24px */
 	padding: 0 8px;
 	font-size: 11px;
 }
@@ -349,11 +349,11 @@ TABLE OF CONTENTS:
 	input#publish,
 	input#save-post,
 	a.preview {
-		padding: 1px 14px;
-		line-height: 2;
+		padding: 0 14px;
+		line-height: 2.71428571; /* 38px */
 		font-size: 14px;
 		vertical-align: middle;
-		height: auto;
+		min-height: 40px;
 		margin-bottom: 4px;
 	}
 
@@ -377,10 +377,9 @@ TABLE OF CONTENTS:
 	/* Reset responsive styles in Press This, Customizer */
 
 	.wp-core-ui.wp-customizer .button {
-		padding: 0 10px 1px;
 		font-size: 13px;
-		line-height: 2;
-		min-height: 28px;
+		line-height: 2.15384615; /* 28px */
+		min-height: 30px;
 		margin: 0;
 		vertical-align: inherit;
 	}
diff --git a/src/wp-includes/css/editor.css b/src/wp-includes/css/editor.css
index 79528811ab..fe3bd106fa 100644
--- a/src/wp-includes/css/editor.css
+++ b/src/wp-includes/css/editor.css
@@ -1201,9 +1201,10 @@ i.mce-i-wp_code:before {
 
 .wp-media-buttons span.wp-media-buttons-icon {
 	display: inline-block;
-	width: 18px;
-	height: 18px;
-	vertical-align: text-top;
+	width: 20px;
+	height: 20px;
+	line-height: 1;
+	vertical-align: middle;
 	margin: 0 2px;
 }
 
@@ -1776,7 +1777,9 @@ div.wp-link-input input {
 	width: 300px;
 	padding: 3px;
 	box-sizing: border-box;
-	line-height: 1.28571429;
+	line-height: 1.28571429; /* 18px */
+	/* Override value inherited from default input fields. */
+	min-height: 26px;
 }
 
 .mce-toolbar div.wp-link-preview ~ .mce-btn,
diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index 31b2ce866e..fbacc6251c 100644
--- a/src/wp-includes/css/media-views.css
+++ b/src/wp-includes/css/media-views.css
@@ -73,7 +73,7 @@
 
 .media-frame select,
 .wp-admin .media-frame select {
-	min-height: 28px;
+	min-height: 30px;
 	vertical-align: middle;
 }
 
@@ -120,6 +120,12 @@
 	line-height: 2.15384615; /* 28px */
 }
 
+/* Search field in the Media Library toolbar */
+.media-frame.mode-grid .wp-filter input[type="search"] {
+	font-size: 14px;
+	line-height: 2;
+}
+
 .media-frame input[type="text"]:focus,
 .media-frame input[type="password"]:focus,
 .media-frame input[type="number"]:focus,