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

* fix(forms): prevent color control from shrinking

Fixes #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 <xhmikosr@gmail.com>

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 4486b57124e900c4b49a37a1e3689d92afdfd119..3a77eec4c9cab589c4c036616df588bdfe3fffc9 100644 (file)
--- 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
index 9728b91f3471b347afaf1ca7453ff2b25fd67c09..96423c530c2ab88e06d01ab019a86013b1d8a265 100644 (file)
--- 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;