From d9ce879ebbcc89d8fd3fc89f31fa81b558b231d2 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 17 Aug 2017 13:11:20 -0400
Subject: [PATCH] Rework tabs

---
 source/css/tabs.css | 89 ++++++++++++++++++++++++++-------------------
 1 file changed, 51 insertions(+), 38 deletions(-)

diff --git a/source/css/tabs.css b/source/css/tabs.css
index 9d432dbca..35effadab 100644
--- a/source/css/tabs.css
+++ b/source/css/tabs.css
@@ -11,6 +11,7 @@
   --tab-color-disabled: var(--state-secondary);
   --tab-padding-x: var(--component-padding-x);
   --tab-padding-y: calc(var(--component-padding-y) / 2);
+  --tab-speed: .2s;
 
   --tab-pane-border-color: var(--component-border-color);
   --tab-pane-border-radius: var(--component-border-radius);
@@ -22,50 +23,62 @@
 .tabs {
   width: 100%;
   margin-bottom: 1rem;
-}
 
-.tabs-nav {
-  margin-bottom: 1rem;
-  user-select: none;
-}
+  & .tabs-nav {
+    margin-bottom: 1rem;
+    user-select: none;
 
-.tabs-nav a {
-  color: var(--tab-color);
-  text-decoration: none;
-  background-color: var(--tab-bg-color);
-  border-radius: var(--tab-border-radius);
-  padding: var(--tab-padding-y) var(--tab-padding-x);
-  display: inline-block;
-}
+    & a {
+      color: var(--tab-color);
+      text-decoration: none;
+      background-color: var(--tab-bg-color);
+      border-radius: var(--tab-border-radius);
+      padding: var(--tab-padding-y) var(--tab-padding-x);
+      display: inline-block;
+      transition: var(--tab-speed) box-shadow;
 
-.tabs-nav a:hover {
-  color: var(--tab-color-hover);
-  background-color: var(--tab-bg-color-hover);
-  text-decoration: none;
-}
+      &:hover {
+        color: var(--tab-color-hover);
+        background-color: var(--tab-bg-color-hover);
+        text-decoration: none;
+      }
 
-.tabs-nav a.active {
-  color: var(--tab-color-active);
-  background-color: var(--tab-bg-color-active);
-  cursor: default;
-}
+      &:focus {
+        outline: none;
 
-.tabs-nav a.disabled {
-  color: var(--tab-color-disabled);
-  background-color: var(--tab-bg-color-disabled);
-  cursor: not-allowed;
-}
+        &:not(.disabled) {
+          box-shadow: 0 0 0 3px color(var(--tab-bg-color-active) alpha(50%));
 
-.tabs-pane {
-  border: solid var(--tab-pane-border-width) var(--tab-pane-border-color);
-  border-radius: .25rem;
-  padding: var(--tab-pane-padding-y) var(--tab-pane-padding-x);
-}
+          /* Force a new stacking context so focus rings don't get truncated by adjacent elements */
+          transform: translateZ(0);
+        }
+      }
 
-.tabs-pane:not(.active) {
-  display: none;
-}
+      &.active {
+        color: var(--tab-color-active);
+        background-color: var(--tab-bg-color-active);
+        cursor: default;
+      }
 
-.tabs-pane :last-child {
-  margin-bottom: 0;
+      &.disabled {
+        color: var(--tab-color-disabled);
+        background-color: var(--tab-bg-color-disabled);
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  & .tabs-pane {
+    border: solid var(--tab-pane-border-width) var(--tab-pane-border-color);
+    border-radius: .25rem;
+    padding: var(--tab-pane-padding-y) var(--tab-pane-padding-x);
+
+    &:not(.active) {
+      display: none;
+    }
+
+    & :last-child {
+      margin-bottom: 0;
+    }
+  }
 }