htwkalender-pwa/frontend/public/primevue-sass-theme/theme-base/components/overlay/_dialog.scss

// core
.p-dialog-mask.p-component-overlay {
  pointer-events: auto;
}

.p-dialog {
  max-height: 90%;
  transform: scale(1);
}

.p-dialog-content {
  overflow-y: auto;
}

.p-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.p-dialog-footer {
  flex-shrink: 0;
}

.p-dialog .p-dialog-header-icons {
  display: flex;
  align-items: center;
}

.p-dialog .p-dialog-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Fluid */
.p-fluid .p-dialog-footer .p-button {
  width: auto;
}

/* Animation */
/* Center */
.p-dialog-enter-active {
  transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
}
.p-dialog-leave-active {
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.p-dialog-enter-from,
.p-dialog-leave-to {
  opacity: 0;
  transform: scale(0.7);
}

/* Top, Bottom, Left, Right, Top* and Bottom* */
.p-dialog-top .p-dialog,
.p-dialog-bottom .p-dialog,
.p-dialog-left .p-dialog,
.p-dialog-right .p-dialog,
.p-dialog-topleft .p-dialog,
.p-dialog-topright .p-dialog,
.p-dialog-bottomleft .p-dialog,
.p-dialog-bottomright .p-dialog {
  margin: 0.75rem;
  transform: translate3d(0px, 0px, 0px);
}
.p-dialog-top .p-dialog-enter-active,
.p-dialog-top .p-dialog-leave-active,
.p-dialog-bottom .p-dialog-enter-active,
.p-dialog-bottom .p-dialog-leave-active,
.p-dialog-left .p-dialog-enter-active,
.p-dialog-left .p-dialog-leave-active,
.p-dialog-right .p-dialog-enter-active,
.p-dialog-right .p-dialog-leave-active,
.p-dialog-topleft .p-dialog-enter-active,
.p-dialog-topleft .p-dialog-leave-active,
.p-dialog-topright .p-dialog-enter-active,
.p-dialog-topright .p-dialog-leave-active,
.p-dialog-bottomleft .p-dialog-enter-active,
.p-dialog-bottomleft .p-dialog-leave-active,
.p-dialog-bottomright .p-dialog-enter-active,
.p-dialog-bottomright .p-dialog-leave-active {
  transition: all 0.3s ease-out;
}
.p-dialog-top .p-dialog-enter-from,
.p-dialog-top .p-dialog-leave-to {
  transform: translate3d(0px, -100%, 0px);
}
.p-dialog-bottom .p-dialog-enter-from,
.p-dialog-bottom .p-dialog-leave-to {
  transform: translate3d(0px, 100%, 0px);
}
.p-dialog-left .p-dialog-enter-from,
.p-dialog-left .p-dialog-leave-to,
.p-dialog-topleft .p-dialog-enter-from,
.p-dialog-topleft .p-dialog-leave-to,
.p-dialog-bottomleft .p-dialog-enter-from,
.p-dialog-bottomleft .p-dialog-leave-to {
  transform: translate3d(-100%, 0px, 0px);
}
.p-dialog-right .p-dialog-enter-from,
.p-dialog-right .p-dialog-leave-to,
.p-dialog-topright .p-dialog-enter-from,
.p-dialog-topright .p-dialog-leave-to,
.p-dialog-bottomright .p-dialog-enter-from,
.p-dialog-bottomright .p-dialog-leave-to {
  transform: translate3d(100%, 0px, 0px);
}

/* Maximize */
.p-dialog-maximized {
  width: 100vw !important;
  height: 100vh !important;
  top: 0px !important;
  left: 0px !important;
  max-height: 100%;
  height: 100%;
}
.p-dialog-maximized .p-dialog-content {
  flex-grow: 1;
}

.p-confirm-dialog .p-dialog-content {
  display: flex;
  align-items: center;
}

// theme
.p-dialog {
  border-radius: $borderRadius;
  box-shadow: $overlayContainerShadow;
  border: $overlayContentBorder;

  .p-dialog-header {
    border-bottom: $dialogHeaderBorder;
    background: $dialogHeaderBg;
    color: $dialogHeaderTextColor;
    padding: $dialogHeaderPadding;
    border-top-right-radius: $borderRadius;
    border-top-left-radius: $borderRadius;

    .p-dialog-title {
      font-weight: $dialogHeaderFontWeight;
      font-size: $dialogHeaderFontSize;
    }

    .p-dialog-header-icon {
      @include action-icon();
      margin-right: $inlineSpacing;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .p-dialog-content {
    background: $overlayContentBg;
    color: $panelContentTextColor;
    padding: $dialogContentPadding;

    &:last-of-type {
      border-bottom-right-radius: $borderRadius;
      border-bottom-left-radius: $borderRadius;
    }
  }

  .p-dialog-footer {
    border-top: $dialogFooterBorder;
    background: $overlayContentBg;
    color: $panelFooterTextColor;
    padding: $dialogFooterPadding;
    display: flex;
    justify-content: flex-end;
    gap: $inlineSpacing;
    border-bottom-right-radius: $borderRadius;
    border-bottom-left-radius: $borderRadius;
  }

  &.p-confirm-dialog {
    .p-confirm-dialog-icon {
      font-size: $primeIconFontSize * 2;
    }

    .p-confirm-dialog-message:not(:first-child) {
      margin-left: $inlineSpacing * 2;
    }
  }
}