better tailwind rules

ddnexus · Jul 6, 2021 · 922fd7f · 922fd7f
1 parent 28983e6
commit 922fd7f
Showing 1 changed file with 69 additions and 36 deletions.
diff --git 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;
 }
 ```