ionic/src/components/modal/modal.scss at polyfill-changes · CssFormWork/ionic · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
@import "../../themes/ionic.globals";

// Modals
// --------------------------------------------------

$modal-inset-min-width:                      768px !default;
$modal-inset-min-height-small:               600px !default;
$modal-inset-min-height-large:               768px !default;
$modal-inset-width:                          600px !default;
$modal-inset-height-small:                   500px !default;
$modal-inset-height-large:                   600px !default;

ion-modal {
  position: absolute;
  top: 0;
  left: 0;

  display: block;

  width: 100%;
  height: 100%;
}

ion-modal ion-backdrop {
  @media not all and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
    visibility: hidden;
  }
}

.modal-wrapper {
  z-index: 10;

  height: 100%;

  @media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
    position: absolute;
    top: calc(50% - (#{$modal-inset-height-small}/2));
    left: calc(50% - (#{$modal-inset-width}/2));

    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) {
    position: absolute;
    top: calc(50% - (#{$modal-inset-height-large}/2));
    left: calc(50% - (#{$modal-inset-width}/2));

    width: $modal-inset-width;
    height: $modal-inset-height-large;
  }
}