Converting Stylus to BEM-Generator and adding Boxshadows

2021-01-17 22:33:38 +01:00
parent d9127d503a
commit 78902c530f
6 changed files with 198 additions and 121 deletions
--- a/components/02_Styles/iconized/_iconized.styl
+++ b/components/02_Styles/iconized/_iconized.styl
@@ -1,56 +1,70 @@
-RV-Iconized__Container()
-	position relative
+RV-Iconized--extraSmall()
+	+RV-Block__Modifier--name('extraSmall')
+		+RV-Element('Icon')
+			width 1em
+			height 1em
+			position relative
+			top .125em

-	&--small
+RV-Iconized--small()
+	+RV-Block__Modifier('small')
 		top -.25em
+		+RV-Element('Icon')
+			width 1.5em
+			height 1.5em
+			position relative
+			top .45em

-	&--medium
+RV-Iconized--medium()
+	+RV-Block__Modifier--name('medium')
 		top -.5em
+		+RV-Element('Icon')
+			width 2em
+			height 2em
+			position relative
+			top .625em

-	&--large
+RV-Iconized--large()
+	+RV-Block__Modifier--name('large')
 		top -1.03073em
+		+RV-Element('Icon')
+			width 3em
+			height 3em
+			position relative
+			top 1.15573em		

-	&--huge
+RV-Iconized--huge()
+	+RV-Block__Modifier--name('huge')
 		top -2.05em
+		+RV-Element('Icon')
+			width 5em
+			height 5em
+			position relative
+			top 2.175em

 RV-Iconized__Icon()
-	RV-Reset()
-	
-	&__Container--extraSmall &__Icon
-		width 1em
-		height 1em
-		position relative
-		top .125em
-		
-	&__Container--small &__Icon
-		width 1.5em
-		height 1.5em
-		position relative
-		top .45em
-		
-	&__Container--medium &__Icon
-		width 2em
-		height 2em
-		position relative
-		top .625em
-		
-	&__Container--large &__Icon
-		width 3em
-		height 3em
-		position relative
-		top 1.15573em
+	+RV-Element--name('Icon')
+		RV-Reset()

-	&__Container--huge &__Icon
-		width 5em
-		height 5em
-		position relative
-		top 2.175em
+RV-Iconized()
+	position relative

-RV-Iconized(prefix='&')
-	{prefix}__Container
-		RV-Iconized__Container()
-	
-	RV-Iconized__Icon()

-.RV-Iconized
-	RV-Iconized()
+RV-Block('RV-Iconized')
+	+RV-Element()
+		RV-Iconized__Icon()
+		
+	+RV-Block__Modifier()
+		RV-Iconized--extraSmall()
+		
+	+RV-Block__Modifier()
+		RV-Iconized--small()
+		
+	+RV-Block__Modifier()
+		RV-Iconized--medium()
+		
+	+RV-Block__Modifier()
+		RV-Iconized--large()
+		
+	+RV-Block__Modifier()
+		RV-Iconized--huge()
--- a/components/02_Styles/iconized/iconized.hbs
+++ b/components/02_Styles/iconized/iconized.hbs
@@ -1,4 +1,4 @@
-<span class="RV-Iconized__Container RV-Iconized__Container--extraSmall">
+<span class="RV-Iconized RV-Iconized--extraSmall">
 	<svg class="RV-Iconized__Icon" version="1.1" id="Capa_1"
 		xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 		x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve">
@@ -10,7 +10,7 @@ v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,
 	<span class="RV-Iconized__Text">This is a text</span>
 </span>
 <br>
-<span class="RV-Iconized__Container RV-Iconized__Container--small">
+<span class="RV-Iconized RV-Iconized--small">
 	<svg class="RV-Iconized__Icon" version="1.1" id="Capa_1"
 		xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 		x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve">
@@ -22,7 +22,7 @@ v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,
 	<span class="RV-Iconized__Text">This is a text</span>
 </span>
 <br>
-<span class="RV-Iconized__Container RV-Iconized__Container--medium">
+<span class="RV-Iconized RV-Iconized--medium">
 	<svg class="RV-Iconized__Icon RV-Iconized__Icon--medium" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
 		<path d="M0 0h24v24H0z" fill="none"></path>
 		<path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z"></path>
@@ -30,7 +30,7 @@ v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,
 	<span class="RV-Iconized__Text">This is a text</span>
 </span>
 <br>
-<span class="RV-Iconized__Container RV-Iconized__Container--large">
+<span class="RV-Iconized RV-Iconized--large">
 	<svg class="RV-Iconized__Icon RV-Iconized__Icon" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
 		<path d="M0 0h24v24H0z" fill="none"></path>
 		<path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z"></path>
@@ -41,7 +41,7 @@ v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,
 <p style="font-size: 18px;">
 	You could see there was text coming out of her eyes, text coming out of her wherever. Trump Ipsum is calling for a total and complete shutdown of Muslim text entering your website. Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? When other websites give you text, they’re not sending the best. They’re not sending you, they’re sending words that have lots of problems and they’re bringing those problems with us. They’re bringing mistakes. They’re bringing misspellings. They’re typists… And some, I assume, are good words. I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.
 	<a href="#">
-		<span class="RV-Iconized__Container RV-Iconized__Container--small">
+		<span class="RV-Iconized RV-Iconized--small">
 			<svg class="RV-Iconized__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
 							xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
 							xml:space="preserve">