diff options
| author | Mark Otto <markdotto@gmail.com> | 2022-04-12 23:25:59 +0300 |
|---|---|---|
| committer | Mark Otto <markd.otto@gmail.com> | 2022-04-30 00:00:14 +0300 |
| commit | 7c983bd8ea380e784289681d0561cf1d2fffeb3e (patch) | |
| tree | d6f64e350b412461314ea49be5865391d9085d65 | |
| parent | 7745730e4132eff204bf2afe8351511e595acee6 (diff) | |
Update form-control-color sizing and stylesform-control-color-sizing
| -rw-r--r-- | scss/forms/_form-control.scss | 8 | ||||
| -rw-r--r-- | site/content/docs/5.1/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.1/forms/form-control.md b/site/content/docs/5.1/forms/form-control.md index 9c1c495b16..046004d7c0 100644 --- a/site/content/docs/5.1/forms/form-control.md +++ b/site/content/docs/5.1/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"> |