Switching to BEM Generator

components/00_ContentShape/focalPoint/_focalPoint.styl

@@ -1,4 +1,37 @@
-// FocalPoint in percentage
+/**
+ * This mixins helps you positioning objects (i.e. images, videos) to a 'focal point'.
+ * A focal point is a manual choosen point in an object that will be in the center of the cropped object.
+ * If the object is not cropped, the focal point does not apply. Best used with RV-AspectRatio.
+ * The focal point is given in percentages relative to the objects size.
+ 
+ * To set the focal point either use one the the predefined classes or set them using inline CSS:
+ * class="RV-FocalPoint" style="--focalX: 44%; --focalY: 16.66%"
+ * 
+ */
+RV-FocalPoint--upperHalf()
+	+RV-Block__Modifier--name('upperHalf')
+		RV-CSSParameter({
+			focalY: 25%
+		})
+
+RV-FocalPoint--lowerHalf()
+	+RV-Block__Modifier--name('lowerHalf')
+		RV-CSSParameter({
+			focalY: 75%
+		})
+
+RV-FocalPoint--leftHalf()
+	+RV-Block__Modifier--name('leftHalf')
+		RV-CSSParameter({
+			focalX: 25%
+		})
+
+RV-FocalPoint--rightHalf()
+	+RV-Block__Modifier--name('rightHalf')
+		RV-CSSParameter({
+			focalX: 75%
+		})
+
 RV-FocalPoint(focalX=50%, focalY=50%)
 	RV-CSSParameter({
 		focalX: focalX,
@@ -10,39 +43,19 @@ RV-FocalPoint(focalX=50%, focalY=50%)
 	object-fit cover
 	object-position --focalX --focalY
 
-RV-FocalPoint--upperHalf()
-	RV-CSSParameter({
-		focalY: 25%
-	})
-
-RV-FocalPoint--lowerHalf()
-	RV-CSSParameter({
-		focalY: 75%
-	})
-
-RV-FocalPoint--leftHalf()
-	RV-CSSParameter({
-		focalX: 25%
-	})
-
-RV-FocalPoint--rightHalf()
-	RV-CSSParameter({
-		focalX: 75%
-	})
-
-.RV-FocalPoint
++RV-Block('RV-FocalPoint')
 	RV-FocalPoint()
 	
-	&--upperHalf
+	+RV-Block__Modifier()
 		RV-FocalPoint--upperHalf()
 	
-	&--lowerHalf
+	+RV-Block__Modifier()
 		RV-FocalPoint--lowerHalf()
 	
-	&--leftHalf	
+	+RV-Block__Modifier()
 		RV-FocalPoint--leftHalf()
 	
-	&--rightHalf
+	+RV-Block__Modifier()
 		RV-FocalPoint--rightHalf()