vuestic-ui/dist/web-components/src/components/va-modal/VaModal.js

Vue 3 UI Framework

import { w as withConfigTransport } from "../../services/config-transport/withConfigTransport.js";
import { _ as _sfc_main } from "./VaModal.vue_vue_type_script_setup_true_lang.js";
import { _ as _export_sfc } from "../../../plugin-vue_export-helper.js";
const _style_0 = ":root,\n:host {\n  --va-modal-title-margin-bottom: 1.5rem;\n  --va-modal-position: fixed;\n  --va-modal-top: 0;\n  --va-modal-left: 0;\n  --va-modal-display: flex;\n  --va-modal-width: 100%;\n  --va-modal-height: 100%;\n  --va-modal-align-items: center;\n  --va-modal-justify-content: center;\n  --va-modal-overflow: hidden;\n  --va-modal-outline: 0;\n  --va-modal-z-index: unset;\n  --va-modal-container-z-index: 100;\n  --va-modal-basic-duration: 0.3s;\n  --va-modal-opacity-transition: calc(var(--va-modal-basic-duration) * 0.5) cubic-bezier(1, 0.5, 0.8, 1);\n  --va-modal-transform-transition: var(--va-modal-basic-duration) ease;\n  --va-modal-overlay-background-blur-radius: 4px;\n  --va-modal-padding: var(--va-modal-padding-top) var(--va-modal-padding-right) var(--va-modal-padding-bottom) var(--va-modal-padding-left);\n  --va-modal-padding-top: 1.5rem;\n  --va-modal-padding-right: 1.5rem;\n  --va-modal-padding-bottom: 1.5rem;\n  --va-modal-padding-left: 1.5rem;\n  /* Dialog */\n  --va-modal-dialog-min-height: 3.125rem;\n  --va-modal-dialog-height: fit-content;\n  --va-modal-dialog-border-radius: 0.375rem;\n  --va-modal-dialog-margin: 1rem;\n  --va-modal-dialog-box-shadow: 0 4px 70px -18px var(--va-shadow);\n  /* Fullscreen */\n  --va-modal-overlay-opacity-transition: opacity calc(2 * var(--va-modal-basic-duration) / 3) cubic-bezier(1, 0.5, 0.8, 1);\n  --va-modal-overlay-color: rgb(0, 0, 0);\n  --va-modal-overlay-opacity: 0.6;\n  --va-modal-overlay-nested-opacity: 0.1;\n  /* Footer */\n  --va-modal-footer-justify-content: flex-end;\n}\nbody.va-modal-open {\n  overflow: hidden;\n}\n.va-modal-overlay-background--blurred > :not(div[class*=va-]) {\n  filter: blur(var(--va-modal-overlay-background-blur-radius));\n  position: absolute;\n  height: 100%;\n  width: 100%;\n}\n.va-modal {\n  position: var(--va-modal-position);\n  display: var(--va-modal-display);\n  align-items: var(--va-modal-align-items);\n  justify-content: var(--va-modal-justify-content);\n  width: var(--va-modal-width);\n  height: var(--va-modal-height);\n  top: var(--va-modal-top);\n  left: var(--va-modal-left);\n  overflow: var(--va-modal-overflow);\n  outline: var(--va-modal-outline);\n  font-family: var(--va-font-family);\n}\n.va-modal__title {\n  margin-bottom: 1.5rem;\n  font-size: 0.625rem;\n  letter-spacing: 0.6px;\n  line-height: 1.2;\n  font-weight: 700;\n  text-transform: uppercase;\n}\n.va-modal-enter-from .va-modal__dialog, .va-modal-leave-to .va-modal__dialog {\n  opacity: 0;\n  transform: translateY(-30%);\n}\n.va-modal-enter-active .va-modal__dialog, .va-modal-leave-active .va-modal__dialog {\n  transition: opacity var(--va-modal-opacity-transition), transform var(--va-modal-transform-transition);\n}\n.va-modal__dialog {\n  min-height: var(--va-modal-dialog-min-height);\n  max-height: calc(100% - var(--va-modal-dialog-margin));\n  height: var(--va-modal-dialog-height);\n  border-radius: var(--va-modal-dialog-border-radius, var(--va-block-border-radius));\n  margin: var(--va-modal-dialog-margin);\n  box-shadow: var(--va-modal-dialog-box-shadow, var(--va-block-box-shadow));\n  position: relative;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  z-index: 1;\n}\n.va-modal__overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 0;\n  will-change: opacity;\n}\n.va-modal-enter-from .va-modal__overlay--lowest, .va-modal-leave-to .va-modal__overlay--lowest {\n  opacity: 0 !important;\n}\n.va-modal-leave-active .va-modal__overlay.va-modal__overlay--lowest, .va-modal-enter-active .va-modal__overlay.va-modal__overlay--lowest {\n  transition: opacity var(--va-modal-opacity-transition);\n}\n.va-modal-leave-active .va-modal__overlay:not(.va-modal__overlay--lowest) {\n  display: none;\n}\n.va-modal--fullscreen .va-modal__dialog {\n  min-width: 100vw !important;\n  max-width: 100vw;\n  min-height: 100vh !important;\n  border-radius: 0;\n  margin: 0;\n}\n@media all and (max-width: 576px) {\n.va-modal--mobile-fullscreen .va-modal__dialog {\n    margin: 0 !important;\n    min-width: 100vw !important;\n    min-height: 100vh !important;\n    border-radius: 0;\n}\n}\n.va-modal--fixed-layout .va-modal__inner {\n  overflow: hidden;\n  padding: var(--va-modal-padding-top) 0 var(--va-modal-padding-bottom);\n  max-height: calc(100vh - 2rem);\n}\n.va-modal--fixed-layout .va-modal__inner .va-modal__header,\n.va-modal--fixed-layout .va-modal__inner .va-modal__footer,\n.va-modal--fixed-layout .va-modal__inner .va-modal__title {\n  padding: 0 var(--va-modal-padding-right) 0 var(--va-modal-padding-left);\n}\n.va-modal--fixed-layout .va-modal__inner .va-modal__message {\n  padding: 0 var(--va-modal-padding-right) 0 var(--va-modal-padding-left);\n  overflow: auto;\n}\n.va-modal--fixed-layout .va-modal__dialog {\n  overflow: hidden;\n}\n.va-modal--no-padding .va-modal__inner {\n  padding: 0;\n}\n.va-modal__message {\n  margin-bottom: calc(var(--va-modal-padding-bottom) / 2);\n}\n.va-modal__inner {\n  padding: var(--va-modal-padding);\n  overflow: auto;\n  display: flex;\n  flex-flow: column;\n}\n.va-modal__inner > div:last-of-type {\n  margin-bottom: 0;\n}\n.va-modal__close {\n  cursor: pointer;\n  position: absolute;\n  top: calc(var(--va-modal-padding-top) / 2);\n  right: calc(var(--va-modal-padding-right) / 2);\n  color: var(--va-secondary);\n  z-index: 1;\n  justify-self: flex-end;\n}\n.va-modal__close--fullscreen {\n  position: fixed;\n}\n.va-modal__default-cancel-button {\n  margin-right: 0.75rem;\n}\n.va-modal__footer {\n  margin-top: auto;\n  min-height: -moz-fit-content;\n  min-height: fit-content;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: var(--va-modal-footer-justify-content);\n}\n.va-modal__footer:last-of-type {\n  margin-bottom: 0;\n}";
const _VaModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["styles", [_style_0]]]);
const VaModal = withConfigTransport(_VaModal);
export {
  VaModal as V
};
//# sourceMappingURL=VaModal.js.map