Adapting Buttons

components/04_Atoms/button/_button.styl

@@ -13,9 +13,6 @@ RV-Button--border(color)
 		border 3px solid color
 		color color
 		border-radius 0px
-		
-		&, *
-			background-color transparent
 			
 		RV-Button--border--Icon()
 
@@ -50,24 +47,23 @@ RV-Button--link(size)
 		border-radius 0px
 		color primary-color
 		&, *
-			background-color transparent
 			margin 0
 			
-		RV-Button--link__Icon(size)
+		//RV-Button--link__Icon(size)
 
 _RV-Button__Icon--shape(size)
-	margin-right 'calc(%s * 1.2)' % size
+	margin-right 'calc(1.2*%s)' % size
 	&, *
 		z-index 10
 		position relative
 		
 	&:after, &:before
-		content ''
 		width 50%
 		height 110%
 		z-index 5
 		background-color inherit
 		position absolute
+		left 70%
 
 
 RV-Button__Icon--inwardsArrow(size)
@@ -76,55 +72,57 @@ RV-Button__Icon--inwardsArrow(size)
 		
 		.RV-Image
 			left 'calc(%s * .5)' % size
+
 		&:after
+			content ''
 			transform rotate(-35deg)
-			left 70%
 			top 25%
 			
 		&:before
+			content ''
 			transform rotate(35deg)
-			left 70%
 			top -35%
 			
 RV-Button__Icon--outwardsArrow(size)
 	+RV-Element--modifier()
 		_RV-Button__Icon--shape(size)
-		margin-right 'calc(%s * 2)' % size
+		//margin-right 'calc(%s * 2)' % size
 		
 		.RV-Image
 			left 'calc(%s * .7)' % size
 		
 		&:after
+			content ''
 			transform rotate(35deg)
-			left 70%
 			top 25%
 			
 		&:before
+			content ''
 			transform rotate(-35deg)
-			left 70%
 			top -37%
 
 RV-Button__Icon--forwardSlope(size)
 	+RV-Element--modifier()
 		_RV-Button__Icon--shape(size)
-		margin-right 'calc(%s * 2)' % size
 		
 		.RV-Image
 			left 'calc(%s * .7)' % size
 
-		&:after
+		&:after, &:before
+			content ''
 			transform rotate(-15deg)
 			top 0%
 			
 RV-Button__Icon--backwardSlope(size)
 	+RV-Element--modifier()
 		_RV-Button__Icon--shape(size)
-		margin-right 'calc(%s * 2)' % size
+		//margin-right 'calc(%s * 2)' % size
 		
 		.RV-Image
 			left 'calc(%s * .7)' % size
 	
 		&:after
+			content ''
 			transform rotate(15deg)
 			top -10%
 
@@ -132,11 +130,16 @@ RV-Button__Icon(size)
 	+RV-Element()
 		width min-content
 		background-color primary-color
-		padding size
-		
+		//padding 'calc(1.01*%s)' % size
+		height 'calc(4*%s)' % size
+		width 'calc(4*%s)' % size
+		position relative
+
 		.RV-Image
 			height 'calc(%s * 2.5)' % size
-			
+		
+		RV-Alignment--center()
+
 		RV-Button__Icon--outwardsArrow(size)
 		RV-Button__Icon--inwardsArrow(size)
 		
@@ -148,7 +151,12 @@ RV-Button__Text(size)
 	+RV-Element()
 		font-size 'calc(%s * 1.65)' % size
 		background-color secondary-color
-		padding size
+		//padding 'calc(1.5* %s)' % size
+		//padding-left 'calc(2*%s)' %size
+		padding 0 size
+		height 'calc(4*%s)' % size
+
+		RV-Alignment--center()
 
 RV-Button()
 	+RV-Block()

components/04_Atoms/button/button.hbs

@@ -9,6 +9,17 @@
 <br>
 <br>
 <br>
+<button class="RV-Button RV-Button--large RV-Button--border">
+	<div class="RV-Button__Icon RV-Button__Icon--inwardsArrow">
+		<img class="RV-Image" src="{{ path '/icons/debug.png' }}"/>
+	</div>
+	<div class="RV-Button__Text">
+		Button Text
+	</div>
+</button>
+<br>
+<br>
+<br>
 <button class="RV-Button RV-Button--medium RV-Button--link">
 	<div class="RV-Button__Icon RV-Button__Icon--forwardSlope">
 		<img class="RV-Image" src="{{ path '/icons/debug.png' }}"/>
@@ -20,6 +31,17 @@
 <br>
 <br>
 <br>
+<button class="RV-Button RV-Button--medium RV-Button--link">
+	<div class="RV-Button__Icon RV-Button__Icon--backwardSlope">
+		<img class="RV-Image" src="{{ path '/icons/debug.png' }}"/>
+	</div>
+	<div class="RV-Button__Text">
+		Button Text
+	</div>
+</button>
+<br>
+<br>
+<br>
 <button class="RV-Button RV-Button--small RV-Button">
 	<div class="RV-Button__Icon">
 		<img class="RV-Image" src="{{ path '/icons/debug.png' }}"/>