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; z-index: 0;
--table-bg: var(--spectrum-global-color-gray-50); --table-bg: var(--spectrum-global-color-gray-50);
--table-border: 1px solid var(--spectrum-alias-border-color-mid); --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); --cell-padding: var(--spectrum-global-dimension-size-250);
} }
.wrapper--quiet { .wrapper--quiet {
--table-bg: var(--spectrum-alias-background-color-transparent); --table-bg: var(--spectrum-alias-background-color-transparent);
--hover-bg: var(--spectrum-global-color-gray-200);
} }
.wrapper--compact { .wrapper--compact {
--cell-padding: var(--spectrum-global-dimension-size-150); --cell-padding: var(--spectrum-global-dimension-size-150);
@ -449,7 +447,10 @@
display: contents; display: contents;
} }
.spectrum-Table-row:hover .spectrum-Table-cell { .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 { .wrapper--quiet .spectrum-Table-row {
border-left: none; border-left: none;
@ -479,8 +480,6 @@
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
gap: 4px; 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); border-bottom: 1px solid var(--spectrum-alias-border-color-mid);
background-color: var(--table-bg); background-color: var(--table-bg);
z-index: 1; z-index: 1;
@ -496,6 +495,18 @@
left: 0; left: 0;
z-index: 2; 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 */
.placeholder { .placeholder {