Commander1024/lostplaces-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Made inactive pag-items gray and non-hover.

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/01_Atoms/pagination/_pagination.scss
View File

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

12
components/01_Atoms/pagination/pagination.hbs
View File

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

2
public/main.css
View File

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