diff --git a/.changeset/swift-actors-drum.md b/.changeset/swift-actors-drum.md new file mode 100644 index 0000000000..88ab456411 --- /dev/null +++ b/.changeset/swift-actors-drum.md @@ -0,0 +1,5 @@ +--- +"@primer/css": patch +--- + +Make `pagination` responsive by default diff --git a/src/pagination/pagination.scss b/src/pagination/pagination.scss index 1ba48457e1..475ef0c044 100644 --- a/src/pagination/pagination.scss +++ b/src/pagination/pagination.scss @@ -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