* 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.