@workday/canvas-kit-css/popup.css

The parent module that contains all Workday Canvas Kit CSS components

.cnvs-disable-body-scroll {
  overflow: hidden!important;
}


@keyframes animation-x52gy {
  0% {
    opacity: 1;
    transform: translate(var(--cnvs-translate-position-x), var(--cnvs-translate-position-y));
  }
  
  100% {
    opacity: 1;
    transform: translate(0);
  }
  
}

.cnvs-popup-card {
  box-sizing: border-box;
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-normal);
  line-height: var(--cnvs-sys-line-height-subtext-large);
  font-size: var(--cnvs-sys-font-size-subtext-large);
  letter-spacing: var(--cnvs-base-letter-spacing-150);
  display: flex;
  position: relative;
  max-width: calc(100vw - var(--cnvs-sys-space-x8));
  flex-direction: column;
  box-shadow: var(--cnvs-sys-depth-5);
  min-height: var(--cnvs-sys-space-zero);
  padding: var(--cnvs-sys-space-x6);
  max-height: var(--cnvs-popup-card-max-height);
  overflow-y: auto;
  animation-name: animation-x52gy;
  animation-duration: 150ms;
  animation-timing-function: ease-out;
  transform-origin: var(--cnvs-popup-card-transform-origin-vertical) var(--cnvs-popup-card-transform-origin-horizontal);
}

.wd-no-animation .cnvs-popup-card {
  animation: none;
}

@media screen and (max-width: 768px) {
.cnvs-popup-card {
  transform-origin: bottom center;
}


}


.cnvs-popup-heading {
  box-sizing: border-box;
  margin-block-end: var(--cnvs-sys-space-x2);
  padding: var(--cnvs-sys-space-x2);
}


.cnvs-popup-close-icon {
  box-sizing: border-box;
  position: absolute;
  inset-inline-end: var(--cnvs-sys-space-x1);
  top: var(--cnvs-sys-space-x1);
}


.cnvs-popup-body {
  box-sizing: border-box;
  overflow-y: auto;
  padding: var(--cnvs-sys-space-x2);
}