move the push, segmented controllers, and popover styles over to the ios theme.

dist/ratchet.css

@@ -881,7 +881,7 @@ input[type="button"] {
   font-size: 12px;
   font-weight: 400;
   list-style: none;
-  background-color: transparent;
+  background-color: white;
   border: 1px solid #428bca;
   border-radius: 4px;
   -webkit-box-orient: horizontal;
@@ -894,8 +894,6 @@ input[type="button"] {
   border-left: 1px solid #428bca;
   -webkit-box-flex: 1;
   box-flex: 1;
-  -webkit-transition: background-color 0.1s linear;
-  transition: background-color 0.1s linear;
 }
 .segmented-controller li > a {
   display: block;

lib/sass/popovers.scss

@@ -11,11 +11,10 @@
   width: 280px;
   margin-left: -140px;
   background-color: $chrome-color;
-  border-radius: 12px;
+  border-radius: $border-radius;
   opacity: 0;
   box-shadow: 0 0 15px rgba(0, 0, 0, .1);
   @include transform(translate3d(0, -15px, 0));
-  @include transition(-webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out);
 
   // Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution)
   &:after {

lib/sass/push.scss

@@ -8,34 +8,21 @@
   &.fade {
     left: 0;
     opacity: 0;
-    @include transition(opacity .2s ease-in-out);
 
     &.in {
       opacity: 1;
     }
   }
 
-  // Slide animation iOS7
+  // Slide animation
   &.slide {
     z-index: 2;
     @include transition(-webkit-transform .4s);
     @include transform(translate3d(0, 0, 0));
-    @include transition-timing-function ($timing-fuction);
-
-    // Adding the overlay
-    &.sliding-in,
-    &.right:not([class*="sliding-in"]) {
-      @include animation-name(fadeOverlay);
-      @include animation-duration(.4s);
-    }
-
-    &.right:not([class*="sliding-in"]) {
-      @include animation-direction(reverse);
-    }
 
     &.left {
       z-index: 1;
-      @include transform(translate3d(-20%, 0, 0)); // Creates the parallax effect
+      @include transform(translate3d(100%, 0, 0));
     }
 
     &.right {
@@ -44,9 +31,3 @@
     }
   }
 }
-
-// Overlay animation for the slide transition
-@-webkit-keyframes fadeOverlay {
-  from { @include box-shadow(0 0 10px rgba(0,0,0,0), -320px 0 0 rgba(0,0,0,0)); }
-  to   { @include box-shadow(0 0 10px rgba(0,0,0,.3), -320px 0 0 rgba(0,0,0,.1)); }
-}

lib/sass/segmented-controllers.scss

@@ -11,7 +11,7 @@
   font-size: 12px;
   font-weight: $font-weight-light;
   list-style: none;
-  background-color: transparent;
+  background-color: $chrome-color;
   border: 1px solid $primary-color;
   border-radius: 4px;
   @include box-orient(horizontal);
@@ -23,7 +23,6 @@
     white-space: nowrap;
     border-left: 1px solid $primary-color;
     @include box-flex(1);
-    @include transition(background-color .1s linear);
     
     // Link that fills each section
     > a {

lib/sass/theme-ios

@@ -158,6 +158,7 @@ input[type=search]:focus {
   }
 }
 
+
 //
 // Badges
 // --------------------------------------------------
@@ -169,3 +170,62 @@ input[type=search]:focus {
     color: #fff;
   }
 }
+
+
+//
+// Segmented controllers
+// --------------------------------------------------
+
+.segmented-controller {
+  background-color: transparent;
+
+  li {
+    @include transition(background-color .1s linear);
+  }
+}
+
+
+//
+// Popovers
+// --------------------------------------------------
+
+.popover {
+  border-radius: 12px;
+  @include transition(-webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out);
+}
+
+//
+// Push styles
+// --------------------------------------------------
+.content {
+  
+  // Fade animation 
+  &.fade {
+    @include transition(opacity .2s ease-in-out);
+  }
+  // Slide animation
+  &.slide {
+    @include transition-timing-function ($timing-fuction);
+
+    // Adding the overlay
+    &.sliding-in,
+    &.right:not([class*="sliding-in"]) {
+      @include animation-name(fadeOverlay);
+      @include animation-duration(.4s);
+    }
+
+    &.right:not([class*="sliding-in"]) {
+      @include animation-direction(reverse);
+    }
+
+    &.left {
+      @include transform(translate3d(-20%, 0, 0)); // Creates the parallax effect
+    }
+  }
+}
+
+// Overlay animation for the slide transition
+@-webkit-keyframes fadeOverlay {
+  from { @include box-shadow(0 0 10px rgba(0,0,0,0), -320px 0 0 rgba(0,0,0,0)); }
+  to   { @include box-shadow(0 0 10px rgba(0,0,0,.3), -320px 0 0 rgba(0,0,0,.1)); }
+}