mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-21 13:24:08 +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>
{{< /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
### 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
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.