From 96d47dc56a728915b24bcefeb5cea60d6f2c0c98 Mon Sep 17 00:00:00 2001
From: reverend <reverend@reverend2048.de>
Date: Sun, 27 Dec 2020 15:59:43 +0100
Subject: [PATCH] Relative Sizes

---
 components/01_Layouts/_layouts.scss           |  3 +-
 components/01_Layouts/sizes/_sizes.scss       | 39 ++++++++
 components/01_Layouts/sizes/sizes.config.json |  1 +
 components/01_Layouts/sizes/sizes.hbs         | 96 +++++++++++++++++++
 4 files changed, 138 insertions(+), 1 deletion(-)
 create mode 100644 components/01_Layouts/sizes/_sizes.scss
 create mode 100644 components/01_Layouts/sizes/sizes.config.json
 create mode 100644 components/01_Layouts/sizes/sizes.hbs

diff --git a/components/01_Layouts/_layouts.scss b/components/01_Layouts/_layouts.scss
index 76fe722..96c0160 100644
--- a/components/01_Layouts/_layouts.scss
+++ b/components/01_Layouts/_layouts.scss
@@ -4,4 +4,5 @@
 @import 'flexGrid/flexGrid';
 @import 'contentCrop/contentCrop';
 @import 'fan/fan';
-@import 'fullWidthContent/fullWidthContent';
\ No newline at end of file
+@import 'fullWidthContent/fullWidthContent';
+@import 'sizes/sizes';
\ No newline at end of file
diff --git a/components/01_Layouts/sizes/_sizes.scss b/components/01_Layouts/sizes/_sizes.scss
new file mode 100644
index 0000000..15fc474
--- /dev/null
+++ b/components/01_Layouts/sizes/_sizes.scss
@@ -0,0 +1,39 @@
+@mixin RV-Sizes($-prefix: '&') {
+
+    #{$-prefix}--half {
+        flex-grow: 0;
+        flex-shrink: 0;
+        flex-basis: 50%;
+        width: 50%;
+    }
+
+    #{$-prefix}--third {
+        flex-grow: 0;
+        flex-shrink: 0;
+        flex-basis: 33.33%;
+        width: 33.33%;
+    }
+
+    #{$-prefix}--quarter {
+        flex-grow: 0;
+        flex-shrink: 0;
+        flex-basis: 25%;
+        width: 25%;
+    }
+
+    #{$-prefix}--fixedSize {
+        flex-grow: 0;
+        flex-shrink: 0;
+    }
+
+    #{$-prefix}--content {
+        flex-grow: 0;
+        flex-shrink: 0;
+        width: max-content;
+        flex-basis: max-content;
+    }
+}
+
+.RV-Sizes {
+    @include RV-Sizes;
+}
\ No newline at end of file
diff --git a/components/01_Layouts/sizes/sizes.config.json b/components/01_Layouts/sizes/sizes.config.json
new file mode 100644
index 0000000..9e26dfe
--- /dev/null
+++ b/components/01_Layouts/sizes/sizes.config.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/components/01_Layouts/sizes/sizes.hbs b/components/01_Layouts/sizes/sizes.hbs
new file mode 100644
index 0000000..ef39796
--- /dev/null
+++ b/components/01_Layouts/sizes/sizes.hbs
@@ -0,0 +1,96 @@
+<div class="grid">
+	<div>
+		<div class="red RV-Sizes--half">
+			non flexbox, half size
+		</div>
+		<inline class="green">
+			other, no class
+		</inline>
+	</div>
+	<br>
+	<div>
+		<div class="red RV-Sizes--third">
+			non flexbox, third size
+		</div>
+		<inline class="green">
+			other, no class
+		</inline>
+	</div>
+	<br>
+	<div>
+		<div class="red RV-Sizes--quarter">
+			non flexbox, quarter size
+		</div>
+		<inline class="green">
+			other, no class
+		</inline>
+	</div>
+	<br>
+	<div>
+		<div class="red RV-Sizes--fixedSize" style="width: 150px;">
+			non flexbox, fixed size
+		</div>
+		<inline class="green">
+			other, no class
+		</inline>
+	</div>
+	<br>
+	<div>
+		<div class="red RV-Sizes--content">
+			non flexbox, content size
+		</div>
+		<inline class="green">
+			other, no class
+		</inline>
+	</div>
+	<br><br>
+	using flexbox<br>
+	<div class="RV-FlexRow__Container">
+		<div class="red RV-Sizes--half">
+			non flexbox, half size
+		</div>
+		<div class="green RV-Sizes--quarter">
+			non flexbox, quarter size
+		</div>
+		<inline class="red">
+			other, no class
+		</inline>
+	</div>
+	<br>
+	<div class="RV-FlexRow__Container">
+		<div class="red RV-Sizes--third">
+			non flexbox, third size
+		</div>
+		<inline class="green">
+			other, no class
+		</inline>
+	</div>
+	<br>
+	<div class="RV-FlexRow__Container">
+		<div class="red RV-Sizes--quarter">
+			non flexbox, quarter size
+		</div>
+		<inline class="green">
+			other, no class
+		</inline>
+	</div>
+	<br>
+	<div class="RV-FlexRow__Container">
+		<div class="red RV-Sizes--fixedSize" style="width: 150px;">
+			non flexbox, fixed size
+		</div>
+		<inline class="green">
+			other, no class
+		</inline>
+	</div>
+	<br>
+	<div class="RV-FlexRow__Container">
+		<div class="red RV-Sizes--content">
+			non flexbox, content size
+		</div>
+		<inline class="green">
+			other, no class
+		</inline>
+	</div>
+</div>
+