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

57 lines
1.2 KiB
Stylus

/**
* 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()