diff options
| author | Martin Kagamino Lehoux <martin@lehoux.net> | 2026-09-07 19:55:08 +0200 |
|---|---|---|
| committer | Martin Kagamino Lehoux <martin@lehoux.net> | 2026-09-07 19:55:08 +0200 |
| commit | 5c1e0821e762c2dd098a01b2bb6231c7f8568736 (patch) | |
| tree | 0ba3008b3e26011540e935865c05cd0803d1c197 /src/routes/groceries/+page.svelte | |
| parent | 20a7a08e97e75c3a45b3430a74c2931554498f1c (diff) | |
Extract duplicated styles into shared molecules and color atoms
Move .score, .status, .add-bar and .btn-accent molecules into app.css
and replace BEM color modifiers with bare atoms (bg-success, bg-accent,
bg-danger, bg-accent-soft, text-accent, text-white). Rename the
category-specific cat-add-bar to add-bar and the groceries page's
sticky autocomplete bar to grocery-add-bar to avoid the collision.
Cuts dcd duplicate lines from 1288 to 780.
Diffstat (limited to 'src/routes/groceries/+page.svelte')
| -rw-r--r-- | src/routes/groceries/+page.svelte | 14 |
1 files changed, 7 insertions, 7 deletions
diff --git a/src/routes/groceries/+page.svelte b/src/routes/groceries/+page.svelte index a159209..df1b97b 100644 --- a/src/routes/groceries/+page.svelte +++ b/src/routes/groceries/+page.svelte @@ -65,7 +65,7 @@ } </script> -<div class="add-bar"> +<div class="grocery-add-bar"> <FuzzyAutocomplete items={data.catalog} bind:value={name} @@ -123,7 +123,7 @@ </main> <style> - .add-bar { + .grocery-add-bar { display: flex; gap: 0.5rem; padding: 0.5rem 1rem; @@ -134,7 +134,7 @@ z-index: 10; } - .add-bar button { + .grocery-add-bar button { width: 3rem; height: 3rem; flex-shrink: 0; @@ -151,25 +151,25 @@ transition: all 0.2s ease; } - .add-bar > button:nth-of-type(1) { + .grocery-add-bar > button:nth-of-type(1) { background: var(--accent); color: var(--white); box-shadow: 0 1px 2px var(--shadow); } - .add-bar > button:nth-of-type(1):hover { + .grocery-add-bar > button:nth-of-type(1):hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 8px var(--shadow-accent-lg); } - .add-bar > button:nth-of-type(2) { + .grocery-add-bar > button:nth-of-type(2) { background: var(--surface); color: var(--text-secondary); border: 1.5px solid var(--border); } - .add-bar > button:nth-of-type(2):hover { + .grocery-add-bar > button:nth-of-type(2):hover { border-color: var(--accent); color: var(--text); } |