* Add .modal-dialog-centered for optional vertically cenetered modal

Fixes #23638

* adds modal-dialog-centered class to docs and removes margin to avoid generating a vertical scrolling

* mention limitations

* fix aria attr

* Add `width: 100%` to the .modal-content for the centered version. Adding it here to avoid adding another selector by limiting it to the centered modal modifier.

1. move a couple of them before the more specific ones.
2. change nesting to be under the same parent selector
3. use the ampersand more

make outer `.modal-dialog` pass through events for custom click
handling, counteract it for the actual `.modal-content`

(#22414) Renamed for consistency `$modal-dialog-sm-up-margin-y`, `$modal-content-xs-box-shadow`, `$modal-content-sm-up-box-shadow`, to `$modal-dialog-margin-y-sm-up`, `$modal-content-box-shadow-xs`, `$modal-content-box-shadow-sm-up`, respectively

- we need to set margin for space between footer buttons as flexbox doesn't render HTML spaces like inline-block does

- flexbox doesn't have collapsing margins or anything, so we hack it with some :not(:first-child) and :not(:last-child) action

updates the dom order in our docs to match (floated content comes first, but no need for that in flexbox)

pull->float comment

* Add variables for transitions

* Add variables for transitions

* Remove comment that duplicated some code
* Use transition mixin whenever possible
* Create a new function to reduce duplication
* Use the new `breakpoint-infix` method

See https://bugs.webkit.org/show_bug.cgi?id=158342
Fixes #17695

[skip sauce]
[skip validator]

[skip sauce]
[skip validator]

[skip sauce]
[skip validator]

[skip sauce]
[skip validator]

- Switch from width to max-width for all widths to avoid scaling outside viewport bounds
- Rejigger the media queries for a more logical breakpoint for the large and small modal sizes
- Avoids changing the width of the default modal (nullifying #17794 and fixing #17581)

[skip sauce]
[skip validator]

See issue: https://github.com/twbs/bootstrap/issues/18385

replaced media-xs => media-breakpoint-down(xs)
replaced media-sm => media-breakpoint-up(sm)
replaced media-sm-max => media-breakpoint-only(sm)
replaced media-md => media-breakpoint-up(md)
replaced media-md-max => media-breakpoint-only(md)
replaced media-lg => media-breakpoint-up(lg)

Breakpoints and container widths are now defined as maps.