fadgram-ui/css/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-top {
  @apply transition-colors;
}
@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- *);
    }
  }
}
@utility 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 block space-x-0 md:space-x-0 space-y-0;

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

@utility 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;
    }
  }
}

@utility 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>");
      }
    }
  }
}

@utility navbar {
  @apply relative flex items-center justify-between 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;
      }
    }
  }
}