animated hover for sources

src/components/Card.jsx

@@ -93,7 +93,7 @@ class Card extends React.Component {
 
     const source_lang = copy[this.props.language].cardstack.sources
     return (
-      <div>
+      <div className="card-col">
         <h4>{source_lang}: </h4>
         {this.props.event.sources.map(source => (
           <CardSource

src/components/presentational/CardSource.js

@@ -5,27 +5,16 @@ import copy from '../../js/data/copy.json'
 
 const CardSource = ({ source, language, isLoading, error }) => {
 
-  function renderContent() {
-    if (isLoading) {
-      return <Spinner/>
-    } else if (source.error) {
-      return (
-        <div><small>{source.error}</small></div>
-      )
-    } else {
-      /* source with no errors */
-      return (
-        <div>
-          <p>{source.id}</p>
-          <i className="material-icons md-36">photo</i>
-        </div>
-      )
-    }
-  }
-
   return (
-    <div className="card-row card-cell source">
-      {renderContent()}
+    <div className="card-source">
+      {isLoading
+          ? <Spinner/>
+          : (
+            <div className="source-row">
+              <i className="material-icons md-36 source-icon">photo</i>
+              <p>{source.id}</p>
+            </div>
+          )}
     </div>
   )
 }

src/scss/card.scss

@@ -45,7 +45,7 @@
 
     .card-cell {
       flex: 1;
-    }
+   }
 
     h4 {
       min-width: 80px;
@@ -57,6 +57,43 @@
     flex-direction: column;
   }
 
+  .card-source {
+    margin: 0;
+    padding: 2px 0;
+    border-radius: 3px;
+
+    .source-row {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      padding: 8px 15px;
+      border-left: 5px solid $darkgrey;
+      background: linear-gradient(to right, $darkgrey 50%, transparent 50%);
+      background-size: 200% 100%;
+      background-position: right bottom;
+      margin-left: -16px;
+      margin-right: -16px;
+
+      &:hover {
+        background-color: $darkgrey;
+        color: white;
+        cursor: pointer;
+        .material-icons {
+          color: white;
+        }
+        background-position: left bottom;
+        transition: all 2s ease;
+      }
+    }
+
+    .source-icon {
+      display: flex;
+      align-items: center;
+      font-size: 24px;
+      margin-right: 15px;
+    }
+  }
+
   .card-cell {
     a {
       transition: color 0.2s;