100 lines
2.0 KiB
Stylus
100 lines
2.0 KiB
Stylus
RV-Pagination__Item(breakPoint)
|
|
+RV-Element()
|
|
RV-BreakPoint__Item(breakPoint)
|
|
|
|
+RV-Block('RV-Pagination')
|
|
RV-CSSParameter({
|
|
color: #f4a460,
|
|
size: 3rem,
|
|
navigationBreakPoint: 200px
|
|
breakPoint: 450px
|
|
})
|
|
|
|
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
|
|
margin-right -.1rem
|
|
|
|
+RV-Element('Forwards')
|
|
RV-BreakPoint(--navigationBreakPoint)
|
|
RV-FlexRow__Item()
|
|
+RV-Squash()
|
|
RV-BreakPoint--horizontal()
|
|
RV-FlexRow__Item--narrower()
|
|
flex-basis 100px
|
|
margin-left -.1rem
|
|
|
|
+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(--navigationBreakPoint)
|
|
+RV-Squash()
|
|
RV-BreakPoint__Item--outside()
|
|
border-radius .2rem
|
|
--color transparent
|
|
|
|
+RV-Element('Icon')
|
|
RV-Pagination__Item(--navigationBreakPoint)
|
|
+RV-Squash()
|
|
RV-FlexRow__Item--narrower()
|
|
--color transparent
|
|
display flex
|
|
justify-content center
|
|
|
|
+RV-Element('Number')
|
|
RV-Pagination__Item(--breakPoint)
|
|
border-radius .2rem
|
|
display flex
|
|
justify-content center
|
|
//margin 0 -.5rem
|
|
.RV-Link
|
|
RV-BreakPoint__Item(--size)
|
|
RV-BreakPoint__Item--outside()
|
|
text-align center
|
|
|
|
&:nth-last-child(-n + 2),
|
|
&:nth-child(-n + 2)
|
|
+RV-Squash()
|
|
RV-BreakPoint__Item--outside()
|
|
|
|
+RV-Squash()
|
|
RV-BreakPoint--horizontal()
|
|
|
|
.RV-Link
|
|
RV-Alignment()
|
|
+RV-Squash()
|
|
RV-Alignment--verticalCenter()
|
|
height 100%
|
|
background-color --color
|
|
|
|
+RV-Element('First')
|
|
text-align center
|
|
|
|
+RV-Element('Previous')
|
|
text-align center
|
|
|
|
+RV-Element('Next')
|
|
text-align center
|
|
|
|
+RV-Element('Last')
|
|
text-align center
|
|
|
|
min-width 450px
|
|
align-items stretch
|
|
height --size
|
|
gap .5rem; |