aboutsummaryrefslogtreecommitdiffstats
path: root/vendor/twbs/bootstrap/site/content/docs/5.3/forms/validation.md
diff options
context:
space:
mode:
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.md26
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.