From 6a88748f7f4708fadf872e824df54be313e4ea66 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@codiqa.com>
Date: Fri, 15 Nov 2013 19:47:47 -0600
Subject: [PATCH] Fixed #128 - tab item centering

---
 dist/css/ionic.css             | 21 ++++++++++++---------
 dist/css/themes/ionic-ios7.css |  5 ++---
 js/ext/angular/test/tabs.html  | 16 ++++++++++++++++
 scss/_mixins.scss              |  6 ++++++
 scss/_tabs.scss                |  5 ++++-
 scss/_variables.scss           |  2 ++
 6 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 67113112a4..e8a95a743e 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -1,5 +1,5 @@
 @charset "UTF-8";
-/*
+/*!
   Ionicons, v1.3.4
   Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
   https://twitter.com/helloimben  https://twitter.com/ionicframework
@@ -2045,7 +2045,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid silver; }
+  border: 1px solid #c0c0c0; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -2466,13 +2466,13 @@ address {
   font-style: normal;
   line-height: 1.42857; }
 
-a.subdued‎ {
+a.subduedΓÇÄ {
   padding-right: 10px;
   color: #f8f8f8;
   text-decoration: none; }
-  a.subdued‎:hover {
+  a.subduedΓÇÄ:hover {
     text-decoration: none; }
-  a.subdued‎:last-child {
+  a.subduedΓÇÄ:last-child {
     padding-right: 0; }
 
 /**
@@ -2937,6 +2937,9 @@ a.subdued‎ {
   -moz-flex-direction: horizontal;
   -ms-flex-direction: horizontal;
   flex-direction: horizontal;
+  -webkit-justify-content: center;
+  -moz-justify-content: center;
+  justify-content: center;
   background-color: #f8f8f8;
   background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%);
   border-color: #b2b2b2;
@@ -3017,7 +3020,7 @@ a.subdued‎ {
   display: inline-block;
   overflow: hidden;
   box-sizing: border-box;
-  margin: auto;
+  max-width: 150px;
   height: 100%;
   color: inherit;
   text-align: center;
@@ -4152,7 +4155,7 @@ input[type="checkbox"][readonly] {
     border-radius: 50%;
     background: white;
     content: ' ';
-    transition: background-color 0.1s ease-in-out; }
+    transition: background-color .1s ease-in-out; }
 
 /* the checkmark within the box */
 .checkbox input:after {
@@ -4167,7 +4170,7 @@ input[type="checkbox"][readonly] {
   border-right: 0;
   content: ' ';
   opacity: 0;
-  transition: opacity 0.05s ease-in-out;
+  transition: opacity .05s ease-in-out;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg); }
 
@@ -4652,7 +4655,7 @@ input[type="range"] {
   .button-icon:active, .button-icon.active {
     background: none;
     box-shadow: none;
-    text-shadow: 0px 0px 10px white; }
+    text-shadow: 0px 0px 10px #fff; }
 
 .padding > .button.block:first-child {
   margin-top: 0; }
diff --git a/dist/css/themes/ionic-ios7.css b/dist/css/themes/ionic-ios7.css
index 53b57eba7c..680f21850c 100644
--- a/dist/css/themes/ionic-ios7.css
+++ b/dist/css/themes/ionic-ios7.css
@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /** 
  * Nav controllers and header bar animations
  */
@@ -119,7 +118,7 @@
   right: 20px;
   transition: 0.2s ease;
   transition-property: left, right;
-  transition-delay: 0s, 0.05s; }
+  transition-delay: 0s, .05s; }
 
 .toggle :checked + .track {
   /* When the toggle is "on" */
@@ -134,4 +133,4 @@
     right: 0;
     left: 20px;
     -webkit-transform: none;
-    transition-delay: 0.05s, 0s; }
+    transition-delay: .05s, 0s; }
diff --git a/js/ext/angular/test/tabs.html b/js/ext/angular/test/tabs.html
index 8242c36f02..ccdea97f90 100644
--- a/js/ext/angular/test/tabs.html
+++ b/js/ext/angular/test/tabs.html
@@ -98,6 +98,22 @@
           <h1>Settings</h1>
         </content>
       </tab>
+      <tab title="Settings" icon-on="icon ion-ios7-gear" icon-off="icon ion-ios7-gear-outline">
+        <header class="bar bar-header bar-positive">
+          <h1 class="title">Settings</h1>
+        </header>
+        <content has-header="true" has-tabs="true">
+          <h1>Settings</h1>
+        </content>
+      </tab>
+      <tab title="Settings" icon-on="icon ion-ios7-gear" icon-off="icon ion-ios7-gear-outline">
+        <header class="bar bar-header bar-positive">
+          <h1 class="title">Settings</h1>
+        </header>
+        <content has-header="true" has-tabs="true">
+          <h1>Settings</h1>
+        </content>
+      </tab>
       
     </tabs>
 
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index d61848490c..b8101f6a23 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -472,3 +472,9 @@
   }
   align-content: $value;
 }
+
+@mixin justify-content($value: stretch) {
+  -webkit-justify-content: $value;
+  -moz-justify-content: $value;
+  justify-content: $value;
+}
diff --git a/scss/_tabs.scss b/scss/_tabs.scss
index 3b38c5b692..c2bb692d95 100644
--- a/scss/_tabs.scss
+++ b/scss/_tabs.scss
@@ -8,6 +8,7 @@
 .tabs {
   @include display-flex();
   @include flex-direction(horizontal);
+  @include justify-content(center);
 
   @include tab-style($tabs-default-bg, $tabs-default-border, $tabs-default-text);
   position: absolute;
@@ -72,7 +73,9 @@
   display: inline-block;
   overflow: hidden;
   box-sizing: border-box;
-  margin: auto;
+  //margin: auto;
+
+  max-width: $tab-item-max-width;
 
   height: 100%;
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 5f0aa1f047..1cc6f7748d 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -266,6 +266,8 @@ $tabs-default-bg:                  $tabs-stable-bg;
 $tabs-default-border:              $tabs-stable-border;
 $tabs-default-text:                $tabs-stable-text;
 
+$tab-item-max-width: 150px;
+
 
 // Items
 // -------------------------------