Extrapolates the previously used selector into a new mixin that only generates valid CSS by creating psuedo-classes for `valid` and `invalid`, and nothing else.
Fixes#28380.
* Fix buttons :focus state styles
Buttons :hover and :focus state shares styles.
Buttons :focus text color on 'a.btn' is now consistent with others '.btn'.
* `:focus` styles should be in sync with `.focus`.
So shared styles with hover were copy to focus definition. Rather then using
`hover-focus` mixin which do not contain `.focus`.
- Drop hover and focus states
- Drop .badge-* variants and associated mixin for .bg-* utilities
- Drop .badge-pill for .rounded-pill utliity and adjust horizontal padding to find middle ground of .badge and old .badge-pill
- Remove unused variables
- Add default color value to .badge base class
- Update docs to reflect changes
Alternate take to #27683 that builds the modifier class based on min-width, such that list groups are stacked until the class's breakpoint is reached. This is less verbose, matches our primary responsive approach, and prevents an extra class. Unfortunately, I believe supporting flush list groups is too much code here, so I've skipped that and made a note in the docs.
Also added examples generate from our breakpoints data file with a protip for how to do equal width items.
* Tweak the accessibility/reduced motion text
include mention of carousel slides, remove the (now inaccurate, as Firefox 63 includes it too) mention that support is limited to Safari/macOS
xref https://github.com/twbs/bootstrap/issues/27525
* Add new callout for reduced motion
* Add variable to control prefers-reduced-motion media query support
* Add callout about prefers-reduced-motion to all components currently using animation which are affected
When gradients are enabled there is still a hover state on disabled
buttons since the hover rules apply to background-image and disabled
rules apply to background-color. This applies the logic already present
in dropdowns to buttons. This fix was originally proposed by @ysds.
