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

61 lines
1.4 KiB
Stylus
Raw Normal View History

2021-03-04 17:37:09 +01:00
/**
* 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
2021-03-04 17:37:09 +01:00
+RV-Block('RV-FocalPoint')
RV-FocalPoint()
2021-03-04 17:37:09 +01:00
+RV-Block__Modifier()
RV-FocalPoint--upperHalf()
2021-03-04 17:37:09 +01:00
+RV-Block__Modifier()
RV-FocalPoint--lowerHalf()
2021-03-04 17:37:09 +01:00
+RV-Block__Modifier()
RV-FocalPoint--leftHalf()
2021-03-04 17:37:09 +01:00
+RV-Block__Modifier()
RV-FocalPoint--rightHalf()