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

48 lines
678 B
Stylus

// FocalPoint in percentage
RV-FocalPoint(focalX=50%, focalY=50%)
RV-CSSParameter({
focalX: focalX,
focalY: focalY
})
height 100%
width 100%
object-fit cover
object-position --focalX --focalY
RV-FocalPoint--upperHalf()
RV-CSSParameter({
focalY: 25%
})
RV-FocalPoint--lowerHalf()
RV-CSSParameter({
focalY: 75%
})
RV-FocalPoint--leftHalf()
RV-CSSParameter({
focalX: 25%
})
RV-FocalPoint--rightHalf()
RV-CSSParameter({
focalX: 75%
})
.RV-FocalPoint
RV-FocalPoint()
&--upperHalf
RV-FocalPoint--upperHalf()
&--lowerHalf
RV-FocalPoint--lowerHalf()
&--leftHalf
RV-FocalPoint--leftHalf()
&--rightHalf
RV-FocalPoint--rightHalf()