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
.closeto.btn-closefor 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
.2emto.25emfor a more pixel perfect rendering - Adds
.btn-close-whitevariant 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/