Von 00 nach 10 verschoben

2021-03-04 17:38:50 +01:00
parent c656dc2929
commit 7e751d1078
16 changed files with 13 additions and 109 deletions
--- a/components/10_ContentShape/_contentShape.styl
+++ b/components/10_ContentShape/_contentShape.styl
@@ -0,0 +1,4 @@
+@import 'aspectRatio/_aspectRatio'
+@import 'focalPoint/_focalPoint'
+@import 'shape/_shape'
+@import 'truncation/_truncation'
--- a/components/10_ContentShape/aspectRatio/_aspectRatio.styl
+++ b/components/10_ContentShape/aspectRatio/_aspectRatio.styl
@@ -0,0 +1,70 @@
+/**
+ * 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()
--- a/components/10_ContentShape/aspectRatio/aspectRatio.config.json
+++ b/components/10_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"
+			}
+		}
+	]
+}
--- a/components/10_ContentShape/aspectRatio/aspectRatio.hbs
+++ b/components/10_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}}
--- a/components/10_ContentShape/focalPoint/_focalPoint.styl
+++ b/components/10_ContentShape/focalPoint/_focalPoint.styl
@@ -0,0 +1,61 @@
+/**
+ * This mixins helps you positioning objects (i.e. images, videos) to a 'focal point'.
+ * A focal point is a manual choosen point in an object that will be in the center of the cropped object.
+ * If the object is not cropped, the focal point does not apply. Best used with RV-AspectRatio.
+ * The focal point is given in percentages relative to the objects size.
+ 
+ * To set the focal point either use one the the predefined classes or set them using inline CSS:
+ * class="RV-FocalPoint" style="--focalX: 44%; --focalY: 16.66%"
+ * 
+ */
+RV-FocalPoint--upperHalf()
+	+RV-Block__Modifier--name('upperHalf')
+		RV-CSSParameter({
+			focalY: 25%
+		})
+
+RV-FocalPoint--lowerHalf()
+	+RV-Block__Modifier--name('lowerHalf')
+		RV-CSSParameter({
+			focalY: 75%
+		})
+
+RV-FocalPoint--leftHalf()
+	+RV-Block__Modifier--name('leftHalf')
+		RV-CSSParameter({
+			focalX: 25%
+		})
+
+RV-FocalPoint--rightHalf()
+	+RV-Block__Modifier--name('rightHalf')
+		RV-CSSParameter({
+			focalX: 75%
+		})
+
+RV-FocalPoint(focalX=50%, focalY=50%)
+	RV-CSSParameter({
+		focalX: focalX,
+		focalY: focalY
+	})
+	
+	height 100%
+	width 100%
+	object-fit cover
+	object-position --focalX --focalY
+
+RV-Block('RV-FocalPoint')
+	RV-FocalPoint()
+	
+	+RV-Block__Modifier()
+		RV-FocalPoint--upperHalf()
+	
+	+RV-Block__Modifier()
+		RV-FocalPoint--lowerHalf()
+	
+	+RV-Block__Modifier()
+		RV-FocalPoint--leftHalf()
+	
+	+RV-Block__Modifier()
+		RV-FocalPoint--rightHalf()	
+
+	
--- a/components/10_ContentShape/focalPoint/focalPoint.config.json
+++ b/components/10_ContentShape/focalPoint/focalPoint.config.json
@@ -0,0 +1,4 @@
+{
+	"name": "focalPoint",
+	"title": "Focal Point"
+}
--- a/components/10_ContentShape/focalPoint/focalPoint.hbs
+++ b/components/10_ContentShape/focalPoint/focalPoint.hbs
@@ -0,0 +1,22 @@
+
+<div>
+	<div class="RV-AspectRatio RV-AspectRatio--4to3">
+		<img class="RV-FocalPoint" style="--focalX: 50%; --focalY: 16.66%"  src="{{ path '/images/landscape.jpeg'}}"/>
+	</div>
+</div>
+
+<div class="RV-AspectRatio RV-AspectRatio--4to3">
+	<img class="RV-FocalPoint" style="--focalX: 50%; --focalY: 75%"  src="{{ path '/images/portrait_lowFocelPoint.jpeg'}}"/>
+</div>
+
+<div class="RV-AspectRatio RV-AspectRatio--4to3">
+	<img class="RV-FocalPoint" style="--focalX: 50%; --focalY: 47%"  src="{{ path '/images/hasi01.png'}}"/>
+</div>
+
+<div class="RV-AspectRatio RV-AspectRatio--4to3">
+	<img class="RV-FocalPoint RV-FocalPoint--upperHalf" src="{{ path '/images/portrait_lowFocelPoint.jpeg'}}"/>
+</div>
+
+<div class="RV-AspectRatio RV-AspectRatio--1to2">
+	<img class="RV-FocalPoint RV-FocalPoint--rightHalf" src="{{ path '/images/landscape.jpeg'}}"/>
+</div>
--- a/components/10_ContentShape/shape/_shape.styl
+++ b/components/10_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()
--- a/components/10_ContentShape/shape/shape.config.json
+++ b/components/10_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"
+			}
+		}
+	]
+}
--- a/components/10_ContentShape/shape/shape.hbs
+++ b/components/10_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>