improve pagination

2026-06-05 15:49:21 +00:00 · 2024-07-23 19:54:07 +02:00
parent 918e93d211
commit b022ebb80e
6 changed files with 718 additions and 169 deletions
@@ -0,0 +1,37 @@
+@import "colors";
+
+.pagination {
+  text-align: center;
+  gap: 10px;
+
+  button {
+    background-color: $secondary-neutral-light-color;
+    min-width: 37px;
+
+    &:hover {
+      background-color: darken($secondary-neutral-light-color, 10%);
+    }
+
+    &:disabled {
+      color: #fff;
+      background-color: darken($secondary-neutral-light-color, 5%);
+    }
+
+    &.active,
+    &.active:hover {
+      background-color: $primary-neutral-color;
+      color: white;
+      border-radius: 50%;
+    }
+
+    &:first-of-type,
+    &:last-of-type {
+      // previous and next buttons
+      &:disabled {
+        // Hide the arrows when they are disabled, without
+        // changing the layout of the navigation
+        opacity: 0;
+      }
+    }
+  }
+}