Smoothing out transitions on segmented controllers.

dist/ratchet.css

@@ -859,6 +859,8 @@ input[type="button"] {
   border-left: 1px solid #007aff;
   -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;
@@ -876,8 +878,6 @@ input[type="button"] {
 }
 .segmented-controller li.selected {
   background-color: #007aff;
-  -webkit-transition: background-color 0.2s linear;
-  transition: background-color 0.2s linear;
 }
 .segmented-controller li.selected > a {
   color: #fff;

lib/sass/segmented-controllers.scss

@@ -23,6 +23,7 @@
     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 {
@@ -47,7 +48,6 @@
     // Selected segment of controller
     &.selected {
       background-color: $primary-color;
-      @include transition(background-color .2s linear);
 
       // Set color of links to white
       > a {