From 494fad3506a605032c488763c99f729dd7ab7954 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Julien=20D=C3=A9ramond?= <juderamond@gmail.com>
Date: Thu, 11 May 2023 09:41:31 +0200
Subject: [PATCH] Add dynamic position for alert button close

---
 scss/_alert.scss                           |  6 ++---
 site/content/docs/5.3/components/alerts.md | 27 ++++++++++++++++++++++
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/scss/_alert.scss b/scss/_alert.scss
index b8cff9b71e..292a0f426e 100644
--- 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 d634ce2d12..60ea1e93c8 100644
--- 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 >}}
-- 
2.47.2