From 04905e9e7a69ceff8a3d15c14b72d07b3cb87415 Mon Sep 17 00:00:00 2001
From: reverend <reverend@reverend2048.de>
Date: Tue, 9 Mar 2021 12:40:00 +0100
Subject: [PATCH] New dedicated component for aspect Ratio

---
 .../aspectRatio/_aspectRatio.styl             | 61 +++++++++++++++++++
 .../aspectRatio/aspectRatio.config.json       | 45 ++++++++++++++
 .../aspectRatio/aspectRatio.hbs               | 12 ++++
 3 files changed, 118 insertions(+)
 create mode 100644 components/02_ContentShape/aspectRatio/_aspectRatio.styl
 create mode 100644 components/02_ContentShape/aspectRatio/aspectRatio.config.json
 create mode 100644 components/02_ContentShape/aspectRatio/aspectRatio.hbs

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}}
+	<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}}
\ No newline at end of file