From: Julien Déramond <juderamond@gmail.com>
Date: Thu, 11 May 2023 07:41:31 +0000 (+0200)
Subject: Add dynamic position for alert button close
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=494fad3506a605032c488763c99f729dd7ab7954;p=thirdparty%2Fbootstrap.git

Add dynamic position for alert button close
---

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 >}}