From cb7062bb9568e1a6e80daf9a6424bd72203fdd1d Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 5 Apr 2020 16:02:42 +0200
Subject: [PATCH] Created fake border with before and after pseudoelements for
 sticky table cells

---
 src/utils/base.scss               |  1 +
 src/utils/mixins/sticky-cell.scss | 37 +++++++++++++++++++++++++++++++
 src/visits/VisitsTable.scss       | 21 ++++++++++--------
 3 files changed, 50 insertions(+), 9 deletions(-)
 create mode 100644 src/utils/mixins/sticky-cell.scss

diff --git a/src/utils/base.scss b/src/utils/base.scss
index 5038fdfb..69fdacd1 100644
--- a/src/utils/base.scss
+++ b/src/utils/base.scss
@@ -13,6 +13,7 @@ $mainColor: #4696e5;
 $lightHoverColor: #eee;
 $lightGrey: #ddd;
 $dangerColor: #dc3545;
+$mediumGrey: #dee2e6;
 
 // Misc
 $headerHeight: 57px;
diff --git a/src/utils/mixins/sticky-cell.scss b/src/utils/mixins/sticky-cell.scss
new file mode 100644
index 00000000..71d48ede
--- /dev/null
+++ b/src/utils/mixins/sticky-cell.scss
@@ -0,0 +1,37 @@
+@import "../base";
+
+@mixin sticky-cell() {
+  z-index: 1;
+  border: none !important;
+  position: relative;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: -1px;
+    left: 0;
+    bottom: -1px;
+    right: -1px;
+    background: $mediumGrey;
+    z-index: -2;
+  }
+
+  &:first-child:before {
+    left: -1px;
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 1px;
+    bottom: 0;
+    right: 0;
+    background: white;
+    z-index: -1;
+  }
+
+  &:first-child:after {
+    left: 0;
+  }
+}
diff --git a/src/visits/VisitsTable.scss b/src/visits/VisitsTable.scss
index d248bf59..42b2e550 100644
--- a/src/visits/VisitsTable.scss
+++ b/src/visits/VisitsTable.scss
@@ -1,21 +1,20 @@
 @import '../utils/base';
+@import '../utils/mixins/sticky-cell';
 
 .visits-table {
   margin: 1.5rem 0 0;
   position: relative;
 }
 
-.visits-table__sticky {
-  position: sticky;
-}
-
 .visits-table__header-cell {
   cursor: pointer;
-  top: $headerHeight - 2px;
   margin-bottom: 55px;
-  background-color: white;
-  z-index: 1;
-  border: 1px solid #dee2e6;
+
+  @include sticky-cell();
+
+  &.visits-table__sticky {
+    top: $headerHeight - 2px;
+  }
 }
 
 .visits-table__header-cell--no-action {
@@ -31,6 +30,10 @@
 .visits-table__footer-cell.visits-table__footer-cell {
   bottom: 0;
   margin-top: 34px;
-  background-color: white;
   padding: .5rem;
+  @include sticky-cell();
+}
+
+.visits-table__sticky.visits-table__sticky {
+  position: sticky;
 }