rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-07 04:54:24 +01:00
Code Issues Actions Packages Releases Activity

feat: removes .form-text display (#30598)

Browse Source 
Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
This commit is contained in:
Catalin Zalog 2020-04-16 17:38:21 +03:00 committed by GitHub
parent df4be07a02
commit 3ff3680d4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 12 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
scss/_variables.scss
View File

@ -570,7 +570,7 @@ $btn-transition: color .15s ease-in-out, background-color .15s ease
// Forms // Forms
$form-text-margin-top: .25rem !default; $form-text-margin-top: .25rem !default;
$form-text-font-size: null !default; $form-text-font-size: $small-font-size !default;
$form-text-font-style: null !default; $form-text-font-style: null !default;
$form-text-color: $text-muted !default; $form-text-color: $text-muted !default;
@ -772,7 +772,8 @@ $form-file-height-lg: $input-height-lg !default;
// Form validation // Form validation
$form-feedback-margin-top: $form-text-margin-top !default; $form-feedback-margin-top: $form-text-margin-top !default;
$form-feedback-font-size: $small-font-size !default; $form-feedback-font-size: $form-text-font-size !default;
$form-feedback-font-style: $form-text-font-style !default;
$form-feedback-valid-color: $success !default; $form-feedback-valid-color: $success !default;
$form-feedback-invalid-color: $danger !default; $form-feedback-invalid-color: $danger !default;

1
scss/forms/_form-text.scss
View File

@ -3,7 +3,6 @@
// //
.form-text { .form-text {
display: block;
margin-top: $form-text-margin-top; margin-top: $form-text-margin-top;
@include font-size($form-text-font-size); @include font-size($form-text-font-size);
font-style: $form-text-font-style; font-style: $form-text-font-style;

1
scss/mixins/_forms.scss
View File

@ -19,6 +19,7 @@
width: 100%; width: 100%;
margin-top: $form-feedback-margin-top; margin-top: $form-feedback-margin-top;
@include font-size($form-feedback-font-size); @include font-size($form-feedback-font-size);
font-style: $form-feedback-font-style;
color: $color; color: $color;
} }

16
site/content/docs/4.3/forms/overview.md
View File

@ -37,7 +37,7 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for
<div class="mb-3"> <div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label> <label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text">We'll never share your email with anyone else.</small> <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label> <label for="exampleInputPassword1" class="form-label">Password</label>
@ -53,7 +53,7 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for
## Form text ## Form text
Block-level form text in forms can be created using `.form-text`. Block-level or inline-level form text can be created using `.form-text`.
{{< callout warning >}} {{< callout warning >}}
##### Associating form text with form controls ##### Associating form text with form controls
@ -61,17 +61,17 @@ Block-level form text in forms can be created using `.form-text`.
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. 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 >}} {{< /callout >}}
Form text below inputs can be styled with `.form-text`. This class includes `display: block` and adds some top margin for easy spacing from the inputs above. 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 >}} {{< example >}}
<label for="inputPassword5" class="form-label">Password</label> <label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock"> <input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text"> <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. Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small> </div>
{{< /example >}} {{< /example >}}
Inline text can use any typical inline HTML element (be it a `<small>`, `<span>`, or something else) with nothing more than a utility class. 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 >}} {{< example >}}
<div class="row g-3 align-items-center"> <div class="row g-3 align-items-center">
@ -82,9 +82,9 @@ Inline text can use any typical inline HTML element (be it a `<small>`, `<span>`
<input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline"> <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
</div> </div>
<div class="col-auto"> <div class="col-auto">
<small id="passwordHelpInline" class="text-muted"> <span id="passwordHelpInline" class="form-text">
Must be 8-20 characters long. Must be 8-20 characters long.
</small> </span>
</div> </div>
</div> </div>
{{< /example >}} {{< /example >}}