scss-library/components/05_Molecules/pagination/_pagination.styl

108 lines
2.2 KiB
Stylus

RV-Pagination__Item(breakPoint)
+RV-Element()
RV-BreakPoint__Item(breakPoint)
RV-Pagination__Backwards(breakPoint)
+RV-Element()
RV-BreakPoint(breakPoint)
RV-FlexRow__Item()
RV-BreakPoint--horizontal()
RV-FlexRow__Item--narrower()
flex-basis 100px
margin-right -.1rem
RV-Pagination__Forwards(breakPoint)
+RV-Element()
RV-BreakPoint(breakPoint)
RV-FlexRow__Item()
RV-BreakPoint--horizontal()
RV-FlexRow__Item--narrower()
flex-basis 100px
margin-left -.1rem
RV-Pagination__Sites(breakPoint)
+RV-Element()
RV-BreakPoint(breakPoint)
RV-FlexRow__Item()
RV-BreakPoint--horizontal()
RV-FlexRow__Item--wider()
justify-content center
gap .7rem
RV-Pagination__Label(breakPoint)
+RV-Element()
RV-Pagination__Item(breakPoint)
RV-BreakPoint__Item--outside()
border-radius .2rem
--color transparent
RV-Pagination__Icon(breakPoint)
+RV-Element()
RV-Pagination__Item(breakPoint)
RV-FlexRow__Item--narrower()
--color transparent
display flex
justify-content center
RV-Pagination__Number(breakPoint, size)
+RV-Element()
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-BreakPoint__Item--outside()
RV-Pagination()
+RV-Block()
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-Pagination__Backwards(--navigationBreakPoint)
RV-Pagination__Forwards(--navigationBreakPoint)
RV-Pagination__Label(--navigationBreakPoint)
RV-Pagination__Icon(--navigationBreakPoint)
RV-Pagination__Sites(450px)
RV-Pagination__Number(450px, --size)
RV-BreakPoint--horizontal()
.RV-Link
RV-Alignment()
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;
RV-Pagination()