Converting Stylus to BEM-Generator and adding Boxshadows

components/02_Styles/boxShadow/_boxShadow.styl

@@ -1,39 +1,102 @@
+/*
+ * A collection of Box Shadows
+ */
+ 
+/*
+ * Just a simple box shadow, surrounding the box
+ */
 RV-BoxShadow--simple(color)
-	box-shadow 0 0 10px color
+	+RV-Block__Modifier--name('simple')
+		box-shadow 0 0 10px 3px color
 
-RV-BoxShadow(color)
+/*
+ * Hhuge shadow under the bottom of the
+ * box, which creates an levitation effect
+ */
+RV-BoxShadow--levitating(color)
+	+RV-Block__Modifier--name('levitating')
+		box-shadow: color 0px 1px 1px 0px inset, color 0px 40px 80px -15px, color 0px 30px 60px -30px;
 
-	position relative
-	float left
-	background-color white
+/*
+ * Stacked, retro, synth wave style 
+ * shadows unterneath the box
+ * To change the color using CSS vars
+ * you have to set the separte r, g, b values
+ * --color: 107, 86, 144
+ * This may cause other types of shadow to break 
+ * if used in the same selector / var scope
+ */
+RV-BoxShadow--stacked(color)
+	+RV-Block__Modifier--name('stacked')		
+		--color red(@--color), green(@--color), blue(@--color)
+		box-shadow: 'rgba(%s, 0.4) 0px 5px, rgba(%s, 0.3) 0px 10px, rgba(%s, 0.2) 0px 15px, rgba(%s, 0.1) 0px 20px, rgba(%s, 0.05) 0px 25px' % (color color color color color)
 
-	&:before, &:after
-		content ""
-		position absolute
-		z-index -2
-
-	&--simple
-		RV-BoxShadow--simple(color)
-
-	&--raised
-		&:after
-			box-shadow 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset
-
-
-	&--liftedCorners
+/*
+ * Two shadows at the lower left and right of the box
+ * to create the effect the corners are lifted like
+ * a piece of paper
+ */
+RV-BoxShadow--liftedCorners(color)
+	+RV-Block__Modifier--name('liftedCorners')
 		&:before, &:after
 			bottom 15px
 			left 10px
 			width 50%
 			height 20%
-			max-width 300px
-			box-shadow 0 15px 10px rgba(0, 0, 0, 0.7)
-			transform rotate(-3deg)
+			box-shadow 0 15px 8px color
+			transform rotate(-5deg)
 		  
 		&:after
 			right 10px
 			left auto
-			transform rotate(3deg)
-			
-.RV-BoxShadow
-	RV-BoxShadow(#6b5690)
+			transform rotate(5deg)
+
+/*
+ * A suttle drop shadow in the middle of the element
+ */
+RV-BoxShadow--drop(color)
+	+RV-Block__Modifier--name('drop')
+		position relative
+		box-shadow 0 1px 4px color
+		
+		&:after
+			box-shadow 0 0 40px color
+			bottom 0px 
+			left 10%
+			right 10%
+			width 80%
+			height 50%
+			border-radius 100%
+		
+
+RV-BoxShadow()
+	position relative
+	float left
+	background-color white
+
+	&:before, &:after
+		content ''
+		position absolute
+		z-index -2
+
++RV-Block('RV-BoxShadow')
+	RV-CSSParameter({
+		color: #6b5690
+	})
+	
+	RV-BoxShadow()
+	
+	+RV-Block__Modifier()
+		RV-BoxShadow--simple(color)
+		
+	+RV-Block__Modifier()
+		RV-BoxShadow--liftedCorners(color)
+	
+	+RV-Block__Modifier()
+		RV-BoxShadow--levitating(color)
+		
+	+RV-Block__Modifier()
+		RV-BoxShadow--stacked(color)
+		
+	+RV-Block__Modifier()
+		RV-BoxShadow--drop(color)

components/02_Styles/boxShadow/boxShadow.hbs

@@ -1,11 +1,18 @@
-<div class="RV-BoxShadow--raised" style="width: 300px; height: 300px; margin: 20px 0 0 20px;">
-    <img src="https://via.placeholder.com/300/7242af"/>
-</div>
-
-<div class="RV-BoxShadow--simple" style="width: 300px; height: 300px; margin: 20px 0 0 20px;">
+<div class="RV-BoxShadow RV-BoxShadow--simple" style="width: 300px; height: 300px; margin: 20px 0 0 20px;">
     <img src="https://via.placeholder.com/300/7242af"/>
 </div>
 
 <div class="RV-BoxShadow RV-BoxShadow--liftedCorners" style="width: 300px; height: 300px; margin: 20px 0 20px 20px;">
     <img src="https://via.placeholder.com/300/7242af"/>
+</div>
+<div class="RV-BoxShadow RV-BoxShadow--levitating" style="width: 300px; height: 300px; margin: 20px 0 20px 20px;">
+    <img src="https://via.placeholder.com/300/7242af"/>
+</div>
+
+<div class="RV-BoxShadow RV-BoxShadow--stacked" style="width: 300px; height: 300px; margin: 20px 0 20px 20px;">
+    <img src="https://via.placeholder.com/300/7242af"/>
+</div>
+
+<div class="RV-BoxShadow RV-BoxShadow--drop" style="width: 300px; height: 300px; margin: 20px 0 20px 20px;">
+    <img src="https://via.placeholder.com/300/7242af"/>
 </div>