fixes #20485: use rem units in alert dismiss (#20625)

diff --git a/scss/_alert.scss b/scss/_alert.scss
index 55fc101dc2771ba2771367406bd74d87eadfef61..4331771018096de963bbced2ac9187fd9726bca9 100644 (file)
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -26,13 +26,13 @@
 // Expand the right padding and account for the close button's positioning.
 
 .alert-dismissible {
-  padding-right: ($alert-padding + 20px);
+  padding-right: ($alert-padding * 2);
 
   // Adjust close link position
   .close {
     position: relative;
-    top: -2px;
-    right: -21px;
+    top: -.125rem;
+    right: -$alert-padding;
     color: inherit;
   }
 }

diff --git a/scss/_variables.scss b/scss/_variables.scss
index da9f5ef5bf196a3c018f6f729265e9168f0597a2..05c008820d14c8ef800611c7c4df7d138e062d30 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -685,7 +685,7 @@ $modal-sm:                    300px !default;
 //
 // Define alert colors, border radius, and padding.
 
-$alert-padding:               15px !default;
+$alert-padding:               1rem !default;
 $alert-border-radius:         $border-radius !default;
 $alert-link-font-weight:      bold !default;
 $alert-border-width:          $border-width !default;