Browse Source

Fix Woo number input in Blockbase (#5354)

Omar Alshaker 3 years ago
parent
commit
84ae7eb479
2 changed files with 22 additions and 0 deletions
  1. 11 0
      blockbase/assets/ponyfill.css
  2. 11 0
      blockbase/sass/base/_utility.scss

+ 11 - 0
blockbase/assets/ponyfill.css

@@ -217,6 +217,17 @@ body.admin-bar .wp-site-blocks {
   margin-top: 0 !important;
 }
 
+/* 
+Remove the normalized box-sizing: border-box when used with Woo's quantity field,
+because Woo limits the field's width to 50px, 
+which leaves no space for the context between 50px and 20px padding and the spinner arrows (that come from type=number)
+
+See: https://github.com/Automattic/wp-calypso/issues/58958#issuecomment-1015263777
+*/
+.quantity .qty {
+  box-sizing: content-box;
+}
+
 /**
  * Elements
  * - Styles for basic HTML elemants

+ 11 - 0
blockbase/sass/base/_utility.scss

@@ -24,3 +24,14 @@
 		margin-top: 0 !important;
 	}
 }
+
+/* 
+Remove the normalized box-sizing: border-box when used with Woo's quantity field,
+because Woo limits the field's width to 50px, 
+which leaves no space for the context between 50px and 20px padding and the spinner arrows (that come from type=number)
+
+See: https://github.com/Automattic/wp-calypso/issues/58958#issuecomment-1015263777
+*/
+.quantity .qty { 
+	box-sizing: content-box;
+}