mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 17:40:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/utils/base.scss
View file

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

37
src/utils/mixins/sticky-cell.scss Normal file
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;
}
}

21
src/visits/VisitsTable.scss
View file

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