From 6f3a6a8c1682a895a18670ff593e38b1a109f76d Mon Sep 17 00:00:00 2001
From: Quique Fernandez <e.fernandez@plainconcepts.com>
Date: Wed, 28 Dec 2016 16:56:16 +0100
Subject: [PATCH] update basket animations

---
 .../basket/basket-status/basket-status.component.html    | 9 +++++----
 .../basket/basket-status/basket-status.component.scss    | 9 +++++++++
 .../Client/modules/basket/basket.component.scss          | 6 ++++++
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.html
index 5052e98e1..03a7875c7 100644
--- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.html
+++ b/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>
\ No newline at end of file
+</a>
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss
index fface6f9d..8e1b1f3f0 100644
--- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss
+++ b/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;
+    }
 }
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss
index eb51543cd..78601136c 100644
--- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss
+++ b/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;
+        }
     }
 }