@adobe/spectrum-css/dist/components/modal/index-vars.css

The Spectrum CSS top-level backwards compatible package

.spectrum-Modal {

  visibility: hidden;

  opacity: 0;

  transition: transform var(--spectrum-global-animation-duration-100, 130ms) ease-in-out,
              opacity var(--spectrum-global-animation-duration-100, 130ms) ease-in-out,
              visibility 0ms linear var(--spectrum-global-animation-duration-100, 130ms);

  pointer-events: none;
}

.spectrum-Modal.is-open {
  visibility: visible;

  opacity: 1;

  transition-delay: 0ms;

  pointer-events: auto;
}

.spectrum-Modal {
  --spectrum-dialog-confirm-exit-animation-delay: 0ms;
  --spectrum-dialog-fullscreen-margin: 32px;
  --spectrum-dialog-max-height: 90vh;
}

.spectrum-Modal-wrapper {
  position: fixed;
  left: 0;
  top: 0;

  display: -ms-flexbox;

  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;

  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  height: -webkit-fill-available;
  height: fill-available;

  visibility: hidden;
  pointer-events: none;
  z-index: 2;
  transition: visibility 0ms linear
    var(--spectrum-global-animation-duration-100, 130ms);
}

.spectrum-Modal-wrapper.is-open {
    visibility: visible;
  }

.spectrum-Modal {
  transform: translateY(
    var(--spectrum-dialog-confirm-entry-animation-distance, var(--spectrum-global-dimension-size-250))
  );
  z-index: 2;
  max-height: var(--spectrum-dialog-max-height);

  border-radius: var(--spectrum-dialog-confirm-border-radius, var(--spectrum-global-dimension-size-50));
  overflow: hidden;
  outline: none;
  pointer-events: auto;
  transition: opacity var(--spectrum-dialog-confirm-exit-animation-duration, var(--spectrum-global-animation-duration-100))
      cubic-bezier(0.5, 0, 1, 1)
      var(--spectrum-dialog-confirm-exit-animation-delay, 0ms),
    visibility 0ms linear
      calc(var(--spectrum-dialog-confirm-exit-animation-delay, 0ms) + var(--spectrum-dialog-confirm-exit-animation-duration, var(--spectrum-global-animation-duration-100))),
    transform 0ms linear
      calc(var(--spectrum-dialog-confirm-exit-animation-delay, 0ms) + var(--spectrum-dialog-confirm-exit-animation-duration, var(--spectrum-global-animation-duration-100)));
}

.spectrum-Modal.is-open {
    transition: transform
        var(--spectrum-dialog-confirm-entry-animation-duration, var(--spectrum-global-animation-duration-500))
        cubic-bezier(0, 0, 0.4, 1)
        var(--spectrum-dialog-confirm-entry-animation-delay, var(--spectrum-global-animation-duration-200)),
      opacity var(--spectrum-dialog-confirm-entry-animation-duration, var(--spectrum-global-animation-duration-500))
        cubic-bezier(0, 0, 0.4, 1)
        var(--spectrum-dialog-confirm-entry-animation-delay, var(--spectrum-global-animation-duration-200));

    transform: translateY(0);
  }

@media only screen and (max-device-width: 400px), only screen and (max-device-height: 350px) {
  .spectrum-Modal--responsive {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }
    .spectrum-Modal-wrapper .spectrum-Modal--responsive {
      margin-top: 0;
    }
}

.spectrum-Modal--fullscreen {
  position: fixed;
  left: var(--spectrum-dialog-fullscreen-margin);
  top: var(--spectrum-dialog-fullscreen-margin);
  right: var(--spectrum-dialog-fullscreen-margin);
  bottom: var(--spectrum-dialog-fullscreen-margin);
  max-width: none;
  max-height: none;
}

.spectrum-Modal--fullscreenTakeover {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: none;
  max-height: none;

  box-sizing: border-box;
  border: none;
  border-radius: 0;
}

.spectrum-Modal--fullscreenTakeover,
  .spectrum-Modal--fullscreenTakeover.is-open {
    transform: none;
  }

.spectrum-Modal {
  background: var(--spectrum-dialog-confirm-background-color, var(--spectrum-alias-background-color-default));
}