Explicitly re-adds the "hand" `cursor:pointer` for non-disabled `.btn`, `.close`, `.navbar-toggler` elements, as well as forcing `page-link` pagination controls to always have the "hand" cursor (even if an author uses it on, say, `<button>` elements for a dynamically updating in-page pagination).

Controversial, as everybody jumped on the bandwagon following this article https://medium.com/simple-human/buttons-shouldnt-have-a-hand-cursor-b11e99ca374b - which does have its merits of course, but there are also counter-arguments like http://kizu.ru/en/issues/cursor-pointer/

And seeing the amount of issues we've seen following the change, and the potential complexity needed to consistently address the cursor issue (see https://github.com/twbs/bootstrap/issues/24156 where i explore how the cursor needs to be based on "intent", and how that's tough to determine), I'm favouring an opinionated take here of just reintroducing the `cursor:pointer`.

* use `background-color` instead of the shorthand
* use `outline: 0` consistently
* fix transform order
* remove quotes from `SFMono-Regular`

given `width: 100%` is always on a container now and it's constrained by max-width, we can remove our navbar changes from #21722 and #22383

Rename `$navbar-*-toggler-bg` to `$navbar-*-toggler-icon-bg` since it's placed on .navbar-toggler-icon (#22564)

* Rename variable $input-border-focus to $input-border-color-focus
* Rename variables $pagination-hover-border, $pagination-active-border, $pagination-disabled-border to $pagination-hover-border-color, $pagination-active-border-color, $pagination-disabled-border-color, respectively
* Rename variables $state-*-border to $state-*-border-color, respectively
* Rename variables $alert-*-border to $alert-*-border-color
* Rename $list-group-active-border to $list-group-active-border-color
* Rename $table-inverse-border to $table-inverse-border-color
* Rename $btn-*-border to $btn-*-border-color
* Rename $navbar-*-toggler-border to $navbar-*-toggler-border-color

* no more outline overrides
* rename old .open to .show

Vertical centering `.navbar` flex children's

Demo: http://jsbin.com/fibini

Set/reset `.dropdown` position when `.navbar-expand`.

Demo: http://jsbin.com/pojecuh

Change the .navbar-toggler to default contextual .navbar-*-color.

<iframe height='265' scrolling='no' title='Bootstrap - .navbar-toggler color' src='//codepen.io/zalog/embed/MJLZOE/?height=265&theme-id=light&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/zalog/pen/MJLZOE/'>Bootstrap - .navbar-toggler color</a> by Catalin Zalog (<a href='http://codepen.io/zalog'>@zalog</a>) on <a href='http://codepen.io'>CodePen</a>.
</iframe>

instead of flex column, use wrap and an explicit flexbox break with flex-basis 100% on the navbar-collapse.

add some additional container styles for enabling flex behavior when content isn't immediate child of .navbar

Generate correct breakpoints for navbar-toggleable-* and generate toggleable without media query to never collapse

* Make container in navbar to occupy full width even on smallest breakpoint

* Fix typo in comment

* Apply fix only on smaller breakpoint

* drop the comment as chrome doesn't have a bug here

* Change it's to its.

* Fix links

* Fix typos

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

this was mad confusing for awhile