From d40c90abd903f35885db009ef9f28fb8aa6736be Mon Sep 17 00:00:00 2001 From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Date: Mon, 19 Apr 2021 11:42:17 -0400 Subject: [PATCH] [Graph] Fix style for disabled fields when focused (#96780) (#97458) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Marco Liberati --- .../field_manager/_field_editor.scss | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/graph/public/components/field_manager/_field_editor.scss b/x-pack/plugins/graph/public/components/field_manager/_field_editor.scss index 20773d98ce9c3..867899fc66391 100644 --- a/x-pack/plugins/graph/public/components/field_manager/_field_editor.scss +++ b/x-pack/plugins/graph/public/components/field_manager/_field_editor.scss @@ -1,11 +1,21 @@ .gphFieldEditor__badge { @include gphFieldBadgeSize; -} -.gphFieldEditor__badge--disabled, -.gphFieldEditor__badge--disabled:focus { - opacity: .7; - text-decoration: line-through; + &.gphFieldEditor__badge--disabled, + &.gphFieldEditor__badge--disabled:hover, + &.gphFieldEditor__badge--disabled:focus, + &.gphFieldEditor__badge--disabled:not(:disabled):hover + &.gphFieldEditor__badge--disabled:not(:disabled):focus { + opacity: .7; + text-decoration: line-through; + } + + // Chrome fix for focus: duplicate or Safari will ignore completely the disabled rule + &.gphFieldEditor__badge--disabled:focus:not(:focus-visible), + &.gphFieldEditor__badge--disabled:hover:not(:focus-visible) { + opacity: .7; + text-decoration: line-through; + } } .gphFieldEditor__badgeIcon {