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

multiple breakpoints in pagination

Browse Source
This commit is contained in:
reverend 2021-03-10 22:50:18 +01:00
parent b76c8a3882
commit 11c5146a19
2 changed files with 145 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,46 +4,70 @@ RV-Pagination__Item(breakPoint)
+RV-Block('RV-Pagination') +RV-Block('RV-Pagination')
RV-CSSParameter({ RV-CSSParameter({
breakPoint: 700px,
color: #f4a460, color: #f4a460,
size: 3rem size: 3rem,
navigationBreakPoint: 200px
breakPoint: 450px
}) })
RV-BreakPoint(--breakPoint) display grid
RV-FlexRow() grid-template-columns minmax(30px, 1fr) minmax(15rem, 4fr) minmax(30px,1fr)
+RV-Squash()
RV-FlexRow--horizontal() +RV-Element('Backwards')
RV-ElementList() 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()
RV-BreakPoint__Item(--breakPoint)
+RV-Element('Label') +RV-Element('Label')
RV-Pagination__Item(--breakPoint) RV-Pagination__Item(--navigationBreakPoint)
+RV-Squash() +RV-Squash()
RV-BreakPoint__Item--outside() RV-BreakPoint__Item--outside()
border-radius .2rem border-radius .2rem
--color transparent --color transparent
+RV-Element('Icon') +RV-Element('Icon')
RV-Pagination__Item(--breakPoint) RV-Pagination__Item(--navigationBreakPoint)
+RV-Squash() +RV-Squash()
RV-FlexRow__Item--content() RV-FlexRow__Item--narrower()
--color transparent --color transparent
display flex
justify-content center
+RV-Element('Number') +RV-Element('Number')
RV-Pagination__Item(--breakPoint) RV-Pagination__Item(--breakPoint)
RV-BreakPoint(--size)
+RV-Squash()
RV-BreakPoint--horizontal()
RV-FlexRow__Item--narrower()
border-radius .2rem border-radius .2rem
overflow visible display flex
justify-content center
.RV-Link .RV-Link
RV-BreakPoint__Item(--size) RV-BreakPoint__Item(--size)
RV-BreakPoint__Item--outside() RV-BreakPoint__Item--outside()
text-align center text-align center
width --size
&:nth-last-child(-n + 2),
&:nth-child(-n + 2)
+RV-Squash()
RV-BreakPoint__Item--outside()
+RV-Squash() +RV-Squash()
RV-BreakPoint--horizontal() RV-BreakPoint--horizontal()
@ -55,13 +79,19 @@ RV-Pagination__Item(breakPoint)
height 100% height 100%
background-color --color background-color --color
+RV-Element('First')
text-align center
+RV-Element('Previous')
text-align center
+RV-Element('Next') +RV-Element('Next')
text-align right text-align center
+RV-Element('Last') +RV-Element('Last')
text-align right text-align center
min-width 350px min-width 450px
align-items stretch align-items stretch
height --size height --size
gap .5rem; gap .5rem;

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

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