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