Update form-control-color sizing and styles

twbs · May 20, 2022 · 652f81e · 652f81e
1 parent e2e107f
commit 652f81e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
@@ -170,20 +170,22 @@ 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]) {
     cursor: pointer;
   }
 
   &::-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
@@ -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">