Merge branch 'master' of https://github.com/driftyco/ionic

dist/css/ionic-ios7.css

@@ -182,7 +182,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid #c0c0c0; }
+  border: 1px solid silver; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -1736,7 +1736,7 @@ input[type="file"] {
   line-height: 34px; }
 
 select {
-  border: 1px solid #ccc;
+  border: 1px solid #cccccc;
   background-color: white; }
 
 select[multiple],
@@ -1808,7 +1808,7 @@ input[type="checkbox"][readonly] {
   right: 20px;
   transition: 0.2s ease;
   transition-property: left, right;
-  transition-delay: 0s, .05s; }
+  transition-delay: 0s, 0.05s; }
 
 .toggle :checked + .track {
   /* When the toggle is "on" */
@@ -1823,7 +1823,7 @@ input[type="checkbox"][readonly] {
     right: 0;
     left: 20px;
     -webkit-transform: none;
-    transition-delay: .05s, 0s; }
+    transition-delay: 0.05s, 0s; }
 
 .item-radio {
   padding: 0; }
@@ -2108,7 +2108,7 @@ input[type="range"] {
     .button.button-icon:active, .button.button-icon.active {
       background: none;
       box-shadow: none;
-      text-shadow: 0px 0px 10px #fff; }
+      text-shadow: 0px 0px 10px white; }
   .button.block, .button.button-full {
     margin-top: 10px;
     margin-bottom: 10px; }
@@ -2319,64 +2319,6 @@ a.button {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0); }
 
