wagtail/client/scss/components/_modals.scss

$zindex-modal-background: 500;

.fade {
  @include transition(opacity 0.15s linear);
  opacity: 0;

  &.in {
    opacity: 1;
  }
}

// Kill the scroll on the body
.modal-open {
  overflow: hidden;

  .content-wrapper {
    transform: none;
  }
}

// Container that the modal scrolls within
.modal {
  box-sizing: border-box;
  display: none;
  overflow: auto;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  inset-inline-start: 0;
  z-index: $zindex-modal-background;
}

// Shell div to position the modal with bottom padding
.modal-dialog {
  box-sizing: border-box;
  margin-inline-start: auto;
  margin-inline-end: auto;
  padding: 0;
  z-index: ($zindex-modal-background + 10);
  height: 90%;
  width: 85%;

  &:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-inline-end: -0.25em;
  }
}

// Actual modal
.modal-content {
  box-sizing: border-box;
  border-radius: 3px;
  width: 98.7%;
  position: relative;
  background-color: $color-white;
  margin-top: 2em;
  padding-bottom: 3em;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
}

// Modal background
.modal-backdrop {
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  inset-inline-start: 0;
  z-index: ($zindex-modal-background - 10);
  background-color: $color-black;

  // Fade for backdrop
  &.fade {
    opacity: 0;
  }

  &.in {
    opacity: 0.5;
  }
}

.modal .close {
  @apply w-bg-primary-200 hover:w-bg-black w-border-primary;
  padding: 0;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 1;
}

// Where all modal content resides
.modal-body {
  position: relative;
  padding-bottom: 2em;

  header {
    @apply w-bg-primary w-text-white;

    h1 {
      @apply w-text-white;

      font-weight: 700;
      font-size: 1.125rem;
      line-height: 130%;
    }
  }
}

@include media-breakpoint-up(sm) {
  .modal-dialog {
    padding: 0 0 2em $menu-width;
  }
}

@include media-breakpoint-up(xl) {
  .modal-dialog {
    max-width: 100em;
    padding: 0 0 2em;
  }
}