moving over and fix a few more things.

dist/ratchet.css

@@ -347,6 +347,7 @@ strong {
   bottom: 0;
   height: 50px;
   padding: 0;
+  border-top: 1px solid #dddddd;
 }
 
 .tab-inner {
@@ -369,7 +370,7 @@ strong {
 }
 .tab-item .tab-label,
 .tab-item .icon {
-  color: white;
+  color: #929292;
 }
 .tab-item .tab-label {
   margin-top: -2px;
@@ -530,8 +531,8 @@ input[type="tel"],
 input[type="color"],
 .input-group {
   width: 100%;
-  height: 40px;
+  height: 35px;
-  padding: 10px 15px;
+  padding: 0 10px;
   margin-bottom: 10px;
   line-height: 21px;
   background-color: #fff;
@@ -542,7 +543,6 @@ input[type="color"],
 }
 
 input[type=search] {
-  height: 34px;
   padding: 0 10px;
   font-size: 16px;
   border-radius: 20px;
@@ -634,7 +634,7 @@ select {
   cursor: pointer;
   background-color: white;
   border: 1px solid #dddddd;
-  border-radius: 6px;
+  border-radius: 4px;
 }
 [class*="button"].button-filled {
   background-color: white;
@@ -702,8 +702,6 @@ select {
   color: #428bca;
   background-color: transparent;
   border: 0;
-  -webkit-transition: opacity 0.2s linear;
-  transition: opacity 0.2s linear;
   -webkit-box-flex: 0;
   box-flex: 0;
 }
@@ -947,13 +945,11 @@ input[type="button"] {
   width: 280px;
   margin-left: -140px;
   background-color: white;
-  border-radius: 12px;
+  border-radius: 6px;
   opacity: 0;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
   -webkit-transform: translate3d(0, -15px, 0);
   transform: translate3d(0, -15px, 0);
-  -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
 }
 .popover:after {
   position: absolute;
@@ -1045,8 +1041,6 @@ input[type="button"] {
   transform: translate3d(0, 100%, 0);
   -webkit-transition: -webkit-transform 0.25s, opacity 0.25s;
   transition: -webkit-transform 0.25s, opacity 0.25s;
-  -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
-  transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
 }
 .modal.active {
   opacity: 1;
@@ -1055,8 +1049,6 @@ input[type="button"] {
   transform: translate3d(0, 0, 0);
   -webkit-transition: -webkit-transform 0.25s;
   transition: -webkit-transform 0.25s;
-  -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
-  transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
 }
 
 .slider,
@@ -1092,12 +1084,10 @@ input[type="button"] {
   width: 47px;
   height: 30px;
   background-color: #fff;
-  border: 2px solid #e6e6e6;
+  border: 2px solid #ddd;
   border-radius: 20px;
-  -webkit-box-shadow: inset 0 0 0 0 #e1e1e1;
+  -webkit-transition-property: background-color, border;
-  box-shadow: inset 0 0 0 0 #e1e1e1;
+  transition-property: background-color, border;
-  -webkit-transition-property: box-shadow, border;
-  transition-property: box-shadow, border;
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s;
 }
@@ -1109,39 +1099,26 @@ input[type="button"] {
   width: 28px;
   height: 28px;
   background-color: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  border: 1px solid #ddd;
   border-radius: 100px;
-  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
-  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
   -webkit-transition-property: -webkit-transform, border, width;
   transition-property: -webkit-transform, border, width;
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s;
 }
-.toggle:active .toggle-handle {
-  width: 35px;
-}
 .toggle.active {
   border: 2px solid #5cb85c;
-  -webkit-box-shadow: inset 0 0 0 13px #5cb85c;
+  background-color: #5cb85c;
-  box-shadow: inset 0 0 0 13px #5cb85c;
 }
 .toggle.active .toggle-handle {
   border-color: #5cb85c;
   -webkit-transform: translate3d(17px, 0, 0);
   transform: translate3d(17px, 0, 0);
 }
-.toggle.active:active .toggle-handle,
-.toggle.active .toggle-handle:active {
-  -webkit-transform: translate3d(10px, 0, 0) !important;
-  transform: translate3d(10px, 0, 0) !important;
-}
 
 .content.fade {
   left: 0;
   opacity: 0;
-  -webkit-transition: opacity 0.2s ease-in-out;
-  transition: opacity 0.2s ease-in-out;
 }
 .content.fade.in {
   opacity: 1;
@@ -1152,23 +1129,11 @@ input[type="button"] {
   transition: -webkit-transform 0.4s;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
-  -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
-  transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
-}
-.content.slide.sliding-in, .content.slide.right:not([class*="sliding-in"]) {
-  -webkit-animation-name: fadeOverlay;
-  animation-name: fadeOverlay;
-  -webkit-animation-duration: 0.4s;
-  animation-duration: 0.4s;
-}
-.content.slide.right:not([class*="sliding-in"]) {
-  -webkit-animation-direction: reverse;
-  animation-direction: reverse;
 }
 .content.slide.left {
   z-index: 1;
-  -webkit-transform: translate3d(-20%, 0, 0);
+  -webkit-transform: translate3d(100%, 0, 0);
-  transform: translate3d(-20%, 0, 0);
+  transform: translate3d(100%, 0, 0);
 }
 .content.slide.right {
   z-index: 3;
@@ -1176,18 +1141,6 @@ input[type="button"] {
   transform: translate3d(100%, 0, 0);
 }
 
-@-webkit-keyframes fadeOverlay {
-  from {
-    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0);
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0);
-  }
-
-  to {
-    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1);
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1);
-  }
-}
-
 @font-face {
   font-family: "Ratchicons";
   src: url("ratchicons/ratchicons.eot");

lib/sass/bars.scss

@@ -83,6 +83,7 @@
   bottom: 0;
   height: $bar-tab-height;
   padding: 0;
+  border-top: $border-default;
 }
 
 // Wrapper for individual tab
@@ -105,7 +106,7 @@
 
   .tab-label,
   .icon {
-    color: $default-color;
+    color: #929292;
   }
 
   // Label for tab

lib/sass/buttons.scss

@@ -16,7 +16,7 @@
   cursor: pointer;
   background-color: $chrome-color;
   border: $border-default;
-  border-radius: $border-radius;
+  border-radius: 4px;
 
   &.button-filled {
     background-color: $chrome-color;
@@ -105,7 +105,6 @@
 // --------------------------------------------------
 
 .bar-nav {
-
   // Generic style for all buttons in .bar-title
   [class*="button"] {
     position: relative;
@@ -118,7 +117,6 @@
     color: $primary-color;
     background-color: transparent;
     border: 0;
-    @include transition(opacity .2s linear);
     @include box-flex(0);
   }
 

lib/sass/forms.scss

@@ -30,8 +30,8 @@ input[type="tel"],
 input[type="color"],
 .input-group {
   width: 100%;
-  height: 40px;
+  height: 35px;
-  padding: 10px 15px;
+  padding: 0 10px;
   margin-bottom: 10px;
   line-height: $line-height-default;
   background-color: #fff;
@@ -43,7 +43,6 @@ input[type="color"],
 
 // Rounded search input
 input[type=search] {
-  height: 34px;
   padding: 0 10px;
   font-size: 16px;
   border-radius: 20px;

lib/sass/modals.scss

@@ -13,7 +13,6 @@
   background-color: #fff;  
   @include transform(translate3d(0, 100%, 0));
   @include transition(-webkit-transform .25s, opacity .25s);
-  @include transition-timing-function($timing-fuction);
 
   // Active modal
   &.active {
@@ -21,6 +20,5 @@
     height: 100%;
     @include transform(translate3d(0, 0, 0));
     @include transition(-webkit-transform .25s);
-    @include transition-timing-function($timing-fuction);
   }
 }

lib/sass/theme-ios

@@ -32,6 +32,11 @@ $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods
   @include box-shadow(0 0 1px rgba(0,0,0,.85));
 }
 
+.bar-tab {
+  border-top: 0;
+  @include box-shadow(0 0 -1px rgba(0,0,0,.85));
+}
+
 
 // Nav bar in popovers
 // --------------------------------------------------
@@ -89,11 +94,13 @@ input[type="url"],
 input[type="tel"],
 input[type="color"],
 .input-group {
-  border: 1px solid rgba(0, 0, 0, .2);
+  height: 40px;
+  padding: 10px 15px;  border: 1px solid rgba(0, 0, 0, .2);
 }
 
 // Rounded search input
 input[type=search] {
+  height: 34px;
   text-align: center;
   background-color: rgba(0,0,0,.1);
   border: 0;
@@ -135,7 +142,6 @@ input[type=search]:focus {
 [class*="button"] {
   color: $default-color;
   background-color: transparent;
-  border-radius: 4px;
   @include transition(background-color, opacity, color);
   @include transition-duration(.2s);
   @include transition-timing-function(linear);
@@ -158,6 +164,13 @@ input[type=search]:focus {
   }
 }
 
+// Buttons in nav bars
+// --------------------------------------------------
+
+.bar-nav {
+  @include transition(opacity .2s linear);
+}
+
 
 //
 // Badges
@@ -194,6 +207,52 @@ input[type=search]:focus {
   @include transition(-webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out);
 }
 
+
+//
+// Modal styles
+// --------------------------------------------------
+
+.modal {
+  @include transition-timing-function($timing-fuction);
+
+  // Active modal
+  &.active {
+    @include transition-timing-function($timing-fuction);
+  }
+}
+
+//
+// Toggles styles
+// --------------------------------------------------
+.toggle {
+  border: 2px solid #e6e6e6;
+  @include box-shadow(inset 0 0 0 0 #e1e1e1);
+  @include transition-property(box-shadow, border);
+  @include transition-duration(.2s);
+
+  // Sliding handle
+  .toggle-handle {
+    border: 1px solid rgba(0, 0, 0, .2);
+    @include box-shadow(0 3px 3px rgba(0,0,0,.08));
+    @include transition-property(-webkit-transform, border, width);
+  }
+  &:active .toggle-handle {
+    width: 35px;
+  }
+  // Active state for toggle
+  &.active {
+    background-color: transparent;
+    @include box-shadow(inset 0 0 0 13px $positive-color);
+
+    // Handle when the handle and the container is active
+    &:active .toggle-handle,
+    .toggle-handle:active {
+      @include transform(translate3d(10px,0,0) !important); // Evil important tag is used to overwrite js.
+    }
+  }
+}
+
+
 //
 // Push styles
 // --------------------------------------------------

lib/sass/toggles.scss

@@ -7,10 +7,9 @@
   width: 47px;
   height: 30px;
   background-color: #fff;
-  border: 2px solid #e6e6e6;
+  border: 2px solid #ddd;
   border-radius: 20px;
-  @include box-shadow(inset 0 0 0 0 #e1e1e1);
+  @include transition-property(background-color, border);
-  @include transition-property(box-shadow, border);
   @include transition-duration(.2s);
 
   // Sliding handle
@@ -22,30 +21,20 @@
     width: 28px;
     height: 28px;
     background-color: #fff;
-    border: 1px solid rgba(0, 0, 0, .2);
+    border: 1px solid #ddd;
     border-radius: 100px;
-    @include box-shadow(0 3px 3px rgba(0,0,0,.08));
     @include transition-property(-webkit-transform, border, width);
     @include transition-duration(.2s);
   }
 
-  &:active .toggle-handle {
-    width: 35px;
-  }
-
   // Active state for toggle
   &.active {
     border: 2px solid $positive-color;
-    @include box-shadow(inset 0 0 0 13px $positive-color);
+    background-color: $positive-color;
 
     .toggle-handle {
       border-color: $positive-color;
       @include transform(translate3d(17px,0,0)); 
     }
-    // Handle when the handle and the container is active
-    &:active .toggle-handle,
-    .toggle-handle:active {
-      @include transform(translate3d(10px,0,0) !important); // Evil important tag is used to overwrite js.
-    }
   }
 }