Add more variables, add a comment for the 3

diff --git a/scss/_alert.scss b/scss/_alert.scss
index 078aaaa68b4aa358585868521e44872e2241c644..d0536f3395d802e3c1f09521fcbed256097de0d7 100644 (file)
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -27,7 +27,7 @@
 // Expand the right padding and account for the close button's positioning.
 
 .alert-dismissible {
-  padding-right: $alert-padding-x * 3.5;
+  padding-right: $alert-dismissible-padding-r;
 
   // Adjust close link position
   .btn-close {

diff --git a/scss/_close.scss b/scss/_close.scss
index c80af13209c5b6f4cc58b364f5f54c76364aa3ea..fd1971dbec179ec3495cfbcdfbb574ca7abe2d84 100644 (file)
--- a/scss/_close.scss
+++ b/scss/_close.scss
@@ -37,5 +37,5 @@
 }
 
 .btn-close-white {
-  filter: invert(1) grayscale(100%) brightness(200%);
+  filter: $btn-close-white-filter;
 }

diff --git a/scss/_variables.scss b/scss/_variables.scss
index abd2d8d934f44785ef38516cbfda9ce0a3b233da..92045186dcbe286d333ed49de1a5b548a23f1f9d 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1153,6 +1153,8 @@ $alert-bg-level:                    -10 !default;
 $alert-border-level:                -9 !default;
 $alert-color-level:                 6 !default;
 
+$alert-dismissible-padding-r:       $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
+
 
 // Progress bars
 
@@ -1269,17 +1271,18 @@ $spinner-border-width-sm: .2em !default;
 
 // Close
 
-$btn-close-width:           1em !default;
-$btn-close-height:          $btn-close-width !default;
-$btn-close-padding-x:       .25em !default;
-$btn-close-padding-y:       $btn-close-padding-x !default;
-$btn-close-color:           $black !default;
-$btn-close-bg:              url("data:image/svg+xml,<svg fill='#{$btn-close-color}' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
-$btn-close-focus-shadow:    $input-btn-focus-box-shadow !default;
-$btn-close-opacity:         .5 !default;
-$btn-close-hover-opacity:   .75 !default;
-$btn-close-focus-opacity:   1 !default;
+$btn-close-width:            1em !default;
+$btn-close-height:           $btn-close-width !default;
+$btn-close-padding-x:        .25em !default;
+$btn-close-padding-y:        $btn-close-padding-x !default;
+$btn-close-color:            $black !default;
+$btn-close-bg:               url("data:image/svg+xml,<svg fill='#{$btn-close-color}' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
+$btn-close-focus-shadow:     $input-btn-focus-box-shadow !default;
+$btn-close-opacity:          .5 !default;
+$btn-close-hover-opacity:    .75 !default;
+$btn-close-focus-opacity:    1 !default;
 $btn-close-disabled-opacity: .25 !default;
+$btn-close-white-filter:      invert(1) grayscale(100%) brightness(200%) !default;
 
 // Code