mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-25 22:41:20 +02:00
Code Issues Releases Wiki Activity

Add .modal-dialog-centered for optional vertically centered modal (#24510)

Browse Source 
* 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.
This commit is contained in:
Mark Otto
2017-10-29 15:14:10 -07:00
committed by GitHub
parent fceffd16c0
commit b1623c4429
2 changed files with 73 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
scss/_modal.scss
View File

@@ -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) {