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=""><span class="sr-only">Previous</span></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" href=""><span class="sr-only">Next</span></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: $primary,
$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: 0.618rem 1rem;
position: relative;
transition: background-color $fast $fade-easing,
color $fast $fade-easing;
&:focus,
&:hover {
background-color: $text-color;
color: $active-text-color;
outline: none;
}
}
&__item.-disabled &__link {
color: $border;
cursor: default;
pointer-events: none;
}
&__item.-previous &__link {
@include fas($fa-var-chevron-left);
}
&__item.-next &__link {
@include fas($fa-var-chevron-right);
}
&__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;
}
}
}