From 3c1cde82d1c63df1d59e6db52207c483b93c86eb Mon Sep 17 00:00:00 2001 From: reverend Date: Wed, 3 Mar 2021 18:27:35 +0100 Subject: [PATCH] Pagination Molecule --- components/01_Layouts/flexRow/_flexRow.styl | 20 ++++-- components/04_Molecules/_molecules.styl | 2 +- .../04_Molecules/pagination/_pagination.styl | 22 ++++++ .../pagination/pagination.config.json | 3 + .../04_Molecules/pagination/pagination.hbs | 71 +++++++++++++++++++ 5 files changed, 111 insertions(+), 7 deletions(-) create mode 100644 components/04_Molecules/pagination/_pagination.styl create mode 100644 components/04_Molecules/pagination/pagination.config.json create mode 100644 components/04_Molecules/pagination/pagination.hbs diff --git a/components/01_Layouts/flexRow/_flexRow.styl b/components/01_Layouts/flexRow/_flexRow.styl index 3f90e82..9471895 100644 --- a/components/01_Layouts/flexRow/_flexRow.styl +++ b/components/01_Layouts/flexRow/_flexRow.styl @@ -13,6 +13,16 @@ RV-FlexRow--vertical() +RV-Block__Modifier--name('vertical') flex-direction column + +RV-FlexRow__Item--outsideBreakPoint() + +RV-Element__Modifier--name('outsideBreakPoint') + margin-bottom -100vh + height max-content + flex-shrink 999 + +RV-FlexRow__Item--insideBreakPoint() + +RV-Element__Modifier--name('insideBreakPoint') + flex-grow 0 /* * Breaks from row to column orientation at the given breakpoint * breaks when the container is smaller than $-localBreakPoint or when the viewport is smaller than $-mediaBreakPoint. @@ -33,13 +43,11 @@ RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint) flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint overflow hidden - +RV-Element__Modifier('outsideBreakPoint') - margin-bottom -100vh - height max-content - flex-shrink 999 + +RV-Element__Modifier() + RV-FlexRow__Item--outsideBreakPoint() - +RV-Element__Modifier('insideBreakPoint') - flex-grow 0 + +RV-Element__Modifier() + RV-FlexRow__Item--insideBreakPoint() @media(max-width mediaBreakPoint) flex-direction row diff --git a/components/04_Molecules/_molecules.styl b/components/04_Molecules/_molecules.styl index c36862f..4bd3d2f 100644 --- a/components/04_Molecules/_molecules.styl +++ b/components/04_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/04_Molecules/pagination/_pagination.styl b/components/04_Molecules/pagination/_pagination.styl new file mode 100644 index 0000000..be2388c --- /dev/null +++ b/components/04_Molecules/pagination/_pagination.styl @@ -0,0 +1,22 @@ +RV-Pagination__Item() + RV-FlexRow__Item() + .RV-Link + padding 15px 20px + vertical-align sub + border-radius 2px + +RV-Pagination__List(breakpoint=500px) + RV-FlexRow() + RV-FlexRow--breakPoint(breakpoint) + RV-ElementList() + +.RV-Pagination + &__List + RV-Pagination__List() + + &__Item + RV-Pagination__Item() + + &__Label + RV-FlexRow__Item--outsideBreakPoint() + diff --git a/components/04_Molecules/pagination/pagination.config.json b/components/04_Molecules/pagination/pagination.config.json new file mode 100644 index 0000000..b8f2778 --- /dev/null +++ b/components/04_Molecules/pagination/pagination.config.json @@ -0,0 +1,3 @@ +{ + "title": "Pagnination" +} \ No newline at end of file diff --git a/components/04_Molecules/pagination/pagination.hbs b/components/04_Molecules/pagination/pagination.hbs new file mode 100644 index 0000000..50ce88c --- /dev/null +++ b/components/04_Molecules/pagination/pagination.hbs @@ -0,0 +1,71 @@ +
+ +
\ No newline at end of file