diff options
| author | Mark Otto <markd.otto@gmail.com> | 2017-10-30 01:14:10 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2017-10-30 01:14:10 +0300 |
| commit | b1623c44290b414b656bb4d9e3baaaa3093bda8f (patch) | |
| tree | c704380f51ba175adb62847a35649d6c0340216c /scss/_modal.scss | |
| parent | fceffd16c077efb1cffedd54d27c9fd40ba24b38 (diff) | |
Add `.modal-dialog-centered` for optional vertically centered modal (#24510)
* 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.
Diffstat (limited to 'scss/_modal.scss')
| -rw-r--r-- | scss/_modal.scss | 15 |
1 files changed, 15 insertions, 0 deletions
diff --git a/scss/_modal.scss b/scss/_modal.scss index 5fabc83f46..bd4abc7c64 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -50,11 +50,20 @@ } } +.modal-dialog-centered { + display: flex; + align-items: center; + height: 100%; + margin-top: 0; + margin-bottom: 0; +} + // Actual modal .modal-content { position: relative; display: flex; flex-direction: column; + width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog` // counteract the pointer-events: none; in the .modal-dialog pointer-events: auto; background-color: $modal-content-bg; @@ -144,11 +153,17 @@ margin: $modal-dialog-margin-y-sm-up auto; } + .modal-dialog-centered { + margin-top: 0; + margin-bottom: 0; + } + .modal-content { @include box-shadow($modal-content-box-shadow-sm-up); } .modal-sm { max-width: $modal-sm; } + } @include media-breakpoint-up(lg) { |