From 343b4914a2f3c28a79b3ed4fe292b1260e082548 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Wed, 25 Sep 2013 21:54:39 -0500
Subject: [PATCH] Tab bar stuff with ben

---
 dist/ionic.css        |  69 +++++++++++-------
 dist/ionicIcons.css   |  69 +++++++++++-------
 scss/_variables.scss  |  33 ++++-----
 scss/ionic/_bar.scss  |   6 ++
 scss/ionic/_tabs.scss |  78 +++++++++++++-------
 test/ios7.html        |  20 ++++++
 test/tab-bars.html    | 161 ++++++++++++++----------------------------
 7 files changed, 237 insertions(+), 199 deletions(-)
 create mode 100644 test/ios7.html

diff --git a/dist/ionic.css b/dist/ionic.css
index c709b448f9..178f22275c 100644
--- a/dist/ionic.css
+++ b/dist/ionic.css
@@ -1188,6 +1188,9 @@ address {
     font-size: 12px;
     padding: 4px 12px;
     z-index: 1; }
+    .bar .button.button-clear {
+      line-height: 34px;
+      padding: 0 5px; }
   .bar .button-bar {
     line-height: 18px; }
   .bar .button-bar + .button, .bar .button + .button-bar {
@@ -1373,6 +1376,8 @@ address {
   -moz-box-orient: horizontal;
   display: -webkit-box;
   display: box;
+  border-top-width: 1px;
+  border-style: solid;
   background-color: white;
   border-color: #dddddd;
   color: #333333; }
@@ -1385,41 +1390,30 @@ address {
     border-color: #bbbbbb;
     color: #333333; }
   .tabs.tabs-primary {
-    background-color: #6999e9;
-    border-color: #5981c5;
+    background-color: #4a87ee;
+    border-color: #3b6dc2;
     color: white; }
   .tabs.tabs-success {
-    background-color: #89c163;
-    border-color: #71a052;
+    background-color: #66cc33;
+    border-color: #5bb22f;
     color: white; }
   .tabs.tabs-info {
-    background-color: #60d2e6;
-    border-color: #51b3c4;
+    background-color: #43cee6;
+    border-color: #3bb3c8;
     color: white; }
   .tabs.tabs-warning {
     background-color: #f0b840;
-    border-color: #cf9a29;
+    border-color: #d29f31;
     color: white; }
   .tabs.tabs-danger {
-    background-color: #de5645;
-    border-color: #bc4435;
+    background-color: #ef4e3a;
+    border-color: #c73927;
     color: white; }
   .tabs.tabs-dark {
-    background-color: #de5645;
-    border-color: #bc4435;
+    background-color: #ef4e3a;
+    border-color: #c73927;
     color: white; }
 
-.tab-item {
-  font-weight: 200;
-  font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color: inherit;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden; }
-  .tab-item i {
-    font-size: 25px; }
-
-/* Navigational tab */
 .tab-item {
   display: block;
   width: 0;
@@ -1429,16 +1423,41 @@ address {
   -moz-box-flex: 1;
   box-sizing: border-box;
   text-align: center;
-  text-decoration: none; }
+  text-decoration: none;
+  font-weight: 400;
+  font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 10px;
+  color: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  opacity: 0.7; }
+  .tab-item i {
+    font-size: 32px; }
 
+/* Navigational tab */
 /* Active state for tab */
 .tab-item.active, .tab-item:active {
-  background-color: rgba(0, 0, 0, 0.2); }
+  opacity: 1; }
+  .tab-item.active.tab-item-default, .tab-item:active.tab-item-default {
+    color: white; }
+  .tab-item.active.tab-item-secondary, .tab-item:active.tab-item-secondary {
+    color: whitesmoke; }
+  .tab-item.active.tab-item-primary, .tab-item:active.tab-item-primary {
+    color: #4a87ee; }
+  .tab-item.active.tab-item-success, .tab-item:active.tab-item-success {
+    color: #66cc33; }
+  .tab-item.active.tab-item-danger, .tab-item:active.tab-item-danger {
+    color: #ef4e3a; }
+  .tab-item.active.tab-item-warning, .tab-item:active.tab-item-warning {
+    color: #f0b840; }
+  .tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark {
+    color: #444444; }
 
 /* Icon for tab  */
 .tab-item i {
   display: block;
-  margin: 0 auto; }
+  margin: 1px auto -3px auto; }
 
 /* Label for tab */
 .tab-label {
diff --git a/dist/ionicIcons.css b/dist/ionicIcons.css
index 80df13aa61..bd7c940239 100644
--- a/dist/ionicIcons.css
+++ b/dist/ionicIcons.css
@@ -1258,6 +1258,9 @@ address {
     font-size: 12px;
     padding: 4px 12px;
     z-index: 1; }
+    .bar .button.button-clear {
+      line-height: 34px;
+      padding: 0 5px; }
   .bar .button-bar {
     line-height: 18px; }
   .bar .button-bar + .button, .bar .button + .button-bar {
@@ -1443,6 +1446,8 @@ address {
   -moz-box-orient: horizontal;
   display: -webkit-box;
   display: box;
+  border-top-width: 1px;
+  border-style: solid;
   background-color: white;
   border-color: #dddddd;
   color: #333333; }
@@ -1455,41 +1460,30 @@ address {
     border-color: #bbbbbb;
     color: #333333; }
   .tabs.tabs-primary {
-    background-color: #6999e9;
-    border-color: #5981c5;
+    background-color: #4a87ee;
+    border-color: #3b6dc2;
     color: white; }
   .tabs.tabs-success {
-    background-color: #89c163;
-    border-color: #71a052;
+    background-color: #66cc33;
+    border-color: #5bb22f;
     color: white; }
   .tabs.tabs-info {
-    background-color: #60d2e6;
-    border-color: #51b3c4;
+    background-color: #43cee6;
+    border-color: #3bb3c8;
     color: white; }
   .tabs.tabs-warning {
     background-color: #f0b840;
-    border-color: #cf9a29;
+    border-color: #d29f31;
     color: white; }
   .tabs.tabs-danger {
-    background-color: #de5645;
-    border-color: #bc4435;
+    background-color: #ef4e3a;
+    border-color: #c73927;
     color: white; }
   .tabs.tabs-dark {
-    background-color: #de5645;
-    border-color: #bc4435;
+    background-color: #ef4e3a;
+    border-color: #c73927;
     color: white; }
 
-.tab-item {
-  font-weight: 200;
-  font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color: inherit;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden; }
-  .tab-item i {
-    font-size: 25px; }
-
-/* Navigational tab */
 .tab-item {
   display: block;
   width: 0;
@@ -1499,16 +1493,41 @@ address {
   -moz-box-flex: 1;
   box-sizing: border-box;
   text-align: center;
-  text-decoration: none; }
+  text-decoration: none;
+  font-weight: 400;
+  font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 10px;
+  color: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  opacity: 0.7; }
+  .tab-item i {
+    font-size: 32px; }
 
+/* Navigational tab */
 /* Active state for tab */
 .tab-item.active, .tab-item:active {
-  background-color: rgba(0, 0, 0, 0.2); }
+  opacity: 1; }
+  .tab-item.active.tab-item-default, .tab-item:active.tab-item-default {
+    color: white; }
+  .tab-item.active.tab-item-secondary, .tab-item:active.tab-item-secondary {
+    color: whitesmoke; }
+  .tab-item.active.tab-item-primary, .tab-item:active.tab-item-primary {
+    color: #4a87ee; }
+  .tab-item.active.tab-item-success, .tab-item:active.tab-item-success {
+    color: #66cc33; }
+  .tab-item.active.tab-item-danger, .tab-item:active.tab-item-danger {
+    color: #ef4e3a; }
+  .tab-item.active.tab-item-warning, .tab-item:active.tab-item-warning {
+    color: #f0b840; }
+  .tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark {
+    color: #444444; }
 
 /* Icon for tab  */
 .tab-item i {
   display: block;
-  margin: 0 auto; }
+  margin: 1px auto -3px auto; }
 
 /* Label for tab */
 .tab-label {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 418759c786..bd0e8ff30b 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -250,6 +250,7 @@ $button-dark-active-border:   #000;
 
 $bar-height:                     44px !default;
 $bar-button-line-height:         23px !default;
+$bar-button-clear-line-height:   34px !default;
 $bar-button-bar-line-height:     18px !default;
 $bar-title-font-size:            $font-size-large;
 $bar-padding-portrait:           5px;
@@ -287,29 +288,29 @@ $bar-dark-border-color:       $button-dark-border;
 // -------------------------------
 $tabs-height:                 49px !default;
 
-$tabs-default-bg:              #fff;
-$tabs-default-border-color:    #ddd;
+$tabs-default-bg:              $brand-default;
+$tabs-default-border-color:    $button-default-border;
 
-$tabs-secondary-bg:            #f5f5f5;
-$tabs-secondary-border-color:  #bbb;
+$tabs-secondary-bg:            $brand-secondary;
+$tabs-secondary-border-color:  $button-secondary-border;
 
-$tabs-primary-bg:              #6999e9;
-$tabs-primary-border-color:    #5981c5;
+$tabs-primary-bg:              $brand-primary;
+$tabs-primary-border-color:    $button-primary-border;
 
-$tabs-info-bg:                 #60d2e6;
-$tabs-info-border-color:       #51b3c4;
+$tabs-info-bg:                 $brand-info;
+$tabs-info-border-color:       $button-info-border;
 
-$tabs-success-bg:              #89c163;
-$tabs-success-border-color:    #71a052;
+$tabs-success-bg:              $brand-success;
+$tabs-success-border-color:    $button-success-border;
 
-$tabs-warning-bg:              #f0b840;
-$tabs-warning-border-color:    #cf9a29;
+$tabs-warning-bg:              $brand-warning;
+$tabs-warning-border-color:    $button-warning-border;
 
-$tabs-danger-bg:               #de5645;
-$tabs-danger-border-color:     #bc4435;
+$tabs-danger-bg:               $brand-danger;
+$tabs-danger-border-color:     $button-danger-border;
 
-$tabs-dark-bg:                 #444;
-$tabs-dark-border-color:       #111;
+$tabs-dark-bg:                 $brand-dark;
+$tabs-dark-border-color:       $button-dark-border;
 
 
 // Lists
diff --git a/scss/ionic/_bar.scss b/scss/ionic/_bar.scss
index c3eb2b938a..2afcf92015 100644
--- a/scss/ionic/_bar.scss
+++ b/scss/ionic/_bar.scss
@@ -92,8 +92,14 @@
     font-size: 12px;
     padding: 4px 12px;
     z-index: 1;
+
+    &.button-clear {
+      line-height: $bar-button-clear-line-height;
+      padding: 0 5px;
+    }
   }
 
+
   .button-bar {
     line-height: $bar-button-bar-line-height;
   }
diff --git a/scss/ionic/_tabs.scss b/scss/ionic/_tabs.scss
index 6c33bee02f..bb504e7a08 100644
--- a/scss/ionic/_tabs.scss
+++ b/scss/ionic/_tabs.scss
@@ -14,7 +14,10 @@
   @include box-orient(horizontal);
   display: -webkit-box;
   display: box;
-    
+
+  border-top-width: 1px;
+  border-style: solid;
+
   @include tab-style($tabs-default-bg, $tabs-default-border-color, $gray-dark);
 
   &.tabs-default {
@@ -42,29 +45,6 @@
     @include tab-style($tabs-danger-bg, $tabs-danger-border-color, $white);
   }
 }
-.tab-item {
-  font-weight: 200;
-  font-family: $light-sans-font-family;
-
-  color: inherit;
-
-  //line-height: $tabs-height;
-
-  text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-
-  .active, &:active {
-    //box-shadow: inset 0 0 10px rgba(0, 0, 0, .12);
-  }
-
-  i {
-    font-size: 25px;
-  }
-}
-
-
-/* Navigational tab */
 .tab-item {
   display: block;
 
@@ -77,18 +57,64 @@
 
   text-align: center;
   text-decoration: none;
+
+  font-weight: 400;
+  font-family: $light-sans-font-family;
+  font-size: 10px;
+
+  color: inherit;
+
+  text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+
+  opacity: 0.7;
+
+  .active, &:active {
+    //box-shadow: inset 0 0 10px rgba(0, 0, 0, .12);
+  }
+
+  i {
+    font-size: 32px;
+  }
 }
 
+
+/* Navigational tab */
+
 /* Active state for tab */
 .tab-item.active, .tab-item:active {
   //box-shadow: inset 0 0 1px rgba(0, 0, 0, .12);
-  background-color: rgba(0,0,0,0.2);
+  //background-color: rgba(0,0,0,0.2);
+  opacity: 1;
+
+  &.tab-item-default {
+    color: $brand-default;
+  }
+  &.tab-item-secondary {
+    color: $brand-secondary;
+  }
+  &.tab-item-primary {
+    color: $brand-primary;
+  }
+  &.tab-item-success {
+    color: $brand-success;
+  }
+  &.tab-item-danger {
+    color: $brand-danger;
+  }
+  &.tab-item-warning {
+    color: $brand-warning;
+  }
+  &.tab-item-dark {
+    color: $brand-dark;
+  }
 }
 
 /* Icon for tab  */
 .tab-item i {
   display: block;
-  margin: 0 auto;
+  margin: 1px auto -3px auto;
 }
 
 /* Label for tab */
diff --git a/test/ios7.html b/test/ios7.html
new file mode 100644
index 0000000000..7594bb7946
--- /dev/null
+++ b/test/ios7.html
@@ -0,0 +1,20 @@
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>iOS 7</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link href="../dist/ionicIcons.css" rel="stylesheet">
+  </head>
+  <body>
+
+    <section>
+      <div class="bar bar-header bar-secondary">
+        <a href="#" class="button button-danger button-clear">Edit</a>
+        <h1 class="title">World Clock</h1>
+        <a href="#" class="button button-danger button-clear">Delete</a>
+      </div>
+    </section>
+  </body>
+</html>
diff --git a/test/tab-bars.html b/test/tab-bars.html
index 09b0611d4d..f2c9c45a6b 100644
--- a/test/tab-bars.html
+++ b/test/tab-bars.html
@@ -5,11 +5,17 @@
 
     <!-- Sets initial viewport load and disables zooming  -->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link href="../dist/ionicons.css" rel="stylesheet">
-    <link href="../dist/ionic.css" rel="stylesheet">
+    <link href="../dist/ionicIcons.css" rel="stylesheet">
     <style>
+      .content {
+        height: 100%;
+      }
+      .bar-header {
+        position: relative;
+      }
       .tabs {
         position: relative;
+        margin-top: 10px;
       }
     </style>
   </head>
@@ -26,124 +32,65 @@
       </main>
       
       <nav id="tab-bar" class="tabs tabs-default">
-        <a class="tab-item" href="#">
-          <i class="icon-home"></i>
+        <a class="tab-item tab-item-danger" href="#">
+          <i class="icon-star"></i>
           Friends
         </a>
-        <a class="tab-item">
+        <a class="tab-item tab-item-danger">
+          <i class="icon-star-filled"></i>
           Enemies
         </a>
-        <a class="tab-item">
+        <a class="tab-item tab-item-danger">
+          <i class="icon-clock"></i>
           Settings
         </a>
-        <a class="tab-item">
-          More
-        </a>
-      </nav>
-      <nav id="tab-bar" class="tabs tabs-secondary">
-        <a class="tab-item" href="#">
-          <i class="icon-home"></i>
-          Friends
-        </a>
-        <a class="tab-item">
-          Enemies
-        </a>
-        <a class="tab-item">
-          Settings
-        </a>
-        <a class="tab-item">
-          More
-        </a>
-      </nav>
-      <nav id="tab-bar" class="tabs tabs-primary">
-        <a class="tab-item" href="#">
-          <i class="icon-home"></i>
-          Friends
-        </a>
-        <a class="tab-item">
-          Enemies
-        </a>
-        <a class="tab-item">
-          Settings
-        </a>
-        <a class="tab-item">
-          More
-        </a>
-      </nav>
-      <nav id="tab-bar" class="tabs tabs-success">
-        <a class="tab-item" href="#">
-          <i class="icon-home"></i>
-          Friends
-        </a>
-        <a class="tab-item">
-          Enemies
-        </a>
-        <a class="tab-item">
-          Settings
-        </a>
-        <a class="tab-item">
-          More
-        </a>
-      </nav>
-      <nav id="tab-bar" class="tabs tabs-info">
-        <a class="tab-item" href="#">
-          <i class="icon-home"></i>
-          Friends
-        </a>
-        <a class="tab-item">
-          Enemies
-        </a>
-        <a class="tab-item">
-          Settings
-        </a>
-        <a class="tab-item">
-          More
-        </a>
-      </nav>
-      <nav id="tab-bar" class="tabs tabs-warning">
-        <a class="tab-item" href="#">
-          <i class="icon-home"></i>
-          Friends
-        </a>
-        <a class="tab-item">
-          Enemies
-        </a>
-        <a class="tab-item">
-          Settings
-        </a>
-        <a class="tab-item">
-          More
-        </a>
-      </nav>
-
-      <nav id="tab-bar" class="tabs tabs-danger">
-        <a class="tab-item" href="#">
-          <i class="icon-home"></i>
-          Friends
-        </a>
-        <a class="tab-item">
-          Enemies
-        </a>
-        <a class="tab-item">
-          Settings
-        </a>
-        <a class="tab-item">
+        <a class="tab-item tab-item-danger">
+          <i class="icon-keypad-filled"></i>
           More
         </a>
       </nav>
 
     </section>
 
-    <script src="../../js/events.js"></script>
-    <script src="../../js/gestures.js"></script>
-    <script src="../../js/views/tabBar.js"></script>
-    <script src="../../js/controllers/tabBarController.js"></script>
+    <script src="../dist/ionic.js"></script>
     <script>
-      // Grab the sections
-      var tab = document.getElementById('tab-bar');
-      var controller = new ionic.controllers.TabBarController({
-        tabBar: new ionic.ui.TabBar({ el: tab })
-      });
+      var sec = document.getElementsByTagName('section')[0];
+      var types = ['default', 'secondary', 'primary', 'info', 'success', 'warning', 'danger', 'dark'];
+      for(var i = 0; i < types.length; i++) {
+        var t = types[i];
+        sec.innerHTML += '<nav id="tab-bar" class="tabs tabs-' + t + '">' +
+          '<a class="tab-item" href="#">'+
+            '<i class="icon-star"></i>' +
+            'Friends' +
+          '</a>' +
+          '<a class="tab-item">' +
+            '<i class="icon-star-filled"></i>' +
+            'Enemies' +
+          '</a>' +
+          '<a class="tab-item">' +
+            '<i class="icon-clock"></i>' +
+            'Settings' +
+          '</a>' +
+          '<a class="tab-item">' +
+            '<i class="icon-keypad-filled"></i>' +
+            'More' +
+          '</a>' +
+        '</nav>';
+      }
+      var buttons = document.querySelectorAll('.tab-item');
+      var a;
+      for(var i = 0; i < buttons.length; i++) {
+        a = buttons[i];
+        a.addEventListener('touchstart', function() {
+          this.classList.add('active');
+        });
+        a.addEventListener('touchend', function() {
+          this.classList.remove('active');
+        });
+        a.addEventListener('touchcancel', function() {
+          this.classList.remove('active');
+        });
+      }
     </script>
   </body>
 </html>