@postnord/web-components/collection/components/feedback/pn-modal/pn-modal.css

PostNord Web Components

/* Global utility variables */
/* Input styles */
/* Transition variables */
pn-modal .pn-modal {
  position: fixed;
  bottom: round(50%, 1px);
  left: round(50%, 1px);
  width: round(95%, 1px);
  max-width: 45em;
  max-height: round(85vh, 1px);
  border: 0.0625em solid #f3f2f2;
  border-radius: 0.5em;
  transform: translate(-50%, 60%);
  box-shadow: 0 0.25em 0.875em rgba(0, 0, 0, 0.18), 0 1.625em 3.5em rgba(0, 0, 0, 0.22);
  background-color: #ffffff;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  transition: visibility 0s linear 0.55s, opacity 0.25s 0.15s, transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);
}

pn-modal[data-open] .pn-modal {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: visibility 0s linear 0s, opacity 0.55s, transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);
  transform: translate(round(-50%, 1px), round(50%, 1px));
}

/*---------------------------------------Content slot-------------------------------------------*/
.pn-modal > .pn-modal-content {
  width: 100%;
  height: round(100%, 1px);
  padding: 1.5em;
}

/*---------------------------------------/Content slot-------------------------------------------*/
/*---------------------------------------Close Button-------------------------------------------*/
.pn-modal > .pn-modal-close-button {
  position: absolute;
  right: 1em;
  top: 1em;
}

/*---------------------------------------/Close Button-------------------------------------------*/
/*---------------------------------------Button slot-------------------------------------------*/
pn-modal .pn-modal > [slot=buttons] {
  position: static;
  width: 100%;
  background-color: #ffffff;
  border-top: 0.0625em solid #d3cecb;
  padding: 0.5em 1em;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap-reverse;
}
pn-modal .pn-modal > [slot=buttons] > * {
  margin: 0.5em;
}

/*---------------------------------------/Button slot-------------------------------------------*/
/*---------------------------------------Backdrop-------------------------------------------*/
pn-modal > .pn-modal-backdrop {
  position: fixed;
  width: round(120vw, 1px);
  height: round(120vh, 1px);
  top: round(-10vh, 1px);
  left: round(-10vw, 1px);
  background-color: #000000;
  opacity: 0;
  z-index: 9;
  visibility: hidden;
  transition: visibility 0s linear 0.3s, opacity 0.3s;
}

pn-modal[data-open] .pn-modal-backdrop {
  opacity: 0.55;
  visibility: visible;
  transition: visibility 0s linear 0s, opacity 0.3s;
}

/*---------------------------------------/Backdrop-------------------------------------------*/
/*---------------------------------------Mobile-------------------------------------------*/
@media screen and (max-width: 30em) {
  pn-modal .pn-modal {
    width: round(100%, 1px);
    max-height: round(95vh, 1px);
    bottom: 0;
    transform: translate(round(-50%, 1px), round(10%, 1px));
    border-radius: 0.5em 0.5em 0 0;
  }
  pn-modal[data-open] .pn-modal {
    transform: translate(round(-50%, 1px), 0);
  }
  pn-modal .pn-modal > [slot=buttons] {
    justify-content: center;
  }
  pn-modal .pn-modal > [slot=buttons] > * {
    flex: 1 0 auto;
  }
}
/*---------------------------------------/Mobile-------------------------------------------*/
/*---------------------------------------Modern browser styles-------------------------------------------*/
@supports (position: sticky) {
  pn-modal .pn-modal > [slot=buttons] {
    position: sticky;
    bottom: 0;
    left: 0;
    z-index: 2;
  }
  pn-modal .pn-modal > .pn-modal-close-button {
    position: sticky;
    left: calc(100% - 3em);
    margin: 1em 1em 0 0;
    z-index: 10;
  }
  pn-modal .pn-modal > .pn-modal-content {
    margin-top: -3em;
  }
}
/*---------------------------------------Modern browser styles-------------------------------------------*/