scss-library/components/00_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--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,
		focalY: focalY
	})
	
	height 100%
	width 100%
	object-fit cover
	object-position --focalX --focalY

+RV-Block('RV-FocalPoint')
	RV-FocalPoint()
	
	+RV-Block__Modifier()
		RV-FocalPoint--upperHalf()
	
	+RV-Block__Modifier()
		RV-FocalPoint--lowerHalf()
	
	+RV-Block__Modifier()
		RV-FocalPoint--leftHalf()
	
	+RV-Block__Modifier()
		RV-FocalPoint--rightHalf()