diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md
index 8fe2a9d263..6c3272dc12 100644
--- a/docs/4.0/components/forms.md
+++ b/docs/4.0/components/forms.md
@@ -897,6 +897,34 @@ Those same states can also be used with horizontal forms.
{% endexample %}
+### Validate with grid
+
+And in more complex grids.
+
+{% example html %}
+
+{% endexample %}
+
Checkboxes and radios are also supported.
{% example html %}
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 805bd07437..391a6cb4ff 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -255,11 +255,21 @@ select.form-control-lg {
background-size: ($input-height-inner / 2) ($input-height-inner / 2);
}
+.form-control-validated,
+.is-validated {
+ padding-right: ($input-btn-padding-x * 3);
+ background-repeat: no-repeat;
+ background-position: center right ($input-height-inner / 4);
+ background-size: ($input-height-inner / 2) ($input-height-inner / 2);
+}
+
// Form validation states
.has-success {
@include form-control-validation($brand-success);
- .form-control-success {
+ .form-control-success,
+ .form-control-validated,
+ .is-validated {
background-image: $form-icon-success;
}
}
@@ -267,7 +277,9 @@ select.form-control-lg {
.has-warning {
@include form-control-validation($brand-warning);
- .form-control-warning {
+ .form-control-warning,
+ .form-control-validated,
+ .is-validated {
background-image: $form-icon-warning;
}
}
@@ -275,7 +287,9 @@ select.form-control-lg {
.has-danger {
@include form-control-validation($brand-danger);
- .form-control-danger {
+ .form-control-danger,
+ .form-control-validated,
+ .is-validated {
background-image: $form-icon-danger;
}
}
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 16f0080f27..38251332a4 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -14,22 +14,44 @@
}
// Set the border and box shadow on specific inputs to match
- .form-control,
- .custom-select,
- .custom-file-control {
- border-color: $color;
+ // .form-control-validated,
+ // .is-validated,
+ // .custom-select,
+ // .custom-file-control {
+ // border-color: $color;
+ //
+ // &:focus {
+ // @include box-shadow($input-box-shadow, 0 0 0 3px rgba($color, .5));
+ // }
+ // }
- &:focus {
- @include box-shadow($input-box-shadow, 0 0 0 3px rgba($color, .5));
+ .is-validated {
+ // Textual inputs
+ &.form-control,
+ &.custom-select,
+ &.custom-file-control {
+ border-color: $color;
+
+ &:focus {
+ @include box-shadow($input-box-shadow, 0 0 0 3px rgba($color, .5));
+ }
+ }
+
+ &.input-group {
+ .input-group-addon {
+ color: $color;
+ background-color: lighten($color, 40%);
+ border-color: $color;
+ }
}
}
- // Set validation states also for addons
- .input-group-addon {
- color: $color;
- background-color: lighten($color, 40%);
- border-color: $color;
- }
+ // // Set validation states also for addons
+ // .input-group-addon {
+ // color: $color;
+ // background-color: lighten($color, 40%);
+ // border-color: $color;
+ // }
}
// Form control focus state