From: Mark Otto Date: Wed, 7 Jun 2017 04:53:23 +0000 (-0700) Subject: add valid state X-Git-Tag: v4.0.0-beta~147^2~17 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=58b7239c6c065436000e576946508bf81a5bb568;p=thirdparty%2Fbootstrap.git add valid state --- diff --git a/scss/_forms.scss b/scss/_forms.scss index 788710ba4f..eba9aec738 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -268,6 +268,57 @@ $form-feedback-invalid-color: $red !default; } .was-validated { + // + // Valid state + // + .form-control:valid, + .custom-select:valid { + border-color: $form-feedback-valid-color; + + &:focus { + box-shadow: 0 0 0 .2rem rgba($form-feedback-valid-color,.25); + } + + ~ .invalid-feedback, + ~ .invalid-tooltip { + display: block; + } + } + + // TODO: redo check markup lol crap + .form-check-input:valid { + + .form-check-label { + color: $form-feedback-valid-color; + } + } + + // custom radios and checks + .custom-control-input:valid { + ~ .custom-control-indicator { + background-color: rgba($form-feedback-valid-color, .25); + } + ~ .custom-control-description { + color: $form-feedback-valid-color; + } + } + + // custom file + .custom-file-input:valid { + ~ .custom-file-control { + border-color: $form-feedback-valid-color; + + &::before { border-color: inherit; } + } + + &:focus { + box-shadow: 0 0 0 .2rem rgba($form-feedback-valid-color,.25); + } + } + + // + // Invalid state + // + // input, textarea, select, and custom select .form-control:invalid, .custom-select:invalid {