MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Simplify and improve z index styles

This commit is contained in:
Andrew Kingston 2023-03-02 11:22:01 +00:00
parent f19ba2ea20
commit 265f2d9ba3
5 changed files with 13 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend-core/src/components/sheet/HeaderRow.svelte
View File

@ -38,6 +38,8 @@
.header { .header {
background: var(--background); background: var(--background);
border-bottom: var(--cell-border); border-bottom: var(--cell-border);
position: relative;
z-index: 1;
} }
.row { .row {
display: flex; display: flex;

8
packages/frontend-core/src/components/sheet/ResizeOverlay.svelte
View File

@ -20,8 +20,8 @@
let columnCount = 0 let columnCount = 0
$: scrollLeft = $scroll.left $: scrollLeft = $scroll.left
$: cutoff = scrollLeft + 40 + $columns[0]?.width || 0 $: cutoff = scrollLeft + 40 + ($columns[0]?.width || 0)
$: offset = 40 + $stickyColumn?.width || 0 $: offset = 40 + ($stickyColumn?.width || 0)
$: rowCount = $visibleRows.length $: rowCount = $visibleRows.length
$: contentHeight = (rowCount + 2) * cellHeight $: contentHeight = (rowCount + 2) * cellHeight
@ -110,7 +110,7 @@
.resize-slider { .resize-slider {
position: absolute; position: absolute;
top: 0; top: 0;
z-index: 10; z-index: 1;
height: var(--cell-height); height: var(--cell-height);
left: var(--left); left: var(--left);
opacity: 0; opacity: 0;
@ -125,7 +125,7 @@
height: min(var(--content-height), 100%); height: min(var(--content-height), 100%);
} }
.resize-slider.sticky { .resize-slider.sticky {
z-index: 25; z-index: 2;
} }
.resize-indicator { .resize-indicator {
margin-left: -1px; margin-left: -1px;

2
packages/frontend-core/src/components/sheet/ScrollOverlay.svelte
View File

@ -112,7 +112,7 @@
background: var(--spectrum-global-color-gray-600); background: var(--spectrum-global-color-gray-600);
opacity: 0.6; opacity: 0.6;
border-radius: 4px; border-radius: 4px;
z-index: 20; z-index: 999;
transition: opacity 130ms ease-out; transition: opacity 130ms ease-out;
} }
div:hover { div:hover {

2
packages/frontend-core/src/components/sheet/SheetCell.svelte
View File

@ -68,7 +68,6 @@
background: var(--background); background: var(--background);
padding: 0 var(--cell-padding); padding: 0 var(--cell-padding);
gap: calc(2 * var(--cell-spacing)); gap: calc(2 * var(--cell-spacing));
z-index: 25;
border-bottom: none; border-bottom: none;
} }
.cell.header :global(> span) { .cell.header :global(> span) {
@ -105,7 +104,6 @@
border-right: none; border-right: none;
position: sticky; position: sticky;
left: 0; left: 0;
z-index: 5;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;

13
packages/frontend-core/src/components/sheet/StickyColumn.svelte
View File

@ -81,7 +81,7 @@
{/if} {/if}
</div> </div>
<div on:mouseleave={() => ($hoveredRowId = null)}> <div class="content" on:mouseleave={() => ($hoveredRowId = null)}>
<SheetScrollWrapper scrollHorizontally={false}> <SheetScrollWrapper scrollHorizontally={false}>
{#each $visibleRows as row} {#each $visibleRows as row}
{@const rowSelected = !!$selectedRows[row._id]} {@const rowSelected = !!$selectedRows[row._id]}
@ -154,11 +154,6 @@
.sticky-column { .sticky-column {
flex: 0 0 calc(var(--width) + 0px); flex: 0 0 calc(var(--width) + 0px);
} }
.sticky-column :global(.cell) {
z-index: 26;
}
.sticky-column.scrolled {
}
.sticky-column.scrolled :global(.cell:not(.label):after) { .sticky-column.scrolled :global(.cell:not(.label):after) {
content: " "; content: " ";
position: absolute; position: absolute;
@ -171,7 +166,7 @@
.header { .header {
border-bottom: var(--cell-border); border-bottom: var(--cell-border);
position: relative; position: relative;
z-index: 1; z-index: 2;
} }
.row { .row {
display: flex; display: flex;
@ -179,6 +174,10 @@
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
} }
.content {
position: relative;
z-index: 1;
}
.row.new:hover :global(.cell) { .row.new:hover :global(.cell) {
cursor: pointer; cursor: pointer;
} }