diff --git a/scss/_close.scss b/scss/_close.scss index b63b57e3ae..a80ae6f06a 100644 --- a/scss/_close.scss +++ b/scss/_close.scss @@ -4,7 +4,7 @@ // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile .btn-close { - // scss-docs-start btn-close-css-vars + // scss-docs-start close-css-vars --#{$prefix}btn-close-color: #{$btn-close-color}; --#{$prefix}btn-close-bg: #{$btn-close-bg}; // Boosted mod: don't use escape-svg() // Boosted mod: no --#{$prefix}btn-close-opacity @@ -20,7 +20,7 @@ --#{$prefix}btn-close-active-color: #{$btn-close-active-color}; // Boosted mod --#{$prefix}btn-close-active-border-color: #{$btn-close-active-border-color}; // Boosted mod --#{$prefix}btn-close-disabled-color: #{$btn-close-disabled-color}; // Boosted mod - // scss-docs-end btn-close-css-vars + // scss-docs-end close-css-vars // Boosted mod: no box-sizing, width nor height padding: var(--#{$prefix}btn-close-padding); // Boosted mod diff --git a/site/content/docs/5.3/components/close-button.md b/site/content/docs/5.3/components/close-button.md index 1c7c51cee3..75aa105a60 100644 --- a/site/content/docs/5.3/components/close-button.md +++ b/site/content/docs/5.3/components/close-button.md @@ -51,14 +51,13 @@ Close buttons can also be created without `.btn-close` to reduce the size of you ## CSS - ### Variables {{< added-in "5.2.1" >}} -As part of Boosted’s evolving CSS variables approach, close buttons now use 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. +As part of Boosted’s evolving CSS variables approach, close button now use 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="btn-close-css-vars" file="scss/_close.scss" >}} +{{< scss-docs name="close-css-vars" file="scss/_close.scss" >}} Customization through CSS variables can be seen on the `.btn-close-white` modifier class where we override specific values without adding duplicate CSS selectors. @@ -73,4 +72,3 @@ Variables for all close buttons: Variables for the [dark close button](#dark-variant): {{< scss-docs name="close-white-variables" file="scss/_variables.scss" >}} -