rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00
Code Issues Actions Packages Releases Activity

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

Browse Source
This commit is contained in:
Julien Déramond 2023-02-25 08:01:20 +01:00 committed by GitHub
parent c6345285c1
commit 51299bf4e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
scss/_root.scss
View File

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

8
site/content/docs/5.3/helpers/focus-ring.md
View File

@ -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.