diff options
Diffstat (limited to 'vendor/twbs/bootstrap/site/content/docs/5.3/forms/validation.md')
-rw-r--r-- | vendor/twbs/bootstrap/site/content/docs/5.3/forms/validation.md | 26 |
1 files changed, 20 insertions, 6 deletions
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/validation.md b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/validation.md index b119cd07d..5eb18f025 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/validation.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/validation.md @@ -127,7 +127,7 @@ While these feedback styles cannot be styled with CSS, you can still customize t <label for="validationDefaultUsername" class="form-label">Username</label> <div class="input-group"> <span class="input-group-text" id="inputGroupPrepend2">@</span> - <input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required> + <input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required> </div> </div> <div class="col-md-6"> @@ -349,19 +349,33 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas </form> {{< /example >}} -## Sass +## 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" >}} -### Mixins +{{< 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. +Two mixins are combined, through our [loop](#loop), to generate our form validation feedback styles. {{< scss-docs name="form-validation-mixins" file="scss/mixins/_forms.scss" >}} -### Map +### Sass map This is the validation Sass map from `_variables.scss`. Override or extend this to generate different or additional states. @@ -369,7 +383,7 @@ This is the validation Sass map from `_variables.scss`. Override or extend this Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles. -### Loop +### Sass loop Used to iterate over `$form-validation-states` map values to generate our validation styles. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop. |