<nav class="pagination-block">
<ul class="pagination">
<li class="first">
<a href="#">
<span class="visible-for-screen-readers">First</span>
</a>
</li>
<li class="prev">
<a href="#">
<span class="visible-for-screen-readers">Previous</span>
</a>
</li>
<li>
<a href="#" class="page-number page-numbers">1</a>
</li>
<li class="current">
<span class="page-number page-numbers current">2</span>
</li>
<li>
<a href="#" class="page-number page-numbers">3</a>
</li>
<li class="next">
<a href="#">
<span class="visible-for-screen-readers">Next</span>
</a>
</li>
<li class="last">
<a href="#">
<span class="visible-for-screen-readers">Last</span>
</a>
</li>
</ul>
</nav>
<nav class="pagination-block">
<ul
class="pagination">
{# First #}
<li class="first">
<a href="#">
<span class="visible-for-screen-readers">First</span>
</a>
</li>
{# <li class="first disabled">
<button disabled>
<span class="visible-for-screen-readers">First</span>
</button>
</li> #}
{# Previous #}
<li class="prev">
<a href="#">
<span class="visible-for-screen-readers">Previous</span>
</a>
</li>
{# <li class="prev disabled">
<button disabled>
<span class="visible-for-screen-readers">Previous</span>
</button>
</li> #}
{# Pages #}
<li>
<a href="#" class="page-number page-numbers">1</a>
</li>
<li class="current">
<span class="page-number page-numbers current">2</span>
</li>
<li>
<a href="#" class="page-number page-numbers">3</a>
</li>
{# Next #}
<li class="next">
<a href="#">
<span class="visible-for-screen-readers">Next</span>
</a>
</li>
{# <li class="next disabled">
<button disabled>
<span class="visible-for-screen-readers">Next</span>
</button>
</li> #}
{# Last #}
<li class="last">
<a href="#">
<span class="visible-for-screen-readers">Last</span>
</a>
</li>
{# <li class="last disabled">
<button disabled>Last</button>
</li> #}
</ul>
</nav>
/* No context defined for this component. */
.pagination-block {
margin: rem(50) auto;
.pagination {
display: flex;
width: 100%;
margin: 0 auto;
align-items: center;
justify-content: center;
li {
font-family: $typeface-sans-serif;
font-weight: 700;
font-size: rem(40);
line-height: (30 / 16);
color: $iastate-maroon;
min-width: rem(21);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
position: relative;
padding-inline: rem(15);
@include media-breakpoint-up(sm) {
padding-inline: rem(10);
font-size: rem(30);
line-height: (40 / 21);
}
@include media-breakpoint-up(lg) {
font-size: rem(30);
line-height: (40 / 30);
min-width: rem(40);
}
&.disabled {
opacity: 0.2;
}
&.first,
&.prev,
&.next,
&.last {
a,
button {
background-color: transparent;
border: none;
height: rem(20);
width: rem(10);
transform: scale(0.75);
@include media-breakpoint-up(lg) {
transform: none;
}
&:after {
content: "";
background-repeat: no-repeat no-repeat;
background-position: center center;
background-size: cover;
display: block;
height: rem(20);
width: rem(10);
}
&:before {
display: none;
}
}
}
&.first {
a,
button {
width: rem(18);
&:after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20.121' height='21.414'%3E%3Cg data-name='Group 1' fill='none' stroke='%237c2529' stroke-width='2'%3E%3Cpath d='m11.414.708-10 10 10 10'/%3E%3Cpath data-name='SVG_Pagination_Back' d='m19.414.708-10 10 10 10'/%3E%3C/g%3E%3C/svg%3E");
width: rem(18);
}
}
}
&.prev {
a,
button {
&:after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12.121' height='21.414'%3E%3Cpath d='m11.414.707-10 10 10 10' fill='none' stroke='%237c2529' stroke-width='2'/%3E%3C/svg%3E");
}
}
}
&.next {
a,
button {
&:after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12.121' height='21.414'%3E%3Cpath d='m.707 20.706 10-10-10-10' fill='none' stroke='%237c2529' stroke-width='2'/%3E%3C/svg%3E");
}
}
}
&.last {
a,
button {
width: rem(18);
&:after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20.121' height='21.414'%3E%3Cg data-name='Group 1' fill='none' stroke='%237c2529' stroke-width='2'%3E%3Cpath d='m8.707 20.706 10-10-10-10'/%3E%3Cpath data-name='SVG_Pagination_Back' d='m.707 20.706 10-10-10-10'/%3E%3C/g%3E%3C/svg%3E");
width: rem(18);
}
}
}
a {
color: currentColor;
text-decoration: none;
&:hover {
&:before {
opacity: 1;
}
}
&:before {
content: "";
position: absolute;
bottom: rem(3);
width: 100%;
left: 0;
right: 0;
border-bottom: rem(3) solid $iastate-maroon;
opacity: 0;
transition: 0.2s opacity ease-in-out;
@include media-breakpoint-up(lg) {
bottom: rem(-7);
}
}
}
.current {
color: $iastate-red;
}
}
}
}
This is a custom component (no class prefix in place as it does not conflict with bootstrap — there is a similar pagination class in bootstrap, but these styles will not conflict as this is scoped to the class of .pagination-block)
disabled attribute will be greyed out and not clickableindex.scss file as @import "../components/pagination/pagination";