rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

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

Browse Source
This commit is contained in:
Mark Otto 2022-05-20 11:02:32 -07:00 committed by GitHub
parent e2e107fc72
commit eaf760e4bc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
scss/forms/_form-control.scss
View File

@ -170,7 +170,7 @@ textarea {
.form-control-color { .form-control-color {
width: $form-color-width; width: $form-color-width;
height: auto; // Override fixed browser height height: $input-height;
padding: $input-padding-y; padding: $input-padding-y;
&:not(:disabled):not([readonly]) { &:not(:disabled):not([readonly]) {
@ -178,12 +178,14 @@ textarea {
} }
&::-moz-color-swatch { &::-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); @include border-radius($input-border-radius);
} }
&::-webkit-color-swatch { &::-webkit-color-swatch {
height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
@include border-radius($input-border-radius); @include border-radius($input-border-radius);
} }
&.form-control-sm { height: $input-height-sm; }
&.form-control-lg { height: $input-height-lg; }
} }

2
site/content/docs/5.2/forms/form-control.md
View File

@ -108,6 +108,8 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
## Color ## 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 >}} {{< example >}}
<label for="exampleColorInput" class="form-label">Color picker</label> <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"> <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">