From 4fb569b9ef990f31290363ea0fa3d23603c3e946 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Mon, 6 Jan 2020 12:19:08 +0100
Subject: [PATCH] Left menu: css improved for the projects tab

---
 src/styles/base/menu-left.scss | 81 ++++++++++++++++++++--------------
 1 file changed, 48 insertions(+), 33 deletions(-)

diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss
index 606db3c..b4be43c 100644
--- a/src/styles/base/menu-left.scss
+++ b/src/styles/base/menu-left.scss
@@ -92,50 +92,64 @@
 
     .sub-menu {
 
-      sib-set-default[name='project'] {
-        padding: 1rem 1rem 1rem 3.2rem;
+      /* Specific styles for the "Projects" tab */
 
-        .project-customer,
-        .project-name {
-          display: inline-block;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-
-        .project-customer {
-          font-weight: bold;
-          width: 150px;
-        }
-
-        .project-name {
-          padding-left: 14px;
-          width: calc(150px - 10px);
-          /* 10px = padding of the sib-set-default = better alignment */
-        }
-      }
-
-      .project-tab>div>sib-display[fields='project(customer.name, name), badge']>div:hover {
-        background-color: $color-233-20-17;
+      .project-tab>div>sib-display>div:nth-child(1) {
 
         sib-set-default[name='project'] {
-          background-color: $color-233-20-17;
-          box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.26);
-          color: $color-218-100-98;
-          /* transition: all 0.6s cubic-bezier(0.39, 0.575, 0.565, 1); Need better animation */
-          width: auto;
-          z-index: 1000;
+          padding: 1rem 1rem 1rem 3.2rem;
 
           .project-customer,
           .project-name {
-            width: auto;
+            display: block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .project-customer {
+            font-weight: bold;
+            width: 150px;
           }
 
           .project-name {
-            font-weight: normal;
-          }          
+            padding-left: 14px;
+            width: calc(150px - 10px);
+            /* 10px = padding of the sib-set-default = better alignment */
+          }
+        }
+
+        hd-counter {
+          margin-top: 16px;
+          margin-left: 8px;
+        }
+
+        &:hover {
+          background-color: $color-233-20-17;
+          box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.26);
+
+          sib-set-default[name='project'] {
+            background-color: $color-233-20-17;
+            color: $color-218-100-98;
+            /* transition: all 0.6s cubic-bezier(0.39, 0.575, 0.565, 1); Need better animation */
+            z-index: 1000;
+
+            .project-customer,
+            .project-name {
+              width: auto;
+            }
+
+            .project-name {
+              font-weight: normal;
+            }
+          }
+
+          hd-counter {
+            display: none;
+          }
         }
       }
+      /* End of specific styles of "Projects" tab */
       
       sib-display>div {
 
@@ -175,6 +189,7 @@
               flex: 3;
             }
             hd-counter {
+              background: burlywood;
               height: 20px;
               width: 20px;
               margin-right: 1em;