primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-09-20 05:07:11 +03:00
Code Issues Projects Releases Wiki Activity

Make pagination responsive by default (#1894)

Browse Source 
* Make pagination responsive by default

* Lint

* Create swift-actors-drum.md

* Remove duplicate selector

* Remove initial display

This was overridden before with the `.page-responsive .pagination` selector
This commit is contained in:
simurai 2022-01-20 11:03:09 +09:00 committed by GitHub
parent 68adc95940
commit d1adf59530
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/swift-actors-drum.md Normal file
View File

@ -0,0 +1,5 @@
---
"@primer/css": patch
---
Make `pagination` responsive by default

39
src/pagination/pagination.scss
View File

@ -4,7 +4,6 @@
a,
span,
em {
display: inline-block;
min-width: 32px;
// stylelint-disable-next-line primer/spacing
padding: 5px 10px;
@ -84,6 +83,44 @@
clip-path: polygon(6.2px 3.2px, 7.3px 3.2px, 11.5px 7.5px, 11.5px 8.5px, 7.3px 12.8px, 6.2px 11.7px, 9.9px 8px, 6.2px 4.3px, 6.2px 3.2px);
}
}
// Responsive
// Hide everything by default
> * {
display: none;
}
// 0 -> sm
// Only show [Previous] [Next]
> :first-child,
> :last-child,
> .previous_page,
> .next_page {
display: inline-block;
}
// sm -> md
// Also show [first] [last] [current number] and [...]
@include breakpoint(sm) {
> :nth-child(2),
> :nth-last-child(2),
> .current,
> .gap {
display: inline-block;
}
}
// md -> or more
// Show everything
@include breakpoint(md) {
> * {
display: inline-block;
}
}
}
// Unified centered pagination across the site