Adapting Layouts to the new bem generator

components/01_Layouts/flexRow/_flexRow.styl

@@ -6,11 +6,11 @@
  * Orientation
  */
 RV-FlexRow--horizontal()
-	+RV-Block__Modifier--name('horizontal')
+	+RV-Block--modifier()
 		flex-direction row
 
 RV-FlexRow--vertical()
-	+RV-Block__Modifier--name('vertical')
+	+RV-Block--modifier()
 		flex-direction column
 		
 		+RV-Element('Item')
@@ -18,20 +18,20 @@ RV-FlexRow--vertical()
 
 
 RV-FlexRow__Item--outsideBreakPoint()
-	+RV-Element__Modifier--name('outsideBreakPoint')
+	+RV-Element--modifier()
 		margin-bottom -100vh
 		height max-content
 		flex-shrink 999
 
 RV-FlexRow__Item--insideBreakPoint()
-	+RV-Element__Modifier--name('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--name('breakPoint')
+	+RV-Block--modifier()
 		RV-Reset()
 		gap 0px
 		
@@ -45,11 +45,8 @@ RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint=0)
 			flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint
 			overflow hidden
 			
-			+RV-Element__Modifier()
-				RV-FlexRow__Item--outsideBreakPoint()
-				
-			+RV-Element__Modifier()
-				RV-FlexRow__Item--insideBreakPoint()
+			RV-FlexRow__Item--outsideBreakPoint()
+			RV-FlexRow__Item--insideBreakPoint()
 				
 			margin 0
 			padding 0
@@ -70,16 +67,17 @@ RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint=0)
  * Typical Flexbox behavior, Row is horizontal, but item are wraped individualy
  */
 RV-FlexRow--auto()
-	+RV-Block__Modifier--name('auto')
-		RV-FlexRow--horizontal()
-		flex-wrap wrap
+	+RV-Block--modifier()
+		+RV-Squash()
+			RV-FlexRow--horizontal()
+			flex-wrap wrap
 
 
 /* ##########
  * Item class
   ########### */
 RV-FlexRow__Item()
-	+RV-Element--name('Item')
+	+RV-Element()
 		flex-grow 3
 		flex-shrink 3
 
@@ -88,22 +86,22 @@ RV-FlexRow__Item()
  */
 
 RV-FlexRow__Item--narrower()
-	+RV-Element__Modifier--name('narrower')
+	+RV-Element--modifier()
 		flex-grow 1
 		flex-shrink 5
 
 RV-FlexRow__Item--narrow()
-	+RV-Element__Modifier--name('narrow')
+	+RV-Element--modifier()
 		flex-grow 2
 		flex-shrink 4
 
 RV-FlexRow__Item--wide()
-	+RV-Element__Modifier--name('wide')
+	+RV-Element--modifier()
 		flex-grow 4
 		flex-shrink 2
 
 RV-FlexRow__Item--wider()
-	+RV-Element__Modifier--name('wider')
+	+RV-Element--modifier()
 		flex-grow 5
 		flex-shrink 1
 
@@ -111,32 +109,32 @@ RV-FlexRow__Item--wider()
  * Item has always the given width
  */
 RV-FlexRow__Item--fixedSize(width)
-	+RV-Element__Modifier--name('fixedSize')
+	+RV-Element--modifier()
 		RV-Sizes--fixedSize(width)
 
 /*
  * Item width relativ to the container
  */
 RV-FlexRow__Item--half()
-	+RV-Element__Modifier--name('half')
+	+RV-Element--modifier()
 		flex-grow 0
 		flex-shrink 0
 		flex-basis 50%
 
 RV-FlexRow__Item--third()
-	+RV-Element__Modifier--name('third')
+	+RV-Element--modifier()
 		flex-grow 0
 		flex-shrink 0
 		flex-basis (100/3)%		
 
 RV-FlexRow__Item--quarter()
-	+RV-Element__Modifier--name('quarter')
+	+RV-Element--modifier()
 		flex-grow 0
 		flex-shrink 0
 		flex-basis 25%
 	
 RV-FlexRow__Item--content()
-	+RV-Element__Modifier--name('content')
+	+RV-Element--modifier()
 		flex-grow 0
 		flex-shrink 0
 		flex-basis max-content
@@ -159,46 +157,19 @@ RV-FlexRow()
 	})
 	
 	+RV-Element()
+		RV-FlexRow__Item--narrower()
+		RV-FlexRow__Item--narrow()
+		RV-FlexRow__Item--wide()
+		RV-FlexRow__Item--wider()
+		RV-FlexRow__Item--fixedSize(--width)
+		RV-FlexRow__Item--narrower()
+		RV-FlexRow__Item--half()
+		RV-FlexRow__Item--third()
+		RV-FlexRow__Item--quarter()
+		RV-FlexRow__Item--content()
 		RV-FlexRow__Item()
-		
-		+RV-Element__Modifier()
-			RV-FlexRow__Item--narrower()
 	
-		+RV-Element__Modifier()
-			RV-FlexRow__Item--narrow()
-			
-		+RV-Element__Modifier()
-			RV-FlexRow__Item--wide()
-			
-		+RV-Element__Modifier()
-			RV-FlexRow__Item--wider()
-			
-		+RV-Element__Modifier()
-			RV-FlexRow__Item--fixedSize(--width)
-			
-		+RV-Element__Modifier()
-			RV-FlexRow__Item--narrower()
-			
-		+RV-Element__Modifier()
-			RV-FlexRow__Item--half()
-			
-		+RV-Element__Modifier()
-			RV-FlexRow__Item--third()
-			
-		+RV-Element__Modifier()
-			RV-FlexRow__Item--quarter()
-			
-		+RV-Element__Modifier()
-			RV-FlexRow__Item--content()
-	
-	+RV-Block__Modifier()
-		RV-FlexRow--breakPoint(--localBreakPoint, --mediaBreakPoint)
-	
-	+RV-Block__Modifier()
-		RV-FlexRow--horizontal()
-		
-	+RV-Block__Modifier()
-		RV-FlexRow--vertical()
-		
-	+RV-Block__Modifier()
-		RV-FlexRow--auto()
+	RV-FlexRow--breakPoint(--localBreakPoint, --mediaBreakPoint)
+	RV-FlexRow--horizontal()
+	RV-FlexRow--vertical()
+	RV-FlexRow--auto()