add shadow to table header

This commit is contained in:
jeffvli
2025-11-14 11:51:04 -08:00
parent a03ea3b4d8
commit 3f4148258f
2 changed files with 108 additions and 25 deletions
@@ -27,6 +27,7 @@
}
.item-table-pinned-rows-container {
position: relative;
display: flex;
flex: 1 1 auto;
flex-direction: column;
@@ -41,10 +42,21 @@
}
.item-table-pinned-rows-grid-container.with-header {
border-bottom: 1px solid var(--theme-colors-border);
position: relative;
}
.item-table-pinned-rows-grid-container.with-header::after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
content: '';
background-color: var(--theme-colors-border);
}
.item-table-pinned-columns-grid-container {
position: relative;
display: flex;
flex: 0 1 auto;
flex-direction: column;
@@ -58,7 +70,17 @@
}
.item-table-pinned-intersection-grid-container.with-header {
border-bottom: 1px solid var(--theme-colors-border);
position: relative;
}
.item-table-pinned-intersection-grid-container.with-header::after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
content: '';
background-color: var(--theme-colors-border);
}
.item-table-pinned-columns-container {
@@ -130,3 +152,19 @@
transparent 100%
);
}
.item-table-top-scroll-shadow {
position: absolute;
top: var(--header-height, 40px);
right: 0;
left: 0;
z-index: 1;
height: 8px;
pointer-events: none;
background: linear-gradient(
to bottom,
rgb(0 0 0 / 50%) 0%,
rgb(0 0 0 / 5%) 50%,
transparent 100%
);
}