diff --git a/components/02_ContentShape/aspectRatio/_aspectRatio.styl b/components/02_ContentShape/aspectRatio/_aspectRatio.styl new file mode 100644 index 0000000..65ceee5 --- /dev/null +++ b/components/02_ContentShape/aspectRatio/_aspectRatio.styl @@ -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() \ No newline at end of file diff --git a/components/02_ContentShape/aspectRatio/aspectRatio.config.json b/components/02_ContentShape/aspectRatio/aspectRatio.config.json new file mode 100644 index 0000000..fb9e03f --- /dev/null +++ b/components/02_ContentShape/aspectRatio/aspectRatio.config.json @@ -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" + } + } + ] +} \ No newline at end of file diff --git a/components/02_ContentShape/aspectRatio/aspectRatio.hbs b/components/02_ContentShape/aspectRatio/aspectRatio.hbs new file mode 100644 index 0000000..a01d61c --- /dev/null +++ b/components/02_ContentShape/aspectRatio/aspectRatio.hbs @@ -0,0 +1,12 @@ + +{{#if modifier}} +
+{{else}} +
+ {{#each modifier_list}} +
+
+
+ {{/each}} +
+{{/if}} \ No newline at end of file