diff options
author | Mark Otto <markdotto@gmail.com> | 2018-07-30 00:18:09 +0300 |
---|---|---|
committer | Mark Otto <markdotto@gmail.com> | 2018-07-30 00:18:09 +0300 |
commit | 0b5a8d9c981ae70153cdd64b250a3d9e53014422 (patch) | |
tree | 68476cdbd184dc7f703dd5895bc485e244fb2d58 /scss/mixins/_forms.scss | |
parent | 774724a7b67726169661f31e10dee2e6b0646168 (diff) | |
parent | 5495a19b5a45f0f0853e2106f5255206e25a0456 (diff) |
Merge branch 'form-validation-icons' into v4-dev
Diffstat (limited to 'scss/mixins/_forms.scss')
-rw-r--r-- | scss/mixins/_forms.scss | 54 |
1 files changed, 53 insertions, 1 deletions
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 3a61878694..2b89390acc 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -50,12 +50,63 @@ @include border-radius($tooltip-border-radius); } - .form-control, + .form-control { + .was-validated &:#{$state}, + &.is-#{$state} { + border-color: $color; + + @if $enable-validation-icons { + padding-right: $input-height-inner; + background-repeat: no-repeat; + background-position: center right calc(#{$input-height-inner} / 4); + background-size: calc(#{$input-height-inner} / 2) calc(#{$input-height-inner} / 2); + + @if $state == "valid" { + background-image: $form-feedback-icon-valid; + } @else { + background-image: $form-feedback-icon-invalid; + } + } + + &:focus { + border-color: $color; + box-shadow: 0 0 0 $input-focus-width rgba($color, .25); + } + + ~ .#{$state}-feedback, + ~ .#{$state}-tooltip { + display: block; + } + } + } + + // stylelint-disable selector-no-qualifying-type + textarea.form-control { + .was-validated &:#{$state}, + &.is-#{$state} { + @if $enable-validation-icons { + padding-right: $input-height-inner; + background-position: top calc(#{$input-height-inner} / 4) right calc(#{$input-height-inner} / 4); + } + } + } + // stylelint-enable selector-no-qualifying-type + .custom-select { .was-validated &:#{$state}, &.is-#{$state} { border-color: $color; + @if $enable-validation-icons { + padding-right: $input-height-inner; + + @if $state == "valid" { + background: $custom-select-background, $form-feedback-icon-valid no-repeat center right ($input-height-inner * .9) / calc(#{$input-height-inner} / 2) calc(#{$input-height-inner} / 2); + } @else { + background: $custom-select-background, $form-feedback-icon-invalid no-repeat center right ($input-height-inner * .9) / calc(#{$input-height-inner} / 2) calc(#{$input-height-inner} / 2); + } + } + &:focus { border-color: $color; box-shadow: 0 0 0 $input-focus-width rgba($color, .25); @@ -68,6 +119,7 @@ } } + .form-control-file { .was-validated &:#{$state}, &.is-#{$state} { |