@appearhere/bloom/components/Modal/Window.css

Appear Here's pattern library and styleguide

:root {
  --modal-window-marginal-height: 4.5rem;
}

.light {
  background-color: var(--color-white);
  color: var(--color-greyDark);
}

.dark {
  background-color: var(--color-black);
  color: var(--color-white);
}

.root {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  clear: both;
  z-index: var(--z-modal);
}

.header {
  position: absolute;
  top: 0;
  width: 100%;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  height: var(--modal-window-marginal-height);
}

.body {
  width: 100%;
  height: 100%;
  padding: var(--size-large);
  overflow-x: hidden;
  overflow-y: auto;
}

.hasHeader .body,
.hasFooter .body {
  max-height: calc(100% - var(--modal-window-marginal-height));
}

.hasHeader .body {
  margin-top: var(--modal-window-marginal-height);
}

.hasFooter .body {
  margin-bottom: var(--modal-window-marginal-height);
}

.hasHeader.hasFooter .body {
  max-height: calc(100% - (var(--modal-window-marginal-height) * 2));
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
  height: var(--modal-window-marginal-height);
}

.title {
  padding-top: var(--size-sm-i);
  padding-bottom: var(--size-sm-i);
  display: inline-block;
  color: currentColor;
  composes: fontRegular from '../../globals/typography.css';
  font-weight: var(--fontweight-demi);
}

@media(--modal-lg) {
  .root {
    width: 94vw;
    max-height: 94vh;
    max-width: 37.5rem;
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate3d(-50%, -50%, 0);
    border-radius: 4px;
  }

  .header {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }

  .footer {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }

  .hasHeader .body,
  .hasFooter .body {
    max-height: calc(94vh - var(--modal-window-marginal-height));
  }

  .hasHeader.hasFooter .body {
    max-height: calc(94vh - (var(--modal-window-marginal-height) * 2));
  }
}