commitall

account/theme/pages/build/scss/_pagination.scss

@@ -0,0 +1,83 @@
+//
+// Component: Pagination
+//
+
+.pagination-month {
+  .page-item {
+    justify-self: stretch;
+
+    .page-link {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      box-shadow: none;
+    }
+    &:first-child,
+    &:last-child {
+      .page-link {
+        height: 100%;
+        font-size: $font-size-lg;
+      }
+    }
+    .page-month {
+      margin-bottom: 0;
+      font-size: $font-size-lg;
+      font-weight: $font-weight-bold;
+    }
+    .page-year {
+      margin-bottom: 0;
+    }
+  }
+
+  &.pagination-lg {
+    .page-month {
+      font-size: ($font-size-lg * 1.25);
+    }
+  }
+  &.pagination-sm {
+    .page-month {
+      font-size: ($font-size-base);
+    }
+  }
+}
+
+@include dark-mode () {
+  .page-item {
+    &.disabled a,
+    &.disabled .page-link {
+      background-color: lighten($dark, 2.5%) !important;
+      border-color: $gray-600 !important;
+      color: $gray-600;
+    }
+
+    .page-link {
+      color: $primary-alt;
+    }
+
+    &.active {
+      .page-link {
+        background-color: $primary-alt;
+        border-color: $primary-alt;
+        color: $white;
+
+        &:hover,
+        &:focus {
+          color: $gray-400 !important;
+        }
+      }
+    }
+    &:not(.active) {
+      .page-link {
+        background-color: $dark;
+        border-color: $gray-600;
+
+        &:hover,
+        &:focus {
+          color: lighten($primary-alt, 5%);
+          background-color: lighten($dark, 5%);
+        }
+      }
+    }
+  }
+}