diff --git a/scss/_alert.scss b/scss/_alert.scss
index 078aaaa68b..d0536f3395 100644
--- 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 c80af13209..fd1971dbec 100644
--- 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 abd2d8d934..92045186dc 100644
--- 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,") !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,") !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