Solo-Web-Works/CWC
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

✨feature: Style pagination
Deploy to Dreamhost (dev) / build (push) Successful in 34s
Details
Sync TODOs with Issues / sync_todos (push) Successful in 5s
Details

Browse Source
This commit is contained in:
Keith Solomon
2026-07-05 16:13:21 -05:00
parent 1544a7a04b
commit 43e3316a70
4 changed files with 37 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/components/pagination.css
+19 -25
View File
@@ -1,35 +1,29 @@
/* Post index pagination styles */
.pagination {
.nav-links {
@apply hidden md:flex items-center justify-center mt-12;
.nav-links {
@apply hidden md:flex items-center justify-center mt-12;
.page-numbers {
@apply hidden md:flex items-center justify-center h-10 p-4 text-base font-medium transition duration-300 rounded stroke-primary text-primary hover:bg-info hover:text-light hover:stroke-info focus-visible:bg-info focus-visible:text-light focus-visible:stroke-info focus-visible:outline-none;
.page-numbers {
@apply hidden md:flex items-center justify-center h-16 w-16 text-32px font-quincy font-medium transition duration-300 rounded stroke-primary text-primary hover:bg-info hover:text-light hover:stroke-info focus-visible:bg-info focus-visible:text-light focus-visible:stroke-info focus-visible:outline-none;
}
.page-numbers.current { @apply text-light whitespace-nowrap bg-info ring-offset-2 hover:bg-primary hover:stroke-primary focus-visible:bg-info; }
.prev, .next { @apply flex gap-4 w-fit; }
}
.page-numbers.current {
@apply text-light whitespace-nowrap bg-info ring-offset-2 hover:bg-primary hover:stroke-primary focus-visible:bg-info;
& a, & span {
border-radius: 4px;
color: var(--color-cwc-blue-01) !important;
margin: 0 5px;
padding: .25rem .5rem;
text-decoration: none;
}
.prev, .next {
@apply flex gap-4;
& .current, & a:hover {
background: color-mix(in oklch, var(--color-cwc-blue-03), white 50%) !important;
color: var(--color-cwc-blue-01) !important;
padding: .25rem .5rem;
}
}
& a, & span {
border: 1px solid #ddd;
border-radius: 4px;
color: #3857BC !important;
margin: 0 5px;
padding: .25rem .5rem;
text-decoration: none;
}
& .current, & a:hover {
background: #3857BC !important;
border-color: #3857BC !important;
color: #fff !important;
padding: .25rem .5rem;
}
}