70 lines
1.3 KiB
Stylus
70 lines
1.3 KiB
Stylus
/**
|
|
* Mixins to maintain aspect ratio of an element.
|
|
*/
|
|
RV-AspectRatio--XtoY(aspectX=1, aspectY=1)
|
|
+RV-Block__Modifier--name('XtoY')
|
|
RV-CSSParameter({
|
|
aspectX: aspectX,
|
|
aspectY: aspectY
|
|
})
|
|
|
|
padding-top 'calc(100% * calc(%s / %s))' % (--aspectY --aspectX)
|
|
&:last-child
|
|
margin-bottom 'calc(-1 * 100% * calc(%s / %s) + var(--outer-spacing))' % (--aspectY --aspectX)
|
|
|
|
RV-Utils__ElementAmount(1, @(index, totale){
|
|
margin-bottom 0px
|
|
})
|
|
|
|
RV-AspectRatio--1to2()
|
|
+RV-Block__Modifier('1to2')
|
|
RV-AspectRatio--XtoY(1, 2)
|
|
|
|
RV-AspectRatio--2to1()
|
|
+RV-Block__Modifier('2to1')
|
|
RV-AspectRatio--XtoY(2, 1)
|
|
|
|
RV-AspectRatio--3to2()
|
|
+RV-Block__Modifier('3to2')
|
|
RV-AspectRatio--XtoY(3, 2)
|
|
|
|
RV-AspectRatio--4to3()
|
|
+RV-Block__Modifier('4to3')
|
|
RV-AspectRatio--XtoY(4, 3)
|
|
|
|
RV-AspectRatio--16to9()
|
|
+RV-Block__Modifier('16to9')
|
|
RV-AspectRatio--XtoY(16, 9)
|
|
|
|
|
|
RV-AspectRatio()
|
|
position relative
|
|
overflow hidden
|
|
height unset
|
|
width unset
|
|
|
|
*
|
|
object-fit cover
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
bottom 0
|
|
right 0
|
|
|
|
+RV-Block('RV-AspectRatio')
|
|
RV-AspectRatio()
|
|
|
|
+RV-Block__Modifier()
|
|
RV-AspectRatio--1to2()
|
|
|
|
+RV-Block__Modifier()
|
|
RV-AspectRatio--2to1()
|
|
|
|
+RV-Block__Modifier()
|
|
RV-AspectRatio--3to2()
|
|
|
|
+RV-Block__Modifier()
|
|
RV-AspectRatio--4to3()
|
|
|
|
+RV-Block__Modifier()
|
|
RV-AspectRatio--16to9() |