multiple breakpoints in pagination
This commit is contained in:
parent
b76c8a3882
commit
11c5146a19
|
|
@ -4,46 +4,70 @@ RV-Pagination__Item(breakPoint)
|
|||
|
||||
+RV-Block('RV-Pagination')
|
||||
RV-CSSParameter({
|
||||
breakPoint: 700px,
|
||||
color: #f4a460,
|
||||
size: 3rem
|
||||
size: 3rem,
|
||||
navigationBreakPoint: 200px
|
||||
breakPoint: 450px
|
||||
})
|
||||
|
||||
RV-BreakPoint(--breakPoint)
|
||||
RV-FlexRow()
|
||||
+RV-Squash()
|
||||
RV-FlexRow--horizontal()
|
||||
RV-ElementList()
|
||||
|
||||
+RV-Element()
|
||||
RV-BreakPoint__Item(--breakPoint)
|
||||
display grid
|
||||
grid-template-columns minmax(30px, 1fr) minmax(15rem, 4fr) minmax(30px,1fr)
|
||||
|
||||
+RV-Element('Backwards')
|
||||
RV-BreakPoint(--navigationBreakPoint)
|
||||
RV-FlexRow__Item()
|
||||
+RV-Squash()
|
||||
RV-BreakPoint--horizontal()
|
||||
RV-FlexRow__Item--narrower()
|
||||
flex-basis 100px
|
||||
|
||||
+RV-Element('Forwards')
|
||||
RV-BreakPoint(--navigationBreakPoint)
|
||||
RV-FlexRow__Item()
|
||||
+RV-Squash()
|
||||
RV-BreakPoint--horizontal()
|
||||
RV-FlexRow__Item--narrower()
|
||||
flex-basis 100px
|
||||
|
||||
+RV-Element('Sites')
|
||||
RV-BreakPoint(--breakPoint)
|
||||
RV-FlexRow__Item()
|
||||
+RV-Squash()
|
||||
RV-BreakPoint--horizontal()
|
||||
RV-FlexRow__Item--wider()
|
||||
justify-content center
|
||||
gap .7rem
|
||||
|
||||
|
||||
+RV-Element('Label')
|
||||
RV-Pagination__Item(--breakPoint)
|
||||
RV-Pagination__Item(--navigationBreakPoint)
|
||||
+RV-Squash()
|
||||
RV-BreakPoint__Item--outside()
|
||||
border-radius .2rem
|
||||
--color transparent
|
||||
|
||||
+RV-Element('Icon')
|
||||
RV-Pagination__Item(--breakPoint)
|
||||
RV-Pagination__Item(--navigationBreakPoint)
|
||||
+RV-Squash()
|
||||
RV-FlexRow__Item--content()
|
||||
RV-FlexRow__Item--narrower()
|
||||
--color transparent
|
||||
display flex
|
||||
justify-content center
|
||||
|
||||
+RV-Element('Number')
|
||||
RV-Pagination__Item(--breakPoint)
|
||||
RV-BreakPoint(--size)
|
||||
+RV-Squash()
|
||||
RV-BreakPoint--horizontal()
|
||||
RV-FlexRow__Item--narrower()
|
||||
border-radius .2rem
|
||||
overflow visible
|
||||
display flex
|
||||
justify-content center
|
||||
.RV-Link
|
||||
RV-BreakPoint__Item(--size)
|
||||
RV-BreakPoint__Item--outside()
|
||||
text-align center
|
||||
width --size
|
||||
|
||||
&:nth-last-child(-n + 2),
|
||||
&:nth-child(-n + 2)
|
||||
+RV-Squash()
|
||||
RV-BreakPoint__Item--outside()
|
||||
|
||||
+RV-Squash()
|
||||
RV-BreakPoint--horizontal()
|
||||
|
|
@ -55,13 +79,19 @@ RV-Pagination__Item(breakPoint)
|
|||
height 100%
|
||||
background-color --color
|
||||
|
||||
+RV-Element('First')
|
||||
text-align center
|
||||
|
||||
+RV-Element('Previous')
|
||||
text-align center
|
||||
|
||||
+RV-Element('Next')
|
||||
text-align right
|
||||
text-align center
|
||||
|
||||
+RV-Element('Last')
|
||||
text-align right
|
||||
text-align center
|
||||
|
||||
min-width 350px
|
||||
min-width 450px
|
||||
align-items stretch
|
||||
height --size
|
||||
gap .5rem;
|
||||
|
|
@ -1,71 +1,94 @@
|
|||
|
||||
<ul class="RV-Pagination">
|
||||
|
||||
<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>
|
||||
<div class="RV-Pagination">
|
||||
<div class="RV-Pagination__Backwards">
|
||||
<div class="RV-Pagination__First RV-Pagination__Icon">
|
||||
<a href="#" class="RV-Link">
|
||||
<span class="RV-Icon"><<</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="RV-Pagination__First RV-Pagination__Label">
|
||||
<a href="#" class="RV-Link">
|
||||
<span class="RV-Text">First</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="RV-Pagination__Previous RV-Pagination__Item--disabled RV-Pagination__Icon">
|
||||
<a href="#" class="RV-Link">
|
||||
<span class="RV-Icon"><</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="RV-Pagination__Previous RV-Pagination__Item--disabled RV-Pagination__Label">
|
||||
<a href="#" class="RV-Link">
|
||||
<span class="RV-Text">Previous</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="RV-Pagination__Sites">
|
||||
<div class="RV-Pagination__Number">
|
||||
<a href="#" class="RV-Link">
|
||||
<span class="RV-Text">1</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="RV-Pagination__Number">
|
||||
<a href="#" class="RV-Link">
|
||||
<span class="RV-Text">2</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="RV-Pagination__Number">
|
||||
<a href="#" class="RV-Link">
|
||||
<span class="RV-Text">3</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="RV-Pagination__Number RV-Pagination__Item--current">
|
||||
<a href="#" class="RV-Link">
|
||||
<span class="RV-Text">4</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="RV-Pagination__Number">
|
||||
<a href="#" class="RV-Link">
|
||||
<span class="RV-Text">5</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="RV-Pagination__Number">
|
||||
<a href="#" class="RV-Link">
|
||||
<span class="RV-Text">6</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="RV-Pagination__Number">
|
||||
<a href="#" class="RV-Link">
|
||||
<span class="RV-Text">7</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="RV-Pagination__Number">
|
||||
<a href="#" class="RV-Link">
|
||||
<span class="RV-Text">8</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="RV-Pagination__Number">
|
||||
<a href="#" class="RV-Link">
|
||||
<span class="RV-Text">9</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="RV-Pagination__Forwards">
|
||||
<div class="RV-Pagination__Label RV-Pagination__Next">
|
||||
<a href="#" class="RV-Link">
|
||||
<span class="RV-Text">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="RV-Pagination__Icon RV-Pagination__Next">
|
||||
<a href="#" class="RV-Link">
|
||||
<span class="RV-Icon">></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="RV-Pagination__Label RV-Pagination__Last">
|
||||
<a href="#" class="RV-Link">
|
||||
<span class="RV-Text">Last</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="RV-Pagination__Icon RV-Pagination__Last">
|
||||
<a href="#" class="RV-Link">
|
||||
<span class="RV-Icon">>></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue