diff options
| author | Mark Otto <[email protected]> | 2019-01-11 11:16:50 -0800 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2019-01-11 21:16:50 +0200 |
| commit | deea117293951dd51f7c3c78a719c479f736c5cb (patch) | |
| tree | 57cc0a63b5e7504797fece5a48dab4ca7f21f060 /scss | |
| parent | fd9dc1a0ca879f5624f4ef8c381136c506b0bff3 (diff) | |
| download | bootstrap-deea117293951dd51f7c3c78a719c479f736c5cb.tar.xz bootstrap-deea117293951dd51f7c3c78a719c479f736c5cb.zip | |
Add form-validation-states Sass map (#27999)
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_forms.scss | 5 | ||||
| -rw-r--r-- | scss/_variables.scss | 15 | ||||
| -rw-r--r-- | scss/mixins/_forms.scss | 12 |
3 files changed, 21 insertions, 11 deletions
diff --git a/scss/_forms.scss b/scss/_forms.scss index 9d3b6e330..205b44a79 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -241,8 +241,9 @@ textarea.form-control { // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for // server side validation. -@include form-validation-state("valid", $form-feedback-valid-color); -@include form-validation-state("invalid", $form-feedback-invalid-color); +@each $state, $data in $form-validation-states { + @include form-validation-state($state, map-get($data, color), map-get($data, icon)); +} // Inline forms // diff --git a/scss/_variables.scss b/scss/_variables.scss index 7dd5289e9..ae96c9b6b 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -658,6 +658,21 @@ $form-feedback-icon-valid: str-replace(url("data:image/svg+xml,%3csvg x $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default; $form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='#{$form-feedback-icon-invalid-color}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"), "#", "%23") !default; +$form-validation-states: () !default; +// stylelint-disable-next-line scss/dollar-variable-default +$form-validation-states: map-merge( + ( + "valid": ( + "color": $form-feedback-valid-color, + "icon": $form-feedback-icon-valid + ), + "invalid": ( + "color": $form-feedback-invalid-color, + "icon": $form-feedback-icon-invalid + ), + ), + $form-validation-states +); // Z-index master list // diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index b8eb59d83..d740a2f77 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -26,7 +26,7 @@ } -@mixin form-validation-state($state, $color) { +@mixin form-validation-state($state, $color, $icon) { .#{$state}-feedback { display: none; width: 100%; @@ -57,15 +57,10 @@ @if $enable-validation-icons { padding-right: $input-height-inner; + background-image: $icon; 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 { @@ -97,9 +92,8 @@ border-color: $color; @if $enable-validation-icons { - $form-feedback-icon: if($state == "valid", $form-feedback-icon-valid, $form-feedback-icon-invalid); padding-right: $custom-select-feedback-icon-padding-right; - background: $custom-select-background, $form-feedback-icon no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size; + background: $custom-select-background, $icon no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size; } &:focus { |