fadgram-ui/components/navbar.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 navbar-* {
    background-color: --value(--color-*);
    color: --value(--text-bg-*);

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

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

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

    &.scrolled {
        background-color: --value(--color-*);
        @apply shadow-xs;
    }

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

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

@layer components {
    .nav {
        @apply flex space-x-2 rtl:space-x-reverse md:space-x-3 md:rtl:space-x-reverse items-center flex-wrap;

        &.vertical {
            @apply flex-col space-x-0 md:space-x-0 space-y-3;

            .nav-link {
                @apply flex w-full truncate space-x-2 rtl:space-x-reverse px-3 py-2;
            }
        }
    }

    .nav-link {
        @apply inline-flex space-x-1 rtl:space-x-reverse items-center text-sm font-medium text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-100 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 transition duration-150 ease-in-out py-2 leading-5;

        &.bordered {
            @apply border-b-2 border-transparent hover:border-gray-300 dark:hover:border-gray-700 focus:border-gray-300 dark:focus:border-gray-700;
        }

        &.active {
            @apply text-gray-900 dark:text-gray-100;

            &.bordered {
                @apply border-primary-400 dark:border-primary-600;

            }
        }
    }


    .navbar-toggle {
        @apply relative p-2 rounded-lg transition-colors w-8 h-8 lg:hidden;

        &:after {
            @apply content-[""];
            @apply absolute top-0 start-0 end-0 bottom-0;
            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(107, 114, 128, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
        }

        @variant hover {
            &:after {
                background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(55, 65, 81, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
            }
        }

        @variant dark {
            &::after {
                background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(209, 213, 219, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
            }

            @variant hover {
                &:after {
                    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
                }
            }
        }
    }

    .navbar {
        @apply relative flex items-center justify-between max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 z-10;

        &.transparent {
            @apply bg-transparent;
        }

        .nav {
            &.navbar-collapse {
                @apply hidden;

                &.expand-sm {
                    @apply sm:flex;
                }

                &.expand-md {
                    @apply md:flex;
                }

                &.expand-lg {
                    @apply lg:flex;
                }

                &.expand-xl {
                    @apply xl:flex;
                }
            }
        }
    }
}