From 6c5ac00acb7a6e8e80073f38cfdd1d9b9cc51685 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 17 Apr 2023 15:41:55 +0100 Subject: [PATCH] Standardise shadows across cell types --- .../sheet/cells/AttachmentCell.svelte | 16 +++----- .../components/sheet/cells/OptionsCell.svelte | 17 ++++++--- .../sheet/cells/RelationshipCell.svelte | 37 ++++++++----------- 3 files changed, 32 insertions(+), 38 deletions(-) diff --git a/packages/frontend-core/src/components/sheet/cells/AttachmentCell.svelte b/packages/frontend-core/src/components/sheet/cells/AttachmentCell.svelte index e762da8d0b..2ea2ba456a 100644 --- a/packages/frontend-core/src/components/sheet/cells/AttachmentCell.svelte +++ b/packages/frontend-core/src/components/sheet/cells/AttachmentCell.svelte @@ -123,30 +123,24 @@ flex-direction: row; justify-content: flex-start; align-items: center; - height: calc(var(--row-height) - 12px); - padding: 0 8px; - color: var(--spectrum-global-color-gray-800); + padding: 0 10px; + color: var(--spectrum-global-color-gray-700); border: 1px solid var(--spectrum-global-color-gray-300); border-radius: 4px; text-transform: uppercase; font-weight: 600; - font-size: 10px; + font-size: 12px; user-select: none; } - img { - height: auto; - /*height: calc(var(--row-height) - 12px);*/ - /*max-width: 64px;*/ - } .dropzone { position: absolute; top: 100%; left: 0; width: 320px; - background: var(--cell-background); + background: var(--background); border: var(--cell-border); - box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.15); padding: var(--cell-padding); + box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15); } .dropzone.invertX { left: auto; diff --git a/packages/frontend-core/src/components/sheet/cells/OptionsCell.svelte b/packages/frontend-core/src/components/sheet/cells/OptionsCell.svelte index 582521c788..a1b2f797c2 100644 --- a/packages/frontend-core/src/components/sheet/cells/OptionsCell.svelte +++ b/packages/frontend-core/src/components/sheet/cells/OptionsCell.svelte @@ -77,7 +77,13 @@ }) -
+
{#each values as val} {@const color = getOptionColor(val)} @@ -112,6 +118,7 @@ class="option" on:click={() => toggleOption(option)} class:focused={focusedOptionIdx === idx} + on:mouseenter={() => (focusedOptionIdx = idx)} >
{option} @@ -193,18 +200,18 @@ ); } .options { - min-width: 100%; + min-width: calc(100% + 2px); position: absolute; top: 100%; - left: 0; + left: -1px; display: flex; flex-direction: column; - box-shadow: 4px 4px 10px 2px rgba(0, 0, 0, 0.1); justify-content: flex-start; align-items: stretch; max-height: var(--max-cell-render-height); overflow-y: auto; border: var(--cell-border); + box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15); } .options.invertX { left: auto; @@ -222,7 +229,7 @@ justify-content: space-between; align-items: center; gap: var(--cell-spacing); - background-color: var(--cell-background-hover); + background-color: var(--background); } .option:hover, .option.focused { diff --git a/packages/frontend-core/src/components/sheet/cells/RelationshipCell.svelte b/packages/frontend-core/src/components/sheet/cells/RelationshipCell.svelte index 093f223829..afe1334a25 100644 --- a/packages/frontend-core/src/components/sheet/cells/RelationshipCell.svelte +++ b/packages/frontend-core/src/components/sheet/cells/RelationshipCell.svelte @@ -1,7 +1,7 @@