update basket animations

Author: Quique Fernandez

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

@@ -1,9 +1,10 @@
-<div class="esh-basketstatus">
-    <div class="esh-basketstatus-image"
-         [routerLink]="['basket']">
+<a class="esh-basketstatus"
+   [routerLink]="['basket']">
+
+    <div class="esh-basketstatus-image">
         <img src="../../../images/cart.png" />
     </div>
     <div class="esh-basketstatus-badge">
         {{badge}}
     </div>
-</div>
+</a>

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

@@ -1,8 +1,10 @@
 @import '../../_variables.scss';
 
 .esh-basketstatus {
+    cursor: pointer;
     float: right;
     position: relative;
+    transition: all $animation-speed-default;
 
     &-image {
         height: 36px;
@@ -21,6 +23,13 @@
         text-align: center;
         top: 0;
         transform: translateX(-38%);
+        transition: all $animation-speed-default;
         width: $size;
     }
+
+    &:hover &-badge {
+        background-color: transparent;
+        color: $color-secondary-dark;
+        transition: all $animation-speed-default;
+    }
 }

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

@@ -86,5 +86,11 @@
         padding: 1rem 1.5rem;
         text-align: center;
         text-transform: uppercase;
+        transition: all $animation-speed-default;
+
+        &:hover {
+            background-color: $color-secondary-darker;
+            transition: all $animation-speed-default;
+        }
     }
 }