-.slide-in-slide-out.ng-enter, .slide-in-slide-out > .ng-enter {
-  -webkit-transition: 0.5s ease-in-out all;
-  -webkit-transform: translate3d(100%, 0, 0);
-  box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
-.slide-in-slide-out.ng-enter-active, .slide-in-slide-out > .ng-enter-active {
-  -webkit-transform: translate3d(0, 0, 0); }
-.slide-in-slide-out.ng-leave, .slide-in-slide-out > .ng-leave {
-  -webkit-transition: 0.5s ease-in-out all;
-  -webkit-transform: translate3d(0%, 0, 0); }
-.slide-in-slide-out.ng-leave-active, .slide-in-slide-out > .ng-leave-active {
-  -webkit-transform: translate3d(-10%, 0, 0);
-  opacity: 0.8; }
-
-.slide-in-slide-out-reverse.ng-enter, .slide-in-slide-out-reverse > .ng-enter {
-  z-index: 1;
-  -webkit-transition: 0.5s ease-in-out all;
-  -webkit-transform: translate3d(-100%, 0, 0);
-  box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
-.slide-in-slide-out-reverse.ng-enter-active, .slide-in-slide-out-reverse > .ng-enter-active {
-  -webkit-transform: translate3d(0, 0, 0); }
-.slide-in-slide-out-reverse.ng-leave, .slide-in-slide-out-reverse > .ng-leave {
-  z-index: 0;
-  -webkit-transition: 0.5s ease-in-out all;
-  -webkit-transform: translate3d(0%, 0, 0); }
-.slide-in-slide-out-reverse.ng-leave-active, .slide-in-slide-out-reverse > .ng-leave-active {
-  -webkit-transform: translate3d(10%, 0, 0);
-  opacity: 0.8; }
-
-/**
- * An animation that fades out one content area and fades in another
- */
-.fade-in-out.ng-enter, .fade-in-out > .ng-enter {
-  opacity: 0;
-  -webkit-transition: opacity 0.3s ease-in-out; }
-.fade-in-out.ng-enter-active, .fade-in-out > .ng-enter-active {
-  opacity: 1; }
-.fade-in-out.ng-leave, .fade-in-out > .ng-leave {
-  opacity: 1;
-  -webkit-transition: opacity 0.3s ease-in-out; }
-.fade-in-out.ng-leave-active, .fade-in-out > .ng-leave-active {
-  opacity: 0; }
-
-.slide-left-fade-add {
-  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
-
-.slide-left-fade-add-active {
-  -webkit-transform: translate3d(-100%, 0, 0);
-  opacity: 0; }
-
-.slide-in-left-fade-add {
-  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
-  -webkit-transform: translate3d(100%, 0, 0);
-  opacity: 0; }
-
-.slide-in-left-fade-add-active {
-  -webkit-transform: translate3d(0px, 0, 0);
-  opacity: 1; }
-
 @-webkit-keyframes fadeOut {
   from {
     opacity: 1; }
@@ -2507,9 +2449,9 @@ i.icon-gray-lighter, .icon.icon-gray-lighter {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin .75s linear infinite;
+  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin .75s linear infinite;
+  -moz-animation: spin 0.75s linear infinite;
-  animation: spin .75s linear infinite; }
+  animation: spin 0.75s linear infinite; }
   .icon-loading:before {
     content: "\e144"; }
 
@@ -2522,9 +2464,9 @@ i.icon-gray-lighter, .icon.icon-gray-lighter {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin .75s linear infinite;
+  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin .75s linear infinite;
+  -moz-animation: spin 0.75s linear infinite;
-  animation: spin .75s linear infinite; }
+  animation: spin 0.75s linear infinite; }
   .icon-refreshing:before {
     content: "\e144"; }
 

dist/css/ionic-scoped.css

@@ -168,9 +168,6 @@
   /* the handle when the toggle is "on" */
   /* make sure list item content have enough padding on right to fit the toggle */
   /* position the toggle to the right within a list item */
-  /**
-   * An animation that fades out one content area and fades in another
-   */
   @-webkit-keyframes fadeOut {
     from {
       opacity: 1; }
@@ -213,7 +210,7 @@
       transform: rotate(360deg); } }
  }
   .ionic i, .ionic .icon {
-    font-family: 'ionicons' !important;
+    font-family: "ionicons" !important;
     speak: none !important;
     font-style: normal !important;
     font-weight: normal !important;
@@ -1195,7 +1192,7 @@
   .ionic fieldset {
     margin: 0 2px;
     padding: 0.35em 0.625em 0.75em;
-    border: 1px solid #c0c0c0; }
+    border: 1px solid silver; }
   .ionic legend {
     padding: 0;
     /* 2 */
@@ -2555,7 +2552,7 @@
   .ionic input[type="file"] {
     line-height: 34px; }
   .ionic select {
-    border: 1px solid #ccc;
+    border: 1px solid #cccccc;
     background-color: white; }
   .ionic select[multiple],
   .ionic select[size] {
@@ -2604,7 +2601,7 @@
       border-radius: 50%;
       background: white;
       content: ' ';
-      transition: background-color .1s ease-in-out; }
+      transition: background-color 0.1s ease-in-out; }
   .ionic .checkbox input:after {
     position: absolute;
     top: 34%;
@@ -2617,7 +2614,7 @@
     border-right: 0;
     content: ' ';
     opacity: 0;
-    transition: opacity .05s ease-in-out;
+    transition: opacity 0.05s ease-in-out;
     -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg); }
   .ionic .checkbox input:checked:before {
@@ -2969,7 +2966,7 @@
       .ionic .button.button-icon:active, .ionic .button.button-icon.active {
         background: none;
         box-shadow: none;
-        text-shadow: 0px 0px 10px #fff; }
+        text-shadow: 0px 0px 10px white; }
     .ionic .button.block, .ionic .button.button-full {
       margin-top: 10px;
       margin-bottom: 10px; }
@@ -3142,54 +3139,6 @@
     opacity: 1;
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0); }
-  .ionic .slide-in-slide-out.ng-enter, .ionic .slide-in-slide-out > .ng-enter {
-    -webkit-transition: 0.5s ease-in-out all;
-    -webkit-transform: translate3d(100%, 0, 0);
-    box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
-  .ionic .slide-in-slide-out.ng-enter-active, .ionic .slide-in-slide-out > .ng-enter-active {
-    -webkit-transform: translate3d(0, 0, 0); }
-  .ionic .slide-in-slide-out.ng-leave, .ionic .slide-in-slide-out > .ng-leave {
-    -webkit-transition: 0.5s ease-in-out all;
-    -webkit-transform: translate3d(0%, 0, 0); }
-  .ionic .slide-in-slide-out.ng-leave-active, .ionic .slide-in-slide-out > .ng-leave-active {
-    -webkit-transform: translate3d(-10%, 0, 0);
-    opacity: 0.8; }
-  .ionic .slide-in-slide-out-reverse.ng-enter, .ionic .slide-in-slide-out-reverse > .ng-enter {
-    z-index: 1;
-    -webkit-transition: 0.5s ease-in-out all;
-    -webkit-transform: translate3d(-100%, 0, 0);
-    box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
-  .ionic .slide-in-slide-out-reverse.ng-enter-active, .ionic .slide-in-slide-out-reverse > .ng-enter-active {
-    -webkit-transform: translate3d(0, 0, 0); }
-  .ionic .slide-in-slide-out-reverse.ng-leave, .ionic .slide-in-slide-out-reverse > .ng-leave {
-    z-index: 0;
-    -webkit-transition: 0.5s ease-in-out all;
-    -webkit-transform: translate3d(0%, 0, 0); }
-  .ionic .slide-in-slide-out-reverse.ng-leave-active, .ionic .slide-in-slide-out-reverse > .ng-leave-active {
-    -webkit-transform: translate3d(10%, 0, 0);
-    opacity: 0.8; }
-  .ionic .fade-in-out.ng-enter, .ionic .fade-in-out > .ng-enter {
-    opacity: 0;
-    -webkit-transition: opacity 0.3s ease-in-out; }
-  .ionic .fade-in-out.ng-enter-active, .ionic .fade-in-out > .ng-enter-active {
-    opacity: 1; }
-  .ionic .fade-in-out.ng-leave, .ionic .fade-in-out > .ng-leave {
-    opacity: 1;
-    -webkit-transition: opacity 0.3s ease-in-out; }
-  .ionic .fade-in-out.ng-leave-active, .ionic .fade-in-out > .ng-leave-active {
-    opacity: 0; }
-  .ionic .slide-left-fade-add {
-    -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
-  .ionic .slide-left-fade-add-active {
-    -webkit-transform: translate3d(-100%, 0, 0);
-    opacity: 0; }
-  .ionic .slide-in-left-fade-add {
-    -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
-    -webkit-transform: translate3d(100%, 0, 0);
-    opacity: 0; }
-  .ionic .slide-in-left-fade-add-active {
-    -webkit-transform: translate3d(0px, 0, 0);
-    opacity: 1; }
   .ionic .fade-in {
     -webkit-animation: fadeOut 0.3s;
     animation: fadeOut 0.3s; }
@@ -3264,9 +3213,9 @@
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    -webkit-animation: spin .75s linear infinite;
+    -webkit-animation: spin 0.75s linear infinite;
-    -moz-animation: spin .75s linear infinite;
+    -moz-animation: spin 0.75s linear infinite;
-    animation: spin .75s linear infinite; }
+    animation: spin 0.75s linear infinite; }
     .ionic .icon-loading:before {
       content: "\e144"; }
   .ionic .icon-refreshing {
@@ -3278,9 +3227,9 @@
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    -webkit-animation: spin .75s linear infinite;
+    -webkit-animation: spin 0.75s linear infinite;
-    -moz-animation: spin .75s linear infinite;
+    -moz-animation: spin 0.75s linear infinite;
-    animation: spin .75s linear infinite; }
+    animation: spin 0.75s linear infinite; }
     .ionic .icon-refreshing:before {
       content: "\e144"; }
   .ionic .hidden,

