From: Julien Déramond <julien.deramond@orange.com>
Date: Sat, 25 Feb 2023 07:01:20 +0000 (+0100)
Subject: Drop unused `--bs-focus-ring-box-shadow` and add documentation for `--bs-focus-ring... 
X-Git-Tag: v5.3.0-alpha2~75
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=51299bf4e125c0222412d3a3159cf2f0ccb957f5;p=thirdparty%2Fbootstrap.git

Drop unused `--bs-focus-ring-box-shadow` and add documentation for `--bs-focus-ring-{x|y|blur}` (#38095)
---

diff --git a/scss/_root.scss b/scss/_root.scss
index 2219ba0323..e7cff70561 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -120,8 +120,6 @@
   --#{$prefix}focus-ring-width: #{$focus-ring-width};
   --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
   --#{$prefix}focus-ring-color: #{$focus-ring-color};
-  // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
-  --#{$prefix}focus-ring-box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
   // scss-docs-end root-focus-variables
 
   // scss-docs-start root-form-validation-variables
diff --git a/site/content/docs/5.3/helpers/focus-ring.md b/site/content/docs/5.3/helpers/focus-ring.md
index 2a71975ccc..5f6e770734 100644
--- a/site/content/docs/5.3/helpers/focus-ring.md
+++ b/site/content/docs/5.3/helpers/focus-ring.md
@@ -37,6 +37,14 @@ Modify the `--bs-focus-ring-*` CSS variables as needed to change the default app
 
 {{< scss-docs name="root-focus-variables" file="scss/_root.scss" >}}
 
+By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values. Modify them to change the default appearance.
+
+{{< example >}}
+<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--bs-focus-ring-x: 10px; --bs-focus-ring-y: 10px; --bs-focus-ring-blur: 4px">
+  Blurry offset focus ring
+</a>
+{{< /example >}}
+
 ### Sass
 
 Customize the focus ring Sass variables to modify all usage of the focus ring styles across your Bootstrap-powered project.