diff options
| author | Mark Otto <[email protected]> | 2023-02-14 15:22:35 -0800 |
|---|---|---|
| committer | GitHub <[email protected]> | 2023-02-14 15:22:35 -0800 |
| commit | 8fddb9fe57ba4b9ee83aa35ec59cbe761c1e64d0 (patch) | |
| tree | ce812797c34f84df23da247497553828044b2240 /site | |
| parent | 9dd42e1a07cba04d52050f47d9a343416d72b8c0 (diff) | |
| download | bootstrap-8fddb9fe57ba4b9ee83aa35ec59cbe761c1e64d0.tar.xz bootstrap-8fddb9fe57ba4b9ee83aa35ec59cbe761c1e64d0.zip | |
Update form validation styles to use new CSS variables for `color` and `border-color` (#38044)
* Update form validation styles to use new CSS variables for color and border-color
* Use better Sass variables
Diffstat (limited to 'site')
| -rw-r--r-- | site/content/docs/5.3/forms/validation.md | 14 |
1 files changed, 14 insertions, 0 deletions
diff --git a/site/content/docs/5.3/forms/validation.md b/site/content/docs/5.3/forms/validation.md index cf2a87e80..0371d229d 100644 --- a/site/content/docs/5.3/forms/validation.md +++ b/site/content/docs/5.3/forms/validation.md @@ -351,10 +351,24 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas ## CSS +### Variables + +{{< added-in "5.3.0" >}} + +As part of Bootstrap's evolving CSS variables approach, forms now use local CSS variables for validation for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + +{{< scss-docs name="root-form-validation-variables" file="scss/_root.scss" >}} + +These variables are also color mode adaptive, meaning they change color while in dark mode. + ### Sass variables {{< scss-docs name="form-feedback-variables" file="scss/_variables.scss" >}} +{{< scss-docs name="form-validation-colors" file="scss/_variables.scss" >}} + +{{< scss-docs name="form-validation-colors-dark" file="scss/_variables-dark.scss" >}} + ### Sass mixins Two mixins are combined together, through our [loop](#loop), to generate our form validation feedback styles. |