fa/breadcrumb-the-shire
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: replace pagination text labels with chevron icons in Grid.js tables

Browse Source 
Use CSS font-size:0 to visually hide prev/next button text and render
Bootstrap Icons chevrons via ::before pseudo-elements. Button text stays
in the DOM for screen readers. Applies globally to all Grid.js tables.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-04-05 18:11:23 +02:00
parent 28d66dea33
commit aeb9c9f9fb
1 changed files with 21 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
web/css/vendor-overrides/gridjs.css
View File

@@ -306,6 +306,27 @@
.gridjs-pagination .gridjs-pages button:last-child {
border-right: none;
}
.gridjs-pagination .gridjs-pages button:first-child,
.gridjs-pagination .gridjs-pages button:last-child {
font-size: 0;
line-height: 1;
padding: 2px 8px;
}
.gridjs-pagination .gridjs-pages button:first-child::before,
.gridjs-pagination .gridjs-pages button:last-child::before {
font-family: "Bootstrap-icons";
font-size: var(--text-sm, 0.875rem);
}
.gridjs-pagination .gridjs-pages button:first-child::before {
content: "\F284";
}
.gridjs-pagination .gridjs-pages button:last-child::before {
content: "\F285";
}
button.gridjs-sort {
background-color: transparent;
background-position-x: center;