From 73f2d4aea936f3f7a812f7276736778c4e54c37e Mon Sep 17 00:00:00 2001
From: reverend <reverend@reverend2048.de>
Date: Tue, 9 Mar 2021 12:40:36 +0100
Subject: [PATCH] component for shaping container

---
 components/02_ContentShape/shape/_shape.styl  | 45 +++++++++++++++++++
 .../02_ContentShape/shape/shape.config.json   | 17 +++++++
 components/02_ContentShape/shape/shape.hbs    |  3 ++
 3 files changed, 65 insertions(+)
 create mode 100644 components/02_ContentShape/shape/_shape.styl
 create mode 100644 components/02_ContentShape/shape/shape.config.json
 create mode 100644 components/02_ContentShape/shape/shape.hbs

diff --git a/components/02_ContentShape/shape/_shape.styl b/components/02_ContentShape/shape/_shape.styl
new file mode 100644
index 0000000..72fb5a3
--- /dev/null
+++ b/components/02_ContentShape/shape/_shape.styl
@@ -0,0 +1,45 @@
+/**
+ * This mixins lets to shape elements to squares or circles.
+ * Note: Even if the class RV-Shape itself is not nessecary (at this point)
+ * you still should use it to maintain compatiblity:
+ * CSS: class="RV-Shape RV-Shape--square"
+ * Stylues: 
+ *	RV-Shape()
+ *	RV-Shape--square()
+ * You may want to combine this mixin with RV-FocalPoint.
+ */
+RV-Shape--square()
+	+RV-Block__Modifier--name('square')
+		padding-top 100%
+		width 100%
+		position relative
+		
+		*
+			position absolute
+			top 0
+			left 0
+			bottom 0
+			right 0
+
+RV-Shape--circle()
+	+RV-Block__Modifier--name('circle')	
+		padding-top 100%
+		width 100%
+		position relative
+
+		&, *
+			clip-path circle()
+		
+		*
+			position absolute
+			top 0
+			left 0
+			bottom 0
+			right 0
+
++RV-Block('RV-Shape')
+	+RV-Block__Modifier()
+		RV-Shape--square()
+		
+	+RV-Block__Modifier()
+		RV-Shape--circle()
\ No newline at end of file
diff --git a/components/02_ContentShape/shape/shape.config.json b/components/02_ContentShape/shape/shape.config.json
new file mode 100644
index 0000000..92dc757
--- /dev/null
+++ b/components/02_ContentShape/shape/shape.config.json
@@ -0,0 +1,17 @@
+{
+	"name": "Shape",
+	"variants": [
+		{
+			"name": "Square",
+			"context": {
+				"modifier": "RV-Shape--square"
+			}
+		},
+		{
+			"name": "Circle",
+			"context": {
+				"modifier": "RV-Shape--circle"
+			}
+		}
+	]
+}
\ No newline at end of file
diff --git a/components/02_ContentShape/shape/shape.hbs b/components/02_ContentShape/shape/shape.hbs
new file mode 100644
index 0000000..8ab86b2
--- /dev/null
+++ b/components/02_ContentShape/shape/shape.hbs
@@ -0,0 +1,3 @@
+<div class="RV-Shape {{#if modifier}}{{modifier}}{{/if}}">
+	<img class="RV-FocalPoint" style="--focalX: 50%; --focalY: 75%"  src="{{ path '/images/portrait_lowFocelPoint.jpeg'}}"/>
+</div>
\ No newline at end of file