fadgram-ui/css/pagination.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 pagination-container {
  @apply md:flex md:items-center md:justify-between md:gap-2;
  @apply text-sm font-semibold;
}
@utility pagination-summary {
  @apply text-sm font-semibold text-muted;
}
@utility pagination {
  @apply isolate inline-flex rounded-md shadow-sm;
  @apply text-sm font-semibold;
}

@utility pagination-item {
  @apply relative inline-flex items-center;
  @apply px-4 py-2;
  @apply -ms-px;
  @apply text-sm font-semibold;
  @apply text-gray-700 dark:text-gray-300;
  @apply hover:bg-gray-100 dark:hover:bg-gray-800;
  @apply border;
  &:disabled {
    @apply opacity-40 cursor-not-allowed pointer-events-none;
  }
  &.active {
    @apply relative z-10;
    @apply bg-primary text-bg-primary;
    @apply border-primary;
    &:disabled {
      @apply opacity-100;
    }
  }
  &:first-child {
    @apply rounded-s-md;
    @apply ms-0;
  }
  &:last-child {
    @apply rounded-e-md;
  }
}