diff options
author | Mark Otto <markdotto@gmail.com> | 2016-02-07 07:18:48 +0300 |
---|---|---|
committer | Mark Otto <markdotto@gmail.com> | 2016-02-07 07:18:48 +0300 |
commit | 6c2b0d2b76ba0b9667fc439592aa2976fd573702 (patch) | |
tree | 8934ea36a60ad2f9a74954933df0b18edaf2f3b4 | |
parent | 9ca44d29f52806975ecef0bbb100449ebde69cee (diff) |
Updat modal sizing
- 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)
-rw-r--r-- | docs/components/modal.md | 2 | ||||
-rw-r--r-- | scss/_modal.scss | 10 |
2 files changed, 6 insertions, 6 deletions
diff --git a/docs/components/modal.md b/docs/components/modal.md index e8627fe682..a8b1b48506 100644 --- a/docs/components/modal.md +++ b/docs/components/modal.md @@ -181,7 +181,7 @@ Embedding YouTube videos in modals requires additional JavaScript not in Bootstr ## Optional sizes -Modals have two optional sizes, available via modifier classes to be placed on a `.modal-dialog`. +Modals have two optional sizes, available via modifier classes to be placed on a `.modal-dialog`. These size kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports. <div class="bd-example"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button> diff --git a/scss/_modal.scss b/scss/_modal.scss index c43d55b5ac..83bb4932be 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -130,17 +130,17 @@ @include media-breakpoint-up(sm) { // Automatically set modal's width for larger viewports .modal-dialog { - width: $modal-md; + max-width: $modal-md; margin: 30px auto; } + .modal-content { @include box-shadow($modal-content-sm-up-box-shadow); } - // Modal sizes - .modal-sm { width: $modal-sm; } + .modal-sm { max-width: $modal-sm; } } -@include media-breakpoint-up(md) { - .modal-lg { width: $modal-lg; } +@include media-breakpoint-up(lg) { + .modal-lg { max-width: $modal-lg; } } |