style up focus for combo buttons

elastic · May 23, 2018 · 9c5dcf6 · 9c5dcf6
1 parent 5d5d9ad
commit 9c5dcf6
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/src/components/form/form_control_layout/_form_control_layout.scss b/src/components/form/form_control_layout/_form_control_layout.scss
@@ -27,11 +27,23 @@
 
   .euiFormControlLayout__iconButton {
     pointer-events: all;
-    top: $euiFormControlPadding - 1px;
+    top: $euiFormControlPadding;
+    height: $euiSize;
+    width: $euiSize;
+
+    svg {
+      margin-top: -$euiSizeXS;
+    }
+
+    &:focus {
+      background: $euiColorPrimary;
+      border-radius: 100%;
+      color: $euiColorGhost;
+    }
 
     @at-root {
       .euiFormControlLayout--compressed#{&} {
-        top: $euiFormControlPadding--compressed - 1px;
+        top: $euiFormControlPadding--compressed;
       }
     }
   }

diff --git a/src/components/form/form_control_layout/_mixins.scss b/src/components/form/form_control_layout/_mixins.scss
@@ -5,6 +5,11 @@
   background-color: transparentize($euiColorMediumShade, .5);
   border-radius: $clearSize;
   line-height: $clearSize;
+  transition: background-color $euiAnimSpeedExtraFast $euiAnimSlightResistance;
+
+  &:focus, &:hover {
+    background-color: $euiColorPrimary;
+  }
 
   #{$iconClass} {
     @include size($euiSizeS);