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 %} +
+
+
+ + +
+
+ +
+
+ +
+
+ +
+
+ + Example help text that remains unchanged. +
+
+
+{% 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