Update cards with hover state

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': singleLineTitle }">{{ visualization.name }}</span>
-            <span class="title-element">{{ visualization.name }}</span>&nbsp;
-          </template>
-          <template v-else>
-            {{ visualization.name }}&nbsp;
-          </template>
           <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 {

lib/assets/javascripts/new-dashboard/styles/variables.scss

@@ -24,3 +24,6 @@ $layout-mobile: 600px;
 
 $dropdown__shadow-color: rgba(0, 0, 0, 0.16);
 $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;

webpack/new-dashboard/vue-loader.conf.js

@@ -15,5 +15,8 @@ module.exports = {
     source: 'src',
     img: 'src',
     image: 'xlink:href'
+  },
+  compilerOptions: {
+    whitespace: 'condense'
   }
 };