<div class="container">
<div class="desc desc-line mt-5">Pagination</div>
<div class="row py-4">
<div class="col-12 col-lg-6">
<nav aria-label="...">
<ul class="pagination pagination-md">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">1</a>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
</ul>
</nav>
</div>
</div>
</div>
<div class="container">
<div class="desc desc-line mt-5">Pagination</div>
<div class="row py-4">
<div class="col-12 col-lg-6">
<nav aria-label="...">
<ul class="pagination pagination-md">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">1</a>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
</ul>
</nav>
</div>
</div>
</div>
/* Kein Inhalt definiert. */
.pagination {
li {
padding: 0;
margin-right: .5em;
width: 40px;
height: 40px;
list-style-type: none;
text-align: center;
&:before {
content: '';
}
&.disabled {
.page-link {
color: $white;
background: $primary;
.dark & {
color: $black;
background: $white;
}
}
}
}
.page-link {
color: $black;
background: $gray-100;
border: 0;
transition: color .15s ease;
.dark & {
color: $white;
background: $primary;
}
&:hover {
color: $white;
background: $secondary;
}
}
}