resolving header conflicts

_includes/header.html

@@ -11,7 +11,6 @@
 <link rel="stylesheet" href="{{ page.base_url }}dist/ios-theme.css">
 <link rel="stylesheet" href="{{ page.base_url }}docs-assets/css/docs.css">
 <link rel="stylesheet" href="{{ page.base_url }}docs-assets/css/pygments.css">
-
 <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 
 <link rel="apple-touch-icon-precomposed" sizes="114x114" href="{{ page.base_url }}docs-assets/img/apple-touch-icon-114x114.png">

dist/ios-theme.css

@@ -34,6 +34,12 @@
   box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85);
 }
 
+.tab-item.active .tab-label,
+.tab-item.active .icon, .tab-item:active .tab-label,
+.tab-item:active .icon {
+  color: #007aff;
+}
+
 .popover .bar-nav {
   border-bottom: 1px solid rgba(0, 0, 0, 0.15);
 }
@@ -239,20 +245,81 @@ textarea,
 }
 
 .segmented-controller {
+  color: #929292;
   background-color: transparent;
-  border: 1px solid #007aff;
+  border: 1px solid #929292;
 }
 .segmented-controller li {
-  border-left: 1px solid #007aff;
+  border-color: #929292;
   -webkit-transition: background-color 0.1s linear;
   transition: background-color 0.1s linear;
 }
-.segmented-controller li > a {
-  color: #007aff;
+.segmented-controller li:active {
+  background-color: #ebebeb;
 }
 .segmented-controller li.selected {
+  background-color: #929292;
+}
+.segmented-controller li.selected > a {
+  color: #fff;
+}
+
+.segmented-controller-primary {
+  border: 1px solid #007aff;
+}
+.segmented-controller-primary li {
+  border-color: inherit;
+}
+.segmented-controller-primary li > a {
+  color: #007aff;
+}
+.segmented-controller-primary li:active {
+  background-color: #b3d7ff;
+}
+.segmented-controller-primary li.selected {
   background-color: #007aff;
 }
+.segmented-controller-primary li.selected > a {
+  color: #fff;
+}
+
+.segmented-controller-positive {
+  border: 1px solid #4cd964;
+}
+.segmented-controller-positive li {
+  border-color: inherit;
+}
+.segmented-controller-positive li > a {
+  color: #4cd964;
+}
+.segmented-controller-positive li:active {
+  background-color: #dff8e3;
+}
+.segmented-controller-positive li.selected {
+  background-color: #4cd964;
+}
+.segmented-controller-positive li.selected > a {
+  color: #fff;
+}
+
+.segmented-controller-negative {
+  border: 1px solid #dd524d;
+}
+.segmented-controller-negative li {
+  border-color: inherit;
+}
+.segmented-controller-negative li > a {
+  color: #dd524d;
+}
+.segmented-controller-negative li:active {
+  background-color: #fae4e3;
+}
+.segmented-controller-negative li.selected {
+  background-color: #dd524d;
+}
+.segmented-controller-negative li.selected > a {
+  color: #fff;
+}
 
 .popover {
   border-radius: 12px;

dist/ratchet.css

@@ -1070,6 +1070,7 @@ input[type="button"] {
   top: 3px;
   right: 11px;
   color: #999;
+  font-size: 14px;
   text-transform: uppercase;
   content: "Off";
 }

lib/sass/theme-ios.scss

@@ -63,6 +63,16 @@ $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods
   border-top: 0;
   @include box-shadow(0 0 -1px rgba(0,0,0,.85));
 }
+.tab-item {
+  // Active states for the tab bar
+  &.active,
+  &:active {
+    .tab-label,
+    .icon {
+      color: $primary-color;
+    }
+  }
+}
 
 
 // Nav bar in popovers
@@ -336,21 +346,95 @@ textarea,
 // --------------------------------------------------
 
 .segmented-controller {
+  color: $default-color;
   background-color: transparent;
-  border: 1px solid $primary-color;
+  border: 1px solid $default-color;
 
   li {
-    border-left: 1px solid $primary-color;
+    border-color: $default-color;
     @include transition(background-color .1s linear);
     
-    // Link that fills each section
+    &:active {
+      background-color: lighten($default-color, 35%);
+    }
+    &.selected {
+      background-color: $default-color;
+      
       > a {
-      color: $primary-color;
+        color: #fff;
+      }
     }
+  }
+}
 
-    // Selected segment of controller
+// Other segmented controller types
+// --------------------------------------------------
+
+// Primary
+.segmented-controller-primary {
+  border: 1px solid $primary-color;
+
+  li {
+    border-color: inherit;
+    
+    > a {
+      color: $primary-color;
+    }
+    &:active {
+      background-color: lighten($primary-color, 35%);
+    }
     &.selected {
       background-color: $primary-color;
+      
+      > a {
+        color: #fff;
+      }
+    }
+  }
+}
+
+// Positive
+.segmented-controller-positive {
+  border: 1px solid $positive-color;
+
+  li {
+    border-color: inherit;
+    
+    > a {
+      color: $positive-color;
+    }
+    &:active {
+      background-color: lighten($positive-color, 35%);
+    }
+    &.selected {
+      background-color: $positive-color;
+      
+      > a {
+        color: #fff;
+      }
+    }
+  }
+}
+
+// Negative
+.segmented-controller-negative {
+  border: 1px solid $negative-color;
+
+  li {
+    border-color: inherit;
+    
+    > a {
+      color: $negative-color;
+    }
+    &:active {
+      background-color: lighten($negative-color, 35%);
+    }
+    &.selected {
+      background-color: $negative-color;
+      
+      > a {
+        color: #fff;
+      }
     }
   }
 }

lib/sass/toggles.scss

@@ -32,6 +32,7 @@
     top: 3px;
     right: 11px;
     color: #999;
+    font-size: 14px;
     text-transform: uppercase;
     content: "Off";
   }