Adapting pagination

components/05_Molecules/_molecules.styl

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

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