From a1201311c285d0571e367d8b41ce130ba78cfd1b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= Date: Fri, 11 Oct 2024 23:17:38 -0700 Subject: [PATCH] styles --- demo/spreadsheet.html | 2 +- src/spreadsheet/spreadsheet.ts | 10 +++++++--- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/demo/spreadsheet.html b/demo/spreadsheet.html index 8a232f5..b7b06ae 100644 --- a/demo/spreadsheet.html +++ b/demo/spreadsheet.html @@ -22,7 +22,7 @@ - + diff --git a/src/spreadsheet/spreadsheet.ts b/src/spreadsheet/spreadsheet.ts index 068188b..0d9c3cd 100644 --- a/src/spreadsheet/spreadsheet.ts +++ b/src/spreadsheet/spreadsheet.ts @@ -13,7 +13,7 @@ styles.replaceSync(` overflow: scroll; scroll-snap-type: both mandatory; scroll-padding-top: var(--cell-height); - scroll-padding-left: var(--cell-width); + scroll-padding-left: 50px; } s-columns { @@ -25,6 +25,7 @@ s-columns { grid-template-rows: subgrid; position: sticky; top: 0; + z-index: 2; } s-rows { @@ -36,6 +37,7 @@ s-rows { grid-template-rows: subgrid; position: sticky; left: 0; + z-index: 2; s-header { font-size: 0.75rem; @@ -51,17 +53,17 @@ s-header { justify-content: center; &[empty] { - background-color: #f8f9fa; box-shadow: 3px 3px 3px 0px rgba(173, 168, 168, 0.4); grid-area: 1; position: sticky; top: 0; left: 0; - z-index: 2; + z-index: 3; } } s-body { + background-color: #f8f9fa; display: grid; grid-column: 2 / -1; grid-row: 2 / -1; @@ -84,6 +86,7 @@ s-body { ::slotted(s-cell:focus) { border: 2px solid #1b73e8; + outline: none; } `); @@ -179,6 +182,7 @@ export class SpreadsheetCell extends HTMLElement { } connectedCallback() { + // this should run after all of the other cells have run this.expression = this.getAttribute('expression') || ''; }