fix(css): adds a new opacity var

Fixes beeing able to control `.is-valid` & `.is-invalid` input:focus opacity

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 509a364ee5972e46c310328c90bf7edd50b3a636..71fabc58db58c9d8558a756fe6dcf311834649f8 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -496,9 +496,10 @@ $input-btn-font-family:       null !default;
 $input-btn-font-size:         $font-size-base !default;
 $input-btn-line-height:       $line-height-base !default;
 
-$input-btn-focus-width:       .2rem !default;
-$input-btn-focus-color:       rgba($component-active-bg, .25) !default;
-$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
+$input-btn-focus-width:         .2rem !default;
+$input-btn-focus-color-opacity: .25 !default;
+$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity) !default;
+$input-btn-focus-box-shadow:    0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
 
 $input-btn-padding-y-sm:      .25rem !default;
 $input-btn-padding-x-sm:      .5rem !default;

diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index ab612334f439311fd4c0f0003a94711984a658f1..18735599421e95d18a95c430d0646edfa8ed94c5 100644 (file)
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -58,7 +58,7 @@
 
       &:focus {
         border-color: $color;
-        box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+        box-shadow: 0 0 0 $input-focus-width rgba($color, $input-btn-focus-color-opacity);
       }
     }
   }