From 8cfc04c859313f1cf65e8c2a3dd146e443d8dee5 Mon Sep 17 00:00:00 2001
From: rubenmoya <ruben@carto.com>
Date: Mon, 20 Nov 2017 14:53:38 +0100
Subject: [PATCH] Add hover effects to _menu.scss

---
 src/scss/cdb-components/_menu.scss | 30 ++++++++++++++++++++++--------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/scss/cdb-components/_menu.scss b/src/scss/cdb-components/_menu.scss
index 899781f..31b5b00 100644
--- a/src/scss/cdb-components/_menu.scss
+++ b/src/scss/cdb-components/_menu.scss
@@ -149,9 +149,14 @@
   display: block;
   margin-bottom: -1px;
   padding: 4px 0 11px;
-  border-bottom: 1px solid transparent;
+  transition: border-color 0.2s ease-in;
+  border-bottom: 2px solid transparent;
   border-radius: 0;
   color: $cBlue;
+
+  &:hover {
+    border-bottom: 2px solid darken($cBlue, 8%);
+  }
 }
 
 .CDB-NavMenu-item,
@@ -162,7 +167,7 @@
 }
 
 .CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
-  border-bottom: 1px solid $cBlack;
+  border-bottom: 2px solid $cMainText;
   color: $cMainText;
 }
 
@@ -173,7 +178,7 @@
 }
 
 .CDB-NavSubmenu {
-  border-bottom: 1px solid $cSecondaryLine;
+  border-bottom: 2px solid $cSecondaryLine;
 }
 
 .CDB-NavSubmenu--inside {
@@ -192,13 +197,18 @@
   display: block;
   margin-bottom: -1px;
   padding-bottom: 12px;
-  border-bottom: 1px solid transparent;
+  transition: border-color 0.2s ease-in;
+  border-bottom: 2px solid transparent;
   border-radius: 0;
   color: $cBlue;
+
+  &:hover {
+    border-bottom: 2px solid darken($cBlue, 8%);
+  }
 }
 
 .CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
-  border-bottom: 1px solid $cMainLine;
+  border-bottom: 2px solid $cMainLine;
   color: $cMainText;
 }
 
@@ -207,7 +217,6 @@
 }
 
 .CDB-NavMenu.is-dark {
-
   .CDB-NavMenu-inner,
   .CDB-NavSubmenu {
     border-bottom: 1px solid $cSecondaryText;
@@ -215,16 +224,21 @@
 
   .CDB-NavMenu-link,
   .CDB-NavSubmenu-link {
+    margin-bottom: -1px;
     color: $cAltText;
+
+    &:hover {
+      border-bottom: 2px solid darken($cMainLine, 8%);
+    }
   }
 
   .CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
-    border-bottom: 1px solid $cMainLine;
+    border-bottom: 2px solid $cMainLine;
     color: $cWhite;
   }
 
   .CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
-    border-bottom: 1px solid $cMainLine;
+    border-bottom: 2px solid $cMainLine;
     color: $cWhite;
   }