Made inactive pag-items gray and non-hover.

This commit is contained in:
Marcus Scholz 2020-08-15 20:47:40 +02:00
parent fb72b00456
commit a613d9a069
3 changed files with 12 additions and 7 deletions

View File

@ -14,6 +14,10 @@
.LP-Pagination__Item{
margin: 0 4px;
&--disabled{
color: rgb(182, 182, 182);
}
&--current{
.LP-Link{
@ -26,7 +30,6 @@
}
}
}
}
.LP-Link{

View File

@ -1,12 +1,12 @@
<div class="LP-Pagination">
<ul class="LP-Pagination__List">
<li class="LP-Pagination__Item LP-Pagination__Item--first">
<a href="#" class="LP-Link"><span class="LP-Pagination__First">first</span></a>
<li class="LP-Pagination__Item LP-Pagination__Item--first LP-Pagination__Item--disabled">
<span class="LP-Pagination__First">first</span></a>
</li>
<li class="LP-Pagination__Item LP-Pagination__Item--previous">
<a href="#" class="LP-Link"><span class="LP-Pagination__Previous">previous</span></a>
<li class="LP-Pagination__Item LP-Pagination__Item--previous LP-Pagination__Item--disabled">
<span class="LP-Pagination__Previous">previous</span></a>
</li>
<li class="LP-Pagination__Item LP-Pagination__Item--number">
<li class="LP-Pagination__Item LP-Pagination__Item--number LP-Pagination__Item--current">
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">1</span></a>
</li>
<li class="LP-Pagination__Item LP-Pagination__Item--number">
@ -18,7 +18,7 @@
<li class="LP-Pagination__Item LP-Pagination__Item--number">
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">4</span></a>
</li>
<li class="LP-Pagination__Item LP-Pagination__Item--number LP-Pagination__Item--current">
<li class="LP-Pagination__Item LP-Pagination__Item--number">
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">5</span></a>
</li>
<li class="LP-Pagination__Item LP-Pagination__Item--number">

View File

@ -264,6 +264,8 @@ body {
flex-direction: row; }
.LP-Pagination .LP-Pagination__Item {
margin: 0 4px; }
.LP-Pagination .LP-Pagination__Item--disabled {
color: #b6b6b6; }
.LP-Pagination .LP-Pagination__Item--current .LP-Link {
background-color: #D7CEC7;
border-radius: 2px; }