9e17b2b34c
* Add global variables for box-shadow focus rings * Update instances of -btn-focus-box-shadow to use -ring-box-shadow, unless it's for buttons or inputs * fix variable name * Add CSS variables for global focus styling, document it * Move to CSS vars section * Update scss/_nav.scss Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com> * Helper and utils * Fix bundlewatch * Change 'Focus ring' in sidebar so that the page can be visible * Minor typo fix * fix merge * Revamp some more, improve docs Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com> Co-authored-by: Julien Déramond <juderamond@gmail.com> Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
2.5 KiB
| layout | title | description | group | toc | added |
|---|---|---|---|---|---|
| docs | Focus ring | Utility classes that allows you to add and modify custom focus ring styles to elements and components. | helpers | true | 5.3 |
The .focus-ring helper removes the default outline on :focus, replacing it with a box-shadow that can be more broadly customized. The new shadow is made up of a series of CSS variables, inherited from the :root level, that can be modified for any element or component.
Example
Click into the example below and press Tab to see the focus ring in action.
{{< example >}} Custom focus ring {{< /example >}}
Customize
Modify the styling of a focus ring with our CSS variables, Sass variables, utilities, or custom styles.
CSS variables
Modify the --bs-focus-ring-* CSS variables as needed to change the default appearance.
{{< example >}} Green focus ring {{< /example >}}
.focus-ring sets styles via global CSS variables that can be overridden on any parent element, as shown above. These variables are generated from their Sass variable counterparts.
{{< scss-docs name="root-focus-variables" file="scss/_root.scss" >}}
Sass
Customize the focus ring Sass variables to modify all usage of the focus ring styles across your Bootstrap-powered project.
{{< scss-docs name="focus-ring-variables" file="scss/_variables.scss" >}}
Utilities
In addition to .focus-ring, we have several .focus-ring-* utilities to modify the helper class defaults. Modify the color with any of our [theme colors]({{< docsref "/customize/color#theme-colors" >}}). Note that the light and dark variants may not be visible on all background colors given current color mode support.
{{< example >}} {{< focus-ring.inline >}} {{- range (index $.Site.Data "theme-colors") }}
{{- end -}} {{< /focus-ring.inline >}} {{< /example >}}Focus ring utilities are declared in our utilities API in scss/_utilities.scss. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
{{< scss-docs name="utils-focus-ring" file="scss/_utilities.scss" >}}