Created fake border with before and after pseudoelements for sticky table cells

This commit is contained in:
Alejandro Celaya
2020-04-05 16:02:42 +02:00
parent 94c5b2c471
commit cb7062bb95
3 changed files with 50 additions and 9 deletions

View File

@@ -13,6 +13,7 @@ $mainColor: #4696e5;
$lightHoverColor: #eee;
$lightGrey: #ddd;
$dangerColor: #dc3545;
$mediumGrey: #dee2e6;
// Misc
$headerHeight: 57px;

View File

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