diff options
author | Mark Otto <markdotto@gmail.com> | 2017-06-06 09:00:14 +0300 |
---|---|---|
committer | Mark Otto <markdotto@gmail.com> | 2017-06-06 09:00:14 +0300 |
commit | d2c9f3f00a385a6509589a3b102d1f8ecda84631 (patch) | |
tree | 64ae560653156440d91f90b14800be9490c0d96a /scss/_forms.scss | |
parent | af097bd5bf18a12e6bfb4f8ee59459517062a379 (diff) |
flesh out invalid styles on .was-validated
Diffstat (limited to 'scss/_forms.scss')
-rw-r--r-- | scss/_forms.scss | 82 |
1 files changed, 82 insertions, 0 deletions
diff --git a/scss/_forms.scss b/scss/_forms.scss index 391a6cb4ff..c49fc39de1 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -242,6 +242,88 @@ select.form-control-lg { // // Apply contextual and semantic states to individual form controls. +$form-feedback-valid-color: $green !default; +$form-feedback-invalid-color: $red !default; + +.invalid-feedback { + display: none; + margin-top: .25rem; + font-size: .875rem; + color: $form-feedback-invalid-color; +} + +.invalid-tooltip { + position: absolute; + top: 100%; + z-index: 5; + display: none; + width: 250px; + padding: .5rem; + margin-top: .1rem; + font-size: .875rem; + line-height: 1; + color: #fff; + background-color: rgba($form-feedback-invalid-color,.8); + border-radius: .2rem; +} + +.was-validated { + // input, textarea, select, and custom select + .form-control:invalid, + .custom-select:invalid { + border-color: $form-feedback-invalid-color; + + &:focus { + box-shadow: 0 0 0 .2rem rgba($form-feedback-invalid-color,.25); + } + + ~ .invalid-feedback, + ~ .invalid-tooltip { + display: block; + } + } + + // TODO: redo check markup lol crap + .form-check-input:invalid { + + .form-check-label { + color: $form-feedback-invalid-color; + } + } + + // custom radios and checks + .custom-control-input:invalid { + ~ .custom-control-indicator { + background-color: rgba($form-feedback-invalid-color, .25); + } + ~ .custom-control-description { + color: $form-feedback-invalid-color; + } + } + + // custom file + .custom-file-input:invalid { + ~ .custom-file-control { + border-color: $form-feedback-invalid-color; + + &::before { border-color: inherit; } + } + + &:focus { + box-shadow: 0 0 0 .2rem rgba($form-feedback-invalid-color,.25); + } + } +} + +// .is-validated .form-control:invalid { +// border-color: rgba(255,0,0,1); +// } +// .is-validated .form-control:invalid:focus { +// box-shadow: 0 0 0 .2rem rgba(255,0,0,.2); +// } +// .is-validated .form-control:invalid + .form-control-invalid-text { +// display: block; +// } + .form-control-feedback { margin-top: $form-feedback-margin-top; } |