From 37438c1a4c0547db64807dcb6aaf35b52c4b11f9 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Mon, 11 Dec 2023 13:20:15 -0800 Subject: [PATCH] fix(dropdown-item): avoid hover/active styling when disabled --- .../dropdown-item/dropdown-item.scss | 29 ++++++++----------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss b/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss index e409cc47d7f..5af2356fca2 100644 --- a/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss +++ b/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss @@ -103,28 +103,23 @@ padding-inline-start: theme("padding.10"); } -:host(:hover) .container, -:host(:active) .container { - @apply bg-foreground-2 text-color-1 no-underline; -} - -:host(:hover) .container--link .dropdown-link, -:host(:active) .container--link .dropdown-link { - @apply text-color-1; -} +:host(:hover:not([disabled])), +:host(:active:not([disabled])) { + .container { + @apply bg-foreground-2 text-color-1 no-underline; + } -:host(:focus) .container { - @apply text-color-1 no-underline; + .container--link .dropdown-link { + @apply text-color-1; + } } -:host(:active) .container { +:host(:active:not([disabled])) .container { @apply bg-foreground-3; } -:host(:hover) .container:before, -:host(:active) .container:before, -:host(:focus) .container:before { - @apply opacity-100; +:host(:focus) .container { + @apply text-color-1 no-underline; } :host([selected]) .container:not(.container--none-selection), @@ -177,7 +172,7 @@ inset-inline-start: theme("spacing.3"); } -:host(:hover) .dropdown-item-icon { +:host(:hover:not([disabled])) .dropdown-item-icon { color: theme("borderColor.color.1"); @apply opacity-100; }