From adefd4c8d24d5ebdec9720b7010a116ca900049c Mon Sep 17 00:00:00 2001 From: reverend Date: Fri, 19 Mar 2021 14:09:29 +0100 Subject: [PATCH] Adapting pagination --- .../03_Styles/elementList/_elementList.styl | 14 +- components/05_Molecules/_molecules.styl | 2 +- .../05_Molecules/pagination/_pagination.styl | 140 +++++++++--------- 3 files changed, 83 insertions(+), 73 deletions(-) diff --git a/components/03_Styles/elementList/_elementList.styl b/components/03_Styles/elementList/_elementList.styl index 680ffae..35fab12 100644 --- a/components/03_Styles/elementList/_elementList.styl +++ b/components/03_Styles/elementList/_elementList.styl @@ -3,12 +3,14 @@ RV-ElementList__Item() RV-FlexRow__Item() RV-ElementList(break_width=500px) - RV-FlexRow() - RV-Reset() + +RV-Block() + 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() \ No newline at end of file + \ No newline at end of file diff --git a/components/05_Molecules/_molecules.styl b/components/05_Molecules/_molecules.styl index 1025952..989ec10 100644 --- a/components/05_Molecules/_molecules.styl +++ b/components/05_Molecules/_molecules.styl @@ -1,3 +1,3 @@ //@import 'overlayButton/_overlayButton' @import 'teaser/_teaser' -//@import 'pagination/_pagination' \ No newline at end of file +@import 'pagination/_pagination' \ No newline at end of file diff --git a/components/05_Molecules/pagination/_pagination.styl b/components/05_Molecules/pagination/_pagination.styl index 8fce5c0..fe2370e 100644 --- a/components/05_Molecules/pagination/_pagination.styl +++ b/components/05_Molecules/pagination/_pagination.styl @@ -2,99 +2,107 @@ 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-Pagination__Backwards(breakPoint) + +RV-Element() + RV-BreakPoint(breakPoint) RV-FlexRow__Item() - +RV-Squash() - RV-BreakPoint--horizontal() - RV-FlexRow__Item--narrower() + RV-BreakPoint--horizontal() + RV-FlexRow__Item--narrower() flex-basis 100px margin-right -.1rem - - +RV-Element('Forwards') - RV-BreakPoint(--navigationBreakPoint) + +RV-Pagination__Forwards(breakPoint) + +RV-Element() + RV-BreakPoint(breakPoint) RV-FlexRow__Item() - +RV-Squash() - RV-BreakPoint--horizontal() - RV-FlexRow__Item--narrower() + RV-BreakPoint--horizontal() + RV-FlexRow__Item--narrower() flex-basis 100px margin-left -.1rem - +RV-Element('Sites') - RV-BreakPoint(--breakPoint) +RV-Pagination__Sites(breakPoint) + +RV-Element() + RV-BreakPoint(breakPoint) RV-FlexRow__Item() - +RV-Squash() - RV-BreakPoint--horizontal() - RV-FlexRow__Item--wider() + 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() +RV-Pagination__Label(breakPoint) + +RV-Element() + RV-Pagination__Item(breakPoint) + RV-BreakPoint__Item--outside() border-radius .2rem --color transparent - - +RV-Element('Icon') - RV-Pagination__Item(--navigationBreakPoint) - +RV-Squash() - RV-FlexRow__Item--narrower() + +RV-Pagination__Icon(breakPoint) + +RV-Element() + RV-Pagination__Item(breakPoint) + RV-FlexRow__Item--narrower() --color transparent display flex justify-content center - +RV-Element('Number') - RV-Pagination__Item(--breakPoint) +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(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-BreakPoint__Item--outside() + +RV-Pagination() + +RV-Block() + RV-CSSParameter({ + color: #f4a460, + size: 3rem, + navigationBreakPoint: 200px + breakPoint: 450px + }) - +RV-Element('First') - text-align center + display grid + grid-template-columns minmax(30px, 1fr) minmax(15rem, 4fr) minmax(30px,1fr) - +RV-Element('Previous') - text-align center + RV-Pagination__Backwards(--navigationBreakPoint) + RV-Pagination__Forwards(--navigationBreakPoint) + RV-Pagination__Label(--navigationBreakPoint) + RV-Pagination__Icon(--navigationBreakPoint) - +RV-Element('Next') - text-align center - - +RV-Element('Last') - text-align center - - min-width 450px - align-items stretch - height --size - gap .5rem; \ No newline at end of file + 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() \ No newline at end of file