Improve condensed EuiTabs focus states (#3299)

* Improving condensed tabs focus states * Adding changelog * Changelog
elastic · Apr 14, 2020 · 5fed879 · 5fed879
1 parent 5e2c11b
commit 5fed879
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - Converted `NavDrawer`, `NavDrawerGroup`, and `NavDrawerFlyout` to TypeScript ([#3268](https://github.com/elastic/eui/pull/3268))
 - Converted `EuiDatePicker`, `EuiDatePickerRange`, `EuiSuperDatePicker`, and `EuiSuperUpdateButton` to TypeScript ([#2891](https://github.com/elastic/eui/pull/2891))
+- Improved condensed `EuiTabs` focus states ([#3299](https://github.com/elastic/eui/pull/3299))
 
 ## [`22.5.0`](https://github.com/elastic/eui/tree/v22.5.0)
 

diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss
@@ -89,18 +89,22 @@
 
   .euiTabs--condensed & {
     font-weight: $euiFontWeightSemiBold;
-    padding: $euiSizeS 0;
+    padding: $euiSizeS $euiSizeXS;
 
     &:focus {
-      background-color: transparent;
+      background-color: $euiFocusBackgroundColor;
 
       &::before {
         display: none;
       }
     }
 
+    &-isSelected {
+      text-decoration: none;
+    }
+
     & + .euiTab {
-      margin-left: $euiSizeL;
+      margin-left: $euiSize;
     }
   }