@hummingbirdui/hummingbird/src/components/Offcanvas.css

An open-source system designed for rapid development, without sacrificing the granular control of utility-first CSS.

@utility offcanvas {
  @layer base {
    --offcanvas-zindex: 1045;
    --offcanvas-width: 20rem;
    --offcanvas-height: 30vh;
    --offcanvas-padding-x: --spacing(4);
    --offcanvas-padding-y: --spacing(4);
    --offcanvas-color: var(--text-color-default);
    --offcanvas-bg: var(--background-color-subtle);
    --offcanvas-border-width: 1px;
    --offcanvas-border-color: var(--border-color-base);
    --offcanvas-box-shadow: var(--shadow-xl);
    --offcanvas-transition-duration: 0.3s;
    --offcanvas-title-line-height: 1.5;

    @apply fixed bottom-0
    z-[var(--offcanvas-zindex)]
    flex flex-col
    max-w-full
    text-[var(--offcanvas-color)]
    invisible
    bg-[var(--offcanvas-bg)]
    bg-clip-padding
    outline-0
    shadow-[var(--offcanvas-box-shadow)]
    transition-transform
    duration-[var(--offcanvas-transition-duration)];

    &.showing,
    &.show:not(.hiding) {
      @apply translate-none;
    }

    &.showing,
    &.hiding,
    &.show {
      @apply visible;
    }
  }
}

@utility offcanvas-start {
  @layer base {
    @apply top-0 left-0
    w-[var(--offcanvas-width)]
    dark:border-r-[length:var(--offcanvas-border-width)]
    border-r-[var(--offcanvas-border-color)]
    -translate-x-full;
  }
}
@utility offcanvas-end {
  @layer base {
    @apply top-0 right-0
    w-[var(--offcanvas-width)]
    dark:border-l-[length:var(--offcanvas-border-width)]
    border-l-[var(--offcanvas-border-color)]
    translate-x-full;
  }
}
@utility offcanvas-top {
  @layer base {
    @apply top-0 right-0 left-0
    h-[var(--offcanvas-height)]
    max-h-full
    dark:border-b-[length:var(--offcanvas-border-width)]
    border-b-[var(--offcanvas-border-color)]
    -translate-y-full;
  }
}
@utility offcanvas-bottom {
  @layer base {
    @apply right-0 left-0
    h-[var(--offcanvas-height)]
    max-h-full
    dark:border-t-[length:var(--offcanvas-border-width)]
    border-t-[var(--offcanvas-border-color)]
    translate-y-full;
  }
}

.offcanvas-backdrop {
  --backdrop-zindex: 1040;
  --backdrop-bg: --alpha(var(--color-gray-950) / 20%);
  @apply fixed top-0 left-0 z-[var(--backdrop-zindex)] w-screen h-screen bg-[var(--backdrop-bg)];
}

@utility offcanvas-header {
  @layer base {
    @apply flex items-center
    px-[var(--offcanvas-padding-x)] py-[var(--offcanvas-padding-y)];
  }
}

@utility offcanvas-title {
  @layer base {
    @apply mb-0 leading-[var(--offcanvas-title-line-height)];
  }
}

@utility offcanvas-body {
  @layer base {
    @apply grow 
    px-[var(--offcanvas-padding-x)] 
    py-[var(--offcanvas-padding-y)]
    overflow-y-auto;
  }
}

@utility offcanvas-static {
  @layer components {
    @apply static translate-none visible border-0 shadow-none bg-transparent w-auto h-auto;
    .offcanvas-header {
      @apply hidden;
    }
    .offcanvas-body {
      @apply flex grow-0 overflow-y-visible bg-transparent p-0;
    }
  }
}

@utility offcanvas-sm {
  @variant max-sm {
    @apply offcanvas;
  }
  @variant sm {
    @apply offcanvas-static;
  }
}

@utility offcanvas-md {
  @variant max-md {
    @apply offcanvas;
  }
  @variant md {
    @apply offcanvas-static;
  }
}

@utility offcanvas-lg {
  @variant max-lg {
    @apply offcanvas;
  }
  @variant lg {
    @apply offcanvas-static;
  }
}

@utility offcanvas-xl {
  @variant max-xl {
    @apply offcanvas;
  }
  @variant xl {
    @apply offcanvas-static;
  }
}

@utility offcanvas-2xl {
  @variant max-2xl {
    @apply offcanvas;
  }
  @variant 2xl {
    @apply offcanvas-static;
  }
}