reverend/scss-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Pagination Molecule

Browse Source
This commit is contained in:
reverend
2021-03-03 18:27:35 +01:00
parent 2b2e87ab06
commit 3c1cde82d1
5 changed files with 111 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/04_Molecules/pagination/_pagination.styl Normal file
View File

@@ -0,0 +1,22 @@
RV-Pagination__Item()
RV-FlexRow__Item()
.RV-Link
padding 15px 20px
vertical-align sub
border-radius 2px
RV-Pagination__List(breakpoint=500px)
RV-FlexRow()
RV-FlexRow--breakPoint(breakpoint)
RV-ElementList()
.RV-Pagination
&__List
RV-Pagination__List()
&__Item
RV-Pagination__Item()
&__Label
RV-FlexRow__Item--outsideBreakPoint()

3
components/04_Molecules/pagination/pagination.config.json Normal file
View File

@@ -0,0 +1,3 @@
{
"title": "Pagnination"
}

71
components/04_Molecules/pagination/pagination.hbs Normal file
View File

@@ -0,0 +1,71 @@
<div class="RV-Pagination">
<ul class="RV-Pagination__List">
<li class="RV-Pagination__Item RV-Pagination__Item--first RV-Pagination__Icon">
<a href="#" class="RV-Link">
<span class="RV-Icon">⟪</span>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--first RV-Pagination__Label">
<a href="#" class="RV-Link">
<span class="RV-Text">First</span>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--disabled RV-Pagination__Item--previous RV-Pagination__Icon">
<a href="#" class="RV-Link">
<span class="RV-Icon">⟨</span>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--disabled RV-Pagination__Item--previous RV-Pagination__Label">
<a href="#" class="RV-Link">
<span class="RV-Text">Previous</span>
</a>
</li>
<li class="RV-Pagination__Item">
<a href="#" class="RV-Link">
<span class="RV-Text">1</span>
</a>
</li>
<li class="RV-Pagination__Item">
<a href="#" class="RV-Link">
<span class="RV-Text">2</span>
</a>
</li>
<li class="RV-Pagination__Item">
<a href="#" class="RV-Link">
<span class="RV-Text">3</span>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--current">
<a href="#" class="RV-Link">
<span class="RV-Text">4</span>
</a>
</li>
<li class="RV-Pagination__Item">
<a href="#" class="RV-Link">
<span class="RV-Text">5</span>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--next RV-Pagination__Label">
<a href="#" class="RV-Link">
<span class="RV-Text">Next</span>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--next RV-Pagination__Icon">
<a href="#" class="RV-Link">
<span class="RV-Icon">⟩</span>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--last RV-Pagination__Label">
<a href="#" class="RV-Link">
<span class="RV-Text">Last</span>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--last RV-Pagination__Icon">
<a href="#" class="RV-Link">
<span class="RV-Icon">⟫</span>
</a>
</li>
</ul>
</div>