The pagination mixin provides simple navigation for a list of pages. It’s used as part of the listing layout.
@mixin pagination()
None.
nav.pagination>ul>(li.previous>a{Previous})+(li*2>a)+(li.active>a)+(li*2>a)+li.next>a{Next}
<nav class=" pagination">
<ul class="pagination__list">
<li class="pagination__item -previous">
<a class="pagination__link" href="" aria-label="Previous">
<svg class="link__icon" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" fill="none">
<polyline points="15 6 9 12 15 18" />
</svg>
</a>
</li>
<li class="pagination__item"><a class="pagination__link" href="">1</a></li>
<li class="pagination__item"><a class="pagination__link" href="">2</a></li>
<li class="pagination__item -active"><a class="pagination__link" href="">3</a></li>
<li class="pagination__item"><a class="pagination__link" href="">4</a></li>
<li class="pagination__item"><a class="pagination__link" href="">5</a></li>
<li class="pagination__item"><a class="pagination__link" href="">6</a></li>
<li class="pagination__item -next -disabled">
<a class="pagination__link link" href="" aria-label="Next">
<svg class="link__icon" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" fill="none">
<polyline points="9 6 15 12 9 18" />
</svg>
</a>
</li>
</ul>
</nav>
///
/// PAGINATION provides a navigational unordered list of pages. Often used
/// in conjunction of a LISTING component.
///
/// $text-color
/// Text color.
/// $active-color
/// Current page background color.
/// $hover-color
/// Hover color.
/// $active-text-color
/// Current page text color.
/// $border
/// Border color; also used for disabled text.
///
@mixin pagination (
$text-color: $link,
$active-color: $link,
$hover-color: $link-hover,
$active-text-color: $white,
$border: $border,
) {
display: flex;
justify-content: center;
&__list {
@include no-bullets;
display: flex;
}
&__item {
margin: 0 .25em;
}
&__link {
border-radius: .25em;
color: $text-color;
display: block;
font-weight: bold;
padding: $thin-padding;
position: relative;
transition: background-color $fast $fade-easing,
color $fast $fade-easing;
&:focus,
&:hover {
background-color: $hover-color;
color: $active-text-color;
transition: color $fade-easing $fast, background-color $fade-easing $fast;
}
}
&__item.-disabled &__link {
color: $border;
cursor: default;
pointer-events: none;
}
&__item.-active &__link {
background-color: $active-color;
color: $active-text-color;
cursor: default;
pointer-events: none;
&:focus,
&:hover {
background-color: $hover-color;
color: $active-text-color;
}
}
}
.pagination {
@include pagination;
}