#

# Pagy Stylesheet

Pagy includes a couple of CSS files that you can download, link, or copy, and integrate with your app.

You don't need any stylesheets if you use the pagy :bootstrap or :bulma helpers and styles.

# Pagy Wand

The Pagy Wand integrates pagy with your app's themes interactively.

Should you need finer control, the pagy.css and pagy-tailwind.css calculate more specific variables, that you can manually override.

To ensure a minimalistic valid output, complete with all the ARIA attributes, pagy outputs a single line with the minimum number of tags and attributes required to identify all the parts of the nav bars:

The output of series_nav and series_nav_js helpers, is a series of a tags inside a nav tag wrapper.
The disabled links are so because they are missing the href attributes.
The pagy nav and pagy nav-js classes are assigned to the nav tag.

Tips

You can target the gap with .pagy a:[role="separator"]
You can target the previous and next links by using .pagy a:first-child and .pagy a:last-child pseudo classes
Check the stylesheet comment to target other specific elements.

Color variables are calculated automatically, however you can customize any color by just overriding its variable.

Use the Pagy Wand right in your app or in the Demo app.

pagy.css

pagy.css 2.38KB

stylesheet_path = Pagy::ROOT.join('stylesheets/pagy.css')

pagy.css
.pagy {
  --B: 1;
  --H: 0;
  --S: 0;
  --L: 50;
  --A: 1;
  --spacing: 0.125rem;
  --padding: 0.75rem;
  --rounding: 1.75rem;
  --border-width: 0rem;
  --font-size: 0.875rem;
  --font-weight: 600;
  --line-height: 1.75;

  --text:               hsla(var(--H) var(--S) calc(var(--L) - (25 * var(--B))) / var(--A));
  --text-hover:         hsla(var(--H) var(--S) calc(var(--L) - (30 * var(--B))) / var(--A));
  --text-current:       hsla(var(--H) var(--S) calc(100 * (var(--B) + 1)) / var(--A));
  --background:         hsla(var(--H) var(--S) calc(var(--L) + (30 * var(--B))) / var(--A));
  --background-hover:   hsla(var(--H) var(--S) calc(var(--L) + (20 * var(--B))) / var(--A));
  --background-current: hsla(var(--H) var(--S) var(--L) / var(--A));
  --background-input:   hsla(var(--H) var(--S) calc(var(--L) + (45 * var(--B))) / var(--A));

  color: var(--text);
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  display: flex;
}

.pagy > :not([hidden]) ~ :not([hidden]) {
  margin-left: calc(var(--spacing) * (1 - var(--space-reverse, 0)));
  margin-right: calc(var(--spacing) * var(--space-reverse, 0));
}

.rtl .pagy > :not([hidden]) ~ :not([hidden]) {
  --space-reverse: 1;
}

.pagy a:not([role="separator"]) { /* all but gaps */
  display: block;
  text-decoration: none;
  background-color: var(--background);
  padding: calc(var(--padding) / 3) var(--padding);
  border: var(--border-width) solid var(--background-current);
  border-radius: var(--rounding);
  color: inherit;
}

.pagy a[href]:hover { /* all links on hover */
  background-color: var(--background-hover);
  color: var(--text-hover)
}

.pagy a:not([href]) { /* all but links */
  cursor: default;
}

.pagy a[role="link"]:not([aria-current]) { /* disabled links */
  opacity: .6;
}

.pagy a[aria-current] {  /* current page */
  background-color: var(--background-current);
  color: var(--text-current);
  border-color: var(--text);
}

.pagy label {
  white-space: nowrap;
  display: inline-block;
  border: var(--border-width) solid var(--background-current);
  border-radius: var(--rounding);
  background-color: var(--background);
  padding: calc((var(--padding) / 3) - var(--border-width)) var(--padding);
}

.pagy label input {
  all: unset;
  border: var(--border-width) solid var(--background-current);
  border-radius: calc(var(--rounding) / 2) !important;
  background-color: var(--background-input);
}

pagy-tailwind.css

pagy-tailwind.css 2.28KB

stylesheet_path = Pagy::ROOT.join('stylesheets/pagy-tailwind.css')

pagy-tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .pagy {
    --B: 1;
    --H: 0;
    --S: 0;
    --L: 50;
    --spacing: 0.125rem;
    --padding: 0.75rem;
    --rounding: 1.75rem;
    --border-width: 0rem;
    --font-size: 0.875rem;
    --font-weight: 600;
    --line-height: 1.75;

    --text:               hsl(var(--H) var(--S) calc(var(--L) - (30 * var(--B))));
    --text-hover:         hsl(var(--H) var(--S) calc(var(--L) - (33 * var(--B))));
    --text-current:       hsl(var(--H) var(--S) calc(100 * (var(--B) + 1)));
    --background:         hsl(var(--H) var(--S) calc(var(--L) + (30 * var(--B))));
    --background-hover:   hsl(var(--H) var(--S) calc(var(--L) + (20 * var(--B))));
    --background-current: hsl(var(--H) var(--S) var(--L));
    --background-input:   hsl(var(--H) var(--S) calc(var(--L) + (45 * var(--B))));
    --opacity: 1;

    @apply flex space-x-[var(--spacing)] font-[var(--font-weight)]
    text-[length:var(--font-size)] text-[var(--text)]
    leading-[var(--line-height)];

    a:not([role="separator"]) { /* all but gaps */
      @apply block rounded-[var(--rounding)] px-[var(--padding)] py-[calc(var(--padding)/3)] bg-[var(--background)]
      border-solid  border-[var(--background-current)] border-[length:var(--border-width)] opacity-[var(--opacity)];
    }

    a[href]:hover { /* all links on hover */
      @apply bg-[var(--background-hover)] text-[var(--text-hover)];
    }

    a:not([href]) { /* all but links */
      @apply cursor-default
    }

    a[role="link"]:not([aria-current]) { /* disabled links */
      @apply opacity-[calc(var(--opacity)*.6)];
    }

    a[aria-current] {  /* current page */
      @apply bg-[var(--background-current)] text-[var(--text-current)];
    }

    label {
      @apply inline-block whitespace-nowrap rounded-[var(--rounding)] px-[var(--padding)]
      py-[calc(var(--padding)/3-var(--border-width))]
      bg-[var(--background)] border-solid border-[length:var(--border-width)] border-[var(--background-current)];

      input {
        @apply text-[var(--text)] text-[length:var(--font-size)] leading-[var(--line-height)] rounded-[calc(var(--rounding)/2)]
        font-[var(--font-weight)] bg-[var(--background-input)] border-[length:var(--border-width)] border-[var(--background-current)];
      }
    }
  }
}