fix(simple-tabs-alt): active border on active tab

- Adds a brand active border to the top of the currently active tab re: [#87784036]
pivotal-cf · Feb 9, 2015 · 255b360 · 255b360
1 parent f95f6a4
commit 255b360
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/src/pivotal-ui/components/pui-variables.scss b/src/pivotal-ui/components/pui-variables.scss
@@ -699,6 +699,7 @@ $tab-alt-link-active-color:                 $navy-1;
 $tab-alt-link-color:                        $blue-2;
 $tab-alt-link-font-weight:                  600;
 $tab-alt-active-bg-color:                   $gray-11;
+$tab-alt-active-highlight-color:            $brand-3;
 
 // Pills
 $nav-pills-border-radius:                   null;

diff --git a/src/pivotal-ui/components/tabs.scss b/src/pivotal-ui/components/tabs.scss
@@ -234,23 +234,27 @@ name: tab_simple_alt
 parent: tab
 ---
 
+You do not need the `.panel` to wrap around `.tab-simple-alt`. We have it there to demonstrate the interaction on a neutral background.
+
 ```html_example
-<div class="tab-simple-alt">
-  <ul class="nav nav-tabs">
-    <li class="active">
-      <a data-toggle="tab" href="#dashboard">Dashboard</a>
-    </li>
-    <li>
-      <a data-toggle="tab" href="#notifications">Notifications</a>
-    </li>
-    <li>
-      <a data-toggle="tab" href="#eula">EULA</a>
-    </li>
-  </ul>
-  <div class="tab-content">
-    <div class="tab-pane fade in active" id="dashboard">Dashboard Content</div>
-    <div class="tab-pane fade" id="notifications">Notifications Content</div>
-    <div class="tab-pane fade" id="eula">EULA Content</div>
+<div class="panel paxl bg-neutral-9">
+  <div class="tab-simple-alt">
+    <ul class="nav nav-tabs">
+      <li class="active">
+        <a data-toggle="tab" href="#dashboard">Dashboard</a>
+      </li>
+      <li>
+        <a data-toggle="tab" href="#notifications">Notifications</a>
+      </li>
+      <li>
+        <a data-toggle="tab" href="#eula">EULA</a>
+      </li>
+    </ul>
+    <div class="tab-content">
+      <div class="tab-pane fade in active" id="dashboard">Dashboard Content</div>
+      <div class="tab-pane fade" id="notifications">Notifications Content</div>
+      <div class="tab-pane fade" id="eula">EULA Content</div>
+    </div>
   </div>
 </div>
 ```
@@ -284,6 +288,7 @@ parent: tab
       }
     }
     > li.active {
+      border-top: 2px solid $tab-alt-active-highlight-color;
       background-color: $tab-alt-active-bg-color;
       cursor: default;
       border-right: 0;