diff options
| author | Dmytro Yaremenko <[email protected]> | 2020-12-17 07:07:48 +0200 |
|---|---|---|
| committer | GitHub <[email protected]> | 2020-12-17 07:07:48 +0200 |
| commit | 8984255158c3866ab1d11617e266ebf5f1e18a70 (patch) | |
| tree | 70a210c82b514e2fdffaa1eaffd88c67bcc4274c /scss | |
| parent | b424650ab51bc5163f7d07cd4a8d9f5a5a364f19 (diff) | |
| download | bootstrap-8984255158c3866ab1d11617e266ebf5f1e18a70.tar.xz bootstrap-8984255158c3866ab1d11617e266ebf5f1e18a70.zip | |
Extended form validation states customization capabilities (#31757)
Co-authored-by: XhmikosR <[email protected]>
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/forms/_validation.scss | 2 | ||||
| -rw-r--r-- | scss/mixins/_forms.scss | 19 |
2 files changed, 14 insertions, 7 deletions
diff --git a/scss/forms/_validation.scss b/scss/forms/_validation.scss index acd68f2ed..c48123a71 100644 --- a/scss/forms/_validation.scss +++ b/scss/forms/_validation.scss @@ -7,6 +7,6 @@ // scss-docs-start form-validation-states-loop @each $state, $data in $form-validation-states { - @include form-validation-state($state, map-get($data, color), map-get($data, icon)); + @include form-validation-state($state, $data...); } // scss-docs-end form-validation-states-loop diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 5e4cfd488..8be4d2ee9 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -13,7 +13,14 @@ } } -@mixin form-validation-state($state, $color, $icon) { +@mixin form-validation-state( + $state, + $color, + $icon, + $tooltip-color: color-contrast($color), + $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity), + $focus-box-shadow: 0 0 0 $input-focus-width rgba($color, $input-btn-focus-color-opacity) +) { .#{$state}-feedback { display: none; width: 100%; @@ -33,8 +40,8 @@ margin-top: .1rem; @include font-size($form-feedback-tooltip-font-size); line-height: $form-feedback-tooltip-line-height; - color: color-contrast($color); - background-color: rgba($color, $form-feedback-tooltip-opacity); + color: $tooltip-color; + background-color: $tooltip-bg-color; @include border-radius($form-feedback-tooltip-border-radius); } @@ -59,7 +66,7 @@ &:focus { border-color: $color; - box-shadow: 0 0 0 $input-focus-width rgba($color, $input-btn-focus-color-opacity); + box-shadow: $focus-box-shadow; } } } @@ -87,7 +94,7 @@ &:focus { border-color: $color; - box-shadow: 0 0 0 $input-focus-width rgba($color, .25); + box-shadow: $focus-box-shadow; } } } @@ -101,7 +108,7 @@ } &:focus { - box-shadow: 0 0 0 $input-focus-width rgba($color, .25); + box-shadow: $focus-box-shadow; } ~ .form-check-label { |