Pagination Molecule

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

components/04_Molecules/_molecules.styl

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

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()
+		

components/04_Molecules/pagination/pagination.config.json

@@ -0,0 +1,3 @@
+{
+    "title": "Pagnination"
+}

components/04_Molecules/pagination/pagination.hbs

@@ -0,0 +1,71 @@
+<div class="RV-Pagination">
+    <ul class="RV-Pagination__List">
+        <li class="RV-Pagination__Item RV-Pagination__Item--first  RV-Pagination__Icon">
+            <a href="#" class="RV-Link">
+                <span class="RV-Icon">⟪</span>
+            </a>
+        </li>	
+        <li class="RV-Pagination__Item RV-Pagination__Item--first RV-Pagination__Label">
+            <a href="#" class="RV-Link">
+                <span class="RV-Text">First</span>
+            </a>
+        </li>
+        <li class="RV-Pagination__Item RV-Pagination__Item--disabled RV-Pagination__Item--previous RV-Pagination__Icon">
+            <a href="#" class="RV-Link">
+                <span class="RV-Icon">⟨</span>
+            </a>
+        </li>		
+        <li class="RV-Pagination__Item RV-Pagination__Item--disabled RV-Pagination__Item--previous RV-Pagination__Label">
+            <a href="#" class="RV-Link">
+                <span class="RV-Text">Previous</span>
+            </a>
+        </li>
+        <li class="RV-Pagination__Item">
+            <a href="#" class="RV-Link">
+                <span class="RV-Text">1</span>
+            </a>
+        </li>
+        <li class="RV-Pagination__Item">
+            <a href="#" class="RV-Link">
+                <span class="RV-Text">2</span>
+            </a>
+        </li>
+        <li class="RV-Pagination__Item">
+            <a href="#" class="RV-Link">
+                <span class="RV-Text">3</span>
+            </a>
+        </li>
+        <li class="RV-Pagination__Item RV-Pagination__Item--current">
+            <a href="#" class="RV-Link">
+                <span class="RV-Text">4</span>
+            </a>
+        </li>
+        <li class="RV-Pagination__Item">
+            <a href="#" class="RV-Link">
+                <span class="RV-Text">5</span>
+            </a>
+        </li>
+        <li class="RV-Pagination__Item RV-Pagination__Item--next RV-Pagination__Label">
+            <a href="#" class="RV-Link">
+                <span class="RV-Text">Next</span>
+            </a>
+        </li>
+		<li class="RV-Pagination__Item RV-Pagination__Item--next RV-Pagination__Icon">
+            <a href="#" class="RV-Link">
+                <span class="RV-Icon">⟩</span>
+            </a>
+        </li>
+        <li class="RV-Pagination__Item RV-Pagination__Item--last RV-Pagination__Label">
+            <a href="#" class="RV-Link">
+                <span class="RV-Text">Last</span>
+
+            </a>
+        </li>
+        <li class="RV-Pagination__Item RV-Pagination__Item--last RV-Pagination__Icon">
+            <a href="#" class="RV-Link">
+                <span class="RV-Icon">⟫</span>
+
+            </a>
+        </li>		
+    </ul>
+</div>