mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 09:52:29 +01:00
.text-help is dead, long live .form-control-feedback
Uses a new more specific class, adds some basic spacing, and clarifies that this class is only for validation feedback. Clears up the help text class question in https://github.com/twbs/bootstrap/pull/18704#issuecomment-168241731 and addresses the vertical spacing in #18703.
This commit is contained in:
parent
6140be7a09
commit
371fbdb0e8
@ -663,6 +663,8 @@ Block help text—for below inputs or for longer lines of help text—can be eas
|
||||
Bootstrap includes validation styles for danger, warning, and success states on form controls.
|
||||
|
||||
- To use, add `.has-warning`, `.has-danger`, or `.has-success` to the parent element. Any `.form-control-label`, `.form-control`, and `.text-help` within that element will receive the validation styles.
|
||||
- To use, add `.has-warning`, `.has-danger`, or `.has-success` to the parent element. Any `.form-control-label`, `.form-control`, or custom form element will receive the validation styles.
|
||||
- Contextual validation text, in addition to your usual form field help text, can be added with the use of `.form-control-feedback`. This text will adapt to the parent `.has-*` class. By default it only includes a bit of `margin` for spacing and a modified `color` for each state.
|
||||
- Validation icons are `url()`s configured via Sass variables that are applied to `background-image` declarations for each state.
|
||||
- You may use your own base64 PNGs or SVGs by updating the Sass variables and recompiling.
|
||||
- Icons can also be disabled entirely by setting the variables to `none` or commenting out the source Sass.
|
||||
|
@ -265,6 +265,10 @@ input[type="checkbox"] {
|
||||
//
|
||||
// Apply contextual and semantic states to individual form controls.
|
||||
|
||||
.form-control-feedback {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
.form-control-success,
|
||||
.form-control-warning,
|
||||
.form-control-danger {
|
||||
|
@ -5,7 +5,7 @@
|
||||
|
||||
@mixin form-control-validation($color) {
|
||||
// Color the label and help text
|
||||
.text-help,
|
||||
.form-control-feedback,
|
||||
.form-control-label,
|
||||
.radio,
|
||||
.checkbox,
|
||||
|
Loading…
x
Reference in New Issue
Block a user