Improved focus state of EuiSwitch, EuiCheckbox, EuiRadio and EuiRange (…

…#2745)
elastic · Jan 11, 2020 · 529603d · 529603d
1 parent 7068260
commit 529603d
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,7 @@
 - Changed `EuiNavDrawerFlyout` to close after child nav items are clicked ([#2749](https://github.com/elastic/eui/pull/2749))
 - Changed `EuiNavDrawerFlyout` to trap focus while navigating via keyboard ([#2749](https://github.com/elastic/eui/pull/2749))
 - Created a `euiPaletteColorBlindBehindText` variant of the color blind palette ([#2750](https://github.com/elastic/eui/pull/2750))
+- Improved focus state of `EuiSwitch`, `EuiCheckbox`, `EuiRadio` and `EuiRange` ([#2745](https://github.com/elastic/eui/pull/2745))
 
 **Bug fixes**
 

diff --git a/src/components/form/switch/_switch.scss b/src/components/form/switch/_switch.scss
@@ -17,7 +17,7 @@
     flex-shrink: 0; // ensures the button doesn't lose width because of a long label
     line-height: 0; // ensures button takes height of switch inside
 
-    &:focus .euiSwitch__thumb {
+    &:focus .euiSwitch__track {
       @include euiCustomControlFocused;
     }
 

diff --git a/src/global_styling/variables/_states.scss b/src/global_styling/variables/_states.scss
@@ -4,4 +4,4 @@ $euiFocusRingAnimStartColor: rgba($euiColorPrimary, 0) !default;
 
 // Sizing
 $euiFocusRingSizeLarge: $euiSizeXS !default;
-$euiFocusRingSize: $euiFocusRingSizeLarge / 2 !default;
+$euiFocusRingSize: $euiFocusRingSizeLarge * .75 !default;