From aaffa9cca1c79e7f8cf2ebc17fdc3a4d5f525ecd Mon Sep 17 00:00:00 2001
From: Wout Bertrums <wout@wbnet.eu>
Date: Sun, 24 Jul 2022 20:33:59 +0200
Subject: [PATCH] Fix ajax_cart_quantity position

---
 css/modules/blockcart/blockcart.css          | 15 ++++++-----
 modules/blockcart/includes/header.tpl        |  3 ++-
 sass/modules/blockcart/partials/_header.scss | 26 +++++++++-----------
 3 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/css/modules/blockcart/blockcart.css b/css/modules/blockcart/blockcart.css
index 8203267..66e25e1 100644
--- a/css/modules/blockcart/blockcart.css
+++ b/css/modules/blockcart/blockcart.css
@@ -37,17 +37,16 @@
   font-weight: 300;
 }
 
-#blockcart-header:before {
-  content: "\f291";
+#blockcart-header .ajax_cart_icon {
   font-family: "FontAwesome";
   font-size: 1.6em;
   display: inline-block;
   margin-right: 5px;
-  vertical-align: 6%;
+  vertical-align: middle;
   color: #ff6f61;
 }
 
-#blockcart-header:hover:before {
+#blockcart-header:hover .ajax_cart_icon {
   color: #121212;
 }
 
@@ -62,10 +61,7 @@
 }
 
 #blockcart-header .ajax_cart_quantity {
-  position: absolute;
-  top: 0;
-  right: 38px;
-  display: block !important;
+  display: inline-block;
   min-width: 20px;
   min-height: 20px;
   line-height: 20px;
@@ -73,6 +69,9 @@
   text-align: center;
   color: #fff;
   border-radius: 50%;
+  padding: 0 5px;
+  margin-left: -20px;
+  vertical-align: top;
 }
 
 #blockcart-dropdown {
diff --git a/modules/blockcart/includes/header.tpl b/modules/blockcart/includes/header.tpl
index 4239c7e..8b156c4 100644
--- a/modules/blockcart/includes/header.tpl
+++ b/modules/blockcart/includes/header.tpl
@@ -1,6 +1,7 @@
 <a id="blockcart-header" href="{$link->getPageLink($order_process, true)|escape:'html':'UTF-8'}" title="{l s='View my shopping cart' mod='blockcart'}" rel="nofollow">
-  <b>{l s='My Cart' mod='blockcart'}</b>
+  <span class="ajax_cart_icon">&#xf291;</span>
   <span class="ajax_cart_quantity">{$cart_qties}</span>
+  <b>{l s='My Cart' mod='blockcart'}</b>
   <span class="ajax_cart_product_txt"{if $cart_qties != 1} style="display: none;"{/if}>{l s='Product' mod='blockcart'}</span>
   <span class="ajax_cart_product_txt_s"{if $cart_qties < 2} style="display: none;"{/if}>{l s='Products' mod='blockcart'}</span>
   <span class="ajax_cart_total"{if $cart_qties == 0} style="display: none;"{/if}>
diff --git a/sass/modules/blockcart/partials/_header.scss b/sass/modules/blockcart/partials/_header.scss
index f1128a0..6efd76b 100644
--- a/sass/modules/blockcart/partials/_header.scss
+++ b/sass/modules/blockcart/partials/_header.scss
@@ -24,7 +24,6 @@ $bc-header-color: #121212;
 }
 
 #blockcart-header {
-
   // Make this block the same dimensions as input-lg (search block to the left)
   // @see /sass/vendor/bootstrap/bootstrap/_forms.scss
   height: $input-height-large;
@@ -38,33 +37,27 @@ $bc-header-color: #121212;
   overflow: hidden;
   font-weight: 300;
 
-  &:before{
-    content: "\f291";
+  .ajax_cart_icon {
     font-family: $font-icon;
     font-size: 1.6em;
     display: inline-block;
     margin-right: 5px;
-    vertical-align: 6%;
+    vertical-align: middle;
     color: $link-hover-color
   }
-  &:hover {
-    &:before {
-      color: $gray-darker;
-    }
+  &:hover .ajax_cart_icon {
+    color: $gray-darker;
   }
-  b{
+  b {
     font-weight: 500;
   }
   .ajax_cart_product_txt,
   .ajax_cart_product_txt_s,
-  .ajax_cart_no_product{
+  .ajax_cart_no_product {
     display: none !important;
   }
-  .ajax_cart_quantity{
-    position: absolute;
-    top: 0;
-    right: 38px;
-    display: block !important;
+  .ajax_cart_quantity {
+    display: inline-block;
     min-width: 20px;
     min-height: 20px;
     line-height: 20px;
@@ -72,5 +65,8 @@ $bc-header-color: #121212;
     text-align: center;
     color: #fff;
     border-radius: 50%;
+    padding: 0 5px;
+    margin-left: -20px;
+    vertical-align: top;
   }
 }