From 5703bc11337c723dfb313a60516704e885b1559e Mon Sep 17 00:00:00 2001 From: Matt Westcott Date: Tue, 1 Nov 2022 17:15:48 +0000 Subject: [PATCH] Fix disabled style on StreamField add button Fixes #9512 An `opacity: 0.2` style is defined for the disabled button state, but the `opacity: 1` hover style takes precedence over it. As a result, the only time it kicks in - on media with hover support - is when the StreamField does NOT have hover / focus, which would ordinarily be the time when the button is hidden entirely. Fix this by adding hover states to the `&[disabled]` case, to match the order of precedence for the normal button state. --- .../StreamField/scss/components/c-sf-add-button.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/client/src/components/StreamField/scss/components/c-sf-add-button.scss b/client/src/components/StreamField/scss/components/c-sf-add-button.scss index b7b78dc805..167ba6f40d 100644 --- a/client/src/components/StreamField/scss/components/c-sf-add-button.scss +++ b/client/src/components/StreamField/scss/components/c-sf-add-button.scss @@ -51,5 +51,13 @@ @media (forced-colors: active) { color: GrayText; } + + @media (hover: hover) { + opacity: 0; + + .w-panel--nested:is(:hover, :focus-within) & { + opacity: 0.2; + } + } } }