Adjust buttons within pagination

HHS · Dec 20, 2024 · 97ba6d3 · 97ba6d3
1 parent 9dea889
commit 97ba6d3
Showing 1 changed file with 35 additions and 0 deletions.
diff --git a/frontend/src/styles/_uswds-theme-custom-styles.scss b/frontend/src/styles/_uswds-theme-custom-styles.scss
@@ -343,3 +343,38 @@ i.e.
   padding-top: calc(1rem + 3vw);
   padding-bottom: calc(1rem + 3vw);
 }
+
+// truss adds usa-button classes and button elements in the pagination component
+// overriding button styles for pagination
+.usa-pagination__button.usa-button,
+button.usa-pagination__button.usa-button {
+  align-items: center;
+  background-color: color("mint-5");
+  border-width: 0px;
+  color: color("gray-warm-90");
+  display: inline-flex;
+  justify-content: center;
+  text-decoration: none;
+  padding: units(1);
+  width: 100%;
+
+  &:hover,
+  &:focus,
+  &:active {
+    color: white;
+    background-color: color("mint-70");
+  }
+}
+
+.usa-pagination button.usa-button.usa-current,
+.usa-pagination .usa-button.usa-current {
+  color: white;
+  background-color: color("mint-40");
+
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: color("mint-80");
+    color: white;
+  }
+}