aboutsummaryrefslogtreecommitdiff
path: root/site/content/docs
diff options
context:
space:
mode:
authorJulien Déramond <[email protected]>2023-02-25 08:01:20 +0100
committerGitHub <[email protected]>2023-02-25 08:01:20 +0100
commit51299bf4e125c0222412d3a3159cf2f0ccb957f5 (patch)
treeca15a6bf8300671a341442ab5eee6b085f964c00 /site/content/docs
parentc6345285c161e5760411d732a123f5a2f0a49b18 (diff)
downloadbootstrap-51299bf4e125c0222412d3a3159cf2f0ccb957f5.tar.xz
bootstrap-51299bf4e125c0222412d3a3159cf2f0ccb957f5.zip
Drop unused `--bs-focus-ring-box-shadow` and add documentation for `--bs-focus-ring-{x|y|blur}` (#38095)
Diffstat (limited to 'site/content/docs')
-rw-r--r--site/content/docs/5.3/helpers/focus-ring.md8
1 files changed, 8 insertions, 0 deletions
diff --git a/site/content/docs/5.3/helpers/focus-ring.md b/site/content/docs/5.3/helpers/focus-ring.md
index 2a71975cc..5f6e77073 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.