From 660f2e7a0deed266e663c3552aa7fa172cf0d79e Mon Sep 17 00:00:00 2001 From: Bastian Allgeier Date: Fri, 13 Dec 2024 14:12:26 +0100 Subject: [PATCH] Improve selected state for items --- panel/src/components/Collection/Item.vue | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/panel/src/components/Collection/Item.vue b/panel/src/components/Collection/Item.vue index 43b9dd98ba..208a98b826 100644 --- a/panel/src/components/Collection/Item.vue +++ b/panel/src/components/Collection/Item.vue @@ -167,12 +167,13 @@ export default { --item-color-back: light-dark(var(--color-white), var(--color-gray-850)); --item-height: auto; --item-height-cardlet: calc(var(--height-md) * 3); + --item-shadow: var(--shadow-sm); } .k-item { position: relative; background: var(--item-color-back); - box-shadow: var(--shadow); + box-shadow: var(--item-shadow); border-radius: var(--rounded); min-height: var(--item-height); container-type: inline-size; @@ -368,6 +369,7 @@ export default { flex-shrink: 0; } .k-item[data-selectable="true"]:has(.k-item-options-checkbox input:checked) { - outline: var(--outline); + --item-color-back: light-dark(var(--color-blue-250), var(--color-blue-800)); + --item-shadow: 0 1px 3px 0 rgba(0 0 0 / 0.25), 0 1px 2px 0 rgba(0 0 0 / 0.05); }