This PR redesigns our close buttons to make them more consistent across browsers and devices, as well as making it slightly easier to style them overall. With a little CSS background-image
magic, we're sizing the × SVG to the content-box
. This allows us to give use padding
and rounded corners that carry the styling through with no impact to the × icon.
- Renamed
.close
to.btn-close
for more specific class name - Replaced inline
×
sign with embedded SVG in our CSS - Improved focus styles with custom
box-shadow
"outline" like our buttons - Increased focus shadow width of all buttons, including the new close button, from
.2em
to.25em
for a more pixel perfect rendering - Adds
.btn-close-white
variant for darker backgrounds.
Here's a preview of the default and disabled styles, as well as a focused and disabled style.
Closes #30927 and closes #31478.
Fixes #30917 (closed) (focus), fixes #28787 (closed) (default styling in toasts), fixes #27294 (closed) (rename). and fixes #27163 (closed) (focus).
Preview: https://deploy-preview-31641--twbs-bootstrap.netlify.app/docs/5.0/components/close-button/