55 lines
1.2 KiB
Stylus
55 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-CSSParameter({
|
|
focalX: focalX,
|
|
focalY: focalY
|
|
})
|
|
|
|
height 100%
|
|
width 100%
|
|
display block
|
|
object-fit cover
|
|
object-position --focalX --focalY
|
|
|
|
+RV-Block--shorthand('RV-FocalPoint')
|
|
RV-FocalPoint()
|
|
|
|
RV-FocalPoint--upperHalf()
|
|
RV-FocalPoint--lowerHalf()
|
|
RV-FocalPoint--leftHalf()
|
|
RV-FocalPoint--rightHalf()
|
|
|
|
|