scss-library/components/02_ContentShape/focalPoint/_focalPoint.styl

/**
 * 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()
		RV-CSSParameter({
			focalY: 25%
		})

RV-FocalPoint--lowerHalf()
	+RV-Block--modifier()
		RV-CSSParameter({
			focalY: 75%
		})

RV-FocalPoint--leftHalf()
	+RV-Block--modifier()
		RV-CSSParameter({
			focalX: 25%
		})

RV-FocalPoint--rightHalf()
	+RV-Block--modifier()
		RV-CSSParameter({
			focalX: 75%
		})

RV-FocalPoint(focalX=50%, focalY=50%)
	+RV-Block()
		RV-CSSParameter({
			focalX: focalX,
			focalY: focalY
		})
		
		height 100%
		width 100%
		display block
		object-fit cover
		object-position --focalX --focalY
		
		RV-FocalPoint--upperHalf()
		RV-FocalPoint--lowerHalf()
		RV-FocalPoint--leftHalf()
		RV-FocalPoint--rightHalf()	

RV-FocalPoint()