- Adds new flexbox.md file to utilities docs
- Adds a `breakpoints.yml` data file for easier output of responsive classes in the docs. Will put this to use on other pages soon.
- Adds hella flex utils. There are some dupes for now, but they'll get removed in time.
- Reorganize things, leading with the base nav first instead of an accessibility note, and then moving the rest to a new available styles section.
- Add horizontal alignment options thanks to new flex utils (these new utils will be documented later in another commit).
- Dropped `.nav-stacked` for a flex util and added additional alignment options, so document those, too.
Given move to flexbox, we can make this available for everyone and clean it up some.
- Simplifies the `.nav-justified` styles to build on the flex-powered `.nav` base class.
- Adds the `.nav-fill` to make nav links fill available horizontal space, but not equal width.
- Set an explicit `display: flex` on the base `.nav` class and remove the floats/clearfixes from our navs.
- Set some global styles for `.nav-link`, a departure from the previous solution that featured no predefined padding.
- Move `.nav-link` from `inline-block` to `block` given this setting was added for our tabs and pills anyway.
- Remove horizontal margin from nav tabs; let folks set that on their own from now on.
Turns out we did have the correct height calculation with our custom selects. The problem was we lacked a shared line-height with our buttons and inputs.
This restores the previous `calc` math and adds a line-height that reuses the input line-height.
Fixes 2 bugs:
1. All keydowns were being prevented. Because of that the user wasn't able to navigate in the whole page using ARROW_UP/ARROW_DOWN.
2. Even when is an input or textarea the keydowns were being prevented. Because of that the user wasn't able to type any text on these elements.
- better copy and examples throughout
- callout on flexbug #12 for inline elements like links and images (which is the problem in #20408)
- add order section
Sets minimum required flex styles (including an explicit starting alignment) and removes everything else.
- no need for .media-left and .media-right, we have padding utils
- no need for a .media-heading, we have margin
- no need for .media-object, we have display utils
- no need for .media-list, we have .list-unstyled util
