From 054f8781a86b16c3793eaf424093a5d4cfb37114 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Wed, 14 Jul 2021 08:19:28 +0200 Subject: [PATCH] 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 --- scss/_variables.scss | 2 ++ scss/forms/_form-control.scss | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) 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;