From 4649b05ffd3e9fb9f5e13a04fc4c50b491d70924 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Tue, 29 Oct 2013 12:57:55 -0500
Subject: [PATCH] footer 1px border-top

---
 dist/css/ionic-ios7.css   |  194 ++----
 dist/css/ionic-scoped.css |  194 ++----
 dist/css/ionic.css        |  194 ++----
 dist/js/ionic.js          | 1342 ++++++++++++++++++-------------------
 scss/ionic/_bar.scss      |    2 +
 scss/ionic/_mixins.scss   |   20 +-
 6 files changed, 884 insertions(+), 1062 deletions(-)

diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css
index e046fb324d..fb231dbdab 100644
--- a/dist/css/ionic-ios7.css
+++ b/dist/css/ionic-ios7.css
@@ -182,7 +182,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.
@@ -576,64 +576,56 @@ a.subdued‎ {
       color: #fff; }
   .bar.bar-default {
     background-color: rgba(255, 255, 255, 0.9);
-    border-top-color: transparent;
-    border-bottom-color: #dddddd;
+    border-color: #dddddd;
     background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
     color: #333333; }
     .bar.bar-default .title {
       color: #333333; }
   .bar.bar-secondary {
     background-color: rgba(245, 245, 245, 0.9);
-    border-top-color: transparent;
-    border-bottom-color: #bbbbbb;
+    border-color: #bbbbbb;
     background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
     color: #333333; }
     .bar.bar-secondary .title {
       color: #333333; }
   .bar.bar-primary {
     background-color: rgba(74, 135, 238, 0.9);
-    border-top-color: transparent;
-    border-bottom-color: #3b6dc2;
+    border-color: #3b6dc2;
     background-image: linear-gradient(0deg, #3b6dc2, #3b6dc2 50%, transparent 50%);
     color: white; }
     .bar.bar-primary .title {
       color: white; }
   .bar.bar-info {
     background-color: rgba(67, 206, 230, 0.9);
-    border-top-color: transparent;
-    border-bottom-color: #3bb3c8;
+    border-color: #3bb3c8;
     background-image: linear-gradient(0deg, #3bb3c8, #3bb3c8 50%, transparent 50%);
     color: white; }
     .bar.bar-info .title {
       color: white; }
   .bar.bar-success {
     background-color: rgba(102, 204, 51, 0.9);
-    border-top-color: transparent;
-    border-bottom-color: #5bb22f;
+    border-color: #5bb22f;
     background-image: linear-gradient(0deg, #5bb22f, #5bb22f 50%, transparent 50%);
     color: white; }
     .bar.bar-success .title {
       color: white; }
   .bar.bar-warning {
     background-color: rgba(240, 184, 64, 0.9);
-    border-top-color: transparent;
-    border-bottom-color: #d29f31;
+    border-color: #d29f31;
     background-image: linear-gradient(0deg, #d29f31, #d29f31 50%, transparent 50%);
     color: white; }
     .bar.bar-warning .title {
       color: white; }
   .bar.bar-danger {
     background-color: rgba(239, 78, 58, 0.9);
-    border-top-color: transparent;
-    border-bottom-color: #c73927;
+    border-color: #c73927;
     background-image: linear-gradient(0deg, #c73927, #c73927 50%, transparent 50%);
     color: white; }
     .bar.bar-danger .title {
       color: white; }
   .bar.bar-dark {
     background-color: rgba(68, 68, 68, 0.9);
-    border-top-color: transparent;
-    border-bottom-color: #111111;
+    border-color: #111111;
     background-image: linear-gradient(0deg, #111111, #111111 50%, transparent 50%);
     color: white; }
     .bar.bar-dark .title {
@@ -817,7 +809,9 @@ a.subdued‎ {
     font-size: 17px; }
 
 .bar-header {
-  top: 0; }
+  top: 0;
+  border-top-width: 0;
+  border-bottom-width: 1px; }
 
 .bar-footer {
   bottom: 0;
@@ -1025,110 +1019,62 @@ a.subdued‎ {
     z-index: 2; }
     .item.active .item-heading, .item.active:hover .item-heading, .item.active:focus .item-heading {
       color: inherit; }
-  .item.item-default {
-    /*
-    color: $color;
-    background-color: $bgColor;
-    border-color: $borderColor;
-    */ }
-    .item.item-default.active, .item.item-default:active {
-      color: #333333;
+  .item.item-default.active, .item.item-default:active {
+    color: #333333;
+    background-color: white;
+    border-color: #333333; }
+    .item.item-default.active .list-item-content, .item.item-default:active .list-item-content {
       background-color: white;
-      border-color: #333333; }
-      .item.item-default.active .list-item-content, .item.item-default:active .list-item-content {
-        background-color: white;
-        color: #333333; }
-  .item.item-secondary {
-    /*
-    color: $color;
-    background-color: $bgColor;
-    border-color: $borderColor;
-    */ }
-    .item.item-secondary.active, .item.item-secondary:active {
-      color: #333333;
+      color: #333333; }
+  .item.item-secondary.active, .item.item-secondary:active {
+    color: #333333;
+    background-color: white;
+    border-color: #333333; }
+    .item.item-secondary.active .list-item-content, .item.item-secondary:active .list-item-content {
       background-color: white;
-      border-color: #333333; }
-      .item.item-secondary.active .list-item-content, .item.item-secondary:active .list-item-content {
-        background-color: white;
-        color: #333333; }
-  .item.item-primary {
-    /*
-    color: $color;
-    background-color: $bgColor;
-    border-color: $borderColor;
-    */ }
-    .item.item-primary.active, .item.item-primary:active {
-      color: white;
+      color: #333333; }
+  .item.item-primary.active, .item.item-primary:active {
+    color: white;
+    background-color: #4a87ee;
+    border-color: #333333; }
+    .item.item-primary.active .list-item-content, .item.item-primary:active .list-item-content {
       background-color: #4a87ee;
-      border-color: #333333; }
-      .item.item-primary.active .list-item-content, .item.item-primary:active .list-item-content {
-        background-color: #4a87ee;
-        color: white; }
-  .item.item-info {
-    /*
-    color: $color;
-    background-color: $bgColor;
-    border-color: $borderColor;
-    */ }
-    .item.item-info.active, .item.item-info:active {
-      color: white;
+      color: white; }
+  .item.item-info.active, .item.item-info:active {
+    color: white;
+    background-color: #43cee6;
+    border-color: #333333; }
+    .item.item-info.active .list-item-content, .item.item-info:active .list-item-content {
       background-color: #43cee6;
-      border-color: #333333; }
-      .item.item-info.active .list-item-content, .item.item-info:active .list-item-content {
-        background-color: #43cee6;
-        color: white; }
-  .item.item-success {
-    /*
-    color: $color;
-    background-color: $bgColor;
-    border-color: $borderColor;
-    */ }
-    .item.item-success.active, .item.item-success:active {
-      color: white;
+      color: white; }
+  .item.item-success.active, .item.item-success:active {
+    color: white;
+    background-color: #66cc33;
+    border-color: #333333; }
+    .item.item-success.active .list-item-content, .item.item-success:active .list-item-content {
       background-color: #66cc33;
-      border-color: #333333; }
-      .item.item-success.active .list-item-content, .item.item-success:active .list-item-content {
-        background-color: #66cc33;
-        color: white; }
-  .item.item-warning {
-    /*
-    color: $color;
-    background-color: $bgColor;
-    border-color: $borderColor;
-    */ }
-    .item.item-warning.active, .item.item-warning:active {
-      color: white;
+      color: white; }
+  .item.item-warning.active, .item.item-warning:active {
+    color: white;
+    background-color: #f0b840;
+    border-color: #333333; }
+    .item.item-warning.active .list-item-content, .item.item-warning:active .list-item-content {
       background-color: #f0b840;
-      border-color: #333333; }
-      .item.item-warning.active .list-item-content, .item.item-warning:active .list-item-content {
-        background-color: #f0b840;
-        color: white; }
-  .item.item-danger {
-    /*
-    color: $color;
-    background-color: $bgColor;
-    border-color: $borderColor;
-    */ }
-    .item.item-danger.active, .item.item-danger:active {
-      color: white;
+      color: white; }
+  .item.item-danger.active, .item.item-danger:active {
+    color: white;
+    background-color: #ef4e3a;
+    border-color: #333333; }
+    .item.item-danger.active .list-item-content, .item.item-danger:active .list-item-content {
       background-color: #ef4e3a;
-      border-color: #333333; }
-      .item.item-danger.active .list-item-content, .item.item-danger:active .list-item-content {
-        background-color: #ef4e3a;
-        color: white; }
-  .item.item-dark {
-    /*
-    color: $color;
-    background-color: $bgColor;
-    border-color: $borderColor;
-    */ }
-    .item.item-dark.active, .item.item-dark:active {
-      color: white;
+      color: white; }
+  .item.item-dark.active, .item.item-dark:active {
+    color: white;
+    background-color: #444444;
+    border-color: #333333; }
+    .item.item-dark.active .list-item-content, .item.item-dark:active .list-item-content {
       background-color: #444444;
-      border-color: #333333; }
-      .item.item-dark.active .list-item-content, .item.item-dark:active .list-item-content {
-        background-color: #444444;
-        color: white; }
+      color: white; }
 
 .item,
 .item h1,
@@ -1683,7 +1629,7 @@ input[type="file"] {
   line-height: 34px; }
 
 select {
-  border: 1px solid #cccccc;
+  border: 1px solid #ccc;
   background-color: white; }
 
 select[multiple],
@@ -1755,7 +1701,7 @@ input[type="checkbox"][readonly] {
   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" */
@@ -1770,7 +1716,7 @@ input[type="checkbox"][readonly] {
     right: 0;
     left: 20px;
     -webkit-transform: none;
-    transition-delay: 0.05s, 0s; }
+    transition-delay: .05s, 0s; }
 
 .item-radio {
   padding: 0; }
@@ -2055,7 +2001,7 @@ input[type="range"] {
     .button.button-icon:active, .button.button-icon.active {
       background: none;
       box-shadow: none;
-      text-shadow: 0px 0px 10px white; }
+      text-shadow: 0px 0px 10px #fff; }
   .button.block, .button.button-full {
     margin-top: 10px;
     margin-bottom: 10px; }
@@ -2413,9 +2359,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin 0.75s linear infinite;
-  animation: spin 0.75s linear infinite; }
+  -webkit-animation: spin .75s linear infinite;
+  -moz-animation: spin .75s linear infinite;
+  animation: spin .75s linear infinite; }
   .icon-loading:before {
     content: "\e144"; }
 
@@ -2428,9 +2374,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin 0.75s linear infinite;
-  animation: spin 0.75s linear infinite; }
+  -webkit-animation: spin .75s linear infinite;
+  -moz-animation: spin .75s linear infinite;
+  animation: spin .75s linear infinite; }
   .icon-refreshing:before {
     content: "\e144"; }
 
diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index 9a446e6d10..db7d6f26c6 100644
--- a/dist/css/ionic-scoped.css
+++ b/dist/css/ionic-scoped.css
@@ -1028,7 +1028,7 @@
   .ionic fieldset {
     margin: 0 2px;
     padding: 0.35em 0.625em 0.75em;
-    border: 1px solid silver; }
+    border: 1px solid #c0c0c0; }
   .ionic legend {
     padding: 0;
     /* 2 */
@@ -1342,64 +1342,56 @@
         color: #fff; }
     .ionic .bar.bar-default {
       background-color: rgba(255, 255, 255, 0.9);
-      border-top-color: transparent;
-      border-bottom-color: #dddddd;
+      border-color: #dddddd;
       background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
       color: #333333; }
       .ionic .bar.bar-default .title {
         color: #333333; }
     .ionic .bar.bar-secondary {
       background-color: rgba(245, 245, 245, 0.9);
-      border-top-color: transparent;
-      border-bottom-color: #bbbbbb;
+      border-color: #bbbbbb;
       background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
       color: #333333; }
       .ionic .bar.bar-secondary .title {
         color: #333333; }
     .ionic .bar.bar-primary {
       background-color: rgba(74, 135, 238, 0.9);
-      border-top-color: transparent;
-      border-bottom-color: #3b6dc2;
+      border-color: #3b6dc2;
       background-image: linear-gradient(0deg, #3b6dc2, #3b6dc2 50%, transparent 50%);
       color: white; }
       .ionic .bar.bar-primary .title {
         color: white; }
     .ionic .bar.bar-info {
       background-color: rgba(67, 206, 230, 0.9);
-      border-top-color: transparent;
-      border-bottom-color: #3bb3c8;
+      border-color: #3bb3c8;
       background-image: linear-gradient(0deg, #3bb3c8, #3bb3c8 50%, transparent 50%);
       color: white; }
       .ionic .bar.bar-info .title {
         color: white; }
     .ionic .bar.bar-success {
       background-color: rgba(102, 204, 51, 0.9);
-      border-top-color: transparent;
-      border-bottom-color: #5bb22f;
+      border-color: #5bb22f;
       background-image: linear-gradient(0deg, #5bb22f, #5bb22f 50%, transparent 50%);
       color: white; }
       .ionic .bar.bar-success .title {
         color: white; }
     .ionic .bar.bar-warning {
       background-color: rgba(240, 184, 64, 0.9);
-      border-top-color: transparent;
-      border-bottom-color: #d29f31;
+      border-color: #d29f31;
       background-image: linear-gradient(0deg, #d29f31, #d29f31 50%, transparent 50%);
       color: white; }
       .ionic .bar.bar-warning .title {
         color: white; }
     .ionic .bar.bar-danger {
       background-color: rgba(239, 78, 58, 0.9);
-      border-top-color: transparent;
-      border-bottom-color: #c73927;
+      border-color: #c73927;
       background-image: linear-gradient(0deg, #c73927, #c73927 50%, transparent 50%);
       color: white; }
       .ionic .bar.bar-danger .title {
         color: white; }
     .ionic .bar.bar-dark {
       background-color: rgba(68, 68, 68, 0.9);
-      border-top-color: transparent;
-      border-bottom-color: #111111;
+      border-color: #111111;
       background-image: linear-gradient(0deg, #111111, #111111 50%, transparent 50%);
       color: white; }
       .ionic .bar.bar-dark .title {
@@ -1574,7 +1566,9 @@
       box-shadow: none;
       font-size: 17px; }
   .ionic .bar-header {
-    top: 0; }
+    top: 0;
+    border-top-width: 0;
+    border-bottom-width: 1px; }
   .ionic .bar-footer {
     bottom: 0;
     border-top-width: 1px;
@@ -1754,110 +1748,62 @@
       z-index: 2; }
       .ionic .item.active .item-heading, .ionic .item.active:hover .item-heading, .ionic .item.active:focus .item-heading {
         color: inherit; }
-    .ionic .item.item-default {
-      /*
-      color: $color;
-      background-color: $bgColor;
-      border-color: $borderColor;
-      */ }
-      .ionic .item.item-default.active, .ionic .item.item-default:active {
-        color: #333333;
+    .ionic .item.item-default.active, .ionic .item.item-default:active {
+      color: #333333;
+      background-color: white;
+      border-color: #333333; }
+      .ionic .item.item-default.active .list-item-content, .ionic .item.item-default:active .list-item-content {
         background-color: white;
-        border-color: #333333; }
-        .ionic .item.item-default.active .list-item-content, .ionic .item.item-default:active .list-item-content {
-          background-color: white;
-          color: #333333; }
-    .ionic .item.item-secondary {
-      /*
-      color: $color;
-      background-color: $bgColor;
-      border-color: $borderColor;
-      */ }
-      .ionic .item.item-secondary.active, .ionic .item.item-secondary:active {
-        color: #333333;
+        color: #333333; }
+    .ionic .item.item-secondary.active, .ionic .item.item-secondary:active {
+      color: #333333;
+      background-color: white;
+      border-color: #333333; }
+      .ionic .item.item-secondary.active .list-item-content, .ionic .item.item-secondary:active .list-item-content {
         background-color: white;
-        border-color: #333333; }
-        .ionic .item.item-secondary.active .list-item-content, .ionic .item.item-secondary:active .list-item-content {
-          background-color: white;
-          color: #333333; }
-    .ionic .item.item-primary {
-      /*
-      color: $color;
-      background-color: $bgColor;
-      border-color: $borderColor;
-      */ }
-      .ionic .item.item-primary.active, .ionic .item.item-primary:active {
-        color: white;
+        color: #333333; }
+    .ionic .item.item-primary.active, .ionic .item.item-primary:active {
+      color: white;
+      background-color: #4a87ee;
+      border-color: #333333; }
+      .ionic .item.item-primary.active .list-item-content, .ionic .item.item-primary:active .list-item-content {
         background-color: #4a87ee;
-        border-color: #333333; }
-        .ionic .item.item-primary.active .list-item-content, .ionic .item.item-primary:active .list-item-content {
-          background-color: #4a87ee;
-          color: white; }
-    .ionic .item.item-info {
-      /*
-      color: $color;
-      background-color: $bgColor;
-      border-color: $borderColor;
-      */ }
-      .ionic .item.item-info.active, .ionic .item.item-info:active {
-        color: white;
+        color: white; }
+    .ionic .item.item-info.active, .ionic .item.item-info:active {
+      color: white;
+      background-color: #43cee6;
+      border-color: #333333; }
+      .ionic .item.item-info.active .list-item-content, .ionic .item.item-info:active .list-item-content {
         background-color: #43cee6;
-        border-color: #333333; }
-        .ionic .item.item-info.active .list-item-content, .ionic .item.item-info:active .list-item-content {
-          background-color: #43cee6;
-          color: white; }
-    .ionic .item.item-success {
-      /*
-      color: $color;
-      background-color: $bgColor;
-      border-color: $borderColor;
-      */ }
-      .ionic .item.item-success.active, .ionic .item.item-success:active {
-        color: white;
+        color: white; }
+    .ionic .item.item-success.active, .ionic .item.item-success:active {
+      color: white;
+      background-color: #66cc33;
+      border-color: #333333; }
+      .ionic .item.item-success.active .list-item-content, .ionic .item.item-success:active .list-item-content {
         background-color: #66cc33;
-        border-color: #333333; }
-        .ionic .item.item-success.active .list-item-content, .ionic .item.item-success:active .list-item-content {
-          background-color: #66cc33;
-          color: white; }
-    .ionic .item.item-warning {
-      /*
-      color: $color;
-      background-color: $bgColor;
-      border-color: $borderColor;
-      */ }
-      .ionic .item.item-warning.active, .ionic .item.item-warning:active {
-        color: white;
+        color: white; }
+    .ionic .item.item-warning.active, .ionic .item.item-warning:active {
+      color: white;
+      background-color: #f0b840;
+      border-color: #333333; }
+      .ionic .item.item-warning.active .list-item-content, .ionic .item.item-warning:active .list-item-content {
         background-color: #f0b840;
-        border-color: #333333; }
-        .ionic .item.item-warning.active .list-item-content, .ionic .item.item-warning:active .list-item-content {
-          background-color: #f0b840;
-          color: white; }
-    .ionic .item.item-danger {
-      /*
-      color: $color;
-      background-color: $bgColor;
-      border-color: $borderColor;
-      */ }
-      .ionic .item.item-danger.active, .ionic .item.item-danger:active {
-        color: white;
+        color: white; }
+    .ionic .item.item-danger.active, .ionic .item.item-danger:active {
+      color: white;
+      background-color: #ef4e3a;
+      border-color: #333333; }
+      .ionic .item.item-danger.active .list-item-content, .ionic .item.item-danger:active .list-item-content {
         background-color: #ef4e3a;
-        border-color: #333333; }
-        .ionic .item.item-danger.active .list-item-content, .ionic .item.item-danger:active .list-item-content {
-          background-color: #ef4e3a;
-          color: white; }
-    .ionic .item.item-dark {
-      /*
-      color: $color;
-      background-color: $bgColor;
-      border-color: $borderColor;
-      */ }
-      .ionic .item.item-dark.active, .ionic .item.item-dark:active {
-        color: white;
+        color: white; }
+    .ionic .item.item-dark.active, .ionic .item.item-dark:active {
+      color: white;
+      background-color: #444444;
+      border-color: #333333; }
+      .ionic .item.item-dark.active .list-item-content, .ionic .item.item-dark:active .list-item-content {
         background-color: #444444;
-        border-color: #333333; }
-        .ionic .item.item-dark.active .list-item-content, .ionic .item.item-dark:active .list-item-content {
-          background-color: #444444;
-          color: white; }
+        color: white; }
   .ionic .item,
   .ionic .item h1,
   .ionic .item h2,
@@ -2340,7 +2286,7 @@
   .ionic input[type="file"] {
     line-height: 34px; }
   .ionic select {
-    border: 1px solid #cccccc;
+    border: 1px solid #ccc;
     background-color: white; }
   .ionic select[multiple],
   .ionic select[size] {
@@ -2389,7 +2335,7 @@
       border-radius: 50%;
       background: white;
       content: ' ';
-      transition: background-color 0.1s ease-in-out; }
+      transition: background-color .1s ease-in-out; }
   .ionic .checkbox input:after {
     position: absolute;
     top: 34%;
@@ -2402,7 +2348,7 @@
     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); }
   .ionic .checkbox input:checked:before {
@@ -2754,7 +2700,7 @@
       .ionic .button.button-icon:active, .ionic .button.button-icon.active {
         background: none;
         box-shadow: none;
-        text-shadow: 0px 0px 10px white; }
+        text-shadow: 0px 0px 10px #fff; }
     .ionic .button.block, .ionic .button.button-full {
       margin-top: 10px;
       margin-bottom: 10px; }
@@ -3020,9 +2966,9 @@
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    -webkit-animation: spin 0.75s linear infinite;
-    -moz-animation: spin 0.75s linear infinite;
-    animation: spin 0.75s linear infinite; }
+    -webkit-animation: spin .75s linear infinite;
+    -moz-animation: spin .75s linear infinite;
+    animation: spin .75s linear infinite; }
     .ionic .icon-loading:before {
       content: "\e144"; }
   .ionic .icon-refreshing {
@@ -3034,9 +2980,9 @@
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    -webkit-animation: spin 0.75s linear infinite;
-    -moz-animation: spin 0.75s linear infinite;
-    animation: spin 0.75s linear infinite; }
+    -webkit-animation: spin .75s linear infinite;
+    -moz-animation: spin .75s linear infinite;
+    animation: spin .75s linear infinite; }
     .ionic .icon-refreshing:before {
       content: "\e144"; }
   .ionic .hidden,
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 66f579e4e3..b1ef089506 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -1261,7 +1261,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.
@@ -1685,64 +1685,56 @@ a.subdued‎ {
       color: #fff; }
   .bar.bar-default {
     background-color: rgba(255, 255, 255, 0.9);
-    border-top-color: transparent;
-    border-bottom-color: #dddddd;
+    border-color: #dddddd;
     background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
     color: #333333; }
     .bar.bar-default .title {
       color: #333333; }
   .bar.bar-secondary {
     background-color: rgba(245, 245, 245, 0.9);
-    border-top-color: transparent;
-    border-bottom-color: #bbbbbb;
+    border-color: #bbbbbb;
     background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
     color: #333333; }
     .bar.bar-secondary .title {
       color: #333333; }
   .bar.bar-primary {
     background-color: rgba(74, 135, 238, 0.9);
-    border-top-color: transparent;
-    border-bottom-color: #3b6dc2;
+    border-color: #3b6dc2;
     background-image: linear-gradient(0deg, #3b6dc2, #3b6dc2 50%, transparent 50%);
     color: white; }
     .bar.bar-primary .title {
       color: white; }
   .bar.bar-info {
     background-color: rgba(67, 206, 230, 0.9);
-    border-top-color: transparent;
-    border-bottom-color: #3bb3c8;
+    border-color: #3bb3c8;
     background-image: linear-gradient(0deg, #3bb3c8, #3bb3c8 50%, transparent 50%);
     color: white; }
     .bar.bar-info .title {
       color: white; }
   .bar.bar-success {
     background-color: rgba(102, 204, 51, 0.9);
-    border-top-color: transparent;
-    border-bottom-color: #5bb22f;
+    border-color: #5bb22f;
     background-image: linear-gradient(0deg, #5bb22f, #5bb22f 50%, transparent 50%);
     color: white; }
     .bar.bar-success .title {
       color: white; }
   .bar.bar-warning {
     background-color: rgba(240, 184, 64, 0.9);
-    border-top-color: transparent;
-    border-bottom-color: #d29f31;
+    border-color: #d29f31;
     background-image: linear-gradient(0deg, #d29f31, #d29f31 50%, transparent 50%);
     color: white; }
     .bar.bar-warning .title {
       color: white; }
   .bar.bar-danger {
     background-color: rgba(239, 78, 58, 0.9);
-    border-top-color: transparent;
-    border-bottom-color: #c73927;
+    border-color: #c73927;
     background-image: linear-gradient(0deg, #c73927, #c73927 50%, transparent 50%);
     color: white; }
     .bar.bar-danger .title {
       color: white; }
   .bar.bar-dark {
     background-color: rgba(68, 68, 68, 0.9);
-    border-top-color: transparent;
-    border-bottom-color: #111111;
+    border-color: #111111;
     background-image: linear-gradient(0deg, #111111, #111111 50%, transparent 50%);
     color: white; }
     .bar.bar-dark .title {
@@ -1926,7 +1918,9 @@ a.subdued‎ {
     font-size: 17px; }
 
 .bar-header {
-  top: 0; }
+  top: 0;
+  border-top-width: 0;
+  border-bottom-width: 1px; }
 
 .bar-footer {
   bottom: 0;
@@ -2168,110 +2162,62 @@ a.subdued‎ {
     z-index: 2; }
     .item.active .item-heading, .item.active:hover .item-heading, .item.active:focus .item-heading {
       color: inherit; }
-  .item.item-default {
-    /*
-    color: $color;
-    background-color: $bgColor;
-    border-color: $borderColor;
-    */ }
-    .item.item-default.active, .item.item-default:active {
-      color: #333333;
+  .item.item-default.active, .item.item-default:active {
+    color: #333333;
+    background-color: white;
+    border-color: #333333; }
+    .item.item-default.active .list-item-content, .item.item-default:active .list-item-content {
       background-color: white;
-      border-color: #333333; }
-      .item.item-default.active .list-item-content, .item.item-default:active .list-item-content {
-        background-color: white;
-        color: #333333; }
-  .item.item-secondary {
-    /*
-    color: $color;
-    background-color: $bgColor;
-    border-color: $borderColor;
-    */ }
-    .item.item-secondary.active, .item.item-secondary:active {
-      color: #333333;
+      color: #333333; }
+  .item.item-secondary.active, .item.item-secondary:active {
+    color: #333333;
+    background-color: white;
+    border-color: #333333; }
+    .item.item-secondary.active .list-item-content, .item.item-secondary:active .list-item-content {
       background-color: white;
-      border-color: #333333; }
-      .item.item-secondary.active .list-item-content, .item.item-secondary:active .list-item-content {
-        background-color: white;
-        color: #333333; }
-  .item.item-primary {
-    /*
-    color: $color;
-    background-color: $bgColor;
-    border-color: $borderColor;
-    */ }
-    .item.item-primary.active, .item.item-primary:active {
-      color: white;
+      color: #333333; }
+  .item.item-primary.active, .item.item-primary:active {
+    color: white;
+    background-color: #4a87ee;
+    border-color: #333333; }
+    .item.item-primary.active .list-item-content, .item.item-primary:active .list-item-content {
       background-color: #4a87ee;
-      border-color: #333333; }
-      .item.item-primary.active .list-item-content, .item.item-primary:active .list-item-content {
-        background-color: #4a87ee;
-        color: white; }
-  .item.item-info {
-    /*
-    color: $color;
-    background-color: $bgColor;
-    border-color: $borderColor;
-    */ }
-    .item.item-info.active, .item.item-info:active {
-      color: white;
+      color: white; }
+  .item.item-info.active, .item.item-info:active {
+    color: white;
+    background-color: #43cee6;
+    border-color: #333333; }
+    .item.item-info.active .list-item-content, .item.item-info:active .list-item-content {
       background-color: #43cee6;
-      border-color: #333333; }
-      .item.item-info.active .list-item-content, .item.item-info:active .list-item-content {
-        background-color: #43cee6;
-        color: white; }
-  .item.item-success {
-    /*
-    color: $color;
-    background-color: $bgColor;
-    border-color: $borderColor;
-    */ }
-    .item.item-success.active, .item.item-success:active {
-      color: white;
+      color: white; }
+  .item.item-success.active, .item.item-success:active {
+    color: white;
+    background-color: #66cc33;
+    border-color: #333333; }
+    .item.item-success.active .list-item-content, .item.item-success:active .list-item-content {
       background-color: #66cc33;
-      border-color: #333333; }
-      .item.item-success.active .list-item-content, .item.item-success:active .list-item-content {
-        background-color: #66cc33;
-        color: white; }
-  .item.item-warning {
-    /*
-    color: $color;
-    background-color: $bgColor;
-    border-color: $borderColor;
-    */ }
-    .item.item-warning.active, .item.item-warning:active {
-      color: white;
+      color: white; }
+  .item.item-warning.active, .item.item-warning:active {
+    color: white;
+    background-color: #f0b840;
+    border-color: #333333; }
+    .item.item-warning.active .list-item-content, .item.item-warning:active .list-item-content {
       background-color: #f0b840;
-      border-color: #333333; }
-      .item.item-warning.active .list-item-content, .item.item-warning:active .list-item-content {
-        background-color: #f0b840;
-        color: white; }
-  .item.item-danger {
-    /*
-    color: $color;
-    background-color: $bgColor;
-    border-color: $borderColor;
-    */ }
-    .item.item-danger.active, .item.item-danger:active {
-      color: white;
+      color: white; }
+  .item.item-danger.active, .item.item-danger:active {
+    color: white;
+    background-color: #ef4e3a;
+    border-color: #333333; }
+    .item.item-danger.active .list-item-content, .item.item-danger:active .list-item-content {
       background-color: #ef4e3a;
-      border-color: #333333; }
-      .item.item-danger.active .list-item-content, .item.item-danger:active .list-item-content {
-        background-color: #ef4e3a;
-        color: white; }
-  .item.item-dark {
-    /*
-    color: $color;
-    background-color: $bgColor;
-    border-color: $borderColor;
-    */ }
-    .item.item-dark.active, .item.item-dark:active {
-      color: white;
+      color: white; }
+  .item.item-dark.active, .item.item-dark:active {
+    color: white;
+    background-color: #444444;
+    border-color: #333333; }
+    .item.item-dark.active .list-item-content, .item.item-dark:active .list-item-content {
       background-color: #444444;
-      border-color: #333333; }
-      .item.item-dark.active .list-item-content, .item.item-dark:active .list-item-content {
-        background-color: #444444;
-        color: white; }
+      color: white; }
 
 .item,
 .item h1,
@@ -2826,7 +2772,7 @@ input[type="file"] {
   line-height: 34px; }
 
 select {
-  border: 1px solid #cccccc;
+  border: 1px solid #ccc;
   background-color: white; }
 
 select[multiple],
@@ -2881,7 +2827,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 {
@@ -2896,7 +2842,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); }
 
@@ -3276,7 +3222,7 @@ input[type="range"] {
     .button.button-icon:active, .button.button-icon.active {
       background: none;
       box-shadow: none;
-      text-shadow: 0px 0px 10px white; }
+      text-shadow: 0px 0px 10px #fff; }
   .button.block, .button.button-full {
     margin-top: 10px;
     margin-bottom: 10px; }
@@ -3739,9 +3685,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin 0.75s linear infinite;
-  animation: spin 0.75s linear infinite; }
+  -webkit-animation: spin .75s linear infinite;
+  -moz-animation: spin .75s linear infinite;
+  animation: spin .75s linear infinite; }
   .icon-loading:before {
     content: "\e144"; }
 
@@ -3754,9 +3700,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin 0.75s linear infinite;
-  animation: spin 0.75s linear infinite; }
+  -webkit-animation: spin .75s linear infinite;
+  -moz-animation: spin .75s linear infinite;
+  animation: spin .75s linear infinite; }
   .icon-refreshing:before {
     content: "\e144"; }
 
diff --git a/dist/js/ionic.js b/dist/js/ionic.js
index 5ad120cd1a..e9f81f40da 100644
--- a/dist/js/ionic.js
+++ b/dist/js/ionic.js
@@ -1865,677 +1865,6 @@ window.ionic = {
 })(window.ionic);
 ;
 (function(ionic) {
-'use strict';
-  ionic.views.View = function() {
-    this.initialize.apply(this, arguments);
-  };
-
-  ionic.views.View.inherit = ionic.inherit;
-
-  ionic.extend(ionic.views.View.prototype, {
-    initialize: function() {}
-  });
-
-})(window.ionic);
-;
-/**
- * ionic.views.Scroll. Portions lovingly adapted from the great iScroll 5, which is
- * also MIT licensed.
- * iScroll v5.0.5 ~ (c) 2008-2013 Matteo Spinelli ~ http://cubiq.org/license
- *
- * Think of ionic.views.Scroll like a Javascript version of UIScrollView or any 
- * scroll container in any UI library. You could just use -webkit-overflow-scrolling: touch,
- * but you lose control over scroll behavior that native developers have with things
- * like UIScrollView, and you don't get events after the finger stops touching the
- * device (after a flick, for example).
- *
- * Some people are afraid of using Javascript powered scrolling, but
- * with today's devices, Javascript is probably the best solution for
- * scrolling in hybrid apps. Someone's code is running somewhere, even on native, right?
- */
-(function(ionic) {
-'use strict';
-
-  // Some easing functions for animations
-  var EASING_FUNCTIONS = {
-    quadratic: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
-		circular: 'cubic-bezier(0.1, 0.57, 0.1, 1)',
-    circular2: 'cubic-bezier(0.075, 0.82, 0.165, 1)',
-
-    bounce: 'cubic-bezier(.02,.69,.67,1)',
-
-    // It closes like a high-end toilet seat. Fast, then nice and slow.
-    // Thanks to our @xtheglobe for that.
-    toiletSeat: 'cubic-bezier(0.05, 0.60, 0.05, 0.60)'
-  };
-
-  ionic.views.Scroll = ionic.views.View.inherit({
-
-    initialize: function(opts) {
-      var _this = this;
-
-      // Extend the options with our defaults
-      opts = ionic.Utils.extend({
-        decelerationRate: ionic.views.Scroll.prototype.DECEL_RATE_NORMAL,
-        dragThreshold: 10,
-        
-        // Resistance when scrolling too far up or down
-        rubberBandResistance: 3,
-
-        // Scroll event names. These are custom so can be configured
-        scrollEventName: 'momentumScrolled',
-        scrollEndEventName: 'momentumScrollEnd',
-
-        // How frequently to fire scroll events in the case of 
-        // a flick or momentum scroll where the finger is no longer
-        // touching the screen. If your event handler is a performance
-        // hog, change this millisecond value to cut down on the frequency
-        // of events triggered in those instances.
-        inertialEventInterval: 50,
-
-        // How quickly to scroll with a mouse wheel. 20 is a good default
-        mouseWheelSpeed: 20,
-
-        // Invert the mouse wheel? This makes sense on new Macbooks, but
-        // nowhere else.
-        invertWheel: false,
-
-        // Enable vertical scrolling
-        isVerticalEnabled: true,
-
-        // Enable horizontal scrolling
-        isHorizontalEnabled: false,
-
-        // The easing function to use for bouncing up or down on the bounds
-        // of the scrolling area
-        bounceEasing: EASING_FUNCTIONS.bounce,
-
-        //how long to take when bouncing back in a rubber band
-        bounceTime: 600 
-      }, opts);
-
-      ionic.extend(this, opts);
-
-      this.el = opts.el;
-
-      this.y = 0;
-      this.x = 0;
-
-      // Listen for drag and release events
-      ionic.onGesture('drag', function(e) {
-        _this._handleDrag(e);
-      }, this.el);
-      ionic.onGesture('release', function(e) {
-        _this._handleEndDrag(e);
-      }, this.el);
-      ionic.on('mousewheel', function(e) {
-        _this._wheel(e);
-      }, this.el);
-      ionic.on('DOMMouseScroll', function(e) {
-        _this._wheel(e);
-      }, this.el);
-      ionic.on(this.scrollEndEventName, function(e) {
-        _this._onScrollEnd(e);
-      }, this.el);
-      ionic.on('webkitTransitionEnd', function(e) {
-        _this._onTransitionEnd(e);
-      });
-    },
-
-    /**
-     * Scroll to the given X and Y point, taking 
-     * the given amount of time, with the given
-     * easing function defined as a CSS3 timing function.
-     *
-     * Note: the x and y values will be converted to negative offsets due to
-     * the way scrolling works internally.
-     *
-     * @param {float} the x position to scroll to (CURRENTLY NOT SUPPORTED!)
-     * @param {float} the y position to scroll to
-     * @param {float} the time to take scrolling to the new position
-     * @param {easing} the animation function to use for easing
-     */
-    scrollTo: function(x, y, time, easing) {
-      this._scrollTo(-x, -y, time, easing);
-    },
-
-    _scrollTo: function(x, y, time, easing) {
-      var _this = this;
-
-      var start = Date.now();
-
-      easing = easing || 'cubic-bezier(0.1, 0.57, 0.1, 1)';
-      var easingValues = easing.replace('cubic-bezier(', '').replace(')', '').split(',');
-      easingValues = [parseFloat(easingValues[0]), parseFloat(easingValues[1]), parseFloat(easingValues[2]), parseFloat(easingValues[3])];
-
-      var cubicBezierFunction = ionic.Animator.getCubicBezier(easingValues[0], easingValues[1], easingValues[2], easingValues[3], time);
-
-      var ox = this.x, oy = this.y;
-
-
-      var el = this.el;
-
-      if(x !== null) {
-        this.x = x;
-      } else {
-        x = this.x;
-      }
-      if(y !== null) {
-        this.y = y;
-      } else {
-        y = this.y;
-      }
-
-      if(ox == x && oy == y) {
-        time = 0;
-      }
-
-      var dx = ox - x;
-      var dy = oy - y;
-
-      el.offsetHeight;
-      el.style.webkitTransitionTimingFunction = easing;
-      el.style.webkitTransitionDuration = time;
-      el.style.webkitTransform = 'translate3d(' + x + 'px,' + y + 'px, 0)';
-
-      // Stop any other momentum event callbacks
-      clearTimeout(this._momentumStepTimeout);
-
-      // Start triggering events as the element scrolls from inertia.
-      // This is important because we need to receive scroll events
-      // even after a "flick" and adjust, etc.
-      if(time > 0) {
-        this._momentumStepTimeout = setTimeout(function eventNotify() {
-          // Calculate where in the animation process we might be
-          var diff = Math.min(time, Math.abs(Date.now() - start));
-
-          // How far along in time have we moved
-          var timeRatio = diff / time;
-
-          // Interpolate the transition values, using the same
-          // cubic bezier animation function used in the transition.
-          var bx = ox - dx * cubicBezierFunction(timeRatio);
-          var by = oy - dy * cubicBezierFunction(timeRatio);
-
-          _this.didScroll && _this.didScroll({
-            target: _this.el,
-            scrollLeft: -bx,
-            scrollTop: -by
-          });
-          ionic.trigger(_this.scrollEventName, {
-            target: _this.el,
-            scrollLeft: -bx,
-            scrollTop: -by
-          });
-
-          if(_this._isDragging) {
-            _this._momentumStepTimeout = setTimeout(eventNotify, _this.inertialEventInterval);
-          }
-        }, this.inertialEventInterval);
-      } else {
-        this.didScroll && this.didScroll({
-          target: this.el,
-          scrollLeft: -this.x,
-          scrollTop: -this.y
-        });
-        ionic.trigger(this.scrollEventName, {
-          target: this.el,
-          scrollLeft: -this.x,
-          scrollTop: -this.y
-        });
-      }
-    },
-
-    needsWrapping: function() {
-      var _this = this;
-
-      var totalWidth = this.el.scrollWidth;
-      var totalHeight = this.el.scrollHeight;
-      var parentWidth = this.el.parentNode.offsetWidth;
-      var parentHeight = this.el.parentNode.offsetHeight;
-
-      var maxX = Math.min(0, (-totalWidth + parentWidth));
-      var maxY = Math.min(0, (-totalHeight + parentHeight));
-
-      if (this.isHorizontalEnabled && (this.x > 0 || this.x < maxX)) {
-        return true;
-      }
-      
-      if (this.isVerticalEnabled && (this.y > 0 || this.y < maxY)) {
-        return true;
-      }
-
-      return false;
-    },
-
-    /**
-     * If the scroll position is outside the current bounds,
-     * animate it back.
-     */
-    wrapScrollPosition: function(transitionTime) {
-      var _this = this;
-
-      var totalWidth = _this.el.scrollWidth;
-      var totalHeight = _this.el.scrollHeight;
-      var parentWidth = _this.el.parentNode.offsetWidth;
-      var parentHeight = _this.el.parentNode.offsetHeight;
-
-      var maxX = Math.min(0, (-totalWidth + parentWidth));
-      var maxY = Math.min(0, (-totalHeight + parentHeight));
-
-        //this._execEvent('scrollEnd');
-      var x = _this.x, y = _this.y;
-
-      if (!_this.isHorizontalEnabled || _this.x > 0) {
-        x = 0;
-      } else if ( _this.x < maxX) {
-        x = maxX;
-      }
-
-      if (!_this.isVerticalEnabled || _this.y > 0) {
-        y = 0;
-      } else if (_this.y < maxY) {
-        y = maxY;
-      }
-
-      // No change
-      if (x == _this.x && y == _this.y) {
-        return false;
-      }
-      _this._scrollTo(x, y, transitionTime || 0, _this.bounceEasing);
-    
-      return true;
-    },
-
-    _wheel: function(e) {
-      var wheelDeltaX, wheelDeltaY,
-        newX, newY,
-        that = this;
-
-      var totalWidth = this.el.scrollWidth;
-      var totalHeight = this.el.scrollHeight;
-      var parentWidth = this.el.parentNode.offsetWidth;
-      var parentHeight = this.el.parentNode.offsetHeight;
-
-      var maxX = Math.min(0, (-totalWidth + parentWidth));
-      var maxY = Math.min(0, (-totalHeight + parentHeight));
-
-      // Execute the scrollEnd event after 400ms the wheel stopped scrolling
-      clearTimeout(this.wheelTimeout);
-      this.wheelTimeout = setTimeout(function () {
-        that._doneScrolling();
-      }, 400);
-
-      e.preventDefault();
-
-      if('wheelDeltaX' in e) {
-        wheelDeltaX = e.wheelDeltaX / 120;
-        wheelDeltaY = e.wheelDeltaY / 120;
-      } else if ('wheelDelta' in e) {
-        wheelDeltaX = wheelDeltaY = e.wheelDelta / 120;
-      } else if ('detail' in e) {
-        wheelDeltaX = wheelDeltaY = -e.detail / 3;
-      } else {
-        return;
-      }
-
-      wheelDeltaX *= this.mouseWheelSpeed;
-      wheelDeltaY *= this.mouseWheelSpeed;
-
-      if(!this.isVerticalEnabled) {
-        wheelDeltaX = wheelDeltaY;
-        wheelDeltaY = 0;
-      }
-
-      newX = this.x + (this.isHorizontalEnabled ? wheelDeltaX * (this.invertWheel ? -1 : 1) : 0);
-      newY = this.y + (this.isVerticalEnabled ? wheelDeltaY * (this.invertWheel ? -1 : 1) : 0);
-
-      if(newX > 0) {
-        newX = 0;
-      } else if (newX < maxX) {
-        newX = maxX;
-      }
-
-      if(newY > 0) {
-        newY = 0;
-      } else if (newY < maxY) {
-        newY = maxY;
-      }
-
-      this._scrollTo(newX, newY, 0);
-    },
-
-    _getMomentum: function (current, start, time, lowerMargin, wrapperSize) {
-      var distance = current - start,
-        speed = Math.abs(distance) / time,
-        destination,
-        duration,
-        deceleration = 0.0006;
-
-      // Calculate the final desination
-      destination = current + ( speed * speed ) / ( 2 * deceleration ) * ( distance < 0 ? -1 : 1 );
-      duration = speed / deceleration;
-
-      // Check if the final destination needs to be rubber banded
-      if ( destination < lowerMargin ) {
-        // We have dragged too far down, snap back to the maximum
-        destination = wrapperSize ? lowerMargin - ( wrapperSize / 2.5 * ( speed / 8 ) ) : lowerMargin;
-        distance = Math.abs(destination - current);
-        duration = distance / speed;
-      } else if ( destination > 0 ) {
-
-        // We have dragged too far up, snap back to 0
-        destination = wrapperSize ? wrapperSize / 2.5 * ( speed / 8 ) : 0;
-        distance = Math.abs(current) + destination;
-        duration = distance / speed;
-      }
-
-      return {
-        destination: Math.round(destination),
-        duration: duration
-      };
-    },
-
-    _onTransitionEnd: function(e) {
-      var _this = this;
-
-      if (e.target != this.el) {
-        return;
-      }
-
-      var needsWrapping = this.needsWrapping();
-
-      // Triggered to end scroll, once the final animation has ended
-      if(needsWrapping && this._didEndScroll) {
-        this._didEndScroll = false;
-        this._doneScrolling();
-      } else if(!needsWrapping) {
-        this._didEndScroll = false;
-        this._doneScrolling();
-      }
-
-      this.el.style.webkitTransitionDuration = '0';
-
-      window.requestAnimationFrame(function() {
-        if(_this.wrapScrollPosition(_this.bounceTime)) {
-          _this._didEndScroll = true;
-        }
-      });
-    },
-
-    _onScrollEnd: function() {
-      this._isDragging = false;
-      this._drag = null;
-      this.el.classList.remove('scroll-scrolling');
-
-      this.el.style.webkitTransitionDuration = '0';
-
-      clearTimeout(this._momentumStepTimeout)
-    },
-
-
-    _initDrag: function() {
-      this._onScrollEnd();
-      this._isStopped = false;
-    },
-
-
-    /**
-     * Initialize a drag by grabbing the content area to drag, and any other
-     * info we might need for the dragging.
-     */
-    _startDrag: function(e) {
-      var offsetX, content;
-
-      this._initDrag();
-
-      var scrollLeft = parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
-      var scrollTop = parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0;
-
-      var totalWidth = this.el.scrollWidth;
-      var totalHeight = this.el.scrollHeight;
-      var parentWidth = this.el.parentNode.offsetWidth;
-      var parentHeight = this.el.parentNode.offsetHeight;
-
-      var maxX = Math.min(0, (-totalWidth + parentWidth));
-      var maxY = Math.min(0, (-totalHeight + parentHeight));
-
-      // Check if we even have enough content to scroll, if not, don't start the drag
-      if((this.isHorizontalEnabled && maxX == 0) || (this.isVerticalEnabled && maxY == 0)) {
-        return;
-      }
-
-      this.x = scrollLeft;
-      this.y = scrollTop;
-
-      this._drag = {
-        direction: 'v',
-        pointX: e.gesture.touches[0].pageX,
-        pointY: e.gesture.touches[0].pageY,
-        startX: scrollLeft,
-        startY: scrollTop,
-        resist: 1,
-        startTime: Date.now()
-      };
-    },
-
-
-
-    /**
-     * Process the drag event to move the item to the left or right.
-     *
-     * This function needs to be as fast as possible to make sure scrolling
-     * performance is high.
-     */
-    _handleDrag: function(e) {
-      var _this = this;
-
-      var content;
-
-      // The drag stopped already, don't process this one
-      if(_this._isStopped) {
-        _this._initDrag();
-        return;
-      }
-
-      // We really aren't dragging
-      if(!_this._drag) {
-        _this._startDrag(e);
-        if(!_this._drag) { return; }
-      }
-
-      // Stop any default events during the drag
-      e.preventDefault();
-
-      var px = e.gesture.touches[0].pageX;
-      var py = e.gesture.touches[0].pageY;
-
-      var deltaX = px - _this._drag.pointX;
-      var deltaY = py - _this._drag.pointY;
-
-      _this._drag.pointX = px;
-      _this._drag.pointY = py;
-
-      // Check if we should start dragging. Check if we've dragged past the threshold.
-      if(!_this._isDragging && 
-          ((Math.abs(e.gesture.deltaY) > _this.dragThreshold) ||
-          (Math.abs(e.gesture.deltaX) > _this.dragThreshold))) {
-        _this._isDragging = true;
-      }
-
-      if(_this._isDragging) {
-        var drag = _this._drag;
-
-        // Request an animation frame to batch DOM reads/writes
-        window.requestAnimationFrame(function() {
-          // We are dragging, grab the current content height
-
-          var totalWidth = _this.el.scrollWidth;
-          var totalHeight = _this.el.scrollHeight;
-          var parentWidth = _this.el.parentNode.offsetWidth;
-          var parentHeight = _this.el.parentNode.offsetHeight;
-          var maxX = Math.min(0, (-totalWidth + parentWidth));
-          var maxY = Math.min(0, (-totalHeight + parentHeight));
-
-          // Grab current timestamp to keep our speend, etc.
-          // calculations in a window
-          var timestamp = Date.now();
-
-          // Calculate the new Y point for the container
-          // TODO: Only enable certain axes
-          var newX = _this.x + deltaX;
-          var newY = _this.y + deltaY;
-
-          if(newX > 0 || (-newX + parentWidth) > totalWidth) {
-            // Rubber band
-            newX = _this.x + deltaX / _this.rubberBandResistance;
-          }
-          // Check if the dragging is beyond the bottom or top
-          if(newY > 0 || (-newY + parentHeight) > totalHeight) {
-            // Rubber band
-            newY = _this.y + deltaY / _this.rubberBandResistance;
-          }
-
-          if(!_this.isHorizontalEnabled) {
-            newX = 0;
-          }
-          if(!_this.isVerticalEnabled) {
-            newY = 0;
-          }
-
-          // Update the new translated Y point of the container
-          _this.el.style.webkitTransform = 'translate3d(' + newX + 'px,' + newY + 'px, 0)';
-
-          // Store the last points
-          _this.x = newX;
-          _this.y = newY;
-
-          // Check if we need to reset the drag initial states if we've
-          // been dragging for a bit
-          if(timestamp - drag.startTime > 300) {
-            drag.startTime = timestamp;
-            drag.startX = _this.x;
-            drag.startY = _this.y;
-          }
-
-          _this.didScroll && _this.didScroll({
-            target: _this.el,
-            scrollLeft: -newX,
-            scrollTop: -newY
-          });
-
-          // Trigger a scroll event
-          ionic.trigger(_this.scrollEventName, {
-            target: _this.el,
-            scrollLeft: -newX,
-            scrollTop: -newY
-          });
-        });
-      }
-    },
-
-
-
-    _handleEndDrag: function(e) {
-      // We didn't have a drag, so just init and leave
-      if(!this._drag) {
-        this._initDrag();
-        return;
-      }
-
-      // Set a flag in case we don't cleanup completely after the
-      // drag animation so we can cleanup the next time a drag starts
-      this._isStopped = true;
-
-      // Animate to the finishing point
-      this._animateToStop(e);
-
-    },
-
-
-    // Find the stopping point given the current velocity and acceleration rate, and
-    // animate to that position
-    _animateToStop: function(e) {
-      var _this = this;
-      window.requestAnimationFrame(function() {
-
-        var drag = _this._drag;
-
-        // Calculate the viewport height and the height of the content
-        var totalWidth = _this.el.scrollWidth;
-        var totalHeight = _this.el.scrollHeight;
-
-        // The parent bounding box helps us figure max/min scroll amounts
-        var parentWidth = _this.el.parentNode.offsetWidth;
-        var parentHeight = _this.el.parentNode.offsetHeight;
-
-        // Calculate how long we've been dragging for, with a max of 300ms
-        var duration = Date.now() - _this._drag.startTime;
-        var time = 0;
-        var easing = '';
-
-        var newX = Math.round(_this.x);
-        var newY = Math.round(_this.y);
-
-        _this._scrollTo(newX, newY);
-
-
-        // Check if we just snap back to bounds
-        if(_this.wrapScrollPosition(_this.bounceTime)) {
-          return;
-        }
-
-        // If the duration is within reasonable bounds, enable momentum scrolling so we
-        // can "slide" to a finishing point
-        if(duration < 300) {
-          var momentumX = _this._getMomentum(_this.x, drag.startX, duration, parentWidth - totalWidth, parentWidth);
-          var momentumY = _this._getMomentum(_this.y, drag.startY, duration, parentHeight - totalHeight, parentHeight);
-          //var newX = momentumX.destination;
-          newX = momentumX.destination;
-          newY = momentumY.destination;
-
-          // Calculate the longest required time for the momentum animation and
-          // use that.
-          time = Math.max(momentumX.duration, momentumY.duration);
-        }
-        
-        // If we've moved, we will need to scroll
-        if(newX != _this.x || newY != _this.y) {
-          // If the end position is out of bounds, change the function we use for easing
-          // to get a different animation for the rubber banding
-          if ( newX > 0 || newX < (-totalWidth + parentWidth) || newY > 0 || newY < (-totalHeight + parentHeight)) {
-            easing = EASING_FUNCTIONS.bounce;
-          }
-
-          _this._scrollTo(newX, newY, time, easing);
-        } else {
-          // We are done
-          _this._doneScrolling();
-        }
-      });
-    },
-
-    _doneScrolling: function() {
-      this.didStopScrolling && this.didStopScrolling({
-        target: this.el,
-        scrollLeft: this.x,
-        scrollTop: this.y
-      });
-      ionic.trigger(this.scrollEndEventName, {
-        target: this.el,
-        scrollLeft: this.x,
-        scrollTop: this.y
-      });
-    }
-  }, {
-    DECEL_RATE_NORMAL: 0.998,
-    DECEL_RATE_FAST: 0.99,
-    DECEL_RATE_SLOW: 0.996,
-  });
-
-})(ionic);
-;
-(function(ionic) {
 'use strict';
   /**
    * An ActionSheet is the slide up menu popularized on iOS.
@@ -3798,6 +3127,663 @@ window.ionic = {
     }
   };
 
+})(ionic);
+;
+/**
+ * ionic.views.Scroll. Portions lovingly adapted from the great iScroll 5, which is
+ * also MIT licensed.
+ * iScroll v5.0.5 ~ (c) 2008-2013 Matteo Spinelli ~ http://cubiq.org/license
+ *
+ * Think of ionic.views.Scroll like a Javascript version of UIScrollView or any 
+ * scroll container in any UI library. You could just use -webkit-overflow-scrolling: touch,
+ * but you lose control over scroll behavior that native developers have with things
+ * like UIScrollView, and you don't get events after the finger stops touching the
+ * device (after a flick, for example).
+ *
+ * Some people are afraid of using Javascript powered scrolling, but
+ * with today's devices, Javascript is probably the best solution for
+ * scrolling in hybrid apps. Someone's code is running somewhere, even on native, right?
+ */
+(function(ionic) {
+'use strict';
+
+  // Some easing functions for animations
+  var EASING_FUNCTIONS = {
+    quadratic: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+		circular: 'cubic-bezier(0.1, 0.57, 0.1, 1)',
+    circular2: 'cubic-bezier(0.075, 0.82, 0.165, 1)',
+
+    bounce: 'cubic-bezier(.02,.69,.67,1)',
+
+    // It closes like a high-end toilet seat. Fast, then nice and slow.
+    // Thanks to our @xtheglobe for that.
+    toiletSeat: 'cubic-bezier(0.05, 0.60, 0.05, 0.60)'
+  };
+
+  ionic.views.Scroll = ionic.views.View.inherit({
+
+    initialize: function(opts) {
+      var _this = this;
+
+      // Extend the options with our defaults
+      opts = ionic.Utils.extend({
+        decelerationRate: ionic.views.Scroll.prototype.DECEL_RATE_NORMAL,
+        dragThreshold: 10,
+        
+        // Resistance when scrolling too far up or down
+        rubberBandResistance: 3,
+
+        // Scroll event names. These are custom so can be configured
+        scrollEventName: 'momentumScrolled',
+        scrollEndEventName: 'momentumScrollEnd',
+
+        // How frequently to fire scroll events in the case of 
+        // a flick or momentum scroll where the finger is no longer
+        // touching the screen. If your event handler is a performance
+        // hog, change this millisecond value to cut down on the frequency
+        // of events triggered in those instances.
+        inertialEventInterval: 50,
+
+        // How quickly to scroll with a mouse wheel. 20 is a good default
+        mouseWheelSpeed: 20,
+
+        // Invert the mouse wheel? This makes sense on new Macbooks, but
+        // nowhere else.
+        invertWheel: false,
+
+        // Enable vertical scrolling
+        isVerticalEnabled: true,
+
+        // Enable horizontal scrolling
+        isHorizontalEnabled: false,
+
+        // The easing function to use for bouncing up or down on the bounds
+        // of the scrolling area
+        bounceEasing: EASING_FUNCTIONS.bounce,
+
+        //how long to take when bouncing back in a rubber band
+        bounceTime: 600 
+      }, opts);
+
+      ionic.extend(this, opts);
+
+      this.el = opts.el;
+
+      this.y = 0;
+      this.x = 0;
+
+      // Listen for drag and release events
+      ionic.onGesture('drag', function(e) {
+        _this._handleDrag(e);
+      }, this.el);
+      ionic.onGesture('release', function(e) {
+        _this._handleEndDrag(e);
+      }, this.el);
+      ionic.on('mousewheel', function(e) {
+        _this._wheel(e);
+      }, this.el);
+      ionic.on('DOMMouseScroll', function(e) {
+        _this._wheel(e);
+      }, this.el);
+      ionic.on(this.scrollEndEventName, function(e) {
+        _this._onScrollEnd(e);
+      }, this.el);
+      ionic.on('webkitTransitionEnd', function(e) {
+        _this._onTransitionEnd(e);
+      });
+    },
+
+    /**
+     * Scroll to the given X and Y point, taking 
+     * the given amount of time, with the given
+     * easing function defined as a CSS3 timing function.
+     *
+     * Note: the x and y values will be converted to negative offsets due to
+     * the way scrolling works internally.
+     *
+     * @param {float} the x position to scroll to (CURRENTLY NOT SUPPORTED!)
+     * @param {float} the y position to scroll to
+     * @param {float} the time to take scrolling to the new position
+     * @param {easing} the animation function to use for easing
+     */
+    scrollTo: function(x, y, time, easing) {
+      this._scrollTo(-x, -y, time, easing);
+    },
+
+    _scrollTo: function(x, y, time, easing) {
+      var _this = this;
+
+      var start = Date.now();
+
+      easing = easing || 'cubic-bezier(0.1, 0.57, 0.1, 1)';
+      var easingValues = easing.replace('cubic-bezier(', '').replace(')', '').split(',');
+      easingValues = [parseFloat(easingValues[0]), parseFloat(easingValues[1]), parseFloat(easingValues[2]), parseFloat(easingValues[3])];
+
+      var cubicBezierFunction = ionic.Animator.getCubicBezier(easingValues[0], easingValues[1], easingValues[2], easingValues[3], time);
+
+      var ox = this.x, oy = this.y;
+
+
+      var el = this.el;
+
+      if(x !== null) {
+        this.x = x;
+      } else {
+        x = this.x;
+      }
+      if(y !== null) {
+        this.y = y;
+      } else {
+        y = this.y;
+      }
+
+      if(ox == x && oy == y) {
+        time = 0;
+      }
+
+      var dx = ox - x;
+      var dy = oy - y;
+
+      el.offsetHeight;
+      el.style.webkitTransitionTimingFunction = easing;
+      el.style.webkitTransitionDuration = time;
+      el.style.webkitTransform = 'translate3d(' + x + 'px,' + y + 'px, 0)';
+
+      // Stop any other momentum event callbacks
+      clearTimeout(this._momentumStepTimeout);
+
+      // Start triggering events as the element scrolls from inertia.
+      // This is important because we need to receive scroll events
+      // even after a "flick" and adjust, etc.
+      if(time > 0) {
+        this._momentumStepTimeout = setTimeout(function eventNotify() {
+          // Calculate where in the animation process we might be
+          var diff = Math.min(time, Math.abs(Date.now() - start));
+
+          // How far along in time have we moved
+          var timeRatio = diff / time;
+
+          // Interpolate the transition values, using the same
+          // cubic bezier animation function used in the transition.
+          var bx = ox - dx * cubicBezierFunction(timeRatio);
+          var by = oy - dy * cubicBezierFunction(timeRatio);
+
+          _this.didScroll && _this.didScroll({
+            target: _this.el,
+            scrollLeft: -bx,
+            scrollTop: -by
+          });
+          ionic.trigger(_this.scrollEventName, {
+            target: _this.el,
+            scrollLeft: -bx,
+            scrollTop: -by
+          });
+
+          if(_this._isDragging) {
+            _this._momentumStepTimeout = setTimeout(eventNotify, _this.inertialEventInterval);
+          }
+        }, this.inertialEventInterval);
+      } else {
+        this.didScroll && this.didScroll({
+          target: this.el,
+          scrollLeft: -this.x,
+          scrollTop: -this.y
+        });
+        ionic.trigger(this.scrollEventName, {
+          target: this.el,
+          scrollLeft: -this.x,
+          scrollTop: -this.y
+        });
+      }
+    },
+
+    needsWrapping: function() {
+      var _this = this;
+
+      var totalWidth = this.el.scrollWidth;
+      var totalHeight = this.el.scrollHeight;
+      var parentWidth = this.el.parentNode.offsetWidth;
+      var parentHeight = this.el.parentNode.offsetHeight;
+
+      var maxX = Math.min(0, (-totalWidth + parentWidth));
+      var maxY = Math.min(0, (-totalHeight + parentHeight));
+
+      if (this.isHorizontalEnabled && (this.x > 0 || this.x < maxX)) {
+        return true;
+      }
+      
+      if (this.isVerticalEnabled && (this.y > 0 || this.y < maxY)) {
+        return true;
+      }
+
+      return false;
+    },
+
+    /**
+     * If the scroll position is outside the current bounds,
+     * animate it back.
+     */
+    wrapScrollPosition: function(transitionTime) {
+      var _this = this;
+
+      var totalWidth = _this.el.scrollWidth;
+      var totalHeight = _this.el.scrollHeight;
+      var parentWidth = _this.el.parentNode.offsetWidth;
+      var parentHeight = _this.el.parentNode.offsetHeight;
+
+      var maxX = Math.min(0, (-totalWidth + parentWidth));
+      var maxY = Math.min(0, (-totalHeight + parentHeight));
+
+        //this._execEvent('scrollEnd');
+      var x = _this.x, y = _this.y;
+
+      if (!_this.isHorizontalEnabled || _this.x > 0) {
+        x = 0;
+      } else if ( _this.x < maxX) {
+        x = maxX;
+      }
+
+      if (!_this.isVerticalEnabled || _this.y > 0) {
+        y = 0;
+      } else if (_this.y < maxY) {
+        y = maxY;
+      }
+
+      // No change
+      if (x == _this.x && y == _this.y) {
+        return false;
+      }
+      _this._scrollTo(x, y, transitionTime || 0, _this.bounceEasing);
+    
+      return true;
+    },
+
+    _wheel: function(e) {
+      var wheelDeltaX, wheelDeltaY,
+        newX, newY,
+        that = this;
+
+      var totalWidth = this.el.scrollWidth;
+      var totalHeight = this.el.scrollHeight;
+      var parentWidth = this.el.parentNode.offsetWidth;
+      var parentHeight = this.el.parentNode.offsetHeight;
+
+      var maxX = Math.min(0, (-totalWidth + parentWidth));
+      var maxY = Math.min(0, (-totalHeight + parentHeight));
+
+      // Execute the scrollEnd event after 400ms the wheel stopped scrolling
+      clearTimeout(this.wheelTimeout);
+      this.wheelTimeout = setTimeout(function () {
+        that._doneScrolling();
+      }, 400);
+
+      e.preventDefault();
+
+      if('wheelDeltaX' in e) {
+        wheelDeltaX = e.wheelDeltaX / 120;
+        wheelDeltaY = e.wheelDeltaY / 120;
+      } else if ('wheelDelta' in e) {
+        wheelDeltaX = wheelDeltaY = e.wheelDelta / 120;
+      } else if ('detail' in e) {
+        wheelDeltaX = wheelDeltaY = -e.detail / 3;
+      } else {
+        return;
+      }
+
+      wheelDeltaX *= this.mouseWheelSpeed;
+      wheelDeltaY *= this.mouseWheelSpeed;
+
+      if(!this.isVerticalEnabled) {
+        wheelDeltaX = wheelDeltaY;
+        wheelDeltaY = 0;
+      }
+
+      newX = this.x + (this.isHorizontalEnabled ? wheelDeltaX * (this.invertWheel ? -1 : 1) : 0);
+      newY = this.y + (this.isVerticalEnabled ? wheelDeltaY * (this.invertWheel ? -1 : 1) : 0);
+
+      if(newX > 0) {
+        newX = 0;
+      } else if (newX < maxX) {
+        newX = maxX;
+      }
+
+      if(newY > 0) {
+        newY = 0;
+      } else if (newY < maxY) {
+        newY = maxY;
+      }
+
+      this._scrollTo(newX, newY, 0);
+    },
+
+    _getMomentum: function (current, start, time, lowerMargin, wrapperSize) {
+      var distance = current - start,
+        speed = Math.abs(distance) / time,
+        destination,
+        duration,
+        deceleration = 0.0006;
+
+      // Calculate the final desination
+      destination = current + ( speed * speed ) / ( 2 * deceleration ) * ( distance < 0 ? -1 : 1 );
+      duration = speed / deceleration;
+
+      // Check if the final destination needs to be rubber banded
+      if ( destination < lowerMargin ) {
+        // We have dragged too far down, snap back to the maximum
+        destination = wrapperSize ? lowerMargin - ( wrapperSize / 2.5 * ( speed / 8 ) ) : lowerMargin;
+        distance = Math.abs(destination - current);
+        duration = distance / speed;
+      } else if ( destination > 0 ) {
+
+        // We have dragged too far up, snap back to 0
+        destination = wrapperSize ? wrapperSize / 2.5 * ( speed / 8 ) : 0;
+        distance = Math.abs(current) + destination;
+        duration = distance / speed;
+      }
+
+      return {
+        destination: Math.round(destination),
+        duration: duration
+      };
+    },
+
+    _onTransitionEnd: function(e) {
+      var _this = this;
+
+      if (e.target != this.el) {
+        return;
+      }
+
+      var needsWrapping = this.needsWrapping();
+
+      // Triggered to end scroll, once the final animation has ended
+      if(needsWrapping && this._didEndScroll) {
+        this._didEndScroll = false;
+        this._doneScrolling();
+      } else if(!needsWrapping) {
+        this._didEndScroll = false;
+        this._doneScrolling();
+      }
+
+      this.el.style.webkitTransitionDuration = '0';
+
+      window.requestAnimationFrame(function() {
+        if(_this.wrapScrollPosition(_this.bounceTime)) {
+          _this._didEndScroll = true;
+        }
+      });
+    },
+
+    _onScrollEnd: function() {
+      this._isDragging = false;
+      this._drag = null;
+      this.el.classList.remove('scroll-scrolling');
+
+      this.el.style.webkitTransitionDuration = '0';
+
+      clearTimeout(this._momentumStepTimeout)
+    },
+
+
+    _initDrag: function() {
+      this._onScrollEnd();
+      this._isStopped = false;
+    },
+
+
+    /**
+     * Initialize a drag by grabbing the content area to drag, and any other
+     * info we might need for the dragging.
+     */
+    _startDrag: function(e) {
+      var offsetX, content;
+
+      this._initDrag();
+
+      var scrollLeft = parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
+      var scrollTop = parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0;
+
+      var totalWidth = this.el.scrollWidth;
+      var totalHeight = this.el.scrollHeight;
+      var parentWidth = this.el.parentNode.offsetWidth;
+      var parentHeight = this.el.parentNode.offsetHeight;
+
+      var maxX = Math.min(0, (-totalWidth + parentWidth));
+      var maxY = Math.min(0, (-totalHeight + parentHeight));
+
+      // Check if we even have enough content to scroll, if not, don't start the drag
+      if((this.isHorizontalEnabled && maxX == 0) || (this.isVerticalEnabled && maxY == 0)) {
+        return;
+      }
+
+      this.x = scrollLeft;
+      this.y = scrollTop;
+
+      this._drag = {
+        direction: 'v',
+        pointX: e.gesture.touches[0].pageX,
+        pointY: e.gesture.touches[0].pageY,
+        startX: scrollLeft,
+        startY: scrollTop,
+        resist: 1,
+        startTime: Date.now()
+      };
+    },
+
+
+
+    /**
+     * Process the drag event to move the item to the left or right.
+     *
+     * This function needs to be as fast as possible to make sure scrolling
+     * performance is high.
+     */
+    _handleDrag: function(e) {
+      var _this = this;
+
+      var content;
+
+      // The drag stopped already, don't process this one
+      if(_this._isStopped) {
+        _this._initDrag();
+        return;
+      }
+
+      // We really aren't dragging
+      if(!_this._drag) {
+        _this._startDrag(e);
+        if(!_this._drag) { return; }
+      }
+
+      // Stop any default events during the drag
+      e.preventDefault();
+
+      var px = e.gesture.touches[0].pageX;
+      var py = e.gesture.touches[0].pageY;
+
+      var deltaX = px - _this._drag.pointX;
+      var deltaY = py - _this._drag.pointY;
+
+      _this._drag.pointX = px;
+      _this._drag.pointY = py;
+
+      // Check if we should start dragging. Check if we've dragged past the threshold.
+      if(!_this._isDragging && 
+          ((Math.abs(e.gesture.deltaY) > _this.dragThreshold) ||
+          (Math.abs(e.gesture.deltaX) > _this.dragThreshold))) {
+        _this._isDragging = true;
+      }
+
+      if(_this._isDragging) {
+        var drag = _this._drag;
+
+        // Request an animation frame to batch DOM reads/writes
+        window.requestAnimationFrame(function() {
+          // We are dragging, grab the current content height
+
+          var totalWidth = _this.el.scrollWidth;
+          var totalHeight = _this.el.scrollHeight;
+          var parentWidth = _this.el.parentNode.offsetWidth;
+          var parentHeight = _this.el.parentNode.offsetHeight;
+          var maxX = Math.min(0, (-totalWidth + parentWidth));
+          var maxY = Math.min(0, (-totalHeight + parentHeight));
+
+          // Grab current timestamp to keep our speend, etc.
+          // calculations in a window
+          var timestamp = Date.now();
+
+          // Calculate the new Y point for the container
+          // TODO: Only enable certain axes
+          var newX = _this.x + deltaX;
+          var newY = _this.y + deltaY;
+
+          if(newX > 0 || (-newX + parentWidth) > totalWidth) {
+            // Rubber band
+            newX = _this.x + deltaX / _this.rubberBandResistance;
+          }
+          // Check if the dragging is beyond the bottom or top
+          if(newY > 0 || (-newY + parentHeight) > totalHeight) {
+            // Rubber band
+            newY = _this.y + deltaY / _this.rubberBandResistance;
+          }
+
+          if(!_this.isHorizontalEnabled) {
+            newX = 0;
+          }
+          if(!_this.isVerticalEnabled) {
+            newY = 0;
+          }
+
+          // Update the new translated Y point of the container
+          _this.el.style.webkitTransform = 'translate3d(' + newX + 'px,' + newY + 'px, 0)';
+
+          // Store the last points
+          _this.x = newX;
+          _this.y = newY;
+
+          // Check if we need to reset the drag initial states if we've
+          // been dragging for a bit
+          if(timestamp - drag.startTime > 300) {
+            drag.startTime = timestamp;
+            drag.startX = _this.x;
+            drag.startY = _this.y;
+          }
+
+          _this.didScroll && _this.didScroll({
+            target: _this.el,
+            scrollLeft: -newX,
+            scrollTop: -newY
+          });
+
+          // Trigger a scroll event
+          ionic.trigger(_this.scrollEventName, {
+            target: _this.el,
+            scrollLeft: -newX,
+            scrollTop: -newY
+          });
+        });
+      }
+    },
+
+
+
+    _handleEndDrag: function(e) {
+      // We didn't have a drag, so just init and leave
+      if(!this._drag) {
+        this._initDrag();
+        return;
+      }
+
+      // Set a flag in case we don't cleanup completely after the
+      // drag animation so we can cleanup the next time a drag starts
+      this._isStopped = true;
+
+      // Animate to the finishing point
+      this._animateToStop(e);
+
+    },
+
+
+    // Find the stopping point given the current velocity and acceleration rate, and
+    // animate to that position
+    _animateToStop: function(e) {
+      var _this = this;
+      window.requestAnimationFrame(function() {
+
+        var drag = _this._drag;
+
+        // Calculate the viewport height and the height of the content
+        var totalWidth = _this.el.scrollWidth;
+        var totalHeight = _this.el.scrollHeight;
+
+        // The parent bounding box helps us figure max/min scroll amounts
+        var parentWidth = _this.el.parentNode.offsetWidth;
+        var parentHeight = _this.el.parentNode.offsetHeight;
+
+        // Calculate how long we've been dragging for, with a max of 300ms
+        var duration = Date.now() - _this._drag.startTime;
+        var time = 0;
+        var easing = '';
+
+        var newX = Math.round(_this.x);
+        var newY = Math.round(_this.y);
+
+        _this._scrollTo(newX, newY);
+
+
+        // Check if we just snap back to bounds
+        if(_this.wrapScrollPosition(_this.bounceTime)) {
+          return;
+        }
+
+        // If the duration is within reasonable bounds, enable momentum scrolling so we
+        // can "slide" to a finishing point
+        if(duration < 300) {
+          var momentumX = _this._getMomentum(_this.x, drag.startX, duration, parentWidth - totalWidth, parentWidth);
+          var momentumY = _this._getMomentum(_this.y, drag.startY, duration, parentHeight - totalHeight, parentHeight);
+          //var newX = momentumX.destination;
+          newX = momentumX.destination;
+          newY = momentumY.destination;
+
+          // Calculate the longest required time for the momentum animation and
+          // use that.
+          time = Math.max(momentumX.duration, momentumY.duration);
+        }
+        
+        // If we've moved, we will need to scroll
+        if(newX != _this.x || newY != _this.y) {
+          // If the end position is out of bounds, change the function we use for easing
+          // to get a different animation for the rubber banding
+          if ( newX > 0 || newX < (-totalWidth + parentWidth) || newY > 0 || newY < (-totalHeight + parentHeight)) {
+            easing = EASING_FUNCTIONS.bounce;
+          }
+
+          _this._scrollTo(newX, newY, time, easing);
+        } else {
+          // We are done
+          _this._doneScrolling();
+        }
+      });
+    },
+
+    _doneScrolling: function() {
+      this.didStopScrolling && this.didStopScrolling({
+        target: this.el,
+        scrollLeft: this.x,
+        scrollTop: this.y
+      });
+      ionic.trigger(this.scrollEndEventName, {
+        target: this.el,
+        scrollLeft: this.x,
+        scrollTop: this.y
+      });
+    }
+  }, {
+    DECEL_RATE_NORMAL: 0.998,
+    DECEL_RATE_FAST: 0.99,
+    DECEL_RATE_SLOW: 0.996,
+  });
+
 })(ionic);
 ;
 (function(ionic) {
@@ -4425,6 +4411,20 @@ ionic.views.TabBar.prototype = {
 })(ionic);
 ;
 (function(ionic) {
+'use strict';
+  ionic.views.View = function() {
+    this.initialize.apply(this, arguments);
+  };
+
+  ionic.views.View.inherit = ionic.inherit;
+
+  ionic.extend(ionic.views.View.prototype, {
+    initialize: function() {}
+  });
+
+})(window.ionic);
+;
+(function(ionic) {
 'use strict';
 
 /**
diff --git a/scss/ionic/_bar.scss b/scss/ionic/_bar.scss
index 8a99cbd3d7..128bcf936b 100644
--- a/scss/ionic/_bar.scss
+++ b/scss/ionic/_bar.scss
@@ -195,6 +195,8 @@
 // Header at top
 .bar-header {
   top: 0;
+  border-top-width: 0;
+  border-bottom-width: 1px;
 }
 
 // Footer at bottom
diff --git a/scss/ionic/_mixins.scss b/scss/ionic/_mixins.scss
index 7a225e08c1..798e200be3 100644
--- a/scss/ionic/_mixins.scss
+++ b/scss/ionic/_mixins.scss
@@ -11,11 +11,6 @@
 	&:hover {
     color: $color;
     text-decoration: none;
-
-    // TODO: Verify if we should keep this or not. Feels weird on Safari
-    // Since the button shows the hover state after clicking, but we only
-    // want it on desktop
-		//background-color: lighten($bgColor, 10%);
   }
 	&.active, &:active {
 		background-color: $activeBgColor;
@@ -60,11 +55,6 @@
 	&:hover {
     color: $color;
     text-decoration: none;
-
-    // TODO: Verify if we should keep this or not. Feels weird on Safari
-    // Since the button shows the hover state after clicking, but we only
-    // want it on desktop
-		//background-color: lighten($bgColor, 10%);
   }
 	&.active, &:active {
 		background-color: darken($bgColor, 8%);
@@ -75,13 +65,6 @@
 
 //$bgColor, $borderColor, $color, 
 @mixin item-style-active($activeBgColor, $activeBorderColor, $activeColor) {
-  /*
-  color: $color;
-  background-color: $bgColor;
-  border-color: $borderColor;
-  */
-
-
   &.active, &:active {
     color: $activeColor;
     background-color: $activeBgColor;
@@ -96,8 +79,7 @@
 
 @mixin bar-style($bgColor, $borderColor, $color) {
   background-color: $bgColor;
-  border-top-color: transparent;
-  border-bottom-color: $borderColor;
+  border-color: $borderColor;
   background-image: linear-gradient(0deg, $borderColor, $borderColor 50%, transparent 50%);
 
   color: $color;