From f453d119b3e4a72cc9ca6d43d18c3ab0f49ff878 Mon Sep 17 00:00:00 2001
From: Quique Fernandez <e.fernandez@plainconcepts.com>
Date: Thu, 29 Dec 2016 10:56:42 +0100
Subject: [PATCH] fix some ui things

---
 .../modules/basket/basket.component.html      |  2 +-
 .../modules/basket/basket.component.scss      | 21 +--------------
 .../modules/orders/orders.component.html      |  2 +-
 .../modules/orders/orders.component.scss      | 26 +++++++++++++++++++
 .../shared/components/header/header.scss      |  2 +-
 .../shared/components/identity/identity.scss  |  3 ++-
 6 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html
index 247a4ef0f..be48061b7 100644
--- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html
@@ -25,7 +25,7 @@
                         [(ngModel)]="item.quantity" 
                         (change)="itemQuantityChanged(item)" />
             </section>
-            <section class="esh-basket-item esh-basket-item--middle col-xs-2">$ {{item.unitPrice * item.quantity}}</section>
+            <section class="esh-basket-item esh-basket-item--middle esh-basket-item--mark col-xs-2">$ {{item.unitPrice * item.quantity}}</section>
         </article>
     </div>
 
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 78601136c..4780804d1 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
@@ -3,25 +3,6 @@
 .esh-basket {
     min-height: 80vh;
 
-    $header-height: 4rem;
-    &-header {
-        background-color: #00A69C;
-        height: $header-height;
-    }
-
-    &-back {
-        color: rgba($color-foreground-brighter, .4);
-        line-height: $header-height;
-        text-transform: uppercase;
-        text-decoration: none;
-        transition: color $animation-speed-default;
-
-        &:hover {
-            color: $color-foreground-brighter;
-            transition: color $animation-speed-default;
-        }
-    }
-    
     &-titles {
         padding-bottom: 1rem;
         padding-top: 2rem;
@@ -61,7 +42,7 @@
         }
 
         &--mark {
-            color: $color-secondary;
+            color: $color-brand;
         }
     }
 
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.html
index f6c547279..22b25182f 100644
--- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.html
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.html
@@ -16,7 +16,7 @@
             <section class="esh-orders-item col-xs-4">{{order.date | date:'short'}}</section>
             <section class="esh-orders-item col-xs-2">$ {{order.total}}</section>
             <section class="esh-orders-item col-xs-2">{{order.status}}</section>
-            <section class="esh-orders-item col-xs-2">
+            <section class="esh-orders-item esh-orders-item--hover col-xs-2">
                 <a class="esh-orders-link" routerLink="/orders/{{order.ordernumber}}">Detail</a>
             </section>
         </article>
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.scss
index 77a60357c..94cfdcea3 100644
--- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.scss
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.scss
@@ -2,6 +2,7 @@
 
 .esh-orders {
     min-height: 80vh;
+    overflow-x: hidden;
 
     $header-height: 4rem;
     &-header {
@@ -35,10 +36,35 @@
         $height: 2rem;
         height: $height;
         line-height: $height;
+        position: relative;
+
+        &:nth-of-type(2n + 1) {
+            &:before {
+                background-color: $color-background-bright;
+                content: '';
+                height: 100%;
+                left: 0;
+                margin-left: -100vw;
+                position: absolute;
+                top: 0;
+                width: 200vw;
+                z-index: -1;
+            }
+        }
     }
 
     &-item {
         font-weight: $font-weight-semilight;
+
+        &--hover {
+            opacity: 0;
+            pointer-events: none;
+        }
+    }
+
+    &-items:hover &-item--hover {
+        opacity: 1;
+        pointer-events: all;
     }
 
     &-link {
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/header/header.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/header/header.scss
index 57939ebc2..df0c32964 100644
--- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/header/header.scss
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/header/header.scss
@@ -7,7 +7,7 @@
     height: $header-height;
 
     &-back {
-        color: red;
+        color: rgba($color-foreground-brighter, .5);
         line-height: $header-height;
         text-transform: uppercase;
         text-decoration: none;
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.scss
index 152c987dc..737381607 100644
--- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.scss
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.scss
@@ -34,11 +34,12 @@
         overflow: hidden;
         padding: .5rem;
         position: absolute;
-        top: 2rem;
+        top: 2.5rem;
         transition: height $animation-speed-default;
     }
 
     &:hover &-drop {
+        border: $border-light solid $color-foreground-bright;
         height: 7rem;
         transition: height $animation-speed-default;
     }