Match height of font range control with the size select. (#11555)

* Match height of font range control with the size select. This also aligns the range up/down controls to the right side of the input. * update font range control inline docs * update with master * bring up to date with master branch * wider range number controls to account for OS specific input spinners. * Use the same height as our other number inputs. * wider number inputs to account for OS specific spinners. * Revert "wider range number controls to account for OS specific input spinners." This reverts commit d26c659. * make number input styles more consistent across components * refresh with upstream * smaller changes
WordPress · Mar 6, 2019 · 84ad971 · 84ad971
1 parent ec6b610
commit 84ad971
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/packages/components/src/font-size-picker/style.scss b/packages/components/src/font-size-picker/style.scss
@@ -6,8 +6,7 @@
 
 	// Apply the same height as the isSmall Reset button.
 	.components-range-control__number {
-		height: 24px;
-		line-height: 22px;
+		height: 30px;
 		margin-left: 0;
 
 		// Show the reset button as disabled until a value is entered.

diff --git a/packages/components/src/range-control/style.scss b/packages/components/src/range-control/style.scss
@@ -121,6 +121,5 @@
 	display: inline-block;
 	margin-left: $grid-size;
 	font-weight: 500;
-	width: 50px;
-	padding: 3px 5px !important;
+	width: 54px;
 }
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
@@ -188,6 +188,11 @@ body.block-editor-page {
 		}
 	}
 
+	input[type="number"] {
+		padding-left: 4px;
+		padding-right: 4px;
+	}
+
 	select {
 		padding: 2px;