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

First version of pagination

This commit is contained in:
reverend 2021-03-10 18:07:17 +01:00
parent f6ef585087
commit 9646e8f812
2 changed files with 133 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
components/05_Molecules/pagination/_pagination.styl
View File

@ -1,23 +1,67 @@
/*RV-Pagination__Item()
RV-FlexRow__Item()
.RV-Link
padding 15px 20px
vertical-align sub
border-radius 2px
RV-Pagination__Item(breakPoint)
+RV-Element()
RV-BreakPoint__Item(breakPoint)
RV-Pagination__List(breakpoint=500px)
RV-FlexRow()
RV-FlexRow--breakPoint(breakpoint)
RV-ElementList()
.RV-Pagination
&__List
RV-Pagination__List()
&__Item
RV-Pagination__Item()
+RV-Block('RV-Pagination')
RV-CSSParameter({
breakPoint: 700px,
color: #f4a460,
size: 3rem
})
&__Label
RV-FlexRow__Item--outsideBreakPoint()
RV-BreakPoint(--breakPoint)
RV-FlexRow()
+RV-Squash()
RV-FlexRow--horizontal()
RV-ElementList()
+RV-Element()
RV-BreakPoint__Item(--breakPoint)
*/
+RV-Element('Label')
RV-Pagination__Item(--breakPoint)
+RV-Squash()
RV-BreakPoint__Item--outside()
border-radius .2rem
--color transparent
+RV-Element('Icon')
RV-Pagination__Item(--breakPoint)
+RV-Squash()
RV-FlexRow__Item--content()
--color transparent
+RV-Element('Number')
RV-Pagination__Item(--breakPoint)
RV-BreakPoint(--size)
+RV-Squash()
RV-BreakPoint--horizontal()
RV-FlexRow__Item--narrower()
border-radius .2rem
overflow visible
.RV-Link
RV-BreakPoint__Item(--size)
RV-BreakPoint__Item--outside()
text-align center
width --size
+RV-Squash()
RV-BreakPoint--horizontal()
.RV-Link
RV-Alignment()
+RV-Squash()
RV-Alignment--verticalCenter()
height 100%
background-color --color
+RV-Element('Next')
text-align right
+RV-Element('Last')
text-align right
min-width 350px
align-items stretch
height --size
gap .5rem;

138
components/05_Molecules/pagination/pagination.hbs
View File

@ -1,71 +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>
<ul class="RV-Pagination">
</a>
</li>
</ul>
</div>
<li class="RV-Pagination__First RV-Pagination__Icon">
<a href="#" class="RV-Link">
<span class="RV-Icon">⟪</span>
</a>
</li>
<li class="RV-Pagination__First RV-Pagination__Label">
<a href="#" class="RV-Link">
<span class="RV-Text">First</span>
</a>
</li>
<li class="RV-Pagination__Previous RV-Pagination__Item--disabled RV-Pagination__Icon">
<a href="#" class="RV-Link">
<span class="RV-Icon">⟨</span>
</a>
</li>
<li class="RV-Pagination__Previous RV-Pagination__Item--disabled RV-Pagination__Label">
<a href="#" class="RV-Link">
<span class="RV-Text">Previous</span>
</a>
</li>
<li class="RV-Pagination__Number">
<a href="#" class="RV-Link">
<span class="RV-Text">1</span>
</a>
</li>
<li class="RV-Pagination__Number">
<a href="#" class="RV-Link">
<span class="RV-Text">2</span>
</a>
</li>
<li class="RV-Pagination__Number">
<a href="#" class="RV-Link">
<span class="RV-Text">3</span>
</a>
</li>
<li class="RV-Pagination__Number RV-Pagination__Item--current">
<a href="#" class="RV-Link">
<span class="RV-Text">4</span>
</a>
</li>
<li class="RV-Pagination__Number">
<a href="#" class="RV-Link">
<span class="RV-Text">5</span>
</a>
</li>
<li class="RV-Pagination__Label RV-Pagination__Next">
<a href="#" class="RV-Link">
<span class="RV-Text">Next</span>
</a>
</li>
<li class="RV-Pagination__Icon RV-Pagination__Next">
<a href="#" class="RV-Link">
<span class="RV-Icon">⟩</span>
</a>
</li>
<li class="RV-Pagination__Label RV-Pagination__Last">
<a href="#" class="RV-Link">
<span class="RV-Text">Last</span>
</a>
</li>
<li class="RV-Pagination__Icon RV-Pagination__Last">
<a href="#" class="RV-Link">
<span class="RV-Icon">⟫</span>
</a>
</li>
</ul>