@helpwave/hightide/dist/style/uncompiled/theme/components/drawer.css

helpwave's component and theming library

@keyframes expand-top {
  from {
    transform: translateY(-100%) translateX(-50%);
  }
  to {
    transform: translateY(0) translateX(-50%);
  }
}

@keyframes expand-bottom {
  from {
    transform: translateY(100%) translateX(-50%);
  }
  to {
    transform: translateY(0) translateX(-50%);
  }
}

@keyframes expand-left {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes expand-right {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@layer components {
  .drawer-screen-cover {
    @apply fixed inset-0 h-screen w-screen;
    &:not([data-open]) {
      @apply touch-none pointer-events-none;
    }
  }

  [data-name="drawer-background"] {
    @apply fixed inset-0 w-screen h-screen bg-overlay-shadow;
    &[data-state="opening"] {
      animation-duration: var(--animation-duration-in);
    }

    &[data-state="closing"] {
      animation-duration: var(--animation-duration-out);
      animation-direction: reverse;
    }

    &[data-state="opening"],
    &[data-state="closing"] {
      animation-name: fade-in;
      animation-fill-mode: forwards;
    }
  }

  .drawer-container {
    @apply fixed bg-overlay-background text-overlay-text overflow-hidden;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;

    &[data-state="opening"] {
      animation-duration: var(--animation-duration-in);
    }

    &[data-state="closing"] {
      animation-duration: var(--animation-duration-out);
      animation-direction: reverse;
    }

    &[data-alignment="top"],
    &[data-alignment="bottom"] {
      width: calc(min(256 * var(--spacing), 100vw));
      height: calc(95vh - var(--drawer-depth, 0) * var(--drawer-indent, 0px));
      @variant tablet {
        height: calc(95vh - var(--drawer-depth, 0) * var(--drawer-indent, 0px));
      }
      @variant desktop {
        height: calc(95vh - var(--drawer-depth, 0) * var(--drawer-indent, 0px));
      }
    }

    &[data-alignment="right"],
    &[data-alignment="left"] {
      @apply h-screen;
      width: calc(95vw - var(--drawer-depth, 0) * var(--drawer-indent, 0px));
      @variant tablet {
        width: calc(70vw - var(--drawer-depth, 0) * var(--drawer-indent, 0px));
      }
      @variant desktop {
        width: calc(50vw - var(--drawer-depth, 0) * var(--drawer-indent, 0px));
      }
    }

    &[data-alignment="top"] {
      @apply top-0 left-1/2 rounded-b-lg;

      transform: translateY(-100%) translateX(-50%);

      &[data-state="opening"],
      &[data-state="closing"] {
        animation-name: expand-top;
      }
      &[data-state="opened"] {
        transform: translateY(0) translateX(-50%);
      }
    }

    &[data-alignment="bottom"] {
      @apply bottom-0 left-1/2 rounded-t-lg;
      transform: translateY(100%) translateX(-50%);

      &[data-state="opening"],
      &[data-state="closing"] {
        animation-name: expand-bottom;
      }
      &[data-state="opened"] {
        transform: translateY(0) translateX(-50%);
      }
    }

    &[data-alignment="left"] {
      @apply top-0 left-0 rounded-r-lg;
      transform: translateX(-100%);

      &[data-state="opening"],
      &[data-state="closing"] {
        animation-name: expand-left;
      }
      &[data-state="opened"] {
        transform: translateX(0);
      }
    }

    &[data-alignment="right"] {
      @apply top-0 right-0 rounded-l-lg;
      transform: translateX(100%);

      &[data-state="opening"],
      &[data-state="closing"] {
        animation-name: expand-right;
      }
      &[data-state="opened"] {
        transform: translateX(0);
      }
    }
  }

  .drawer-close-button-positioner {
    @apply absolute right-2 top-2;
  }

  .drawer-content {
    @apply flex flex-col-0 h-full w-full overflow-y-auto;
  }

  .drawer-header {
    @apply sticky top-0 bg-overlay-background pt-4 px-4;
  }

  .drawer-title {
    @apply typography-title-lg mr-8;
  }

  .drawer-description {
    @apply text-description;
  }

  .drawer-footer {
    @apply sticky bottom-0 bg-overlay-background pb-4 px-4;
  }

  .drawer-main-content {
    @apply flex-col-2 px-4 grow;

    &[data-no-outer-scrolling] {
      @apply overflow-hidden h-full;
    }
  }
}