💄 Style pagination on catalog show

This commit will add the pagination styling on the catalog show and also DRY up the scss somewhat with extensions.
scientist-softserv · Sep 4, 2024 · cf72804 · cf72804
1 parent 89744af
commit cf72804
Showing 1 changed file with 42 additions and 36 deletions.
diff --git a/app/assets/stylesheets/overrides_with_rivet_styles.scss b/app/assets/stylesheets/overrides_with_rivet_styles.scss
@@ -244,6 +244,43 @@
   }
 }
 
+%paginate-section {
+  margin-top: 1.5rem;
+
+  .pagination {
+    @extend .rvt-pagination;
+
+    .page-item {
+      @extend .rvt-pagination__item;
+
+      height: inherit;
+      width: inherit;
+
+      .page-link {
+        border-color: transparent;
+        border-radius: 0;
+        margin: 0 1px 0 -1px;
+        padding-left: .775rem;
+        padding-right: .775rem;
+        border: 0;
+      }
+
+      .page-link[aria-current=true] {
+        background-color: #fff3f0;
+        box-shadow: 0 .25rem 0 #900;
+        color: inherit;
+      }
+
+      &.disabled {
+        .page-link {
+          background: unset;
+          color: #6E757C;
+        }
+      }
+    }
+  }
+}
+
 // SEARCH RESULTS PAGE
 .blacklight-catalog-index {
   .btn-primary {
@@ -327,42 +364,7 @@
   }
 
   .record-padding {
-    .paginate-section {
-      margin-top: 1.5rem;
-
-      .pagination {
-        @extend .rvt-pagination;
-
-        .page-item {
-          @extend .rvt-pagination__item;
-
-          height: inherit;
-          width: inherit;
-
-          .page-link {
-            border-color: transparent;
-            border-radius: 0;
-            margin: 0 1px 0 -1px;
-            padding-left: .775rem;
-            padding-right: .775rem;
-            border: 0;
-          }
-
-          .page-link[aria-current=true] {
-            background-color: #fff3f0;
-            box-shadow: 0 .25rem 0 #900;
-            color: inherit;
-          }
-
-          &.disabled {
-            .page-link {
-              background: unset;
-              color: #A2ABB3;
-            }
-          }
-        }
-      }
-    }
+    @extend %paginate-section;
   }
 
   .document-metadata {
@@ -506,4 +508,8 @@
       @extend .rvt-button;
     }
   }
+
+  .record-padding {
+    @extend %paginate-section;
+  }
 }