From 503c870cdfa4d19447ee332bf24bde49b6a5b7e9 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Thu, 12 Jun 2025 10:51:06 -0500 Subject: [PATCH] Adjust drag/drop styles --- app/assets/stylesheets/_global.css | 1 + app/assets/stylesheets/drag_and_drop.css | 12 +++++++----- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css index c7e4cedd0..59a5b9357 100644 --- a/app/assets/stylesheets/_global.css +++ b/app/assets/stylesheets/_global.css @@ -160,6 +160,7 @@ --color-negative: oklch(var(--lch-red-dark)); --color-positive: oklch(var(--lch-green-dark)); --color-link: oklch(var(--lch-blue-dark)); + --color-selected-light: oklch(var(--lch-blue-lightest)); --color-selected: oklch(var(--lch-blue-lighter)); --color-selected-dark: oklch(var(--lch-blue-light)); --color-highlight: oklch(var(--lch-yellow-lighter)); diff --git a/app/assets/stylesheets/drag_and_drop.css b/app/assets/stylesheets/drag_and_drop.css index 3d5c93e87..7bcd853df 100644 --- a/app/assets/stylesheets/drag_and_drop.css +++ b/app/assets/stylesheets/drag_and_drop.css @@ -1,13 +1,15 @@ @layer components { .drag-and-drop__dragged-item { - border: 2px solid #e0e7ff; + box-shadow: none; + filter: grayscale(1) brightness(0.95); opacity: 0.7; - box-shadow: 0 4px 6px rgba(99, 102, 241, 0.15); + outline: 2px dashed var(--color-selected-dark); } .drag-and-drop__hover-container { - border: 2px dashed #818cf8; - background-color: #f5f3ff; - transition: all 0.2s ease; + background-color: var(--color-selected-light); + border-radius: 0.2em; + outline: 2px dashed var(--color-selected-dark); + transition: background-color 200ms; } }