From 922fd7ffde05b7e26612ec5e9a22c970cf5149e3 Mon Sep 17 00:00:00 2001
From: Domizio Demichelis
Date: Tue, 6 Jul 2021 14:52:58 +0700
Subject: [PATCH] better tailwind rules
---
docs/extras/tailwind.md | 105 ++++++++++++++++++++++++++--------------
1 file changed, 69 insertions(+), 36 deletions(-)
diff --git a/docs/extras/tailwind.md b/docs/extras/tailwind.md
index ac1b01d3b..b0218e1c7 100644
--- a/docs/extras/tailwind.md
+++ b/docs/extras/tailwind.md
@@ -3,7 +3,7 @@ title: Tailwind
---
# Tailwind Extra Styles
-Tailwind allows to apply styles to any DOM element, so - if you use it - you don't actually need a special extra to produce a different output. You can use the standard unstyled pagy helpers: i.e. the default `pagy_nav` and the `pagy_nav_js`and `pagy_nav_combo_js` provided by the [navs](navs.md) extra, and apply the styles to their classes.
+Tailwind allows to apply styles to any DOM element, so you don't actually need a special extra to produce a different output. You can use the standard unstyled pagy helpers: i.e. the default `pagy_nav` and the `pagy_nav_js`and `pagy_nav_combo_js` provided by the [navs](navs.md) extra, and apply the styles to their classes.
## Synopsis
@@ -12,43 +12,76 @@ See the [navs](navs.md) extra if you use `pagy_nav_js` or `pagy_combo_nav_js`.
Copy and customize the following basic rules to apply the styles to the pagy CSS classes:
```scss
-.pagy-nav,
-.pagy-nav-js,
-.pagy-combo-nav-js {
- @apply inline-flex shadow-md;
+@import "~tailwindcss/base";
+
+
+.pagy-nav,
+.pagy-nav-js {
+ @apply flex space-x-2;
}
-.pagy-nav.pagination,
-.pagy-nav-js.pagination,
-.pagy-combo-nav-js.pagination {
- @apply border border-gray-600 rounded-sm;
+
+.pagy-nav .page a,
+.pagy-nav .page.active,
+.pagy-nav .page.prev.disabled,
+.pagy-nav .page.next.disabled,
+.pagy-nav-js .page a,
+.pagy-nav-js .page.active,
+.pagy-nav-js .page.prev.disabled,
+.pagy-nav-js .page.next.disabled {
+ @apply block rounded-lg px-3 py-1 text-sm text-gray-500 font-semibold bg-gray-200 shadow-md;
+ &:hover{
+ @apply bg-gray-300;
+ }
+ &:active{
+ @apply bg-gray-400 text-white;
+ }
}
-.pagy-nav .page,
-.pagy-nav-js .page,
-.pagy-combo-nav-js .page,
+
+.pagy-nav .page.prev.disabled,
+.pagy-nav .page.next.disabled,
+.pagy-nav-js .page.prev.disabled,
+.pagy-nav-js .page.next.disabled {
+ @apply text-gray-400 cursor-default;
+ &:hover {
+ @apply text-gray-400 bg-gray-200;
+ }
+ &:active {
+ @apply text-gray-400 bg-gray-200;
+ }
+}
+
+.pagy-nav .page.active,
+.pagy-nav-js .page.active {
+ @apply text-white cursor-default bg-gray-400;
+ &:hover {
+ @apply text-white bg-gray-400;
+ }
+ &:active {
+ @apply bg-gray-400 text-white;
+ }
+}
+
+
+.pagy-combo-nav-js {
+ @apply flex max-w-max rounded-full px-3 py-1 text-sm text-gray-500 font-semibold bg-gray-200 shadow-md;
+}
+
.pagy-combo-nav-js .pagy-combo-input {
- @apply text-gray-700 border-r border-gray-600 px-3 py-2 text-sm leading-tight font-medium;
-}
-.pagy-nav .page:hover,
-.pagy-nav-js .page:hover {
- @apply text-gray-900;
-}
-.pagy-nav .disabled,
-.pagy-nav-js .disabled,
-.pagy-combo-nav-js .disabled {
- @apply cursor-not-allowed;
-}
-.pagy-nav .active,
-.pagy-nav-js .active {
- @apply text-blue-500;
-}
-.pagy-nav .prev,
-.pagy-nav-js .prev,
-.pagy-combo-nav-js .prev {
- @apply text-gray-900;
-}
-.pagy-nav .next,
- .pagy-nav-js .next,
- .pagy-combo-nav-js .next {
- @apply text-gray-900 border-r border-transparent;
+ @apply bg-white px-2 rounded-sm
+}
+
+.pagy-combo-nav-js .page.prev,
+.pagy-combo-nav-js .page.next {
+ &:hover {
+ @apply text-gray-800;
+ }
+ &:active {
+ @apply text-gray-800;
+ }
+}
+
+.pagy-combo-nav-js .page.prev.disabled,
+.pagy-combo-nav-js .page.next.disabled {
+ @apply text-gray-400 cursor-default;
}
```