diff options
| author | Martijn Cuppens <[email protected]> | 2018-10-22 20:36:07 +0200 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2018-10-23 05:43:59 +0300 |
| commit | dd539094ea6722489c5ba940523691edc556b6a3 (patch) | |
| tree | f3701cee847763a43b4addbd1c8ca1089e5c821d | |
| parent | d0b7eb1111c7b3c3b6f1291b5e553404ecac1c3a (diff) | |
| download | bootstrap-dd539094ea6722489c5ba940523691edc556b6a3.tar.xz bootstrap-dd539094ea6722489c5ba940523691edc556b6a3.zip | |
Custom select validation padding fix and additional custom select feedback icon variables
| -rw-r--r-- | scss/_variables.scss | 4 | ||||
| -rw-r--r-- | scss/mixins/_forms.scss | 10 |
2 files changed, 7 insertions, 7 deletions
diff --git a/scss/_variables.scss b/scss/_variables.scss index 26b2e6953..5be11ae0b 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -545,6 +545,10 @@ $custom-select-indicator-color: $gray-800 !default; $custom-select-indicator: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"), "#", "%23") !default; $custom-select-background: $custom-select-indicator no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon) +$custom-select-feedback-icon-padding-right: $input-height-inner * 3 / 4 + $custom-select-padding-x + $custom-select-indicator-padding !default; +$custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default; +$custom-select-feedback-icon-size: ($input-height-inner / 2) ($input-height-inner / 2) !default; + $custom-select-border-width: $input-border-width !default; $custom-select-border-color: $input-border-color !default; $custom-select-border-radius: $border-radius !default; diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index b2f2454bb..b8eb59d83 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -97,13 +97,9 @@ 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); - } + $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; } &:focus { |