From b15137810158dada39d8c96b1f504a37f4c4a654 Mon Sep 17 00:00:00 2001
From: gbaamonde <gusvodesign@gmail.com>
Date: Tue, 16 Jul 2019 15:34:03 -0300
Subject: [PATCH] feat: table component state synchronizing

---
 assets/scss/modules/_tables.scss              | 48 +++++++++++++++++--
 .../templates/partials/_table-component.html  |  5 ++
 2 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/assets/scss/modules/_tables.scss b/assets/scss/modules/_tables.scss
index c87eebd9..c4ac9efa 100644
--- a/assets/scss/modules/_tables.scss
+++ b/assets/scss/modules/_tables.scss
@@ -85,9 +85,14 @@
 
     tbody {
       tr {
+        border-bottom: 1px solid $dp-color-silver;
 
-        &:nth-of-type(odd) {
-            background: $bg-color-zebra;
+        &:nth-child(odd) {
+          background: $bg-color-zebra;
+        }
+
+        &:nth-child(even) {
+          background: $dp-color-white;
         }
 
         &:hover {
@@ -95,15 +100,50 @@
         }
       }
 
+
       td {
         color: $dp-color-grey;
         border: $dp-spaces--lv0;
-        box-shadow: $dp-spaces--lv0 -1px $dp-spaces--lv0 $dp-spaces--lv0 $dp-color-silver inset;
-        height: $dp-spaces--lv7;
         padding-left: $dp-spaces--lv2;
         padding-right: $dp-spaces--lv3;
         font-size: $font-size-table;
       }
+
+      .sync{
+        color: $dp-color-green;
+
+        td{
+          color: $dp-color-green;
+          background: $dp-color-white;
+          border-top: 1px solid $dp-color-green;
+          border-bottom: 1px solid $dp-color-green;
+        }
+
+        .text-sync {
+          animation: flash 2s infinite;
+
+          .icon-clock{
+            margin: 0 5px;
+            top: -2px;
+            position: relative;
+          }
+        }
+
+          /// Animation text
+          @keyframes flash {
+            from,
+            50%,
+            to {
+              opacity: 1;
+            }
+
+            25%,
+            75% {
+              opacity: 0;
+            }
+          }
+        }
+
     }
 
     caption,
diff --git a/assets/templates/partials/_table-component.html b/assets/templates/partials/_table-component.html
index fad6f56e..bc21c75c 100644
--- a/assets/templates/partials/_table-component.html
+++ b/assets/templates/partials/_table-component.html
@@ -29,6 +29,11 @@
       <td>Content 4</td>
       <td>Content 5</td>
     </tr>
+    <tr class="sync">
+      <td colspan="1">Enderec (dplrvetex)</td>
+      <td colspan="1">Lista nueva</td>
+      <td colspan="3"><span class="text-sync"><i class="ms-icon icon-clock"></i> Synchronizing...</span></td>
+    </tr>
     <tr>
       <td>Content 1</td>
       <td>Content 2</td>