colette
Version:
A CSS and JS starter kit for 20 Minutes web projects
89 lines (73 loc) • 1.83 kB
text/stylus
// Pagers
//
// Colette comes with basic styles for paginations.
//
// The default Pager is showing no list. It's a counter that's giving you the number of the page you're on, versus the total number of pages.
//
// Markup: pager.twig
//
// Styleguide: Elements.Pager
// Pager with a list
//
// This is the list version of the Pager.
//
// Markup: pager-withlist.twig
//
// Styleguide: Elements.Pager.PagerWithlist
.pager
color var(--color-primary)
font-family $fontstack-secondary
display flex
align-items center
justify-content center
&:disabled
&[aria-disabled]
display none
&-current
&-max
color var(--color-base)
&-next
&-prev
background transparent
color var(--color-base)
line-height 1em
position relative
&:disabled
&[aria-hidden] // disabled link is a span[aria-hidden]
color var(--color-secondary)
svg
width 1.4em
height @width
// this after pseudo element extend clickable area
// when the button is too much small
&:after
content ''
position absolute
top 50%
left 50%
transform translate(-50%, -50%)
width 32px
height @width
min-width 100%
min-height 100%
&-prev
margin-right .2em
&-next
margin-left .2em
&-count
margin 0 .5em
&-list
margin 0
padding 0
cursor default
a
strong // current page is strong
color var(--color-base)
> li
display inline-block
margin 0 .5em
&-withlist
_ml(1)
_mr(1)
.pager-next
order 1000 // excessive value to stay the last