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

Update table hover to use a pseudo element to support hover color with customised cell backgrounds

This commit is contained in:
Andrew Kingston 2022-02-18 20:28:59 +00:00
parent f63db2fb4f
commit 2bc3e96ec7
1 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/bbui/src/Table/Table.svelte
View File

@ -349,12 +349,10 @@
z-index: 0;
--table-bg: var(--spectrum-global-color-gray-50);
--table-border: 1px solid var(--spectrum-alias-border-color-mid);
--hover-bg: var(--spectrum-global-color-gray-100);
--cell-padding: var(--spectrum-global-dimension-size-250);
}
.wrapper--quiet {
--table-bg: var(--spectrum-alias-background-color-transparent);
--hover-bg: var(--spectrum-global-color-gray-200);
}
.wrapper--compact {
--cell-padding: var(--spectrum-global-dimension-size-150);
@ -449,7 +447,10 @@
display: contents;
}
.spectrum-Table-row:hover .spectrum-Table-cell {
background-color: var(--hover-bg) !important;
/*background-color: var(--hover-bg) !important;*/
}
.spectrum-Table-row:hover .spectrum-Table-cell:after {
background-color: var(--spectrum-alias-highlight-hover);
}
.wrapper--quiet .spectrum-Table-row {
border-left: none;
@ -479,8 +480,6 @@
justify-content: flex-start;
align-items: center;
gap: 4px;
transition: background-color
var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out;
border-bottom: 1px solid var(--spectrum-alias-border-color-mid);
background-color: var(--table-bg);
z-index: 1;
@ -496,6 +495,18 @@
left: 0;
z-index: 2;
}
.spectrum-Table-cell:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: transparent;
top: 0;
left: 0;
pointer-events: none;
transition: background-color
var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out;
}
/* Placeholder */
.placeholder {