adding segmented controller modifiyer classes. Refactor if entire component coming soon.

dist/ratchet.css

@@ -855,7 +855,7 @@ input[type="button"] {
   font-weight: 400;
   list-style: none;
   background-color: white;
-  border: 1px solid #428bca;
+  border: 1px solid #ccc;
   border-radius: 4px;
 }
 .segmented-controller li {
@@ -864,7 +864,7 @@ input[type="button"] {
   width: 1%;
   text-align: center;
   white-space: nowrap;
-  border-left: 1px solid #428bca;
+  border-left: 1px solid #ccc;
 }
 .segmented-controller li > a {
   display: block;
@@ -872,19 +872,73 @@ input[type="button"] {
   padding-bottom: 7px;
   overflow: hidden;
   line-height: 1;
-  color: #428bca;
+  color: #333;
   text-overflow: ellipsis;
 }
 .segmented-controller li:first-child {
   border-left-width: 0;
 }
 .segmented-controller li:active {
-  background-color: #d5e9ff;
+  background-color: #eee;
 }
 .segmented-controller li.selected {
+  background-color: #ccc;
+}
+
+.segmented-controller-primary {
+  border: 1px solid #428bca;
+}
+.segmented-controller-primary li {
+  border-color: inherit;
+}
+.segmented-controller-primary li > a {
+  color: #428bca;
+}
+.segmented-controller-primary li:active {
+  background-color: #cde1f1;
+}
+.segmented-controller-primary li.selected {
   background-color: #428bca;
 }
-.segmented-controller li.selected > a {
+.segmented-controller-primary li.selected > a {
+  color: #fff;
+}
+
+.segmented-controller-positive {
+  border: 1px solid #5cb85c;
+}
+.segmented-controller-positive li {
+  border-color: inherit;
+}
+.segmented-controller-positive li > a {
+  color: #5cb85c;
+}
+.segmented-controller-positive li:active {
+  background-color: #d8eed8;
+}
+.segmented-controller-positive li.selected {
+  background-color: #5cb85c;
+}
+.segmented-controller-positive li.selected > a {
+  color: #fff;
+}
+
+.segmented-controller-negative {
+  border: 1px solid #d9534f;
+}
+.segmented-controller-negative li {
+  border-color: inherit;
+}
+.segmented-controller-negative li > a {
+  color: #d9534f;
+}
+.segmented-controller-negative li:active {
+  background-color: #f9e2e2;
+}
+.segmented-controller-negative li.selected {
+  background-color: #d9534f;
+}
+.segmented-controller-negative li.selected > a {
   color: #fff;
 }
 

index.html

@@ -5,10 +5,6 @@ layout: default
 <div class="docs-outer-wrapper docs-content">
   <section class="content-section section-informational" id="gettingStarted">
     <div class="docs-inner-wrapper">
-      <!--<div class="section-header">
-        <h2 class="section-title">Getting started</h2>
-        <p class="section-description">Once you've downloaded Ratchet, here's what to do next.</p>
-      </div>-->
 
       <ol class="steps">
         <li class="step">
@@ -155,7 +151,7 @@ layout: default
             <a class="button pull-right">
               Right
             </a>
-            <ul class="segmented-controller">
+            <ul class="segmented-controller segmented-controller-primary">
               <li class="selected">
                 <a>One</a>
               </li>
@@ -165,9 +161,6 @@ layout: default
               <li>
                 <a>Three</a>
               </li>
-              <li>
-                <a>Four</a>
-              </li>
             </ul>
           </header>
         </div>
@@ -180,7 +173,7 @@ layout: default
   <a class="button pull-right">
     Right
   </a>
-  <ul class="segmented-controller">
+  <ul class="segmented-controller segmented-controller-primary">
     <li class="selected">
       <a>One</a>
     </li>

lib/sass/segmented-controllers.scss

@@ -10,7 +10,7 @@
   font-weight: $font-weight-light;
   list-style: none;
   background-color: $chrome-color;
-  border: 1px solid $primary-color;
+  border: 1px solid #ccc;
   border-radius: 4px;
 
   // Section within controller
@@ -20,7 +20,7 @@
     width: 1%;
     text-align: center;
     white-space: nowrap;
-    border-left: 1px solid $primary-color;
+    border-left: 1px solid #ccc;
     
     // Link that fills each section
     > a {
@@ -29,7 +29,7 @@
       padding-bottom: 7px;
       overflow: hidden;
       line-height: 1;
-      color: $primary-color;
+      color: #333;
       text-overflow: ellipsis;
     }
 
@@ -40,14 +40,81 @@
 
     // Active state of segmented controller
     &:active {
-      background-color: rgba(213,233,255,1);
+      background-color: #eee;
     }
 
     // Selected segment of controller
     &.selected {
-      background-color: $primary-color;
+      background-color: #ccc;
+    }
+  }
+}
 
-      // Set color of links to white
+// 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;
       }