fix(pagination): improve responsive and large number styles

shuriken-ui · Apr 11, 2024 · e633f3a · e633f3a
1 parent b4d9f74
commit e633f3a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/src/plugins/components/pagination/index.ts b/src/plugins/components/pagination/index.ts
@@ -43,7 +43,8 @@ export default plugin(({ addComponents, theme }) => {
         //Buttons:button
         '.nui-pagination-button': {
           //Base
-          '@apply flex h-10 w-full items-center justify-center md:w-10': {},
+          '@apply nui-focus flex h-10 w-full items-center justify-center md:w-10':
+            {},
           //Font
           [`@apply font-${config.buttons.button.font.family} text-${config.buttons.button.font.size}`]:
             {},
@@ -75,11 +76,10 @@ export default plugin(({ addComponents, theme }) => {
       //Pagination:link
       '.nui-pagination-link': {
         //Base
-        '@apply flex items-center justify-center mb-4 md:mb-0 inline-flex flex-wrap gap-2 md:gap-1':
+        '@apply nui-focus flex items-center justify-center mb-0 inline-flex flex-wrap gap-2 md:gap-1':
           {},
         //Size
-        [`@apply h-${config.link.size} w-${config.link.size} p-${config.link.padding}`]:
-          {},
+        [`@apply h-${config.link.size} px-${config.link.padding}`]: {},
         //Font
         [`@apply font-${config.link.font.family} text-${config.link.font.size}`]:
           {},
@@ -162,7 +162,7 @@ export default plugin(({ addComponents, theme }) => {
       //Pagination:ellipsis
       '.nui-pagination-ellipsis': {
         //Base
-        [`@apply flex h-${config.ellipsis.size} w-${config.ellipsis.size} items-center justify-center`]:
+        [`@apply select-none flex h-${config.ellipsis.size} w-${config.ellipsis.size} items-center justify-center`]:
           {},
         //Font
         [`@apply font-${config.ellipsis.font.family} text-${config.ellipsis.font.size}`]:

diff --git a/src/plugins/components/pagination/pagination.component.ts b/src/plugins/components/pagination/pagination.component.ts
@@ -51,18 +51,18 @@ export const Pagination = ({
           </a>
         </li>
         <li>
-          <a href="#" class="nui-pagination-ellipsis">
+          <span class="nui-pagination-ellipsis">
             <span>...</span>
-          </a>
+          </span>
         </li>
         <li>
           <a href="#" class="nui-pagination-link">
-            <span>64</span>
+            <span>64000</span>
           </a>
         </li>
       </ul>
       <div class="nui-pagination-buttons">
-        <button type="button" class="nui-pagination-link">
+        <button type="button" class="nui-pagination-button">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -83,7 +83,7 @@ export const Pagination = ({
             ></path>
           </svg>
         </button>
-        <button type="button" class="nui-pagination-link">
+        <button type="button" class="nui-pagination-button">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink"

diff --git a/src/plugins/components/pagination/pagination.config.ts b/src/plugins/components/pagination/pagination.config.ts
@@ -68,7 +68,7 @@ export const defaultConfig = {
     },
   },
   link: {
-    padding: '1',
+    padding: '4',
     size: '10',
     font: {
       family: 'sans',