Commit 371fbdb0 authored by Mark Otto's avatar Mark Otto
Browse files

.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.
parent 6140be7a
Showing with 7 additions and 1 deletion
+7 -1
...@@ -663,6 +663,8 @@ Block help text—for below inputs or for longer lines of help text—can be eas ...@@ -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. 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`, 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. - 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. - 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. - 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"] { ...@@ -265,6 +265,10 @@ input[type="checkbox"] {
// //
// Apply contextual and semantic states to individual form controls. // Apply contextual and semantic states to individual form controls.
.form-control-feedback {
margin-top: .5rem;
}
.form-control-success, .form-control-success,
.form-control-warning, .form-control-warning,
.form-control-danger { .form-control-danger {
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
@mixin form-control-validation($color) { @mixin form-control-validation($color) {
// Color the label and help text // Color the label and help text
.text-help, .form-control-feedback,
.form-control-label, .form-control-label,
.radio, .radio,
.checkbox, .checkbox,
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment