spur-tailwind/css/components/slideover.css

Spur web UI

.slideover {
  @apply fixed inset-0 z-50 min-h-screen w-full bg-spur-black-half overflow-hidden pointer-events-none opacity-0;
  top: 0;
  transition: opacity 300ms ease-in-out;
  will-change: transform;
}

.slideover-inner {
  @apply fixed right-0 flex flex-col max-w-xl w-full h-screen;
  transform: translateX(100%);
  transition: transform 300ms ease-in-out;
  will-change: transform;

  &.is-small {
    @apply max-w-sm;
  }

  &.is-large {
    @apply .max-w-2xl;
  }
}

.slideover.is-active {
  @apply pointer-events-auto opacity-100;

  & .slideover-inner {
    transform: translateX(0);
  }
}

.slideover-header {
  @apply flex justify-between px-5 py-4 bg-buzz-purple;
}

.slideover-btn {
  @apply flex items-center text-white;
}

.slideover-container {
  @apply relative flex-grow py-8 px-8 w-full bg-white h-full overflow-auto;
}