Fix aux controls overlapping with validation (#658)

ericgio · ericgio · commit 5ff2cf8f481f · 2021-10-19T22:37:46.000-07:00
diff --git a/styles/Typeahead.scss b/styles/Typeahead.scss
@@ -201,8 +201,15 @@ $rbt-token-active-color: $rbt-color-white !default;
   }
 }
 
-.has-aux .rbt-input {
-  padding-right: 34px;
+.has-aux .form-control {
+  padding-right: 32px;
+
+  // Position validation icons next to clear button and loader.
+  &.is-valid,
+  &.is-invalid {
+    background-position: right 2rem center;
+    padding-right: 64px;
+  }
 }
 
 // Default highlight style

Original file line number	Diff line number	Diff line change
`@@ -201,8 +201,15 @@ $rbt-token-active-color: $rbt-color-white !default;`
`201`	`201`	`}`
`202`	`202`	`}`
`203`	`203`
`204`		`-.has-aux .rbt-input {`
`205`		`- padding-right: 34px;`
	`204`	`+.has-aux .form-control {`
	`205`	`+ padding-right: 32px;`
	`206`	`+`
	`207`	`+ // Position validation icons next to clear button and loader.`
	`208`	`+ &.is-valid,`
	`209`	`+ &.is-invalid {`
	`210`	`+ background-position: right 2rem center;`
	`211`	`+ padding-right: 64px;`
	`212`	`+ }`
`206`	`213`	`}`
`207`	`214`
`208`	`215`	`// Default highlight style`