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; }