diff options
| author | Julien Déramond <[email protected]> | 2023-01-02 07:57:12 +0100 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2023-01-02 11:39:13 -0800 |
| commit | e60002b1fc9bb8a735b3161a3e5d29fbb6a0cbdc (patch) | |
| tree | 8ab283a10c6307cc7c8f983fb5095c6822feeba7 | |
| parent | 0d64dc6dfc1984672b2c9bb53462323ff7c7ceb0 (diff) | |
| download | bootstrap-e60002b1fc9bb8a735b3161a3e5d29fbb6a0cbdc.tar.xz bootstrap-e60002b1fc9bb8a735b3161a3e5d29fbb6a0cbdc.zip | |
Docs: add CSS variables section in close button section
| -rw-r--r-- | scss/_close.scss | 2 | ||||
| -rw-r--r-- | site/content/docs/5.3/components/close-button.md | 10 |
2 files changed, 11 insertions, 1 deletions
diff --git a/scss/_close.scss b/scss/_close.scss index 503a105cc..4d6e73c13 100644 --- a/scss/_close.scss +++ b/scss/_close.scss @@ -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; diff --git a/site/content/docs/5.3/components/close-button.md b/site/content/docs/5.3/components/close-button.md index 39b80e1cd..033958ded 100644 --- a/site/content/docs/5.3/components/close-button.md +++ b/site/content/docs/5.3/components/close-button.md @@ -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" >}} |