CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-07 23:35:49 +12:00
Code Issues Projects Releases Wiki Activity

Fix table borders and background colours to properly reflect spectrum theme

Browse source
This commit is contained in:
Andrew Kingston 2021-04-16 09:39:49 +01:00
parent 47183460b7
commit f241f201b9
1 changed files with 14 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
packages/bbui/src/Table/Table.svelte
View file

@ -73,7 +73,7 @@
if (!rowCount) {
return ""
}
return `height: ${headerHeight - 1 + visibleRows * (rowHeight + 1)}px;`
return `height: ${headerHeight + visibleRows * (rowHeight + 1)}px;`
}
const sortRows = (rows, sortColumn, sortOrder) => {
@ -266,7 +266,9 @@
</td>
{/if}
{#each fields as field}
<td class="spectrum-Table-cell">
<td
class="spectrum-Table-cell"
class:spectrum-Table-cell--divider={!!schema[field].divider}>
<div class="spectrum-Table-cell-content">
<CellRenderer
{customRenderers}
@ -301,7 +303,7 @@
<style>
.wrapper {
background-color: var(--spectrum-alias-background-color-primary);
background-color: var(--spectrum-alias-background-color-default);
overflow: hidden;
position: relative;
z-index: 1;
@ -313,22 +315,22 @@
overflow: auto;
scrollbar-width: thin;
scrollbar-color: var(--spectrum-global-color-gray-400)
var(--spectrum-alias-background-color-primary);
var(--spectrum-alias-background-color-default);
}
.container::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.container::-webkit-scrollbar-track {
background: var(--spectrum-alias-background-color-primary);
background: var(--spectrum-alias-background-color-default);
}
.container::-webkit-scrollbar-thumb {
background-color: var(--spectrum-global-color-gray-400);
border-radius: 20px;
border: 4px solid var(--spectrum-alias-background-color-primary);
border: 4px solid var(--spectrum-alias-background-color-default);
}
.container::-webkit-scrollbar-corner {
background: var(--spectrum-alias-background-color-primary);
background: var(--spectrum-alias-background-color-default);
}
.container.quiet {
border: none !important;
@ -357,18 +359,15 @@
transition: opacity 0.2s ease;
}
.container,
th {
border-bottom: 1px solid
var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
}
th {
vertical-align: middle;
height: var(--header-height);
position: sticky;
top: 0;
z-index: 2;
background-color: var(--spectrum-alias-background-color-primary);
background-color: var(--spectrum-alias-background-color-default);
border-bottom: 1px solid
var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
}
.spectrum-Table-headCell-content {
white-space: nowrap;
@ -421,6 +420,7 @@
border-bottom: none !important;
border-top: 1px solid
var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
border-radius: 0 !important;
}
tr:first-child td {
border-top: none !important;
@ -429,10 +429,8 @@
border-bottom: 1px solid
var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
}
.container:not(.quiet) td.spectrum-Table-cell--divider {
td.spectrum-Table-cell--divider {
width: 1px;
border-right: 1px solid
var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
}
.spectrum-Table-cell-content {
height: var(--row-height);