dist/css/ionic.css

@@ -7,7 +7,7 @@
   font-style: normal; }
 
 i, .icon {
-  font-family: 'ionicons' !important;
+  font-family: "ionicons" !important;
   speak: none !important;
   font-style: normal !important;
   font-weight: normal !important;
@@ -1521,7 +1521,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid #c0c0c0; }
+  border: 1px solid silver; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -3139,7 +3139,7 @@ input[type="file"] {
   line-height: 34px; }
 
 select {
-  border: 1px solid #ccc;
+  border: 1px solid #cccccc;
   background-color: white; }
 
 select[multiple],
@@ -3194,7 +3194,7 @@ input[type="checkbox"][readonly] {
     border-radius: 50%;
     background: white;
     content: ' ';
-    transition: background-color .1s ease-in-out; }
+    transition: background-color 0.1s ease-in-out; }
 
 /* the checkmark within the box */
 .checkbox input:after {
@@ -3209,7 +3209,7 @@ input[type="checkbox"][readonly] {
   border-right: 0;
   content: ' ';
   opacity: 0;
-  transition: opacity .05s ease-in-out;
+  transition: opacity 0.05s ease-in-out;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg); }
 
@@ -3589,7 +3589,7 @@ input[type="range"] {
     .button.button-icon:active, .button.button-icon.active {
       background: none;
       box-shadow: none;
-      text-shadow: 0px 0px 10px #fff; }
+      text-shadow: 0px 0px 10px white; }
   .button.block, .button.button-full {
     margin-top: 10px;
     margin-bottom: 10px; }
@@ -3905,64 +3905,6 @@ a.button {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0); }
 
