Add dynamic position for alert button close

diff --git a/scss/_alert.scss b/scss/_alert.scss
index b8cff9b71edf0e727234db32319bf392f2cc4f8f..292a0f426e29f18df9761c97e525fdddb3382c2d 100644 (file)
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -47,10 +47,10 @@
   // Adjust close link position
   .btn-close {
     position: absolute;
-    top: 0;
-    right: 0;
+    top: var(--bs-alert-padding-y);
+    right: var(--bs-alert-padding-x);
     z-index: $stretched-link-z-index + 1;
-    padding: $alert-padding-y * 1.25 $alert-padding-x;
+    padding: 5px; // TODO: use a variable
   }
 }
 

diff --git a/site/content/docs/5.3/components/alerts.md b/site/content/docs/5.3/components/alerts.md
index d634ce2d120c35d2194d7ebdf35484b183ca2d4e..60ea1e93c85df3c0c66b8b0c66008788b4236a87 100644 (file)
--- a/site/content/docs/5.3/components/alerts.md
+++ b/site/content/docs/5.3/components/alerts.md
@@ -134,10 +134,37 @@ Using the alert JavaScript plugin, it's possible to dismiss any alert inline. He
 You can see this in action with a live demo:
 
 {{< example >}}
+<div class="alert alert-warning alert-dismissible fade show" role="alert" style="--bs-alert-padding-y: 5px; --bs-alert-padding-x: 5px">
+  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>
+
+<div class="alert alert-warning alert-dismissible fade show" role="alert" style="--bs-alert-padding-y: 50px; --bs-alert-padding-x: 50px">
+  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>
+
 <div class="alert alert-warning alert-dismissible fade show" role="alert">
   <strong>Holy guacamole!</strong> You should check in on some of those fields below.
   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
 </div>
+
+<hr>
+
+<div class="alert alert-warning alert-dismissible fade show" role="alert" style="--bs-alert-padding-y: 5px; --bs-alert-padding-x: 5px">
+  <strong>Holy guacamole!</strong> You should check in on some of those fields below.in on some of those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields below
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>
+
+<div class="alert alert-warning alert-dismissible fade show" role="alert" style="--bs-alert-padding-y: 50px; --bs-alert-padding-x: 50px">
+  <strong>Holy guacamole!</strong> You should check in on some of those fields below.in on some those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields below
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>
+
+<div class="alert alert-warning alert-dismissible fade show" role="alert">
+  <strong>Holy guacamole!</strong> You should check in on some of those fields below.in on some of those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields below
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>
 {{< /example >}}
 
 {{< callout warning >}}