Fan is now using 9999 hack, horizontal breakpoint usage

components/01_Layouts/fan/_fan.styl

@@ -18,9 +18,17 @@ RV-Fan--horizontal(base-height, base-width)
 	+RV-Block__Modifier--name('horizontal')
 		flex-direction row
 		
+		+RV-Element('Base')
+			//flex-basis 'calc(2 * (%s + 2 * var(--inner-spacing) + 2 * var(--outer-spacing)) * 999 - 100% * 999)' % base-width
+			flex-basis 'calc(2 * (%s) * 999 - 100% * 999)' % base-width
+			box-sizing border-box
+			flex-shrink 9999
+			flex-grow 1
+			max-width base-width
+		
 		+RV-Element('Surface')
-			min-width calc_width('calc(%s * 1.5)' % base-width)
 			height calc_height(base-height)
+			flex-basis 'calc(2 * (%s + 2 * var(--inner-spacing) + 2 * var(--outer-spacing)) * 999 - 100% * 999)' % base-width
 
 /*
  * Base above, Surfce below
@@ -30,7 +38,7 @@ RV-Fan--horizontal(base-height, base-width)
 RV-Fan--vertical(base-height, base-width)
 	+RV-Block__Modifier--name('vertical')
 		flex-direction column
-		width max-content
+		width base-width
 		min-width initial
 		
 		+RV-Element('Surface')
@@ -47,32 +55,13 @@ RV-Fan--vertical(base-height, base-width)
 RV-Fan--auto(base-height, base-width)
 	+RV-Block__Modifier--name('auto')
 		flex-flow row wrap
-		min-width initial
 
-		+RV-Element('Surface')
-			min-width calc_width('calc(%s)' % base-width)
-			width calc_width('calc(100% - %s)' % base-width)
-			height calc_height(base-height)
-			flex-grow unset
-			flex-basis unset
-
-/*
- * Also initialy horizontal, changes to vertical when
- * the width of the parent is less than 2 x base-width
- * Width of the base and the surface in vertical mode 
- * are 100% of the parent width
- */
-RV-Fan--fullWidth(base-height, base-width)
-	+RV-Block__Modifier--name('fullWidth')
-		RV-Fan--auto(base-height, base-width)
-		min-width min-content
-		
 		+RV-Element('Base')
 			flex-grow 1
-			
+
 		+RV-Element('Surface')
-			flex-grow 1
-			min-width calc_width('calc(%s * 1.5)' % base-width)
+			height calc_height(base-height)
+			flex-grow 99999
 
 
 /* ###############
@@ -81,10 +70,10 @@ RV-Fan--fullWidth(base-height, base-width)
 RV-Fan__Base(base-height, base-width)
 	+RV-Element--name('Base')
 		height calc_height(base-height)
-		width calc_width(base-width)
-		flex-grow 0
+		
+		flex-basis calc_width(base-width)
 		flex-shrink 0
-		flex-basis auto
+		flex-grow 0
 
 RV-Fan__Surface--fixedHeight(height)
 	+RV-Element__Modifier--name('fixedHeight')
@@ -98,20 +87,16 @@ RV-Fan__Surface(base-height, base-width)
 	+RV-Element--name('Surface')
 		overflow hidden
 		height calc_height(base-height)
-		width calc_width()
-		min-width calc_width('calc(%s * 1.5)' % base-width)
-		
-		flex-grow 20
-		flex-shrink 0
 		flex-basis calc_width(base-width)
+		flex-grow 1
 
 /* ############
  * Block Mixin
  * ############ */
-RV-Fan()
+RV-Fan(base-height, base-width)
 	display flex
 	position relative
-	min-width min-content
+	min-width base-width
 
 /* #########
  * CSS-Class
@@ -124,7 +109,7 @@ RV-Fan()
 	
 	--inner-spacing 0px
 
-	RV-Fan()
+	RV-Fan(--base-height, --base-width)
 	+RV-Element()
 		RV-Fan__Surface(--base-height, --base-width)
 		

components/01_Layouts/fan/fan.config.json

@@ -18,13 +18,6 @@
 			"context": {
 				"modifier": "--auto"
 			}
-		},
-		{
-			"name": "FullWidth",
-			"context": {
-				"modifier": "--fullWidth"
-			}
 		}
-		
 	]
 }