-.slide-in-slide-out.ng-enter, .slide-in-slide-out > .ng-enter {
-  -webkit-transition: 0.5s ease-in-out all;
-  -webkit-transform: translate3d(100%, 0, 0);
-  box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
-.slide-in-slide-out.ng-enter-active, .slide-in-slide-out > .ng-enter-active {
-  -webkit-transform: translate3d(0, 0, 0); }
-.slide-in-slide-out.ng-leave, .slide-in-slide-out > .ng-leave {
-  -webkit-transition: 0.5s ease-in-out all;
-  -webkit-transform: translate3d(0%, 0, 0); }
-.slide-in-slide-out.ng-leave-active, .slide-in-slide-out > .ng-leave-active {
-  -webkit-transform: translate3d(-10%, 0, 0);
-  opacity: 0.8; }
-
-.slide-in-slide-out-reverse.ng-enter, .slide-in-slide-out-reverse > .ng-enter {
-  z-index: 1;
-  -webkit-transition: 0.5s ease-in-out all;
-  -webkit-transform: translate3d(-100%, 0, 0);
-  box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
-.slide-in-slide-out-reverse.ng-enter-active, .slide-in-slide-out-reverse > .ng-enter-active {
-  -webkit-transform: translate3d(0, 0, 0); }
-.slide-in-slide-out-reverse.ng-leave, .slide-in-slide-out-reverse > .ng-leave {
-  z-index: 0;
-  -webkit-transition: 0.5s ease-in-out all;
-  -webkit-transform: translate3d(0%, 0, 0); }
-.slide-in-slide-out-reverse.ng-leave-active, .slide-in-slide-out-reverse > .ng-leave-active {
-  -webkit-transform: translate3d(10%, 0, 0);
-  opacity: 0.8; }
-
-/**
- * An animation that fades out one content area and fades in another
- */
-.fade-in-out.ng-enter, .fade-in-out > .ng-enter {
-  opacity: 0;
-  -webkit-transition: opacity 0.3s ease-in-out; }
-.fade-in-out.ng-enter-active, .fade-in-out > .ng-enter-active {
-  opacity: 1; }
-.fade-in-out.ng-leave, .fade-in-out > .ng-leave {
-  opacity: 1;
-  -webkit-transition: opacity 0.3s ease-in-out; }
-.fade-in-out.ng-leave-active, .fade-in-out > .ng-leave-active {
-  opacity: 0; }
-
-.slide-left-fade-add {
-  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
-
-.slide-left-fade-add-active {
-  -webkit-transform: translate3d(-100%, 0, 0);
-  opacity: 0; }
-
-.slide-in-left-fade-add {
-  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
-  -webkit-transform: translate3d(100%, 0, 0);
-  opacity: 0; }
-
-.slide-in-left-fade-add-active {
-  -webkit-transform: translate3d(0px, 0, 0);
-  opacity: 1; }
-
 @-webkit-keyframes fadeOut {
   from {
     opacity: 1; }
@@ -4011,6 +3953,79 @@ a.button {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg); } }
 
+/** 
+ * Nav controllers and header bar animations
+ */
+.content-slide-in.ng-enter, .content-slide-in > .ng-enter {
+  -webkit-transition: 0.5s ease-in-out all;
+  -webkit-transform: translate3d(100%, 0, 0);
+  box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
+.content-slide-in.ng-enter-active, .content-slide-in > .ng-enter-active {
+  -webkit-transform: translate3d(0, 0, 0); }
+.content-slide-in.ng-leave, .content-slide-in > .ng-leave {
+  -webkit-transition: 0.5s ease-in-out all;
+  -webkit-transform: translate3d(0%, 0, 0); }
+.content-slide-in.ng-leave-active, .content-slide-in > .ng-leave-active {
+  -webkit-transform: translate3d(-10%, 0, 0);
+  opacity: 0.8; }
+
+.content-slide-out.ng-enter, .content-slide-out > .ng-enter {
+  z-index: 1;
+  -webkit-transition: 0.5s ease-in-out all;
+  -webkit-transform: translate3d(-100%, 0, 0);
+  box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
+.content-slide-out.ng-enter-active, .content-slide-out > .ng-enter-active {
+  -webkit-transform: translate3d(0, 0, 0); }
+.content-slide-out.ng-leave, .content-slide-out > .ng-leave {
+  z-index: 0;
+  -webkit-transition: 0.5s ease-in-out all;
+  -webkit-transform: translate3d(0%, 0, 0); }
+.content-slide-out.ng-leave-active, .content-slide-out > .ng-leave-active {
+  -webkit-transform: translate3d(10%, 0, 0);
+  opacity: 0.8; }
+
+.bar-title-in-add {
+  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+  -webkit-transform: translate3d(100%, 0, 0);
+  opacity: 0; }
+
+.bar-title-in-add-active {
+  -webkit-transform: translate3d(0px, 0, 0);
+  opacity: 1; }
+
+.bar-title-out-add {
+  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
+
+.bar-title-out-add-active {
+  -webkit-transform: translate3d(-100%, 0, 0);
+  opacity: 0; }
+
+.bar-button-in {
+  opacity: 0; }
+
+.bar-button-in-add {
+  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+  -webkit-transform: translate3d(50%, 0, 0);
+  opacity: 0; }
+
+.bar-button-in-active {
+  -webkit-transform: translate3d(0px, 0, 0);
+  opacity: 1; }
+
+/**
+ * Tab controller animations
+ */
+.fade-in-out.ng-enter, .fade-in-out > .ng-enter {
+  opacity: 0;
+  -webkit-transition: opacity 0.3s ease-in-out; }
+.fade-in-out.ng-enter-active, .fade-in-out > .ng-enter-active {
+  opacity: 1; }
+.fade-in-out.ng-leave, .fade-in-out > .ng-leave {
+  opacity: 1;
+  -webkit-transition: opacity 0.3s ease-in-out; }
+.fade-in-out.ng-leave-active, .fade-in-out > .ng-leave-active {
+  opacity: 0; }
+
 i.icon-default, .icon.icon-default {
   color: white; }
 
@@ -4093,9 +4108,9 @@ i.icon-gray-lighter, .icon.icon-gray-lighter {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin .75s linear infinite;
+  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin .75s linear infinite;
+  -moz-animation: spin 0.75s linear infinite;
-  animation: spin .75s linear infinite; }
+  animation: spin 0.75s linear infinite; }
   .icon-loading:before {
     content: "\e144"; }
 
@@ -4108,9 +4123,9 @@ i.icon-gray-lighter, .icon.icon-gray-lighter {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin .75s linear infinite;
+  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin .75s linear infinite;
+  -moz-animation: spin 0.75s linear infinite;
-  animation: spin .75s linear infinite; }
+  animation: spin 0.75s linear infinite; }
   .icon-refreshing:before {
     content: "\e144"; }
 

dist/js/ionic-angular.js

@@ -585,6 +585,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
    */
   this.pushFromTemplate = function(templateUrl) {
     var childScope = $scope.$new();
+    childScope.isVisible = true;
 
     // Load the given template
     TemplateLoader.load(templateUrl).then(function(templateString) {
@@ -641,15 +642,70 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
 })
 
 .directive('navContent', ['Gesture', '$animate', '$compile', function(Gesture, $animate, $compile) {
+
+  // We need to animate the new controller into view.
+  var animatePushedController = function(childScope, clone, $element) {
+    var parent = angular.element($element.parent().parent().parent());
+    
+    var title = angular.element(parent[0].querySelector('.title'));
+
+    // Clone the old title and insert it so we can animate it back into place for the new controller
+    var newTitle = angular.element(title.clone());
+
+    $compile(newTitle)(childScope);
+    title.after(newTitle);
+
+    // Grab the button so we can slide it in
+    var button = angular.element(parent[0].querySelector('.button'));
+
+    clone.addClass(childScope.slideInAnimation);
+
+    // Slide the button in
+    $animate.addClass(button, childScope.slideButtonInAnimation, function() {
+      $animate.removeClass(button, childScope.slideButtonInAnimation, function() {});
+    })
+
+    // Slide the new title in
+    $animate.addClass(newTitle, childScope.slideTitleInAnimation, function() {
+      $animate.removeClass(newTitle, childScope.slideTitleInAnimation, function() {
+        newTitle.scope().$destroy();
+        newTitle.remove();
+      });
+    });
+
+    // Grab the old title and slide it out
+    var title = $element.parent().parent().parent()[0].querySelector('.title');
+    $animate.enter(clone, $element.parent(), $element);
+    $animate.addClass(angular.element(title), childScope.slideTitleOutAnimation, function() {
+      $animate.removeClass(angular.element(title), childScope.slideTitleOutAnimation, function() {
+      });
+    });
+  };
+
   return {
-    restrict: 'CA',
+    restrict: 'ECA',
     require: '^navs',
     transclude: 'element',
     compile: function(element, attr, transclude) {
       return function($scope, $element, $attr, navCtrl) {
         var lastParent, lastIndex, childScope, childElement;
 
-        $scope.isVisible = true;
+
+        $scope.title = $attr.title;
+        $scope.slideInAnimation = $attr.slideAnimation || 'content-slide-in';
+        $scope.slideTitleInAnimation = $attr.slideTitleInAnimation || 'bar-title-in';
+        $scope.slideTitleOutAnimation = $attr.slideTitleOutAnimation || 'bar-title-out';
+        $scope.slideButtonInAnimation = $attr.slideButtonInAnimation || 'bar-button-in';
+        $scope.slideButtonOutAnimation = $attr.slideButtonOutAnimation || 'bar-button-out';
+
+        if($attr.navBar === "false") {
+          navCtrl.hideNavBar();
+        } else {
+          navCtrl.showNavBar();
+        }
+
+        // Push this controller onto the stack
+        $scope.pushController($scope, $element);
 
         $scope.$watch('isVisible', function(value) {
           // Taken from ngIf
@@ -662,58 +718,14 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
             childScope = undefined;
           }
 
+          // Check if this is visible, and if so, create it and show it
           if(value) {
             childScope = $scope.$new();
+
             transclude(childScope, function(clone) {
               childElement = clone;
 
-              childScope.title = $attr.title;
+              animatePushedController(childScope, clone, $element);
-              childScope.slideAnimation = $attr.slideAnimation || '';
-              childScope.slideTitleAnimation = $attr.slideTitleAnimation || '';
-
-              if($attr.navBar === "false") {
-                navCtrl.hideNavBar();
-              } else {
-                navCtrl.showNavBar();
-              }
-
-              childScope.pushController(childScope, $element);
-
-              var title = angular.element($element.parent().parent().parent()[0].querySelector('.title'));
-              var newTitle = angular.element(title.clone());
-
-              $compile(newTitle)(childScope);
-
-              title.after(newTitle);
-
-              console.log(newTitle);
-        
-              clone.addClass(childScope.slideAnimation);
-
-              $animate.addClass(newTitle, childScope.slideTitleAnimation, function() {
-                $animate.removeClass(newTitle, childScope.slideTitleAnimation, function() {
-                  newTitle.scope().$destroy();
-                  newTitle.remove();
-                });
-              });
-
-              /*
-              Gesture.on('drag', function(e) {
-                //navCtrl.handleDrag(e);
-                console.log('Content drag', e);
-              }, childElement[0]);
-
-              Gesture.on('release', function(e) {
-                //navCtrl._endDrag(e);
-              }, childElement[0]);
-              */
-
-              var title = $element.parent().parent().parent()[0].querySelector('.title');
-              $animate.enter(clone, $element.parent(), $element);
-              $animate.addClass(angular.element(title), childScope.slideTitleAnimation, function() {
-                $animate.removeClass(angular.element(title), childScope.slideTitleAnimation, function() {
-                });
-              });
             });
           } 
         });
@@ -1010,6 +1022,11 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
       return function($scope, $element, $attr, tabsCtrl) {
         var childScope, childElement;
 
+        $scope.title = $attr.title;
+        $scope.icon = $attr.icon;
+        $scope.iconOn = $attr.iconOn;
+        $scope.iconOff = $attr.iconOff;
+        tabsCtrl.add($scope);
         
         $scope.$watch('isVisible', function(value) {
           if(childElement) {
@@ -1029,13 +1046,6 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
             });
           }
         });
-
-        $scope.title = $attr.title;
-        $scope.icon = $attr.icon;
-        $scope.iconOn = $attr.iconOn;
-        $scope.iconOff = $attr.iconOff;
-        tabsCtrl.add($scope);
-
       }
     }
   };
@@ -1049,7 +1059,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
     transclude: true,
     replace: true,
     scope: true,
-    template: '<div class="tabs tabs-primary">' + 
+    template: '<div class="tabs tabs-icon-top tabs-primary">' + 
       '<tab-controller-item title="{{controller.title}}" icon="{{controller.icon}}" icon-on="{{controller.iconOn}}" icon-off="{{controller.iconOff}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-controller-item>' + 
     '</div>'
   };

example/toderp2/index.html

@@ -9,11 +9,11 @@
     <link rel="stylesheet" href="../../dist/css/ionic.css">
     <link rel="stylesheet" href="css/app.css">
     
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-mocks.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-mocks.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-touch.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-route.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-route.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-animate.js"></script>
 
     <script src='https://cdn.firebase.com/v0/firebase.js'></script>
     <script src="https://cdn.firebase.com/v0/firebase-simple-login.js"></script>
@@ -32,9 +32,10 @@
   <body>
 
     <!-- The root view controller -->
-    <nav-ctrl ng-controller="TodoCtrl">
+    <navs ng-controller="TodoCtrl">
       <nav-bar></nav-bar>
-    </nav-ctrl>
+      <content has-header="true"></content>
+    </navs>
 
     <!-- Splash -->
     <script id="splash.html" type="text/ng-template">

js/ext/angular/src/directive/ionicNav.js

@@ -40,6 +40,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
    */
   this.pushFromTemplate = function(templateUrl) {
     var childScope = $scope.$new();
+    childScope.isVisible = true;
 
     // Load the given template
     TemplateLoader.load(templateUrl).then(function(templateString) {
@@ -96,15 +97,70 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
 })
 
 .directive('navContent', ['Gesture', '$animate', '$compile', function(Gesture, $animate, $compile) {
+
+  // We need to animate the new controller into view.
+  var animatePushedController = function(childScope, clone, $element) {
+    var parent = angular.element($element.parent().parent().parent());
+    
+    var title = angular.element(parent[0].querySelector('.title'));
+
+    // Clone the old title and insert it so we can animate it back into place for the new controller
+    var newTitle = angular.element(title.clone());
+
+    $compile(newTitle)(childScope);
+    title.after(newTitle);
+
+    // Grab the button so we can slide it in
+    var button = angular.element(parent[0].querySelector('.button'));
+
+    clone.addClass(childScope.slideInAnimation);
+
+    // Slide the button in
+    $animate.addClass(button, childScope.slideButtonInAnimation, function() {
+      $animate.removeClass(button, childScope.slideButtonInAnimation, function() {});
+    })
+
+    // Slide the new title in
+    $animate.addClass(newTitle, childScope.slideTitleInAnimation, function() {
+      $animate.removeClass(newTitle, childScope.slideTitleInAnimation, function() {
+        newTitle.scope().$destroy();
+        newTitle.remove();
+      });
+    });
+
+    // Grab the old title and slide it out
+    var title = $element.parent().parent().parent()[0].querySelector('.title');
+    $animate.enter(clone, $element.parent(), $element);
+    $animate.addClass(angular.element(title), childScope.slideTitleOutAnimation, function() {
+      $animate.removeClass(angular.element(title), childScope.slideTitleOutAnimation, function() {
+      });
+    });
+  };
+
   return {
-    restrict: 'CA',
+    restrict: 'ECA',
     require: '^navs',
     transclude: 'element',
     compile: function(element, attr, transclude) {
       return function($scope, $element, $attr, navCtrl) {
         var lastParent, lastIndex, childScope, childElement;
 
-        $scope.isVisible = true;
+
+        $scope.title = $attr.title;
+        $scope.slideInAnimation = $attr.slideAnimation || 'content-slide-in';
+        $scope.slideTitleInAnimation = $attr.slideTitleInAnimation || 'bar-title-in';
+        $scope.slideTitleOutAnimation = $attr.slideTitleOutAnimation || 'bar-title-out';
+        $scope.slideButtonInAnimation = $attr.slideButtonInAnimation || 'bar-button-in';
+        $scope.slideButtonOutAnimation = $attr.slideButtonOutAnimation || 'bar-button-out';
+
+        if($attr.navBar === "false") {
+          navCtrl.hideNavBar();
+        } else {
+          navCtrl.showNavBar();
+        }
+
+        // Push this controller onto the stack
+        $scope.pushController($scope, $element);
 
         $scope.$watch('isVisible', function(value) {
           // Taken from ngIf
@@ -117,58 +173,14 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
             childScope = undefined;
           }
 
+          // Check if this is visible, and if so, create it and show it
           if(value) {
             childScope = $scope.$new();
+
             transclude(childScope, function(clone) {
               childElement = clone;
 
-              childScope.title = $attr.title;
+              animatePushedController(childScope, clone, $element);
-              childScope.slideAnimation = $attr.slideAnimation || '';
-              childScope.slideTitleAnimation = $attr.slideTitleAnimation || '';
-
-              if($attr.navBar === "false") {
-                navCtrl.hideNavBar();
-              } else {
-                navCtrl.showNavBar();
-              }
-
-              childScope.pushController(childScope, $element);
-
-              var title = angular.element($element.parent().parent().parent()[0].querySelector('.title'));
-              var newTitle = angular.element(title.clone());
-
-              $compile(newTitle)(childScope);
-
-              title.after(newTitle);
-
-              console.log(newTitle);
-        
-              clone.addClass(childScope.slideAnimation);
-
-              $animate.addClass(newTitle, childScope.slideTitleAnimation, function() {
-                $animate.removeClass(newTitle, childScope.slideTitleAnimation, function() {
-                  newTitle.scope().$destroy();
-                  newTitle.remove();
-                });
-              });
-
-              /*
-              Gesture.on('drag', function(e) {
-                //navCtrl.handleDrag(e);
-                console.log('Content drag', e);
-              }, childElement[0]);
-
-              Gesture.on('release', function(e) {
-                //navCtrl._endDrag(e);
-              }, childElement[0]);
-              */
-
-              var title = $element.parent().parent().parent()[0].querySelector('.title');
-              $animate.enter(clone, $element.parent(), $element);
-              $animate.addClass(angular.element(title), childScope.slideTitleAnimation, function() {
-                $animate.removeClass(angular.element(title), childScope.slideTitleAnimation, function() {
-                });
-              });
             });
           } 
         });

js/ext/angular/src/directive/ionicTabBar.js

@@ -80,6 +80,11 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
       return function($scope, $element, $attr, tabsCtrl) {
         var childScope, childElement;
 
+        $scope.title = $attr.title;
+        $scope.icon = $attr.icon;
+        $scope.iconOn = $attr.iconOn;
+        $scope.iconOff = $attr.iconOff;
+        tabsCtrl.add($scope);
         
         $scope.$watch('isVisible', function(value) {
           if(childElement) {
@@ -99,13 +104,6 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
             });
           }
         });
-
-        $scope.title = $attr.title;
-        $scope.icon = $attr.icon;
-        $scope.iconOn = $attr.iconOn;
-        $scope.iconOff = $attr.iconOff;
-        tabsCtrl.add($scope);
-
       }
     }
   };
@@ -119,7 +117,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
     transclude: true,
     replace: true,
     scope: true,
-    template: '<div class="tabs tabs-primary">' + 
+    template: '<div class="tabs tabs-icon-top tabs-primary">' + 
       '<tab-controller-item title="{{controller.title}}" icon="{{controller.icon}}" icon-on="{{controller.iconOn}}" icon-off="{{controller.iconOff}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-controller-item>' + 
     '</div>'
   };

js/ext/angular/test/nav.html

@@ -39,7 +39,7 @@
     </navs>
 
     <script id="page.html" type="text/ng-template">
-      <div title="Home" ng-controller="CatsCtrl" class="nav-content" slide-animation="slide-in-slide-out" slide-title-animation="slide-left-fade">
+      <div title="Home" ng-controller="CatsCtrl" class="nav-content">
         <h1></h1>
         <a href="#" class="button button-success" ng-click="goNext()">Next</a>
         <list><list-item ng-repeat="item in items" on-select="goNext()">Test</list-item></list>

js/ext/angular/test/tabs.html

@@ -74,7 +74,7 @@
         </content>
       </tab>
 
-      <tab title="About" icon="icon-ios7-clock" icon-off="icon-ios7-clock-outline">
+      <tab title="About" icon-on="icon-ios7-clock" icon-off="icon-ios7-clock-outline">
         <header class="bar bar-header bar-secondary">
           <h1 class="title">Deadlines</h1>
         </header>

scss/ionic/_animations.scss

@@ -22,99 +22,6 @@ $bezier-function: cubic-bezier(.1, .7, .1, 1);
     transform: translate3d(0, 0, 0);
 }
 
-// A transition like the iOS nav controller where the old controller
-// slides out and the new one slides in. In this transition, the 
-// old controller slides out more slowly than the new one slides in.
-.slide-in-slide-out {
-  &.ng-enter, > .ng-enter {
-    -webkit-transition: 0.5s ease-in-out all;
-    -webkit-transform:translate3d(100%,0,0) ;
-    box-shadow: -1px 0px 10px rgba(0,0,0,0.6);
-  }
-  &.ng-enter-active, > .ng-enter-active {
-    -webkit-transform:translate3d(0,0,0) ;
-  }
-  &.ng-leave, > .ng-leave {
-    -webkit-transition: 0.5s ease-in-out all;
-    -webkit-transform:translate3d(0%,0,0);
-  }
-  &.ng-leave-active, > .ng-leave-active {
-    -webkit-transform:translate3d(-10%,0,0);
-    opacity: 0.8;
-  }
-}
-
-.slide-in-slide-out-reverse {
-  &.ng-enter, > .ng-enter {
-    z-index: 1;
-    -webkit-transition: 0.5s ease-in-out all;
-    -webkit-transform:translate3d(-100%,0,0) ;
-    box-shadow: -1px 0px 10px rgba(0,0,0,0.6);
-  }
-  &.ng-enter-active, > .ng-enter-active {
-    -webkit-transform:translate3d(0,0,0) ;
-  }
-  &.ng-leave, > .ng-leave {
-    z-index: 0;
-    -webkit-transition: 0.5s ease-in-out all;
-    -webkit-transform:translate3d(0%,0,0);
-  }
-  &.ng-leave-active, > .ng-leave-active {
-    -webkit-transform:translate3d(10%,0,0);
-    opacity: 0.8;
-  }
-}
-
-/**
- * An animation that fades out one content area and fades in another
- */
-.fade-in-out {
-  &.ng-enter, > .ng-enter {
-    opacity: 0;
-    -webkit-transition: opacity 0.3s ease-in-out;
-  }
-  &.ng-enter-active, > .ng-enter-active {
-    opacity: 1;
-  }
-
-  &.ng-leave, > .ng-leave {
-    opacity: 1;
-    -webkit-transition: opacity 0.3s ease-in-out;
-  }
-
-  &.ng-leave-active, > .ng-leave-active {
-    opacity: 0;
-  }
-}
-
-.slide-left-fade-add {
-  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
-}
-.slide-left-fade-add-active {
-  //margin-left: -80px;
-  -webkit-transform: translate3d(-100%, 0, 0);
-  opacity: 0;
-}
-.slide-left-fade-remove {
-}
-.slide-left-fade-remove-active {
-}
-
-.slide-in-left-fade-add {
-  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
-  -webkit-transform: translate3d(100%, 0, 0);
-  opacity: 0;
-}
-.slide-in-left-fade-add-active {
-  //margin-left: -80px;
-  -webkit-transform: translate3d(0px, 0, 0);
-  opacity: 1;
-}
-.slide-in-left-fade-remove {
-}
-.slide-in-left-fade-remove-active {
-}
-
 @-webkit-keyframes fadeOut {
   from { opacity: 1; }
   to { opacity: 0; }

scss/ionic/animations/_bar_ios7.scss

@@ -0,0 +1,111 @@
+/** 
+ * Nav controllers and header bar animations
+ */
+// A transition like the iOS nav controller where the old controller
+// slides out and the new one slides in. In this transition, the 
+// old controller slides out more slowly than the new one slides in.
+.content-slide-in {
+  &.ng-enter, > .ng-enter {
+    -webkit-transition: 0.5s ease-in-out all;
+    -webkit-transform:translate3d(100%,0,0) ;
+    box-shadow: -1px 0px 10px rgba(0,0,0,0.6);
+  }
+  &.ng-enter-active, > .ng-enter-active {
+    -webkit-transform:translate3d(0,0,0) ;
+  }
+  &.ng-leave, > .ng-leave {
+    -webkit-transition: 0.5s ease-in-out all;
+    -webkit-transform:translate3d(0%,0,0);
+  }
+  &.ng-leave-active, > .ng-leave-active {
+    -webkit-transform:translate3d(-10%,0,0);
+    opacity: 0.8;
+  }
+}
+
+.content-slide-out {
+  &.ng-enter, > .ng-enter {
+    z-index: 1;
+    -webkit-transition: 0.5s ease-in-out all;
+    -webkit-transform:translate3d(-100%,0,0) ;
+    box-shadow: -1px 0px 10px rgba(0,0,0,0.6);
+  }
+  &.ng-enter-active, > .ng-enter-active {
+    -webkit-transform:translate3d(0,0,0) ;
+  }
+  &.ng-leave, > .ng-leave {
+    z-index: 0;
+    -webkit-transition: 0.5s ease-in-out all;
+    -webkit-transform:translate3d(0%,0,0);
+  }
+  &.ng-leave-active, > .ng-leave-active {
+    -webkit-transform:translate3d(10%,0,0);
+    opacity: 0.8;
+  }
+}
+
+.bar-title-in-add {
+  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+  -webkit-transform: translate3d(100%, 0, 0);
+  opacity: 0;
+}
+.bar-title-in-add-active {
+  //margin-left: -80px;
+  -webkit-transform: translate3d(0px, 0, 0);
+  opacity: 1;
+}
+.bar-title-in-remove {
+}
+.bar-title-in-remove-active {
+}
+
+.bar-title-out-add {
+  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+}
+.bar-title-out-add-active {
+  //margin-left: -80px;
+  -webkit-transform: translate3d(-100%, 0, 0);
+  opacity: 0;
+}
+.bar-title-out-remove {
+}
+.bar-title-out-remove-active {
+}
+
+.bar-button-in {
+  opacity: 0;
+}
+
+.bar-button-in-add {
+  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+  -webkit-transform: translate3d(50%, 0, 0);
+  opacity: 0;
+}
+.bar-button-in-active {
+  //margin-left: -80px;
+  -webkit-transform: translate3d(0px, 0, 0);
+  opacity: 1;
+}
+
+
+/**
+ * Tab controller animations
+ */
+.fade-in-out {
+  &.ng-enter, > .ng-enter {
+    opacity: 0;
+    -webkit-transition: opacity 0.3s ease-in-out;
+  }
+  &.ng-enter-active, > .ng-enter-active {
+    opacity: 1;
+  }
+
+  &.ng-leave, > .ng-leave {
+    opacity: 1;
+    -webkit-transition: opacity 0.3s ease-in-out;
+  }
+
+  &.ng-leave-active, > .ng-leave-active {
+    opacity: 0;
+  }
+}

scss/ionic/ionic.scss

@@ -52,6 +52,8 @@
   // Animations
   "animations",
 
+  "animations/bar_ios7",
+
   // Util
   "icons",
   "util",

starters/weather/index.html

@@ -47,7 +47,7 @@
     var bgImage = document.getElementById('bg-image');
     var header = document.getElementById('header');
 
-    var scroll = new ionic.views.ScrollView({
+    var scroll = new ionic.views.Scroll({
       el: s,
       decelerationRate: 0.87,
       inertialEventInterval: 100