diff options
| author | Julien Déramond <[email protected]> | 2023-02-25 08:01:20 +0100 |
|---|---|---|
| committer | GitHub <[email protected]> | 2023-02-25 08:01:20 +0100 |
| commit | 51299bf4e125c0222412d3a3159cf2f0ccb957f5 (patch) | |
| tree | ca15a6bf8300671a341442ab5eee6b085f964c00 | |
| parent | c6345285c161e5760411d732a123f5a2f0a49b18 (diff) | |
| download | bootstrap-51299bf4e125c0222412d3a3159cf2f0ccb957f5.tar.xz bootstrap-51299bf4e125c0222412d3a3159cf2f0ccb957f5.zip | |
Drop unused `--bs-focus-ring-box-shadow` and add documentation for `--bs-focus-ring-{x|y|blur}` (#38095)
| -rw-r--r-- | scss/_root.scss | 2 | ||||
| -rw-r--r-- | site/content/docs/5.3/helpers/focus-ring.md | 8 |
2 files changed, 8 insertions, 2 deletions
diff --git a/scss/_root.scss b/scss/_root.scss index 2219ba032..e7cff7056 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 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. |