Fix pagination styling (ARC-178)

[ssciolla]

What it looks like now:

[rshiggin]

It looks to me like !important is overriding our style in search_results.scss

.page-link {
  color: var.$color-teal-400;
}

Prod is also using a darker initial color: color: var(--color-indigo-500); See below. Prod is using indigo on active, too.

[ssciolla]

I moved the styles over to _search_results.scss: b0bb1a5

I think I prefer the color-blue-400; rather than adding indigo to the palette. What do you think?

[rshiggin]

hover is generally used to change an active item for accessibility. In this instance, hover is identical to the non-hover state.

We are inheriting some slight shading on hover from bootstrap, but usually two changes are necessary to be accessible enough.

Prod hover, for example, 1) shades the page number box more and 2) removes the initial underline on the number itself.

.page-link:hover {
    z-index: 2;
    color: #0056b3;
    text-decoration: none;
    background-color: #e9ecef;
    border-color: #dee2e6;
}

!important does seem necessary for the hover value to override bootstrap.

[ssciolla]

I think I've addressed this with my changes. For non-active items, the hover background is the same color as prod. The text color is color-blue-400, which I prefer over the indigo as stated above. There is underlining when no hovering is happening, and no text decoration when hovered on. For active items, there is (or should) be no hover behavior and no text decoration, which seems consistent with prod. There may be some slight differences in the gray border on non-active items, but I'm not certain. b0bb1a5 ddf5bb9

[rshiggin]

Again, !important looks like it's overriding our own _search_results.scss

.page-item.active .page-link {
  background-color: var.$color-background-primary;
  border-color: var.$color-background-primary;
}

And prod is using

.page-item.active .page-link {
    background-color: var(--color-indigo-500);
    border-color: var(--color-indigo-500);
}

[ssciolla]

Consolidated. Using blue over indigo (let me know about that above). b0bb1a5