New dedicated component for aspect Ratio
This commit is contained in:
parent
a65ac8eaeb
commit
04905e9e7a
61
components/02_ContentShape/aspectRatio/_aspectRatio.styl
Normal file
61
components/02_ContentShape/aspectRatio/_aspectRatio.styl
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
/**
|
||||||
|
* Mixins to maintain aspect ratio of an element.
|
||||||
|
*/
|
||||||
|
RV-AspectRatio--XtoY(aspectX=1, aspectY=1)
|
||||||
|
+RV-Block--modifier()
|
||||||
|
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()
|
||||||
|
RV-AspectRatio--XtoY(1, 2)
|
||||||
|
|
||||||
|
RV-AspectRatio--2to1()
|
||||||
|
+RV-Block--modifier()
|
||||||
|
RV-AspectRatio--XtoY(2, 1)
|
||||||
|
|
||||||
|
RV-AspectRatio--3to2()
|
||||||
|
+RV-Block--modifier()
|
||||||
|
RV-AspectRatio--XtoY(3, 2)
|
||||||
|
|
||||||
|
RV-AspectRatio--4to3()
|
||||||
|
+RV-Block--modifier()
|
||||||
|
RV-AspectRatio--XtoY(4, 3)
|
||||||
|
|
||||||
|
RV-AspectRatio--16to9()
|
||||||
|
+RV-Block--modifier()
|
||||||
|
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-AspectRatio--1to2()
|
||||||
|
RV-AspectRatio--2to1()
|
||||||
|
RV-AspectRatio--3to2()
|
||||||
|
RV-AspectRatio--4to3()
|
||||||
|
RV-AspectRatio--16to9()
|
@ -0,0 +1,45 @@
|
|||||||
|
{
|
||||||
|
"name": "aspectRatio",
|
||||||
|
"title": "Aspect Ratio",
|
||||||
|
"context": {
|
||||||
|
"modifier_list": [
|
||||||
|
"RV-AspectRatio--1to2 RV-Dummy--orange",
|
||||||
|
"RV-AspectRatio--2to1 RV-Dummy--blue",
|
||||||
|
"RV-AspectRatio--3to2 RV-Dummy--green",
|
||||||
|
"RV-AspectRatio--4to3 RV-Dummy--red",
|
||||||
|
"RV-AspectRatio--16to9 RV-Dummy--yellow"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"variants": [
|
||||||
|
{
|
||||||
|
"name": "1 to 2",
|
||||||
|
"context": {
|
||||||
|
"modifier": "RV-AspectRatio--1to2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "2 to 1",
|
||||||
|
"context": {
|
||||||
|
"modifier": "RV-AspectRatio--2to1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "3 to 2",
|
||||||
|
"context": {
|
||||||
|
"modifier": "RV-AspectRatio--3to2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "4 to 3",
|
||||||
|
"context": {
|
||||||
|
"modifier": "RV-AspectRatio--4to3"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "16 to 9",
|
||||||
|
"context": {
|
||||||
|
"modifier": "RV-AspectRatio--16to9"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
12
components/02_ContentShape/aspectRatio/aspectRatio.hbs
Normal file
12
components/02_ContentShape/aspectRatio/aspectRatio.hbs
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
|
||||||
|
{{#if modifier}}
|
||||||
|
<div class="RV-Dummy RV-AspectRatio {{modifier}}"></div>
|
||||||
|
{{else}}
|
||||||
|
<div class="RV-FlexGrid RV-FlexGrid--masonry">
|
||||||
|
{{#each modifier_list}}
|
||||||
|
<div class="RV-FlexGrid__Item ">
|
||||||
|
<div class="RV-Dummy RV-AspectRatio {{this}}"></div>
|
||||||
|
</div>
|
||||||
|
{{/each}}
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
Loading…
Reference in New Issue
Block a user