Pagination

[deenaedw]

Pagination preview:

Hover and focus states:

---

Rules:

• Pagination is centrally aligned, with a top margin of 30px.
• If the user is on the first page of table results, the back button is disabled. If they are on the last page of table results, next is disabled.
• The current page of results has an active state applied to it.
• If ≤ 7 pages, no need for truncating the pagination (adding "...").
• If a page ≥ 5 is selected, the first page should be available to the left and last page should be available to the right. The first and last page should always be visible.
• An ellipses (...) is shown between non-consecutive pages, using the disabled state style, but the ellipses itself has a 100% opacity, as opposed to 10%.

---

CSS:

/* Pagination */
border-radius: 5px;
background: $white;
border: 1px solid $gray300;
color: $weworkblack;
height: 38px;
padding: 0 20px; /* on each toggle option */

/* Numerical (and …) option */
padding: 0 15px;

/* Hover */
background-color: rgba(0, 0, 0, 0.02);

/* Focus */
background-color: rgba(0, 0, 0, 0.05);

/* Disabled option */
(same as disabled state for buttons)

/* Null (“...”) */
background: none;

/* Active */
(same as primary button style)

---

Pagination (on mobile):

(each tab is ⅓ width of space available to it)