javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 11:41:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(modal): use flex to position modal to make it easier to size

Browse Source 
closes #14392
This commit is contained in:
Brandy Carney
2018-07-18 11:20:57 -04:00
parent c3c35b5829
commit 9488a98da0
1 changed files with 4 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
core/src/components/modal/modal.scss
View File

@ -8,7 +8,9 @@ ion-modal {
position: absolute; position: absolute;
display: block; display: flex;
align-items: center;
justify-content: center;
contain: strict; contain: strict;
} }
@ -27,24 +29,17 @@ ion-modal-controller {
.modal-wrapper { .modal-wrapper {
z-index: 10; z-index: 10;
width: 100%;
height: 100%; height: 100%;
contain: strict; contain: strict;
@media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) { @media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
@include position(calc(50% - (#{$modal-inset-height-small}/2)), null, null, calc(50% - (#{$modal-inset-width}/2)));
position: absolute;
width: $modal-inset-width; width: $modal-inset-width;
height: $modal-inset-height-small; height: $modal-inset-height-small;
} }
@media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-large) { @media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-large) {
@include position(calc(50% - (#{$modal-inset-height-large}/2)), null, null, calc(50% - (#{$modal-inset-width}/2)));
position: absolute;
width: $modal-inset-width; width: $modal-inset-width;
height: $modal-inset-height-large; height: $modal-inset-height-large;
} }