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

Compare commits

base: Commander1024:fb72b004564ff1bb02f8497df75f47c0483bc006
Branches Tags
Commander1024:master
Commander1024:linklist-add
..
compare: Commander1024:0e3f0056390e196aa8b73e8b3587cf88cb8e5661
Branches Tags
Commander1024:master
Commander1024:linklist-add

No commits in common. "fb72b004564ff1bb02f8497df75f47c0483bc006" and "0e3f0056390e196aa8b73e8b3587cf88cb8e5661" have entirely different histories.
fb72b00456 ... 0e3f005639

3 changed files with 67 additions and 124 deletions
Show Stats Expand all files Collapse all files

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

@ -1,74 +1,41 @@
.LP-Pagination{ .LP-Pagination{
font-family: $-primary-sans-serif-font; font-family: $-primary-sans-serif-font;
font-weight: bold; font-weight: bold;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
.LP-Pagination__List{ .LP-Pagination__List{
list-style-type: none; list-style-type: none;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.LP-Pagination__Item{ .LP-Pagination__Item{
margin: 0 4px; margin: 0 4px;
&--current{ &--current{
.LP-Link{ .LP-Link{
background-color: $-beige; background-color: $-beige;
border-radius: 2px; border-radius: 2px;
&:hover{ &:hover{
background-color: $-beige; background-color: $-beige;
color: $-grey; color: $-grey;
} }
} }
} }
} }
.LP-Link{ .LP-Link{
padding: 15px 25px; padding: 15px 25px;
vertical-align: sub;
&:active, &:hover{ &:active, &:hover{
background-color: $-beige; background-color: $-beige;
border-radius: 2px; border-radius: 2px;
color: $-grey; color: $-grey;
} }
} }
.LP-Pagination__First{
&:before{
content: "⟪";
padding-right: 1em;
font-size: larger;
}
}
.LP-Pagination__Previous{
&:before{
content: "⟨";
padding-right: 1em;
font-size: larger;
}
}
.LP-Pagination__Next{
&:after{
content: "⟩";
padding-left: 1em;
font-size: larger;
}
}
.LP-Pagination__Last{
&:after{
content: "⟫";
padding-left: 1em;
font-size: larger;
}
}
} }

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

@ -1,43 +1,37 @@
<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--previous">
<a href="#" class="LP-Link"><span class="LP-Pagination__First">first</span></a> <a href="#" class="LP-Link"><span class="LP-Pagination__Previous"></span></a>
</li> </li>
<li class="LP-Pagination__Item LP-Pagination__Item--previous"> <li class="LP-Pagination__Item LP-Pagination__Item--number">
<a href="#" class="LP-Link"><span class="LP-Pagination__Previous">previous</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">
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">1</span></a> <a href="#" class="LP-Link"><span class="LP-Pagination__Number">2</span></a>
</li> </li>
<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">2</span></a> <a class="LP-Link" href="#"><span class="LP-Pagination__Number">3</span></a>
</li> </li>
<li class="LP-Pagination__Item LP-Pagination__Item--number"> <li class="LP-Pagination__Item LP-Pagination__Item--number">
<a class="LP-Link" href="#"><span class="LP-Pagination__Number">3</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"> <li class="LP-Pagination__Item LP-Pagination__Item--number LP-Pagination__Item--current">
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">4</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 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">6</span></a>
</li> </li>
<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">6</span></a> <a href="#" class="LP-Link"><span class="LP-Pagination__Number">7</span></a>
</li> </li>
<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">7</span></a> <a href="#" class="LP-Link"><span class="LP-Pagination__Number">8</span></a>
</li> </li>
<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">8</span></a> <a href="#" class="LP-Link"><span class="LP-Pagination__Number">9</span></a>
</li> </li>
<li class="LP-Pagination__Item LP-Pagination__Item--number"> <li class="LP-Pagination__Item LP-Pagination__Item--next">
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">9</span></a> <a href="#" class="LP-Link"><span class="LP-Pagination__Next"></span></a>
</li> </li>
<li class="LP-Pagination__Item LP-Pagination__Item--next"> </ul>
<a href="#" class="LP-Link"><span class="LP-Pagination__Next">next</span></a>
</li>
<li class="LP-Pagination__Item LP-Pagination__Item--last">
<a href="#" class="LP-Link"><span class="LP-Pagination__Last">last</span></a>
</li>
</ul>
</div> </div>

20
public/main.css
View File

@ -1,4 +1,3 @@
@charset "UTF-8";
@font-face { @font-face {
font-family: Crimson; font-family: Crimson;
src: url("fonts/Crimson/CrimsonText-Regular.ttf"), url("fonts/Crimson/CrimsonText-Bold.ttf"), url("fonts/Crimson/CrimsonText-Italic.ttf"); } src: url("fonts/Crimson/CrimsonText-Regular.ttf"), url("fonts/Crimson/CrimsonText-Bold.ttf"), url("fonts/Crimson/CrimsonText-Italic.ttf"); }
@ -271,28 +270,11 @@ body {
background-color: #D7CEC7; background-color: #D7CEC7;
color: #565656; } color: #565656; }
.LP-Pagination .LP-Link { .LP-Pagination .LP-Link {
padding: 15px 25px; padding: 15px 25px; }
vertical-align: sub; }
.LP-Pagination .LP-Link:active, .LP-Pagination .LP-Link:hover { .LP-Pagination .LP-Link:active, .LP-Pagination .LP-Link:hover {
background-color: #D7CEC7; background-color: #D7CEC7;
border-radius: 2px; border-radius: 2px;
color: #565656; } color: #565656; }
.LP-Pagination .LP-Pagination__First:before {
content: "⟪";
padding-right: 1em;
font-size: larger; }
.LP-Pagination .LP-Pagination__Previous:before {
content: "⟨";
padding-right: 1em;
font-size: larger; }
.LP-Pagination .LP-Pagination__Next:after {
content: "⟩";
padding-left: 1em;
font-size: larger; }
.LP-Pagination .LP-Pagination__Last:after {
content: "⟫";
padding-left: 1em;
font-size: larger; }
.LP-Content { .LP-Content {
padding: 35px; } padding: 35px; }