vuestic-ui/dist/esm-node/VaModal.css

Vue 3 UI Framework

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