style: fix up legend toggle

elastic · Jun 7, 2019 · 21bb075 · 21bb075
1 parent ddee798
commit 21bb075
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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