aboutsummaryrefslogtreecommitdiffstats
path: root/vendor/twbs/bootstrap/site/content/docs/5.3/forms
diff options
context:
space:
mode:
authorMario <mario@mariovavti.com>2023-04-28 19:02:23 +0000
committerMario <mario@mariovavti.com>2023-04-28 19:02:23 +0000
commit2a1341b910dfb1187dd9fceebd2b3be14e825e28 (patch)
treef2f5a26394d0a1a905823dd71b620e9c964fb155 /vendor/twbs/bootstrap/site/content/docs/5.3/forms
parent1ed8b9dd149b9d2cb2fe30dc56ddc24cc523255c (diff)
downloadvolse-hubzilla-2a1341b910dfb1187dd9fceebd2b3be14e825e28.tar.gz
volse-hubzilla-2a1341b910dfb1187dd9fceebd2b3be14e825e28.tar.bz2
volse-hubzilla-2a1341b910dfb1187dd9fceebd2b3be14e825e28.zip
update bootstrap
Diffstat (limited to 'vendor/twbs/bootstrap/site/content/docs/5.3/forms')
-rw-r--r--vendor/twbs/bootstrap/site/content/docs/5.3/forms/checks-radios.md4
-rw-r--r--vendor/twbs/bootstrap/site/content/docs/5.3/forms/floating-labels.md4
-rw-r--r--vendor/twbs/bootstrap/site/content/docs/5.3/forms/form-control.md42
-rw-r--r--vendor/twbs/bootstrap/site/content/docs/5.3/forms/input-group.md8
-rw-r--r--vendor/twbs/bootstrap/site/content/docs/5.3/forms/overview.md42
-rw-r--r--vendor/twbs/bootstrap/site/content/docs/5.3/forms/range.md4
-rw-r--r--vendor/twbs/bootstrap/site/content/docs/5.3/forms/select.md4
-rw-r--r--vendor/twbs/bootstrap/site/content/docs/5.3/forms/validation.md26
8 files changed, 70 insertions, 64 deletions
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/checks-radios.md b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/checks-radios.md
index 99e42d92e..13a5091ad 100644
--- a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/checks-radios.md
+++ b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/checks-radios.md
@@ -300,9 +300,9 @@ Different variants of `.btn`, such at the various outlined styles, are supported
<label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>
{{< /example >}}
-## Sass
+## CSS
-### Variables
+### Sass variables
Variables for checks:
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/floating-labels.md b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/floating-labels.md
index 6b33fb67b..a65a85797 100644
--- a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/floating-labels.md
+++ b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/floating-labels.md
@@ -173,8 +173,8 @@ When working with the Bootstrap grid system, be sure to place form elements with
</div>
{{< /example >}}
-## Sass
+## CSS
-### Variables
+### Sass variables
{{< scss-docs name="form-floating-variables" file="scss/_variables.scss" >}}
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/form-control.md b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/form-control.md
index 4df1caa2b..0c6b5997e 100644
--- a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/form-control.md
+++ b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/form-control.md
@@ -31,6 +31,42 @@ Set heights using classes like `.form-control-lg` and `.form-control-sm`.
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
{{< /example >}}
+## Form text
+
+Block-level or inline-level form text can be created using `.form-text`.
+
+{{< callout warning >}}
+Form text should be explicitly associated with the form control it relates to using the `aria-labelledby` (for mandatory information such as data format) or `aria-describedby` (for complementary information) attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.
+{{< /callout >}}
+
+Form text below inputs can be styled with `.form-text`. If a block-level element will be used, a top margin is added for easy spacing from the inputs above.
+
+{{< example >}}
+<label for="inputPassword5" class="form-label">Password</label>
+<input type="password" id="inputPassword5" class="form-control" aria-labelledby="passwordHelpBlock">
+<div id="passwordHelpBlock" class="form-text">
+ Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
+</div>
+{{< /example >}}
+
+Inline text can use any typical inline HTML element (be it a `<span>`, `<small>`, or something else) with nothing more than the `.form-text` class.
+
+{{< example >}}
+<div class="row g-3 align-items-center">
+ <div class="col-auto">
+ <label for="inputPassword6" class="col-form-label">Password</label>
+ </div>
+ <div class="col-auto">
+ <input type="password" id="inputPassword6" class="form-control" aria-labelledby="passwordHelpInline">
+ </div>
+ <div class="col-auto">
+ <span id="passwordHelpInline" class="form-text">
+ Must be 8-20 characters long.
+ </span>
+ </div>
+</div>
+{{< /example >}}
+
## Disabled
Add the `disabled` boolean attribute on an input to give it a grayed out appearance, remove pointer events, and prevent focusing.
@@ -137,12 +173,6 @@ Learn more about [support for datalist elements](https://caniuse.com/datalist).
## CSS
-### Variables
-
-Form controls make use of a small amount of CSS variables to support custom styling across color modes.
-
-{{< scss-docs name="form-control-vars" file="scss/_root.scss" >}}
-
### Sass variables
`$input-*` are shared across most of our form controls (and not buttons).
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/input-group.md b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/input-group.md
index 01be5cffe..d984a485b 100644
--- a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/input-group.md
+++ b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/input-group.md
@@ -25,9 +25,9 @@ Place one add-on or button on either side of an input. You may also place one on
<label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
- <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
+ <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3 basic-addon4">
</div>
- <div class="form-text">Example help text goes outside the input group.</div>
+ <div class="form-text" id="basic-addon4">Example help text goes outside the input group.</div>
</div>
<div class="input-group mb-3">
@@ -312,8 +312,8 @@ Input groups include support for custom selects and custom file inputs. Browser
</div>
{{< /example >}}
-## Sass
+## CSS
-### Variables
+### Sass variables
{{< scss-docs name="input-group-variables" file="scss/_variables.scss" >}}
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/overview.md b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/overview.md
index 9e54a08bd..f4d2f63db 100644
--- a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/overview.md
+++ b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/overview.md
@@ -51,44 +51,6 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for
</form>
{{< /example >}}
-## Form text
-
-Block-level or inline-level form text can be created using `.form-text`.
-
-{{< callout warning >}}
-##### Associating form text with form controls
-
-Form text should be explicitly associated with the form control it relates to using the `aria-describedby` attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.
-{{< /callout >}}
-
-Form text below inputs can be styled with `.form-text`. If a block-level element will be used, a top margin is added for easy spacing from the inputs above.
-
-{{< example >}}
-<label for="inputPassword5" class="form-label">Password</label>
-<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
-<div id="passwordHelpBlock" class="form-text">
- Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
-</div>
-{{< /example >}}
-
-Inline text can use any typical inline HTML element (be it a `<span>`, `<small>`, or something else) with nothing more than the `.form-text` class.
-
-{{< example >}}
-<div class="row g-3 align-items-center">
- <div class="col-auto">
- <label for="inputPassword6" class="col-form-label">Password</label>
- </div>
- <div class="col-auto">
- <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
- </div>
- <div class="col-auto">
- <span id="passwordHelpInline" class="form-text">
- Must be 8-20 characters long.
- </span>
- </div>
-</div>
-{{< /example >}}
-
## Disabled forms
Add the `disabled` boolean attribute on an input to prevent user interactions and make it appear lighter.
@@ -143,11 +105,11 @@ If none of these are present, assistive technologies may resort to using the `pl
While using visually hidden content (`.visually-hidden`, `aria-label`, and even `placeholder` content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability.
-## Sass
+## CSS
Many form variables are set at a general level to be re-used and extended by individual form components. You'll see these most often as `$input-btn-*` and `$input-*` variables.
-### Variables
+### Sass variables
`$input-btn-*` variables are shared global variables between our [buttons]({{< docsref "/components/buttons" >}}) and our form components. You'll find these frequently reassigned as values to other component-specific variables.
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/range.md b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/range.md
index 5c4f02612..31edb0a8d 100644
--- a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/range.md
+++ b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/range.md
@@ -42,8 +42,8 @@ By default, range inputs "snap" to integer values. To change this, you can speci
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
{{< /example >}}
-## Sass
+## CSS
-### Variables
+### Sass variables
{{< scss-docs name="form-range-variables" file="scss/_variables.scss" >}}
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/select.md b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/select.md
index 7f0c255ef..07ee8c8b1 100644
--- a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/select.md
+++ b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/select.md
@@ -74,8 +74,8 @@ Add the `disabled` boolean attribute on a select to give it a grayed out appeara
</select>
{{< /example >}}
-## Sass
+## CSS
-### Variables
+### Sass variables
{{< scss-docs name="form-select-variables" file="scss/_variables.scss" >}}
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.