From 607f9552440313820152204a9df23e291b779c80 Mon Sep 17 00:00:00 2001
From: Roene <roene@justbetter.nl>
Date: Thu, 5 Sep 2024 11:45:25 +0200
Subject: [PATCH] Styling pagination

---
 resources/css/app.css                      |  1 +
 resources/css/components/pagination.css    | 37 ++++++++++++++++++++++
 resources/views/listing/products.blade.php |  6 ++--
 3 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 resources/css/components/pagination.css

diff --git a/resources/css/app.css b/resources/css/app.css
index 35ff9c3f7..58dd3d261 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,5 +1,6 @@
 @import 'components/vue-slider';
 @import './theme-variables.css';
+@import './components/pagination.css';
 
 @tailwind base;
 @tailwind components;
diff --git a/resources/css/components/pagination.css b/resources/css/components/pagination.css
new file mode 100644
index 000000000..d3dbd98d5
--- /dev/null
+++ b/resources/css/components/pagination.css
@@ -0,0 +1,37 @@
+.pagination .pagination-button:first-child:nth-last-child(3),
+.pagination .pagination-button:first-child:nth-last-child(3) ~ .pagination-button {
+    @apply hidden;
+}
+
+.pagination {
+    @apply flex flex-wrap justify-center gap-x-2 !m-0 !mb-6 max-md:gap-y-4;
+}
+
+.pagination-button {
+    @apply !font-semibold !font-sans !border !border-border !rounded !bg-white !text-neutral !shadow;
+}
+
+.pagination-button.active {
+    @apply !border !border-none !bg-primary !text-white !shadow-none;
+}
+
+.pagination-button:first-child {
+    @apply !mr-auto max-md:hidden;
+}
+
+.pagination-button:last-child {
+    @apply !ml-auto max-md:w-full max-md:-order-1;
+}
+
+.pagination-button:not(:first-child):not(:last-child) {
+    @apply !m-0 !size-14 max-md:flex-1 max-md:w-auto;
+}
+
+.pagination-button:first-child,
+.pagination-button:last-child {
+    @apply h-14 px-6 max-md:!m-0;
+}
+
+.pagination-button[disabled] {
+    @apply opacity-60;
+}
\ No newline at end of file
diff --git a/resources/views/listing/products.blade.php b/resources/views/listing/products.blade.php
index 2a02eb692..57788a951 100644
--- a/resources/views/listing/products.blade.php
+++ b/resources/views/listing/products.blade.php
@@ -10,8 +10,10 @@
     :react="{and: reactiveFilters}"
     :sort-options="sortOptions"
     :inner-class="{
-        button: '!bg-inactive disabled:!bg-opacity-60 !text-white [&.active]:!bg-neutral',
-        sortOptions: '{{ $dropdownClasses }}'
+        button: 'pagination-button',
+        current: 'current-button',
+        sortOptions: '{{ $dropdownClasses }}',
+        pagination: 'pagination'
     }"
     prev-label="@lang('Prev')"
     next-label="@lang('Next')"