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

The parent module that contains all Workday Canvas Kit CSS components

@keyframes animation-d5h456 {
  0% {
    background: none;
  }
  
  100% {
    background: var(--cnvs-sys-color-bg-overlay);
  }
  
}

.cnvs-modal-overlay-container {
  box-sizing: border-box;
  position: fixed;
  top: var(--cnvs-sys-space-zero);
  left: var(--cnvs-sys-space-zero);
  width: 100vw;
  height: 100vh;
  background: var(--cnvs-sys-color-bg-overlay);
  animation-duration: 0.3s;
  animation-name: animation-d5h456;
}

.wd-no-animation .cnvs-modal-overlay-container {
  animation: none;
}

.cnvs-modal-overlay-container>div {
  max-height: 100%;
  display: flex;
  position: absolute;
  left: var(--cnvs-sys-space-zero);
  top: var(--cnvs-sys-space-zero);
  justify-content: center;
  align-items: center;
  height: 100%;
  width: var(--cnvs-modal-overlay-container-container-center);
}

@media screen and (max-width: 768px) {
.cnvs-modal-overlay-container {
  height: 100%;
}

.cnvs-modal-overlay-container>div {
  align-items: end;
}


}


.cnvs-modal-card {
  box-sizing: border-box;
  margin: var(--cnvs-sys-space-x10);
  width: calc(calc(var(--cnvs-sys-space-x20) * 5) + var(--cnvs-sys-space-x10));
  border-width: var(--cnvs-sys-space-zero);
  outline: 0.0625rem solid transparent;
  box-shadow: var(--cnvs-sys-depth-6);
}

@media screen and (max-width: 768px) {
.cnvs-modal-card {
  margin: var(--cnvs-sys-space-x4);
  padding: var(--cnvs-sys-space-x4);
  border-radius: var(--cnvs-sys-space-x6);
}


}


.cnvs-modal-heading {
  box-sizing: border-box;
}

@media screen and (max-width: 768px) {
.cnvs-modal-heading {
  margin-block-end: var(--cnvs-sys-space-zero);
  padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x1);
}


}


.cnvs-modal-overflow-overlay {
  box-sizing: border-box;
  overflow: hidden auto;
}

.cnvs-modal-overflow-overlay>div {
  max-height: inherit;
}


.cnvs-modal-body {
  box-sizing: border-box;
}

@media screen and (max-width: 768px) {
.cnvs-modal-body {
  margin-block-end: var(--cnvs-sys-space-zero);
  padding: var(--cnvs-sys-space-x1) var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2);
}


}