From c490e110bc42b80083dc914392ae36f49cd9fa61 Mon Sep 17 00:00:00 2001
From: Jeff <jeff@jeff.how>
Date: Fri, 16 Apr 2021 14:05:08 -0400
Subject: [PATCH] Fixed Golden Endcaps

End caps were rising up above the button as the button width was increased do to the -5% margin. Instead, I refactored it using absolute positioning on the pseudo-elements and relative positioning on the button (parent container).
---
 src/styles/_button.scss | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/styles/_button.scss b/src/styles/_button.scss
index fd456b6..5295d49 100644
--- a/src/styles/_button.scss
+++ b/src/styles/_button.scss
@@ -82,6 +82,9 @@
     padding-left: 35px;
     padding-right: 35px;
     overflow: visible;
+	
+	/* endcap fix */
+	position: relative;
 }
 
 /* button hover */
@@ -110,10 +113,15 @@
     background: transparent url('img/button-golden-left.png') no-repeat right center;
     background-size: 100% 100%;
     margin: 0 0 0 0;
-    left: 0px;
+	
+    /* endcap fix */
+    /* left: 0px; 
     float: left;
     margin-left: -46px;
-    margin-top: -5%;
+    margin-top: -5%; */
+    position: absolute;
+    top: -5%;
+    left: -12px;
 }
 
 .rpgui-button.golden:after
@@ -127,10 +135,15 @@
     background: transparent url('img/button-golden-right.png') no-repeat left center;
     background-size: 100% 100%;
     margin: 0 0 0 0;
-    right: 0px;
-    float: right;
+	
+    /* endcap fix */
+    position: absolute;
+    right: -12px;
+    top: -5%;
+    /* float: right;
     margin-right: -46px;
-    margin-top: -5%;
+    margin-top: -5%; */	
+    
 }
 
 /*
@@ -143,4 +156,4 @@
 
     background-image: url('img/button-golden-right-hover.png');
 }
-*/
\ No newline at end of file
+*/