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

Adapting pagination

Browse Source
This commit is contained in:
reverend 2021-03-19 14:09:29 +01:00
parent 00a8693186
commit adefd4c8d2
3 changed files with 83 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/03_Styles/elementList/_elementList.styl
View File

@ -3,12 +3,14 @@ RV-ElementList__Item()
RV-FlexRow__Item() RV-FlexRow__Item()
RV-ElementList(break_width=500px) RV-ElementList(break_width=500px)
RV-FlexRow() +RV-Block()
RV-Reset() RV-FlexRow()
RV-Reset()
list-style-type none list-style-type none
RV-ElementList__Item()
+RV-Block('RV-ElementList') RV-ElementList()
RV-ElementList()
RV-ElementList__Item()

2
components/05_Molecules/_molecules.styl
View File

@ -1,3 +1,3 @@
//@import 'overlayButton/_overlayButton' //@import 'overlayButton/_overlayButton'
@import 'teaser/_teaser' @import 'teaser/_teaser'
//@import 'pagination/_pagination' @import 'pagination/_pagination'

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

@ -2,99 +2,107 @@ 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-CSSParameter({ +RV-Element()
color: #f4a460, RV-BreakPoint(breakPoint)
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-FlexRow__Item()
+RV-Squash() RV-BreakPoint--horizontal()
RV-BreakPoint--horizontal() RV-FlexRow__Item--narrower()
RV-FlexRow__Item--narrower()
flex-basis 100px flex-basis 100px
margin-right -.1rem margin-right -.1rem
+RV-Element('Forwards') RV-Pagination__Forwards(breakPoint)
RV-BreakPoint(--navigationBreakPoint) +RV-Element()
RV-BreakPoint(breakPoint)
RV-FlexRow__Item() RV-FlexRow__Item()
+RV-Squash() RV-BreakPoint--horizontal()
RV-BreakPoint--horizontal() RV-FlexRow__Item--narrower()
RV-FlexRow__Item--narrower()
flex-basis 100px flex-basis 100px
margin-left -.1rem margin-left -.1rem
+RV-Element('Sites') RV-Pagination__Sites(breakPoint)
RV-BreakPoint(--breakPoint) +RV-Element()
RV-BreakPoint(breakPoint)
RV-FlexRow__Item() RV-FlexRow__Item()
+RV-Squash() RV-BreakPoint--horizontal()
RV-BreakPoint--horizontal() RV-FlexRow__Item--wider()
RV-FlexRow__Item--wider()
justify-content center justify-content center
gap .7rem gap .7rem
RV-Pagination__Label(breakPoint)
+RV-Element('Label') +RV-Element()
RV-Pagination__Item(--navigationBreakPoint) RV-Pagination__Item(breakPoint)
+RV-Squash() RV-BreakPoint__Item--outside()
RV-BreakPoint__Item--outside()
border-radius .2rem border-radius .2rem
--color transparent --color transparent
+RV-Element('Icon') RV-Pagination__Icon(breakPoint)
RV-Pagination__Item(--navigationBreakPoint) +RV-Element()
+RV-Squash() RV-Pagination__Item(breakPoint)
RV-FlexRow__Item--narrower() RV-FlexRow__Item--narrower()
--color transparent --color transparent
display flex display flex
justify-content center justify-content center
+RV-Element('Number') RV-Pagination__Number(breakPoint, size)
RV-Pagination__Item(--breakPoint) +RV-Element()
RV-Pagination__Item(breakPoint)
border-radius .2rem border-radius .2rem
display flex display flex
justify-content center justify-content center
//margin 0 -.5rem //margin 0 -.5rem
.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
&:nth-last-child(-n + 2), &:nth-last-child(-n + 2),
&:nth-child(-n + 2) &:nth-child(-n + 2)
+RV-Squash() RV-BreakPoint__Item--outside()
RV-BreakPoint__Item--outside()
RV-Pagination()
+RV-Squash() +RV-Block()
RV-BreakPoint--horizontal() RV-CSSParameter({
color: #f4a460,
.RV-Link size: 3rem,
RV-Alignment() navigationBreakPoint: 200px
+RV-Squash() breakPoint: 450px
RV-Alignment--verticalCenter() })
height 100%
background-color --color
+RV-Element('First') display grid
text-align center grid-template-columns minmax(30px, 1fr) minmax(15rem, 4fr) minmax(30px,1fr)
+RV-Element('Previous') RV-Pagination__Backwards(--navigationBreakPoint)
text-align center RV-Pagination__Forwards(--navigationBreakPoint)
RV-Pagination__Label(--navigationBreakPoint)
RV-Pagination__Icon(--navigationBreakPoint)
+RV-Element('Next') RV-Pagination__Sites(450px)
text-align center RV-Pagination__Number(450px, --size)
+RV-Element('Last') RV-BreakPoint--horizontal()
text-align center
.RV-Link
min-width 450px RV-Alignment()
align-items stretch RV-Alignment--verticalCenter()
height --size height 100%
gap .5rem; 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()