First version of pagination
This commit is contained in:
parent
f6ef585087
commit
9646e8f812
@ -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;
|
@ -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>
|
Loading…
Reference in New Issue
Block a user