From 21bb075ca3d834bf4346ed30e3f4122f4565652b Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 6 Jun 2019 13:57:54 -0400
Subject: [PATCH] style: fix up legend toggle

---
 src/components/legend/_index.scss         |  1 +
 src/components/legend/_legend.scss        | 27 -----------------------
 src/components/legend/_legend_button.scss | 23 +++++++++++++++++++
 src/components/legend/legend_button.tsx   |  4 ++--
 4 files changed, 26 insertions(+), 29 deletions(-)
 create mode 100644 src/components/legend/_legend_button.scss

diff --git a/src/components/legend/_index.scss b/src/components/legend/_index.scss
index 48c6d3a719..8caba8f13e 100644
--- a/src/components/legend/_index.scss
+++ b/src/components/legend/_index.scss
@@ -1,4 +1,5 @@
 @import 'variables';
 @import 'legend';
+@import 'legend_button';
 @import 'legend_list';
 @import 'legend_item';
diff --git a/src/components/legend/_legend.scss b/src/components/legend/_legend.scss
index 12635b5979..e4637a849f 100644
--- a/src/components/legend/_legend.scss
+++ b/src/components/legend/_legend.scss
@@ -68,30 +68,3 @@
   overflow-y: auto;
   overflow-x: hidden;
 }
-
-.echLegend__toggle {
-  padding: 4px;
-  opacity: 0.35;
-
-  &:hover {
-    opacity: 1;
-  }
-
-  border-radius: $euiBorderRadius;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  background-color: $euiColorEmptyShade;
-  transition: opacity $euiAnimSpeedFast $euiAnimSlightResistance,
-    background-color $euiAnimSpeedFast $euiAnimSlightResistance $euiAnimSpeedExtraSlow;
-
-  &:focus {
-    box-shadow: none;
-    background-color: $euiFocusBackgroundColor !important;
-  }
-}
-
-.echLegend__toggle--isOpen {
-  background-color: transparentize($euiColorDarkestShade, 0.9);
-  opacity: 1;
-}
diff --git a/src/components/legend/_legend_button.scss b/src/components/legend/_legend_button.scss
new file mode 100644
index 0000000000..e634285241
--- /dev/null
+++ b/src/components/legend/_legend_button.scss
@@ -0,0 +1,23 @@
+.echLegendButton {
+  padding: $euiSizeXS;
+  line-height: 1;
+  opacity: 0.35;
+  border-radius: $euiBorderRadius;
+  background-color: $euiColorEmptyShade;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  transition:
+    opacity $euiAnimSpeedFast $euiAnimSlightResistance,
+    background-color $euiAnimSpeedFast $euiAnimSlightResistance;
+
+  &:hover,
+  &:focus {
+    opacity: 1;
+    background-color: $euiFocusBackgroundColor;
+  }
+}
+
+.echLegendButton--isOpen {
+  opacity: 1;
+}
diff --git a/src/components/legend/legend_button.tsx b/src/components/legend/legend_button.tsx
index 674b846443..028fcb73de 100644
--- a/src/components/legend/legend_button.tsx
+++ b/src/components/legend/legend_button.tsx
@@ -22,8 +22,8 @@ class LegendButtonComponent extends React.Component<LegendButtonProps> {
       return null;
     }
     const isOpen = !legendCollapsed.get();
-    const className = classNames('echLegend__toggle', {
-      'echLegend__toggle--isOpen': isOpen,
+    const className = classNames('echLegendButton', {
+      'echLegendButton--isOpen': isOpen,
     });
     return (
       <button