fixing the themes

dist/android-theme.css

@@ -347,75 +347,61 @@ textarea,
 }
 
 .segmented-control {
+  font-size: 14px;
   background-color: #cecece;
   border: 0;
-  font-size: 14px;
   border-radius: 2px;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
 }
-.segmented-control li {
-  border-left: 1px solid #999;
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
-}
-.segmented-control li > a {
+.segmented-control .control-item {
   padding-top: 10px;
   padding-bottom: 10px;
   color: #222222;
+  border-left: 1px solid #999;
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }
-.segmented-control li:first-child {
+.segmented-control .control-item:first-child {
   border-left-width: 0;
 }
-.segmented-control li:active, .segmented-control li.active {
+.segmented-control .control-item:active, .segmented-control .control-item.active {
   background-color: #999999;
 }
 
 .segmented-control-primary {
   border: 0;
 }
-.segmented-control-primary li {
+.segmented-control-primary .control-item {
+  color: #fff;
   border-color: inherit;
 }
-.segmented-control-primary li > a {
+.segmented-control-primary .control-item:active, .segmented-control-primary .control-item.active {
   color: #fff;
-}
-.segmented-control-primary li:active, .segmented-control-primary li.active {
   background-color: #33b5e5;
 }
-.segmented-control-primary li:active > a, .segmented-control-primary li.active > a {
-  color: #fff;
-}
 
 .segmented-control-positive {
   border: 0;
 }
-.segmented-control-positive li {
+.segmented-control-positive .control-item {
+  color: #fff;
   border-color: inherit;
 }
-.segmented-control-positive li > a {
+.segmented-control-positive .control-item:active, .segmented-control-positive .control-item.active {
   color: #fff;
-}
-.segmented-control-positive li:active, .segmented-control-positive li.active {
   background-color: #99cc00;
 }
-.segmented-control-positive li:active > a, .segmented-control-positive li.active > a {
-  color: #fff;
-}
 
 .segmented-control-negative {
   border: 0;
 }
-.segmented-control-negative li {
+.segmented-control-negative .control-item {
+  color: #fff;
   border-color: inherit;
 }
-.segmented-control-negative li > a {
+.segmented-control-negative .control-item:active, .segmented-control-negative .control-item.active {
   color: #fff;
-}
-.segmented-control-negative li:active, .segmented-control-negative li.active {
   background-color: #ff4444;
 }
-.segmented-control-negative li:active > a, .segmented-control-negative li.active > a {
-  color: #fff;
-}
 
 .popover {
   top: 90px;

dist/ios-theme.css

@@ -264,80 +264,64 @@ textarea,
   background-color: transparent;
   border: 1px solid #929292;
 }
-.segmented-control li {
+.segmented-control .control-item {
+  color: #929292;
   border-color: #929292;
   -webkit-transition: background-color 0.1s linear;
   -moz-transition: background-color 0.1s linear;
   transition: background-color 0.1s linear;
 }
-.segmented-control li > a {
-  color: #929292;
-}
-.segmented-control li:active {
+.segmented-control .control-item:active {
   background-color: #ebebeb;
 }
-.segmented-control li.active {
-  background-color: #929292;
-}
-.segmented-control li.active > a {
+.segmented-control .control-item.active {
   color: #fff;
+  background-color: #929292;
 }
 
 .segmented-control-primary {
   border: 1px solid #007aff;
 }
-.segmented-control-primary li {
-  border-color: inherit;
-}
-.segmented-control-primary li > a {
+.segmented-control-primary .control-item {
   color: #007aff;
+  border-color: inherit;
 }
-.segmented-control-primary li:active {
+.segmented-control-primary .control-item:active {
   background-color: #b3d7ff;
 }
-.segmented-control-primary li.active {
-  background-color: #007aff;
-}
-.segmented-control-primary li.active > a {
+.segmented-control-primary .control-item.active {
   color: #fff;
+  background-color: #007aff;
 }
 
 .segmented-control-positive {
   border: 1px solid #4cd964;
 }
-.segmented-control-positive li {
-  border-color: inherit;
-}
-.segmented-control-positive li > a {
+.segmented-control-positive .control-item {
   color: #4cd964;
+  border-color: inherit;
 }
-.segmented-control-positive li:active {
+.segmented-control-positive .control-item:active {
   background-color: #dff8e3;
 }
-.segmented-control-positive li.active {
-  background-color: #4cd964;
-}
-.segmented-control-positive li.active > a {
+.segmented-control-positive .control-item.active {
   color: #fff;
+  background-color: #4cd964;
 }
 
 .segmented-control-negative {
   border: 1px solid #dd524d;
 }
-.segmented-control-negative li {
-  border-color: inherit;
-}
-.segmented-control-negative li > a {
+.segmented-control-negative .control-item {
   color: #dd524d;
+  border-color: inherit;
 }
-.segmented-control-negative li:active {
+.segmented-control-negative .control-item:active {
   background-color: #fae4e3;
 }
-.segmented-control-negative li.active {
-  background-color: #dd524d;
-}
-.segmented-control-negative li.active > a {
+.segmented-control-negative .control-item.active {
   color: #fff;
+  background-color: #dd524d;
 }
 
 .popover {

dist/ratchet.css

@@ -924,51 +924,45 @@ select {
   border: 1px solid #428bca;
 }
 .segmented-control-primary .control-item {
-  border-color: inherit;
   color: #428bca;
+  border-color: inherit;
 }
 .segmented-control-primary .control-item:active {
   background-color: #cde1f1;
 }
 .segmented-control-primary .control-item.active {
-  background-color: #428bca;
-}
-.segmented-control-primary .control-item.active > a {
   color: #fff;
+  background-color: #428bca;
 }
 
 .segmented-control-positive {
   border: 1px solid #5cb85c;
 }
 .segmented-control-positive .control-item {
-  border-color: inherit;
   color: #5cb85c;
+  border-color: inherit;
 }
 .segmented-control-positive .control-item:active {
   background-color: #d8eed8;
 }
 .segmented-control-positive .control-item.active {
-  background-color: #5cb85c;
-}
-.segmented-control-positive .control-item.active > a {
   color: #fff;
+  background-color: #5cb85c;
 }
 
 .segmented-control-negative {
   border: 1px solid #d9534f;
 }
 .segmented-control-negative .control-item {
-  border-color: inherit;
   color: #d9534f;
+  border-color: inherit;
 }
 .segmented-control-negative .control-item:active {
   background-color: #f9e2e2;
 }
 .segmented-control-negative .control-item.active {
-  background-color: #d9534f;
-}
-.segmented-control-negative .control-item.active > a {
   color: #fff;
+  background-color: #d9534f;
 }
 
 .control-content {

dist/ratchet.js

@@ -528,7 +528,7 @@
 }();
 
 /* ----------------------------------
- * Segmented controls v1.0.0
+ * Segmented controls v1.0.1
  * Licensed under The MIT License
  * http://opensource.org/licenses/MIT
  * ---------------------------------- */

docs-assets/css/docs.css

@@ -1022,77 +1022,61 @@ hr {
   background-color: transparent;
   border: 1px solid #929292;
 }
-.platform-ios .segmented-control li {
+.platform-ios .segmented-control .control-item {
+  color: #929292;
   border-color: #929292;
   -webkit-transition: background-color 0.1s linear;
   -moz-transition: background-color 0.1s linear;
   transition: background-color 0.1s linear;
 }
-.platform-ios .segmented-control li > a {
-  color: #929292;
-}
-.platform-ios .segmented-control li:active {
+.platform-ios .segmented-control .control-item:active {
   background-color: #ebebeb;
 }
-.platform-ios .segmented-control li.active {
-  background-color: #929292;
-}
-.platform-ios .segmented-control li.active > a {
+.platform-ios .segmented-control .control-item.active {
   color: #fff;
+  background-color: #929292;
 }
 .platform-ios .segmented-control-primary {
   border: 1px solid #007aff;
 }
-.platform-ios .segmented-control-primary li {
-  border-color: inherit;
-}
-.platform-ios .segmented-control-primary li > a {
+.platform-ios .segmented-control-primary .control-item {
   color: #007aff;
+  border-color: inherit;
 }
-.platform-ios .segmented-control-primary li:active {
+.platform-ios .segmented-control-primary .control-item:active {
   background-color: #b3d7ff;
 }
-.platform-ios .segmented-control-primary li.active {
-  background-color: #007aff;
-}
-.platform-ios .segmented-control-primary li.active > a {
+.platform-ios .segmented-control-primary .control-item.active {
   color: #fff;
+  background-color: #007aff;
 }
 .platform-ios .segmented-control-positive {
   border: 1px solid #4cd964;
 }
-.platform-ios .segmented-control-positive li {
-  border-color: inherit;
-}
-.platform-ios .segmented-control-positive li > a {
+.platform-ios .segmented-control-positive .control-item {
   color: #4cd964;
+  border-color: inherit;
 }
-.platform-ios .segmented-control-positive li:active {
+.platform-ios .segmented-control-positive .control-item:active {
   background-color: #dff8e3;
 }
-.platform-ios .segmented-control-positive li.active {
-  background-color: #4cd964;
-}
-.platform-ios .segmented-control-positive li.active > a {
+.platform-ios .segmented-control-positive .control-item.active {
   color: #fff;
+  background-color: #4cd964;
 }
 .platform-ios .segmented-control-negative {
   border: 1px solid #dd524d;
 }
-.platform-ios .segmented-control-negative li {
-  border-color: inherit;
-}
-.platform-ios .segmented-control-negative li > a {
+.platform-ios .segmented-control-negative .control-item {
   color: #dd524d;
+  border-color: inherit;
 }
-.platform-ios .segmented-control-negative li:active {
+.platform-ios .segmented-control-negative .control-item:active {
   background-color: #fae4e3;
 }
-.platform-ios .segmented-control-negative li.active {
-  background-color: #dd524d;
-}
-.platform-ios .segmented-control-negative li.active > a {
+.platform-ios .segmented-control-negative .control-item.active {
   color: #fff;
+  background-color: #dd524d;
 }
 .platform-ios .popover {
   border-radius: 12px;
@@ -1505,72 +1489,58 @@ hr {
   border-bottom: 0;
 }
 .platform-android .segmented-control {
+  font-size: 14px;
   background-color: #cecece;
   border: 0;
-  font-size: 14px;
   border-radius: 2px;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
 }
-.platform-android .segmented-control li {
-  border-left: 1px solid #999;
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
-}
-.platform-android .segmented-control li > a {
+.platform-android .segmented-control .control-item {
   padding-top: 10px;
   padding-bottom: 10px;
   color: #222222;
+  border-left: 1px solid #999;
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }
-.platform-android .segmented-control li:first-child {
+.platform-android .segmented-control .control-item:first-child {
   border-left-width: 0;
 }
-.platform-android .segmented-control li:active, .platform-android .segmented-control li.active {
+.platform-android .segmented-control .control-item:active, .platform-android .segmented-control .control-item.active {
   background-color: #999999;
 }
 .platform-android .segmented-control-primary {
   border: 0;
 }
-.platform-android .segmented-control-primary li {
+.platform-android .segmented-control-primary .control-item {
+  color: #fff;
   border-color: inherit;
 }
-.platform-android .segmented-control-primary li > a {
+.platform-android .segmented-control-primary .control-item:active, .platform-android .segmented-control-primary .control-item.active {
   color: #fff;
-}
-.platform-android .segmented-control-primary li:active, .platform-android .segmented-control-primary li.active {
   background-color: #33b5e5;
 }
-.platform-android .segmented-control-primary li:active > a, .platform-android .segmented-control-primary li.active > a {
-  color: #fff;
-}
 .platform-android .segmented-control-positive {
   border: 0;
 }
-.platform-android .segmented-control-positive li {
+.platform-android .segmented-control-positive .control-item {
+  color: #fff;
   border-color: inherit;
 }
-.platform-android .segmented-control-positive li > a {
+.platform-android .segmented-control-positive .control-item:active, .platform-android .segmented-control-positive .control-item.active {
   color: #fff;
-}
-.platform-android .segmented-control-positive li:active, .platform-android .segmented-control-positive li.active {
   background-color: #99cc00;
 }
-.platform-android .segmented-control-positive li:active > a, .platform-android .segmented-control-positive li.active > a {
-  color: #fff;
-}
 .platform-android .segmented-control-negative {
   border: 0;
 }
-.platform-android .segmented-control-negative li {
+.platform-android .segmented-control-negative .control-item {
+  color: #fff;
   border-color: inherit;
 }
-.platform-android .segmented-control-negative li > a {
+.platform-android .segmented-control-negative .control-item:active, .platform-android .segmented-control-negative .control-item.active {
   color: #fff;
-}
-.platform-android .segmented-control-negative li:active, .platform-android .segmented-control-negative li.active {
   background-color: #ff4444;
 }
-.platform-android .segmented-control-negative li:active > a, .platform-android .segmented-control-negative li.active > a {
-  color: #fff;
-}
 .platform-android .popover {
   top: 90px;
   border: 1px solid #9b9b9b;

lib/js/segmented-controllers.js

@@ -1,5 +1,5 @@
 /* ----------------------------------
- * Segmented controls v1.0.0
+ * Segmented controls v1.0.1
  * Licensed under The MIT License
  * http://opensource.org/licenses/MIT
  * ---------------------------------- */

lib/sass/segmented-controls.scss

@@ -51,18 +51,15 @@
   border: 1px solid $primary-color;
 
   .control-item {
-    border-color: inherit;
     color: $primary-color;
+    border-color: inherit;
 
     &:active {
       background-color: lighten($primary-color, 35%);
     }
     &.active {
+      color: #fff;
       background-color: $primary-color;
-      
-      > a {
-        color: #fff;
-      }
     }
   }
 }
@@ -72,18 +69,15 @@
   border: 1px solid $positive-color;
 
   .control-item {
-    border-color: inherit;
     color: $positive-color;
+    border-color: inherit;
 
     &:active {
       background-color: lighten($positive-color, 35%);
     }
     &.active {
+      color: #fff;
       background-color: $positive-color;
-      
-      > a {
-        color: #fff;
-      }
     }
   }
 }
@@ -93,18 +87,15 @@
   border: 1px solid $negative-color;
 
   .control-item {
-    border-color: inherit;
     color: $negative-color;
+    border-color: inherit;
 
     &:active {
       background-color: lighten($negative-color, 35%);
     }
     &.active {
+      color: #fff;
       background-color: $negative-color;
-      
-      > a {
-        color: #fff;
-      }
     }
   }
 }

lib/sass/theme-android.scss

@@ -490,22 +490,18 @@ textarea,
 // --------------------------------------------------
 
 .segmented-control {
+  font-size: 14px;
   background-color: #cecece;
   border: 0;
-  font-size: 14px;
   border-radius: $border-radius;
   box-shadow: 0 1px 1px rgba(0,0,0,.25);
 
-  li {
+  .control-item {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    color: $text-color;
     border-left: 1px solid #999;
-      box-shadow: inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2);
-    
-    // Link that fills each section
-    > a {
-      padding-top: 10px;
-      padding-bottom: 10px;
-      color: $text-color;
-    }
+    box-shadow: inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2);
 
     // Remove border-left and shadow from first section
     &:first-child {
@@ -527,19 +523,14 @@ textarea,
 .segmented-control-primary {
   border: 0;
 
-  li {
+  .control-item {
+    color: #fff;
     border-color: inherit;
-    
-    > a {
-      color: #fff;
-    }
+
     &:active,
     &.active {
+      color: #fff;
       background-color: $primary-color;
-      
-      > a {
-        color: #fff;
-      }
     }
   }
 }
@@ -548,19 +539,14 @@ textarea,
 .segmented-control-positive {
   border: 0;
 
-  li {
+  .control-item {
+    color: #fff;
     border-color: inherit;
     
-    > a {
-      color: #fff;
-    }
     &:active,
     &.active {
+      color: #fff;
       background-color: $positive-color;
-      
-      > a {
-        color: #fff;
-      }
     }
   }
 }
@@ -569,19 +555,14 @@ textarea,
 .segmented-control-negative {
   border: 0;
 
-  li {
+  .control-item {
+    color: #fff;
     border-color: inherit;
     
-    > a {
-      color: #fff;
-    }
     &:active,
     &.active {
+      color: #fff;
       background-color: $negative-color;
-      
-      > a {
-        color: #fff;
-      }
     }
   }
 }

lib/sass/theme-ios.scss

@@ -371,22 +371,17 @@ textarea,
   background-color: transparent;
   border: 1px solid $default-color;
 
-  li {
+  .control-item {
+    color: $default-color;
     border-color: $default-color;
     @include transition(background-color .1s linear);
 
-    > a {
-      color: $default-color;
-    }
     &:active {
       background-color: lighten($default-color, 35%);
     }
     &.active {
+      color: #fff;
       background-color: $default-color;
-      
-      > a {
-        color: #fff;
-      }
     }
   }
 }
@@ -397,21 +392,16 @@ textarea,
 .segmented-control-primary {
   border: 1px solid $primary-color;
 
-  li {
+  .control-item {
+    color: $primary-color;
     border-color: inherit;
     
-    > a {
-      color: $primary-color;
-    }
     &:active {
       background-color: lighten($primary-color, 35%);
     }
     &.active {
+      color: #fff;
       background-color: $primary-color;
-      
-      > a {
-        color: #fff;
-      }
     }
   }
 }
@@ -420,21 +410,16 @@ textarea,
 .segmented-control-positive {
   border: 1px solid $positive-color;
 
-  li {
+  .control-item {
+    color: $positive-color;
     border-color: inherit;
-    
-    > a {
-      color: $positive-color;
-    }
+
     &:active {
       background-color: lighten($positive-color, 35%);
     }
     &.active {
+      color: #fff;
       background-color: $positive-color;
-      
-      > a {
-        color: #fff;
-      }
     }
   }
 }
@@ -443,21 +428,16 @@ textarea,
 .segmented-control-negative {
   border: 1px solid $negative-color;
 
-  li {
+  .control-item {
+    color: $negative-color;
     border-color: inherit;
-    
-    > a {
-      color: $negative-color;
-    }
+
     &:active {
       background-color: lighten($negative-color, 35%);
     }
     &.active {
+      color: #fff;
       background-color: $negative-color;
-      
-      > a {
-        color: #fff;
-      }
     }
   }
 }