diff --git a/site/content/docs/5.1/content/reboot.md b/site/content/docs/5.1/content/reboot.md index 290d0df46..1f69fe9c6 100644 --- a/site/content/docs/5.1/content/reboot.md +++ b/site/content/docs/5.1/content/reboot.md @@ -393,16 +393,6 @@ Reboot includes an enhancement for `role="button"` to change the default cursor Non-button element button {{< /example >}} -## Focus state - -Added in v5.3.0 - -Bootstrap globally updates the styling for `:focus` styles using a combination of Sass and CSS variables. In our Sass, we set default values that can be customized pre-compiling. Those variables are then reassigned to `:root` level CSS variables that can be customized in real-time, including with options for `x` and `y` offsets (which default to their fallback value of `0`). - -{{< scss-docs name="focus-ring-variables" file="scss/_variables.scss" >}} - -{{< scss-docs name="root-focus-variables" file="scss/_root.scss" >}} - ## Misc elements ### Address diff --git a/site/content/docs/5.1/customize/css-variables.md b/site/content/docs/5.1/customize/css-variables.md index 06a4cbdb9..3870b9a97 100644 --- a/site/content/docs/5.1/customize/css-variables.md +++ b/site/content/docs/5.1/customize/css-variables.md @@ -55,6 +55,20 @@ a { } ``` +## Focus variables + +Added in v5.3.0 + +Bootstrap provides custom `:focus` styles using a combination of Sass and CSS variables that can be optionally added to specific components and elements. We do not yet globally override all `:focus ` styles. + +In our Sass, we set default values that can be customized pre-compiling. + +{{< scss-docs name="focus-ring-variables" file="scss/_variables.scss" >}} + +Those variables are then reassigned to `:root` level CSS variables that can be customized in real-time, including with options for `x` and `y` offsets (which default to their fallback value of `0`). + +{{< scss-docs name="root-focus-variables" file="scss/_root.scss" >}} + ## Grid breakpoints While we include our grid breakpoints as CSS variables (except for `xs`), be aware that **CSS variables do not work in media queries**. This is by design in the CSS spec for variables, but may change in coming years with support for `env()` variables. Check out [this Stack Overflow answer](https://stackoverflow.com/a/47212942) for some helpful links. In the mean time, you can use these variables in other CSS situations, as well as in your JavaScript.