From e0a5dbe3b61d4872b077444e5a948b7acb9a9560 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Fri, 23 Aug 2013 18:56:39 -0500
Subject: [PATCH] Tab bar icons

---
 dist/framework-with-theme.css            | 12 ++++++------
 example/bar.html                         | 16 ++++++++--------
 scss/framework/structure/_variables.scss |  4 ++--
 scss/framework/theme/default/_tabs.scss  |  8 +++-----
 4 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/dist/framework-with-theme.css b/dist/framework-with-theme.css
index 4f0e1d851d..5beaecd423 100644
--- a/dist/framework-with-theme.css
+++ b/dist/framework-with-theme.css
@@ -55,7 +55,7 @@ ul {
   -webkit-box-orient: horizontal;
   box-orient: horizontal;
   box-sizing: border-box;
-  height: 98px;
+  height: 60px;
   /*
   .title + .button:last-child,
   .button + .button:last-child,
@@ -75,7 +75,7 @@ ul {
     */
     line-height: 20px;
     margin: 0;
-    padding: 39px 0px;
+    padding: 20px 0px;
     text-align: center;
     white-space: nowrap;
     font-size: 18px;
@@ -98,7 +98,7 @@ ul {
 /* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
    Note: For these to work, content must come after both bars in the markup */
 .bar ~ .content {
-  top: 98px; }
+  top: 60px; }
 
 .bar ~ .content {
   bottom: 51px; }
@@ -295,13 +295,13 @@ a.list-item:hover, a.list-item:focus {
       color: white; }
 
 .tabs {
-  font-size: 20px;
-  height: 98px; }
+  font-size: 16px;
+  height: 60px; }
 
 .tab-item a {
   font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; }
 .tab-item i {
-  font-size: 40px; }
+  font-size: 25px; }
 
 .button {
   color: #222222;
diff --git a/example/bar.html b/example/bar.html
index d34b607ab9..041d215ca6 100644
--- a/example/bar.html
+++ b/example/bar.html
@@ -59,26 +59,26 @@
           </li>
           <li class="tab-item">
             <a href="#">
-              <i class="glyphicon glyphicon-home"></i>
-              Home
+              <i class="glyphicon glyphicon-user"></i>
+              Friends
             </a>
           </li>
           <li class="tab-item">
             <a href="#">
-              <i class="glyphicon glyphicon-home"></i>
-              Home
+              <i class="glyphicon glyphicon-thumbs-down"></i>
+              Enemies
             </a>
           </li>
           <li class="tab-item">
             <a href="#">
-              <i class="glyphicon glyphicon-home"></i>
-              Home
+              <i class="glyphicon glyphicon-wrench"></i>
+              Settings
             </a>
           </li>
           <li class="tab-item">
             <a href="#">
-              <i class="glyphicon glyphicon-home"></i>
-              Home
+              <i class="glyphicon glyphicon-th"></i>
+              More
             </a>
           </li>
         </ul>
diff --git a/scss/framework/structure/_variables.scss b/scss/framework/structure/_variables.scss
index d377b49849..be1b3eb175 100644
--- a/scss/framework/structure/_variables.scss
+++ b/scss/framework/structure/_variables.scss
@@ -15,8 +15,8 @@ $baseLineHeightComputed:    floor($baseFontSize * $baseLineHeight); // ~20px
 $contentPadding: 10px;
 
 // Bar stuff
-$barHeight: 98px !default;
-$barLineHeight: 98px !default;
+$barHeight: 60px !default;
+$barLineHeight: 60px !default;
 $barTitleFontSize: $fontSizeLarge;
 $barTitleLineHeightComputed: $baseLineHeightComputed;
 $barPaddingVertical: (($barHeight - $baseLineHeightComputed) / 2);
diff --git a/scss/framework/theme/default/_tabs.scss b/scss/framework/theme/default/_tabs.scss
index 48a09ee994..06fdeb548a 100644
--- a/scss/framework/theme/default/_tabs.scss
+++ b/scss/framework/theme/default/_tabs.scss
@@ -1,15 +1,13 @@
 .tabs {
-  font-size: 20px;
-  height: 98px;
-
-
+  font-size: 16px;
+  height: 60px;
 }
 .tab-item {
   a {
     font-family: $lightSansFontFamily;
   }
   i {
-    font-size: 40px;
+    font-size: 25px;
   }
 }