bits

dist/android-theme.css

@@ -373,6 +373,54 @@ textarea,
   background-color: #999999;
 }
 
+.segmented-control-primary {
+  border: 0;
+}
+.segmented-control-primary li {
+  border-color: inherit;
+}
+.segmented-control-primary li > a {
+  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 {
+  border-color: inherit;
+}
+.segmented-control-positive li > a {
+  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 {
+  border-color: inherit;
+}
+.segmented-control-negative li > a {
+  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;
+}
+
 .bar .segmented-control {
   top: 7px;
 }

dist/ratchet.css

@@ -625,7 +625,7 @@ select {
   border: 0;
 }
 
-.bar input[type=search] {
+.bar input[type="search"] {
   height: 29px;
   margin: 6px 0;
 }
@@ -743,8 +743,8 @@ input[type="button"] {
   font-size: 16px;
   color: #428bca;
   line-height: 44px;
-  background-color: transparent;
   border: none;
+  background-color: transparent;
 }
 .bar-nav .btn.btn-link:active, .bar-nav .btn.btn-link.active {
   color: #3071a9;
@@ -986,10 +986,10 @@ input[type="button"] {
   width: 0;
   height: 0;
   margin-left: -15px;
-  content: '';
   border-right: 15px solid transparent;
   border-bottom: 15px solid white;
   border-left: 15px solid transparent;
+  content: '';
 }
 .popover.visible {
   opacity: 1;

docs-assets/css/docs.css

@@ -1505,6 +1505,51 @@ hr {
 .platform-android .segmented-control li:active, .platform-android .segmented-control li.active {
   background-color: #999999;
 }
+.platform-android .segmented-control-primary {
+  border: 0;
+}
+.platform-android .segmented-control-primary li {
+  border-color: inherit;
+}
+.platform-android .segmented-control-primary li > a {
+  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 {
+  border-color: inherit;
+}
+.platform-android .segmented-control-positive li > a {
+  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 {
+  border-color: inherit;
+}
+.platform-android .segmented-control-negative li > a {
+  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 .bar .segmented-control {
   top: 7px;
 }

lib/sass/badges.scss

@@ -64,7 +64,7 @@
   background-color: rgba(0,0,0,.15);
 }
 
-// Styles for filled badges within filled buttons
+// Styles for filled badges within default buttons
 .btn .badge-inverted,
 .btn:active .badge-inverted {
   background-color: transparent;
@@ -77,14 +77,14 @@
 
 // Position badges within block level buttons
 // Note: These are absolutely positioned so that text of button isn't "pushed" by badge and always
-// stays at true center of button
+// stays at the center of button
 .btn-block .badge {
   position: absolute;
   right: 0;
   margin-right: 10px;
 }
 
-// Ratchicons in table-views
+// Badges in table-views
 .table-view .badge {
   margin-top: 2px;
 

lib/sass/bars.scss

@@ -105,6 +105,7 @@
       font-weight: 400;
     }
     
+    // Tab icon
     .icon {
       width: 24px;
       height: 24px;

lib/sass/buttons.scss

@@ -150,8 +150,8 @@ input[type="button"] {
     font-size: 16px;
     color: $primary-color;
     line-height: $bar-base-height;
-    background-color: transparent;
     border: none;
+    background-color: transparent;
 
     &:active,
     &.active {

lib/sass/forms.scss

@@ -133,7 +133,7 @@ select {
 // --------------------------------------------------
 
 // Position/size search bar within the bar
-.bar input[type=search] {
+.bar input[type="search"] {
   height: 29px;
   margin: 6px 0;
 }

lib/sass/popovers.scss

@@ -24,10 +24,10 @@
     width: 0;
     height: 0;
     margin-left: -15px;
-    content: '';
     border-right: 15px solid transparent;
     border-bottom: 15px solid $chrome-color;
     border-left: 15px solid transparent;
+    content: '';
   }
 
   // Popover animation

lib/sass/theme-android.scss

@@ -526,6 +526,73 @@ textarea,
 }
 
 
+// Other segmented controller types
+// --------------------------------------------------
+
+// Primary
+.segmented-control-primary {
+  border: 0;
+
+  li {
+    border-color: inherit;
+    
+    > a {
+      color: #fff;
+    }
+    &:active,
+    &.active {
+      background-color: $primary-color;
+      
+      > a {
+        color: #fff;
+      }
+    }
+  }
+}
+
+// Positive
+.segmented-control-positive {
+  border: 0;
+
+  li {
+    border-color: inherit;
+    
+    > a {
+      color: #fff;
+    }
+    &:active,
+    &.active {
+      background-color: $positive-color;
+      
+      > a {
+        color: #fff;
+      }
+    }
+  }
+}
+
+// Negative
+.segmented-control-negative {
+  border: 0;
+
+  li {
+    border-color: inherit;
+    
+    > a {
+      color: #fff;
+    }
+    &:active,
+    &.active {
+      background-color: $negative-color;
+      
+      > a {
+        color: #fff;
+      }
+    }
+  }
+}
+
+
 // Segmented controller in all bars
 // --------------------------------------------------