From 9b4d0dc0ca6121c35bde60e4b81ef663bd52ed4d Mon Sep 17 00:00:00 2001
From: alejandraarri <alejandraarri@carto.com>
Date: Fri, 8 Mar 2019 12:41:21 +0100
Subject: [PATCH] Update cards with hover state

---
 .../components/MapCard/SimpleMapCard.vue      | 20 +++++++++----------
 .../new-dashboard/styles/variables.scss       |  5 ++++-
 webpack/new-dashboard/vue-loader.conf.js      |  3 +++
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/MapCard/SimpleMapCard.vue b/lib/assets/javascripts/new-dashboard/components/MapCard/SimpleMapCard.vue
index b21753542e..222674d004 100644
--- a/lib/assets/javascripts/new-dashboard/components/MapCard/SimpleMapCard.vue
+++ b/lib/assets/javascripts/new-dashboard/components/MapCard/SimpleMapCard.vue
@@ -42,12 +42,7 @@
     <div class="card-text">
       <div class="card-header" :class="{ 'card-header__no-description': !sectionsToShow.description}">
         <h2 :title="visualization.name" class="card-title title is-caption" :class="{'title-overflow': (titleOverflow || isStarInNewLine) && !singleLineTitle, 'single-line': singleLineTitle}">
-          <template v-if="singleLineTitle">
-            <span class="title-element">{{ visualization.name }}</span>&nbsp;
-          </template>
-          <template v-else>
-            {{ visualization.name }}&nbsp;
-          </template>
+          <span :class="{ 'title-element': singleLineTitle }">{{ visualization.name }}</span>
           <span
             v-if="showInteractiveElements"
             class="card-favorite"
@@ -194,16 +189,21 @@ export default {
 .card {
   position: relative;
   height: 100%;
-  transition: background 300ms cubic-bezier(0.4, 0, 0.2, 1);
-  border: 1px solid $light-grey;
   background-color: $white;
+  background-clip: padding-box;
+  border: 1px solid $light-grey;
+  border-radius: 2px;
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
 
   &:hover {
     cursor: pointer;
+    border-color: transparent;
+    box-shadow: $card__shadow;
 
     &:not(.card--child-hover) {
       .card-title {
         color: $primary-color;
+        text-decoration: underline;
       }
     }
 
@@ -309,7 +309,7 @@ export default {
   max-height: 48px;
   margin-bottom: 8px;
   overflow: hidden;
-  transition: background 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1);
 
   &.title-overflow {
     padding-right: 24px;
@@ -426,7 +426,7 @@ export default {
 }
 
 .card-favorite {
-  margin-left: 4px;
+  margin-left: 8px;
   opacity: 0;
 
   svg {
diff --git a/lib/assets/javascripts/new-dashboard/styles/variables.scss b/lib/assets/javascripts/new-dashboard/styles/variables.scss
index 1c8738b53b..cf843dfab2 100644
--- a/lib/assets/javascripts/new-dashboard/styles/variables.scss
+++ b/lib/assets/javascripts/new-dashboard/styles/variables.scss
@@ -23,4 +23,7 @@ $layout-tablet: 800px;
 $layout-mobile: 600px;
 
 $dropdown__shadow-color: rgba(0, 0, 0, 0.16);
-$dropdown__shadow: 0 2px 8px 0 $dropdown__shadow-color;
\ No newline at end of file
+$dropdown__shadow: 0 2px 8px 0 $dropdown__shadow-color;
+
+$card__shadow-color: rgba(194, 205, 214, 0.8);
+$card__shadow: 0 8px 20px 0 $card__shadow-color;
diff --git a/webpack/new-dashboard/vue-loader.conf.js b/webpack/new-dashboard/vue-loader.conf.js
index 5a6916bda7..01cc03cdcc 100644
--- a/webpack/new-dashboard/vue-loader.conf.js
+++ b/webpack/new-dashboard/vue-loader.conf.js
@@ -15,5 +15,8 @@ module.exports = {
     source: 'src',
     img: 'src',
     image: 'xlink:href'
+  },
+  compilerOptions: {
+    whitespace: 'condense'
   }
 };