diff options
| author | Mark Otto <markd.otto@gmail.com> | 2022-05-20 21:02:32 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-05-20 21:02:32 +0300 |
| commit | eaf760e4bce69f64277b20602d9dc864d39d89aa (patch) | |
| tree | f6abccce244cd6993eed9bd146a4c543d2eb9710 | |
| parent | e2e107fc7215f36ff73cf2fbb29e35d703a82679 (diff) | |
Update form-control-color sizing and styles (#36156)
| -rw-r--r-- | scss/forms/_form-control.scss | 8 | ||||
| -rw-r--r-- | site/content/docs/5.2/forms/form-control.md | 2 |
2 files changed, 7 insertions, 3 deletions
diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index c781ae7b9e..e7eeca769e 100644 --- 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 9c1c495b16..046004d7c0 100644 --- 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"> |