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

helpwave's component and theming library

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

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

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

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

@layer components {
  [data-name="drawer-container"] {
    @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;
    }
  }

  [data-name="drawer-content"] {
    @apply relative flex-col-2 p-4 bg-overlay-background text-overlay-text;
    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"] {
      height: calc(95vh - var(--drawer-depth, 0) * var(--drawer-indent, 0px));
      @variant tablet {
        height: calc(70vh - var(--drawer-depth, 0) * var(--drawer-indent, 0px));
      }
      @variant desktop {
        height: calc(50vh - var(--drawer-depth, 0) * var(--drawer-indent, 0px));
      }
    }

    &[data-alignment="right"], &[data-alignment="left"] {
      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 fixed top-0 left-0 w-screen rounded-b-lg;
      
      transform: translateY(-100%);

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

    &[data-alignment="bottom"] {
      @apply fixed bottom-0 left-0 w-screen rounded-t-lg;
      transform: translateY(100%);

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

    &[data-alignment="left"] {
      @apply fixed top-0 left-0 h-screen 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 fixed top-0 right-0 h-screen rounded-l-lg;
      transform: translateX(100%);

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