Fixed alignment and coloring of form control clear button

elastic · Sep 4, 2018 · 370385e · 370385e
1 parent bbf5a3b
commit 370385e
Showing 1 changed file with 2 additions and 5 deletions.
diff --git a/src/components/form/form_control_layout/_mixins.scss b/src/components/form/form_control_layout/_mixins.scss
@@ -17,9 +17,9 @@
   pointer-events: all;
 
   @include size($clearSize);
-  background-color: transparentize($euiColorMediumShade, .5);
+  background-color: lightOrDarkTheme($euiColorMediumShade, $euiColorDarkShade);
   border-radius: $clearSize;
-  line-height: $clearSize;
+  line-height: 0; // ensures the icon stays vertically centered
 
   &:focus {
     @include euiFocusRing;
@@ -30,8 +30,5 @@
     fill: $euiColorEmptyShade;
     stroke: $euiColorEmptyShade;
     stroke-width: 3px; // increase thickness of icon at such a small size
-    // better vertical position fix that works with IE
-    position: relative;
-    top: -2px;
   }
 }