Adapting pagination
This commit is contained in:
parent
00a8693186
commit
adefd4c8d2
@ -3,12 +3,14 @@ RV-ElementList__Item()
|
|||||||
RV-FlexRow__Item()
|
RV-FlexRow__Item()
|
||||||
|
|
||||||
RV-ElementList(break_width=500px)
|
RV-ElementList(break_width=500px)
|
||||||
|
+RV-Block()
|
||||||
RV-FlexRow()
|
RV-FlexRow()
|
||||||
RV-Reset()
|
RV-Reset()
|
||||||
|
|
||||||
list-style-type none
|
list-style-type none
|
||||||
|
|
||||||
+RV-Block('RV-ElementList')
|
RV-ElementList__Item()
|
||||||
|
|
||||||
RV-ElementList()
|
RV-ElementList()
|
||||||
|
|
||||||
RV-ElementList__Item()
|
|
@ -1,3 +1,3 @@
|
|||||||
//@import 'overlayButton/_overlayButton'
|
//@import 'overlayButton/_overlayButton'
|
||||||
@import 'teaser/_teaser'
|
@import 'teaser/_teaser'
|
||||||
//@import 'pagination/_pagination'
|
@import 'pagination/_pagination'
|
@ -2,7 +2,66 @@ RV-Pagination__Item(breakPoint)
|
|||||||
+RV-Element()
|
+RV-Element()
|
||||||
RV-BreakPoint__Item(breakPoint)
|
RV-BreakPoint__Item(breakPoint)
|
||||||
|
|
||||||
+RV-Block('RV-Pagination')
|
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({
|
RV-CSSParameter({
|
||||||
color: #f4a460,
|
color: #f4a460,
|
||||||
size: 3rem,
|
size: 3rem,
|
||||||
@ -13,71 +72,18 @@ RV-Pagination__Item(breakPoint)
|
|||||||
display grid
|
display grid
|
||||||
grid-template-columns minmax(30px, 1fr) minmax(15rem, 4fr) minmax(30px,1fr)
|
grid-template-columns minmax(30px, 1fr) minmax(15rem, 4fr) minmax(30px,1fr)
|
||||||
|
|
||||||
+RV-Element('Backwards')
|
RV-Pagination__Backwards(--navigationBreakPoint)
|
||||||
RV-BreakPoint(--navigationBreakPoint)
|
RV-Pagination__Forwards(--navigationBreakPoint)
|
||||||
RV-FlexRow__Item()
|
RV-Pagination__Label(--navigationBreakPoint)
|
||||||
+RV-Squash()
|
RV-Pagination__Icon(--navigationBreakPoint)
|
||||||
RV-BreakPoint--horizontal()
|
|
||||||
RV-FlexRow__Item--narrower()
|
|
||||||
flex-basis 100px
|
|
||||||
margin-right -.1rem
|
|
||||||
|
|
||||||
+RV-Element('Forwards')
|
RV-Pagination__Sites(450px)
|
||||||
RV-BreakPoint(--navigationBreakPoint)
|
RV-Pagination__Number(450px, --size)
|
||||||
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-BreakPoint--horizontal()
|
||||||
|
|
||||||
.RV-Link
|
.RV-Link
|
||||||
RV-Alignment()
|
RV-Alignment()
|
||||||
+RV-Squash()
|
|
||||||
RV-Alignment--verticalCenter()
|
RV-Alignment--verticalCenter()
|
||||||
height 100%
|
height 100%
|
||||||
background-color --color
|
background-color --color
|
||||||
@ -98,3 +104,5 @@ RV-Pagination__Item(breakPoint)
|
|||||||
align-items stretch
|
align-items stretch
|
||||||
height --size
|
height --size
|
||||||
gap .5rem;
|
gap .5rem;
|
||||||
|
|
||||||
|
RV-Pagination()
|
Loading…
Reference in New Issue
Block a user