fadgram-ui/components/offcanvas.css

Fadgram UI is a Tailwind CSS plugin that provides a set of custom utility classes to enhance your web development experience. This plugin is designed to work seamlessly with Tailwind CSS, allowing you to quickly and easily style your web applications. ![F

@utility offcanvas-* {
    background-color: --value(--color-*);
    color: --value(--color-bg-*);

    .offcanvas-header {
        color: --value(--color-bg-*);
    }

    .offcanvas-title {
        color: --value(--color-bg-*);
    }

    .nav-link {
        color: --alpha(--value(--color-bg-*) / 80%);

        &:hover,
        &.active {
            color: --value(--color-bg-*);
        }
    }
}

@layer components {
    .offcanvas {
        @apply flex flex-col;
        @apply overflow-hidden;
        @apply fixed top-0 start-0 bottom-0 h-screen;
        @apply transition-transform;
        @apply w-64;
        @apply z-30;
        @apply -translate-x-full;
        @variant rtl{
            @apply translate-x-full;
        }

        &.show {
            @apply translate-x-0;
        }

        &.offcanvas-start {
            @apply start-0 -translate-x-full;
            @variant rtl{
                @apply translate-x-full;
            }
        }

        &.offcanvas-end {
            @apply start-auto end-0 translate-x-full;
            @variant rtl{
                @apply -translate-x-full;
            }
        }

        &.offcanvas-start,
        &.offcanvas-end {
            &.show {
                @apply translate-x-0;
            }

            &.expand-sm {
                @apply sm:translate-x-0;
            }

            &.expand-md {
                @apply md:translate-x-0;
            }

            &.expand-lg {
                @apply lg:translate-x-0;
            }

            &.expand-xl {
                @apply xl:translate-x-0;
            }
        }

        &.offcanvas-top {
            @apply w-full h-[40vh];
            @apply start-0 end-0 top-auto;
            @apply bottom-full;
            @apply translate-x-0 translate-y-0;

            &.show {
                @apply translate-y-full;
            }
        }

        &.offcanvas-bottom {
            @apply w-full h-[40vh];
            @apply start-0 end-0 top-auto;
            @apply top-full;
            @apply translate-x-0 translate-y-0;

            &.show {
                @apply -translate-y-full;
            }
        }
    }

    .offcanvas-header {
        @apply flex-none;
        @apply px-3 py-1;
    }

    .offcanvas-title {
        @apply mb-0 leading-none;
    }

    .offcanvas-body {
        @apply grow;
        @apply p-3;
        @apply overflow-y-auto;
    }

    .offcanvas-close {
        @apply flex items-center justify-center p-2 rounded-lg transition-colors relative w-8 h-8 border-0;
        @apply text-current;
    }
}