update basket status layout

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.html

@@ -1,5 +1,6 @@
 <div class="esh-basketstatus">
-    <div [routerLink]="['basket']" class="esh-basketstatus-image">
+    <div class="esh-basketstatus-image"
+         [routerLink]="['basket']">
         <img src="../../../images/cart.png" />
     </div>
     <div class="esh-basketstatus-badge">

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss

@@ -1,26 +1,26 @@
 @import '../../_variables.scss';
 
 .esh-basketstatus {
-    float:right;
+    float: right;
+    position: relative;
 
     &-image {
         height: 36px;
-        margin-top: 5px;
+        margin-top: .5rem;
     }
 
     &-badge {
-        position: absolute;
-        margin-top: 2px;
-        margin-left: 14px;
-        background-color: #83d01b;
-        padding: 1px;
-        color: white;
+        $size: 1.5rem;
+        background-color: $color-secondary;
         border-radius: 50%;
-        width: 18px;
-        height: 18px;
-        font-size: 12px;
-        cursor: pointer;
+        color: $color-foreground-brighter;
+        display: block;
+        height: $size;
+        left: 50%;
+        position: absolute;
+        text-align: center;
         top: 0;
-        padding-left: 3px;
+        transform: translateX(-38%);
+        width: $size;
     }
 }