1
  2/**
  3 * Modals
  4 * --------------------------------------------------
  5 * Modals are independent windows that slide in from off-screen.
  6 */
  7
  8.modal-backdrop,
  9.modal-backdrop-bg {
 10  position: fixed;
 11  top: 0;
 12  left: 0;
 13  z-index: $z-index-modal;
 14  width: 100%;
 15  height: 100%;
 16}
 17
 18.modal-backdrop-bg {
 19  pointer-events: none;
 20}
 21
 22.modal {
 23  display: block;
 24  position: absolute;
 25  top: 0;
 26  z-index: $z-index-modal;
 27  overflow: hidden;
 28  min-height: 100%;
 29  width: 100%;
 30  background-color: $modal-bg-color;
 31}
 32
 33@media (min-width: $modal-inset-mode-break-point) {
 34  // inset mode is when the modal doesn't fill the entire
 35  // display but instead is centered within a large display
 36  .modal {
 37    top: $modal-inset-mode-top;
 38    right: $modal-inset-mode-right;
 39    bottom: $modal-inset-mode-bottom;
 40    left: $modal-inset-mode-left;
 41    min-height: $modal-inset-mode-min-height;
 42    width: (100% - $modal-inset-mode-left - $modal-inset-mode-right);
 43  }
 44
 45  .modal.ng-leave-active {
 46    bottom: 0;
 47  }
 48
 49  // remove ios header padding from inset header
 50  .platform-ios.platform-cordova .modal-wrapper .modal {
 51    .bar-header:not(.bar-subheader) {
 52      height: $bar-height;
 53      > * {
 54        margin-top: 0;
 55      }
 56    }
 57    .tabs-top > .tabs,
 58    .tabs.tabs-top {
 59      top: $bar-height;
 60    }
 61    .has-header,
 62    .bar-subheader {
 63      top: $bar-height;
 64    }
 65    .has-subheader {
 66      top: $bar-height + $bar-subheader-height;
 67    }
 68    .has-header.has-tabs-top {
 69      top: $bar-height + $tabs-height;
 70    }
 71    .has-header.has-subheader.has-tabs-top {
 72      top: $bar-height + $bar-subheader-height + $tabs-height;
 73    }
 74  }
 75
 76  .modal-backdrop-bg {
 77    @include transition(opacity 300ms ease-in-out);
 78    background-color: $modal-backdrop-bg-active;
 79    opacity: 0;
 80  }
 81
 82  .active .modal-backdrop-bg {
 83    opacity: 0.5;
 84  }
 85}
 86
 87// disable clicks on all but the modal
 88.modal-open {
 89  pointer-events: none;
 90
 91  .modal,
 92  .modal-backdrop {
 93    pointer-events: auto;
 94  }
 95  // prevent clicks on modal when loading overlay is active though
 96  &.loading-active {
 97    .modal,
 98    .modal-backdrop {
 99      pointer-events: none;
100    }
101  }
102}