From: Gaël Poupard <ffoodd@users.noreply.github.com>
Date: Wed, 14 Jul 2021 06:19:28 +0000 (+0200)
Subject: fix(forms): prevent color control from shrinking (#34445)
X-Git-Tag: v5.1.0~83
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=054f8781a86b16c3793eaf424093a5d4cfb37114;p=thirdparty%2Fbootstrap.git

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 4486b57124..3a77eec4c9 100644
--- 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 9728b91f34..96423c530c 100644
--- 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;