fix(forms): prevent color control from shrinking (twbs#34445)

* fix(forms): prevent color control from shrinking Fixes twbs#34195 Setting `min-width` alongside `max-width` wouldn't make any sense IMHO. The only concern I have is whether we should introduce a dedicated variable for said width? * feat(forms): introduce ` $form-color-width` * feat(forms): use ` $form-color-width` Co-authored-by: XhmikosR <[email protected]>
npankaj365 · Jul 14, 2021 · 054f878 · 054f878
1 parent e45b25e
commit 054f878
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -847,6 +847,8 @@ $input-height-sm:                       add($input-line-height * 1em, add($input
 $input-height-lg:                       add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
 
 $input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$form-color-width:                      3rem !default;
 // scss-docs-end form-input-variables
 
 // scss-docs-start form-check-variables

diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
@@ -199,7 +199,7 @@ textarea {
 // stylelint-enable selector-no-qualifying-type
 
 .form-control-color {
-  max-width: 3rem;
+  width: $form-color-width;
   height: auto; // Override fixed browser height
   padding: $input-padding-y;