From 7eeaaff40c8f67020636f8e9717415f60eee1d8f Mon Sep 17 00:00:00 2001
From: reverend <reverend@reverend2048.de>
Date: Sun, 23 Aug 2020 14:39:45 +0200
Subject: [PATCH] Rewrote SCSS Structure, Improvement

---
 components/01_Layouts/fan/_fan.scss | 71 +++++++++++++++++++++--------
 components/01_Layouts/fan/fan.hbs   | 30 +++++++++++-
 2 files changed, 80 insertions(+), 21 deletions(-)

diff --git a/components/01_Layouts/fan/_fan.scss b/components/01_Layouts/fan/_fan.scss
index 689f842..1758cea 100644
--- a/components/01_Layouts/fan/_fan.scss
+++ b/components/01_Layouts/fan/_fan.scss
@@ -1,34 +1,65 @@
-@mixin RV-Fan ($base_height, $base_width) {
+@mixin RV-Fan--horizontal($-base_height, $-base_width, $-suffix: '') {
+	
+	&__Container#{$-suffix} {
+		flex-direction: row;
+	}
+
+	&__Container#{$-suffix} &__Surface {
+		min-width: $-base_width;
+		height: $-base_height;
+	}
+}
+
+@mixin RV-Fan--vertical($-base_height, $-base_width, $-suffix: '') {
+	&__Container#{$-suffix} {
+		flex-direction: column;
+		width:max-content;
+	}
+
+	&__Container#{$-suffix} &__Surface {
+		width: $-base_width;
+		min-height: $-base_height;
+	}
+}
+
+@mixin RV-Fan--auto($-base_height, $-base_width, $-suffix: '') {
+
+	&__Container#{$-suffix} {
+		flex-flow: row wrap;
+	}
+
+	&__Container#{$-suffix} &__Surface {
+		width: calc(100% - #{$-base_width});
+		min-width: $-base-width;
+		height: $-base_height;
+	}
+}
+
+@mixin RV-Fan--fullWidth($-base_height, $-base_width, $-suffix: '') {
+	&__Container#{$-suffix} &__Base, &__Container#{$-suffix} &__Surface {
+		flex-grow: 1;
+	}
+}
+
+@mixin RV-Fan ($-base_height, $-base_width) {
+	@include RV-Fan--vertical($-base_height, $-base_width, '--vertical');
+	@include RV-Fan--horizontal($-base_height, $-base_width, '--horizontal');
+	@include RV-Fan--auto($-base_height, $-base_width, '--auto');
+	@include RV-Fan--fullWidth($-base_height, $-base_width, '--fullWidth');
+
 	&__Container {
 		display: flex;
-
-		&--horizontal {
-			flex-direction: row;
-		}
-
-		&--vertical {
-			flex-direction: column;
-			width:max-content;
-		}
 	}
 
 	&__Base {
-		height: $base_height;
-		width: $base_width;
+		height: $-base_height;
+		width: $-base_width;
 		flex: 0 0 auto;
 	}
 
 	&__Surface {
 		@include RV-ContentCrop;
 	}
-
-	&__Container--horizontal &__Surface {
-		height: $base_height;
-	}
-
-	&__Container--vertical &__Surface {
-		width: $base_width;
-	}
 }
 
 .RV-Fan {
diff --git a/components/01_Layouts/fan/fan.hbs b/components/01_Layouts/fan/fan.hbs
index 2574ddf..2fe5859 100644
--- a/components/01_Layouts/fan/fan.hbs
+++ b/components/01_Layouts/fan/fan.hbs
@@ -1,4 +1,32 @@
-<div class="RV-Fan__Container RV-Fan__Container--horizontal RV-Fan__Container--realFan">
+<div class="RV-Fan__Container RV-Fan__Container--horizontal">
+	<div class="red RV-Fan__Base"></div>
+	<div class="green RV-Fan__Surface">
+		<p>Some content here</p>
+		<p>More conthent over here</p>
+		<p>Et voluptas earum ut. Distinctio qui eaque quo aliquid ipsam ut. Et est sit sed odio aliquam nam. Possimus numquam officiis tenetur quibusdam sint quos sit est. Doloremque hic totam error velit hic. Dolorum labore necessitatibus cumque quisquam voluptate molestiae quae aspernatur.
+
+Quasi vitae cupiditate ducimus nihil. Repudiandae est iste aperiam mollitia et est occaecati at. Nobis ut voluptates tempora quis esse ipsam.
+
+Praesentium facere ea deserunt accusantium velit eos. Eaque non sapiente repellendus facilis omnis eligendi. Deserunt officiis consequatur nihil maiores explicabo. Perspiciatis qui quia et amet.</p>
+	</div>
+</div>
+<br><br>
+<div class="RV-Fan__Container RV-Fan__Container--auto">
+	<div class="red RV-Fan__Base"></div>
+	<div class="green RV-Fan__Surface">
+		<p>Some content here</p>
+		<p>More conthent over here</p>
+		<p>Et voluptas earum ut. Distinctio qui eaque quo aliquid ipsam ut. Et est sit sed odio aliquam nam. Possimus numquam officiis tenetur quibusdam sint quos sit est. Doloremque hic totam error velit hic. Dolorum labore necessitatibus cumque quisquam voluptate molestiae quae aspernatur.
+
+Quasi vitae cupiditate ducimus nihil. Repudiandae est iste aperiam mollitia et est occaecati at. Nobis ut voluptates tempora quis esse ipsam.
+
+Praesentium facere ea deserunt accusantium velit eos. Eaque non sapiente repellendus facilis omnis eligendi. Deserunt officiis consequatur nihil maiores explicabo. Perspiciatis qui quia et amet.</p>
+	</div>
+</div>
+
+
+<br><br>
+<div class="RV-Fan__Container RV-Fan__Container--auto RV-Fan__Container--fullWidth">
 	<div class="red RV-Fan__Base"></div>
 	<div class="green RV-Fan__Surface">
 		<p>Some content here</p>