rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Docs: add CSS variables section in close button section

Browse Source
This commit is contained in:
Julien Déramond 2023-01-02 07:57:12 +01:00 committed by Mark Otto
parent 0d64dc6dfc
commit e60002b1fc
2 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
scss/_close.scss
View File

@ -4,6 +4,7 @@
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
.btn-close {
// scss-docs-start close-css-vars
--#{$prefix}btn-close-color: #{$btn-close-color};
--#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
--#{$prefix}btn-close-opacity: #{$btn-close-opacity};
@ -12,6 +13,7 @@
--#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
--#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
--#{$prefix}btn-close-white-filter: #{$btn-close-white-filter};
// scss-docs-end close-css-vars
box-sizing: content-box;
width: $btn-close-width;

10
site/content/docs/5.3/components/close-button.md
View File

@ -37,8 +37,16 @@ Add `data-bs-theme="dark"` to the `.btn-close`, or to its parent element, to inv
</div>
{{< /example >}}
## Sass
## CSS
### Variables
{{< added-in "5.3.0" >}}
As part of Bootstrap's evolving CSS variables approach, close button now uses local CSS variables on `.btn-close` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
{{< scss-docs name="close-css-vars" file="scss/_close.scss" >}}
### Sass variables
{{< scss-docs name="close-variables" file="scss/_variables.scss" >}}