[Graph] Fix style for disabled fields when focused (#96780)

Co-authored-by: Kibana Machine <[email protected]>
elastic · Apr 19, 2021 · 1b02152 · 1b02152
1 parent 4540a94
commit 1b02152
Showing 1 changed file with 15 additions and 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
@@ -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 {