mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00
Code Activity

Move to CSS vars section

Browse Source
This commit is contained in:
Mark Otto
2021-11-25 14:26:24 -10:00
parent cf63505ecf
commit f170f198a8
2 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/5.1/content/reboot.md
-10
View File
@@ -393,16 +393,6 @@ Reboot includes an enhancement for `role="button"` to change the default cursor
<span role="button" tabindex="0">Non-button element button</span> <span role="button" tabindex="0">Non-button element button</span>
{{< /example >}} {{< /example >}}
## Focus state
<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.3.0</small>
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 ## Misc elements
### Address ### Address
site/content/docs/5.1/customize/css-variables.md
+14
View File
@@ -55,6 +55,20 @@ a {
} }
``` ```
## Focus variables
<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.3.0</small>
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 ## 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. 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.