app/common/styles/elements/modals.scss

.modal-overlay {
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: $primary-dark;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
}

.modal-overlay.active {
  z-index: 100;
  opacity: 0.5;
  display: block;
  @include fastTransition-all;
}

.modal:not(.uib-modal) {
  width: auto;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 850px;
  min-width: 450px;
  padding: 0.8em 1.5em;
  border: thin $primary-dark solid;
  background-color: $background-01;
  z-index: 101;
  position: fixed;
  overflow: hidden;
  @include fastTransition-all;
  @include mediaQuery(medium) {
    padding: 2.5em;
  }
}

.modal.active {
  @include fastTransition-all;
  display: block;
}

.modal .page-header {
  padding-bottom: 0.7em;
}

.screen-reader-offscreen {
  position: absolute;
  left: -999px;
  width: 1px;
  height: 1px;
  top: auto;
}
.modal__content {
  border-bottom: 1px solid $border-color-02;
  padding-bottom: 1em;
  margin-bottom: 2em;
}
.modal__link {
  display: block;
  margin: 0.8em 0 1em;
  @include mediaQuery(medium) {
    display: inline-block;
    margin: 0.6em 0;
  }
}
// TODO: Use the form__actions pattern / selector
.modal__button-wrapper {
  float: right;
  button {
    margin-bottom: 0.8em;
    margin-right: 0.8em;
    display: inline-block;
    @include mediaQuery(medium) {
      margin-left: 0.8em;
      margin-right: 0;
    }
  }
}

.uib-modal.fade.in {
  opacity: 1;
}
.uib-modal.in .modal-dialog {
  transform: translate(0, 10vh);
  margin-top: 50px;
  .icon__close {
    margin: 0;
    padding: 0;
  }
  .modal-content {
    border-radius: 0;
    border-color: $primary-dark;
  }
}

.modal-backdrop.in {
  opacity: 0.5;
}
.uib-modal__content {
  padding: 1em;
}