Update form-control-color sizing and styles (#36156)

diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index c781ae7b9eed2f9d795f4f380c1f89dd14e9adeb..e7eeca769e50f2fb8e7d626b8d01590b67a0d351 100644 (file)
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -170,7 +170,7 @@ textarea {
 
 .form-control-color {
   width: $form-color-width;
-  height: auto; // Override fixed browser height
+  height: $input-height;
   padding: $input-padding-y;
 
   &:not(:disabled):not([readonly]) {
@@ -178,12 +178,14 @@ textarea {
   }
 
   &::-moz-color-swatch {
-    height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
+    border: 0 !important; // stylelint-disable-line declaration-no-important
     @include border-radius($input-border-radius);
   }
 
   &::-webkit-color-swatch {
-    height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
     @include border-radius($input-border-radius);
   }
+
+  &.form-control-sm { height: $input-height-sm; }
+  &.form-control-lg { height: $input-height-lg; }
 }

diff --git a/site/content/docs/5.2/forms/form-control.md b/site/content/docs/5.2/forms/form-control.md
index 9c1c495b161daba768e75e59d43e900948d5aa41..046004d7c05ca0590330d795482b602d2acf943d 100644 (file)
--- a/site/content/docs/5.2/forms/form-control.md
+++ b/site/content/docs/5.2/forms/form-control.md
@@ -108,6 +108,8 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
 
 ## Color
 
+Set the `type="color"` and add `.form-control-color` to the `<input>`. We use the modifier class to set fixed `height`s and override some inconsistencies between browsers.
+
 {{< example >}}
 <label for="exampleColorInput" class="form-label">Color picker</label>
 <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">