From e126810b21da06a779d79dafdfc8fb79acc498d1 Mon Sep 17 00:00:00 2001
From: rubenmoya <ruben@carto.com>
Date: Mon, 20 Nov 2017 11:28:13 +0100
Subject: [PATCH] Add hover effects to button using box-shadow

---
 src/scss/cdb-components/_buttons.scss | 28 ++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/scss/cdb-components/_buttons.scss b/src/scss/cdb-components/_buttons.scss
index 56d18d2..77f5170 100644
--- a/src/scss/cdb-components/_buttons.scss
+++ b/src/scss/cdb-components/_buttons.scss
@@ -162,11 +162,10 @@ Layout Component:
 .CDB-Button {
   @include transition(background, 300ms);
   position: relative;
+  box-sizing: border-box;
   padding: $baseSize $baseSize + 12;
-  border: 1px solid transparent;
   border-radius: $baseSize / 2;
   cursor: pointer;
-  box-sizing: border-box;
 
 
   .CDB-Button-Text {
@@ -235,9 +234,7 @@ Layout Component:
   background: $cBlue;
   color: $cWhite;
 
-  &:hover {
-    background: darken($cBlue, 8%);
-  }
+  &:hover,
   &:active {
     background: darken($cBlue, 16%);
   }
@@ -265,9 +262,7 @@ Layout Component:
   background: $cAlert;
   color: $cWhite;
 
-  &:hover {
-    background: darken($cAlert, 8%);
-  }
+  &:hover,
   &:active {
     background: darken($cAlert, 16%);
   }
@@ -288,9 +283,7 @@ Layout Component:
   background: $cError;
   color: $cWhite;
 
-  &:hover {
-    background: darken($cError, 8%);
-  }
+  &:hover,
   &:active {
     background: darken($cError, 16%);
   }
@@ -411,12 +404,14 @@ Layout Component:
 
 
 .CDB-Button--secondary {
-  border: 1px solid $cBlue;
+  box-shadow: inset 0 0 0 1px $cBlue;
   color: $cBlue;
 
   &:hover {
     background: rgba($cBlue, 0.08);
+    box-shadow: inset 0 0 0 2px darken($cBlue, 16%);
   }
+
   &:active {
     background: $cBlue;
     color: $cWhite;
@@ -425,7 +420,9 @@ Layout Component:
   &.is-disabled {
     &:hover {
       background: transparent;
+      box-shadow: inset 0 0 0 1px $cBlue;
     }
+
     &:active {
       background: transparent;
     }
@@ -453,12 +450,14 @@ Layout Component:
 
 
 .CDB-Button--white {
-  border: 1px solid $cWhite;
+  box-shadow: inset 0 0 0 1px $cWhite;
   color: $cWhite;
 
   &:hover {
     background: rgba($cWhite, 0.08);
+    box-shadow: inset 0 0 0 2px darken($cWhite, 16%);
   }
+
   &:active {
     background: rgba($cMainBg, 0.08);
     color: $cWhite;
@@ -466,9 +465,12 @@ Layout Component:
 
   &.is-disabled {
     @include opacity(0.24);
+
     &:hover {
       background: transparent;
+      box-shadow: inset 0 0 0 1px $cWhite;
     }
+
     &:active {
       background: transparent;
       color: $cWhite;