mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 13:32:54 +08:00
100 lines
2.2 KiB
SCSS
100 lines
2.2 KiB
SCSS
@import "../../themes/ionic.globals";
|
|
|
|
|
|
// Modals
|
|
// --------------------------------------------------
|
|
|
|
/// @prop - Min width of the modal inset
|
|
$modal-inset-min-width: 768px !default;
|
|
|
|
/// @prop - Minimum height of the small modal inset
|
|
$modal-inset-min-height-small: 600px !default;
|
|
|
|
/// @prop - Minimum height of the large modal inset
|
|
$modal-inset-min-height-large: 768px !default;
|
|
|
|
/// @prop - Width of the large modal inset
|
|
$modal-inset-width: 600px !default;
|
|
|
|
/// @prop - Height of the small modal inset
|
|
$modal-inset-height-small: 500px !default;
|
|
|
|
/// @prop - Height of the large modal inset
|
|
$modal-inset-height-large: 600px !default;
|
|
|
|
|
|
ion-modal {
|
|
@include position(0, null, null, 0);
|
|
|
|
position: absolute;
|
|
|
|
display: block;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
contain: strict;
|
|
}
|
|
|
|
.modal-backdrop {
|
|
@media not all and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
.modal-backdrop.hide-backdrop {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.modal-wrapper {
|
|
z-index: 10;
|
|
|
|
height: 100%;
|
|
|
|
contain: strict;
|
|
|
|
@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;
|
|
height: $modal-inset-height-small;
|
|
}
|
|
|
|
@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;
|
|
height: $modal-inset-height-large;
|
|
}
|
|
}
|
|
|
|
.modal-content {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
display: block;
|
|
|
|
// override the default visibility cloaking
|
|
// added for each component before it's loaded
|
|
// visibility: inherit !important;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
// do not show by default, but still render
|
|
// so we can get dimensions before transitioning in
|
|
opacity: 0;
|
|
|
|
contain: strict;
|
|
}
|
|
|
|
.show-modal .modal-content {
|
|
// show the modal now that it's ready
|
|
opacity: 1;
|
|
}
|