Outsource Breakpoint to its own component

components/01_Layouts/flexRow/_flexRow.styl

@@ -12,65 +12,14 @@ RV-FlexRow--horizontal()
 RV-FlexRow--vertical()
 	+RV-Block--modifier()
 		flex-direction column
-		
-		+RV-Element('Item')
-			margin-bottom unset
-
-
-RV-FlexRow__Item--outsideBreakPoint()
-	+RV-Element--modifier()
-		margin-bottom -100vh
-		height max-content
-		flex-shrink 999
-
-RV-FlexRow__Item--insideBreakPoint()
-	+RV-Element--modifier()
-		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.
- */
-RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint=0)
-	+RV-Block--modifier()
-		RV-Reset()
-		gap 0px
-		
-		RV-Utils__ElementAmount--range(0, 20, @(index, total){
-				min-width "calc((%s - (var(--spacing-inner) * (%s - 1))) / %s - (2 * var(--spacing-inner)))" % (localBreakPoint index index)
-			}
-		)
-		
-		+RV-Element('Item')
-			min-width initial
-			flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint
-			overflow hidden
-			
-			RV-FlexRow__Item--outsideBreakPoint()
-			RV-FlexRow__Item--insideBreakPoint()
-				
-			margin 0
-			padding 0
-			--_spacing-difference calc(var(--inner-spacing) - var(--outer-spacing))
-			--height 100%
-			*
-				position relative
-				height calc(var(--height) - var(--_spacing-difference))
-				width calc(var(--height) - var(--_spacing-difference))
-				top calc(var(--_spacing-difference) / 2)
-				left calc(var(--_spacing-difference) / 2)
-		
-		@media(max-width mediaBreakPoint)
-			flex-direction row
-	
 
 /*
  * Typical Flexbox behavior, Row is horizontal, but item are wraped individualy
  */
-RV-FlexRow--auto()
+RV-FlexRow--wrap()
 	+RV-Block--modifier()
-		+RV-Squash()
-			RV-FlexRow--horizontal()
-			flex-wrap wrap
+		flex-direction row
+		flex-wrap wrap
 
 
 /* ##########
@@ -144,8 +93,6 @@ RV-FlexRow__Item--content()
   ########### */
 RV-FlexRow()
 	display flex
-	height 100%
-	overflow-y hidden
 
 +RV-Block('RV-FlexRow')
 	RV-FlexRow()
@@ -172,4 +119,4 @@ RV-FlexRow()
 	RV-FlexRow--breakPoint(--localBreakPoint, --mediaBreakPoint)
 	RV-FlexRow--horizontal()
 	RV-FlexRow--vertical()
-	RV-FlexRow--auto()
+	RV-FlexRow--wrap()

components/01_Layouts/flexRow/flexRow.config.json

@@ -17,15 +17,9 @@
 			}
 		},
 		{
-			"name": "Breakpoint",
+			"name": "Wrap",
 			"context": {
-				"modifier": "--breakPoint"
-			}
-		},
-		{
-			"name": "Auto",
-			"context": {
-				"modifier": "--auto"
+				"modifier": "--wrap"
 			}
 		}
 	]