diff options
| author | Mark Otto <markdotto@gmail.com> | 2021-11-26 03:24:22 +0300 |
|---|---|---|
| committer | Mark Otto <markdotto@gmail.com> | 2022-11-12 01:09:51 +0300 |
| commit | 9e27c231a7ae8fb8859dacef22017087c3e2e7a7 (patch) | |
| tree | 3f26467cd637394c7caf0ac909124c7f26f2ff68 | |
| parent | 82203eb4087477cbc82711245e952c11083f6a00 (diff) | |
Add CSS variables for global focus styling, document it
| -rw-r--r-- | scss/_root.scss | 11 | ||||
| -rw-r--r-- | site/content/docs/5.2/content/reboot.md | 10 |
2 files changed, 21 insertions, 0 deletions
diff --git a/scss/_root.scss b/scss/_root.scss index d9355b38ef..6eff503cee 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -74,4 +74,15 @@ @each $name, $value in $grid-breakpoints { --#{$prefix}breakpoint-#{$name}: #{$value}; } + + // Focus styles + // scss-docs-start root-focus-variables + --#{$variable-prefix}focus-ring-width: #{$focus-ring-width}; + --#{$variable-prefix}focus-ring-opacity: #{$focus-ring-opacity}; + --#{$variable-prefix}focus-ring-color: #{$focus-ring-color}; + --#{$variable-prefix}focus-ring-blur: #{$focus-ring-blur}; + // By default, there is no `--bs-focus-ring-offset-x` or `--bs-focus-ring-offset-y`, but we provide CSS variables with fallbacks to initial `0` values + --#{$variable-prefix}focus-ring-box-shadow: var(--#{$variable-prefix}focus-ring-offset-x, 0) var(--#{$variable-prefix}focus-ring-offset-y, 0) var(--#{$variable-prefix}focus-ring-blur) var(--#{$variable-prefix}focus-ring-width) var(--#{$variable-prefix}focus-ring-color); + // scss-docs-end root-focus-variables + // stylelint-enable custom-property-empty-line-before } diff --git a/site/content/docs/5.2/content/reboot.md b/site/content/docs/5.2/content/reboot.md index 55f7f66331..2504a950ca 100644 --- a/site/content/docs/5.2/content/reboot.md +++ b/site/content/docs/5.2/content/reboot.md @@ -374,6 +374,16 @@ 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 |