spur-tailwind/css/components/takeover.css

Spur web UI

.takeover {
  @apply fixed inset-0 z-50 min-h-screen bg-filter-grey overflow-auto pointer-events-none;
  transform: translateY(100%);
  transition: transform 300ms ease-in-out;
  will-change: transform;
}

.takeover.is-active {
  @apply pointer-events-auto;
  transform: translateY(0);
}

.takeover-close-btn {
  @apply absolute block z-50;
  width: 2.375rem;
  height: 2.375rem;
  top: 2.5rem;
  right: 2.5rem;
}

.takeover-close-btn:focus {
  outline: none;
}

.takeover-container {
  @apply relative mx-auto p-8 max-w-xl w-full bg-white min-h-screen;

  @screen sm {
    @apply py-25;
  }
}

.takeover-form {
  @apply mx-auto max-w-sm;
}

.takeover-breakout {
  @apply relative -mx-8 w-screen overflow-hidden;

  @media (min-width: 544px) {
    width: 100vw;
    margin-left: calc((-100vw + 30rem) / 2);
  }

  @media (min-width: 960px) {
    width: 200%;
    margin-left: -50%;
  }
}