* Drop -x and -y as they're all the same
- Also move -width to elsewhere in the vars because it makes no sense by spacers.
- Update values of -x and -y across main Sass and docs Sass.
* Update docs to reflect changes; link to spacing utils from options page

Based on this pen: http://codepen.io/zalog/pen/jyoyoR

* Remove 'hover' from variable names
* Fix indentation in variables

The actual available size of the navbar toggler icon is 30px, but the
SVG uses a 32 unit grid. This commit uses a 30 unit grid and updates
icon accordingly.

* Remove unused scss variables

* Remove unnecessary space

* Remove $zindex-navbar from docs

* Re-add $progress-box-shadow

Remove .navbar-divider; it's undocumented and wasn't updated with the flexbox navbar updates, so it's kinda bunk right now

- had to rearrange vars to re-use heading line-height
- align values while we're at it

- <progress> element didn't allow animation, labels overlaid, multiple bars, etc.

- Revamps CSS to use something more similar to v3's implementation

- Ditches variant mixin for `bg-` utils

- Rebuilds docs to match, including adding a new Height section for customizing that.

Only potential remaining todo is adding `.sr-only` instances to within the bar. Unsure if that's necessary.

- Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states.
- Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding.
- Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary.
- Added support for :active states on the .list-group-item-action variant (for the current click state).
- Removed the heading and text classes and variables since we can accomplish the same thing with utilities.
- Added support for :disabled on the .list-group-item-action as well since we can use those with button elements.
- Rearranged docs to reflect all the above changes.
- Reformatted some Sass variables.

- No need to set hover and focus on disabled or active elements. Disabled has no interactivity and active will inherit the focus.
- Also removes two now unused vars.

also be sure to apply it for the active state when shadows are enabled

Use pixels instead of rem units for focus box-shadow on custom controls so that IE11, Edge, and Win FF screw it up less

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.

* Add color variables for white and black

Closes #21395.

this assumes no margin on the .card to start (which will follow in a later commit)