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>
@use "/resources/styles/common" as *;
@use "/resources/styles/config";
///
/// PAGINATION provides a navigational unordered list of pages. Often used
/// in conjunction of a LISTING component.
///
.pagination {
--pagination-color: var(--color, #{config.$link});
--pagination-color-contrast: var(--color-contrast, #{blackwhite(config.$link)});
--pagination-color-hover: var(--color-hover, #{config.$link-hover});
display: flex;
justify-content: center;
&__list {
@include no-bullets;
display: flex;
gap: .5rem;
}
&__link {
border-radius: .25em;
color: var(--pagination-color);
display: block;
font-weight: bold;
padding: config.$thin-padding;
position: relative;
transition: background-color var(--duration-fast) config.$fade-easing,
color var(--duration-fast) config.$fade-easing;
&:focus,
&:hover {
background-color: var(--pagination-color-hover);
color: var(--pagination-color-contrast);
transition: color config.$fade-easing var(--duration-fast) background-color config.$fade-easing var(--duration-fast);
}
}
&__item.-disabled &__link {
color: config.$border;
cursor: default;
pointer-events: none;
}
&__item.-active &__link {
background-color: var(--pagination-color);
color: var(--pagination-color-contrast);
cursor: default;
pointer-events: none;
&:focus,
&:hover {
background-color: var(--pagination-color-hover);
color: var(--pagination-color-contrast);
}
}
}