just use .segmented-control

components.html

@@ -21,7 +21,7 @@ base_url: "../"
   </div>
 
   <div class="platform-toggle">
-    <ul class="segmented-controller">
+    <ul class="segmented-control">
       <li  class="platform-switch selected" data-platform="">
         <a>Base</a>
       </li>
@@ -141,7 +141,7 @@ base_url: "../"
           <a class="btn pull-right">
             Right
           </a>
-          <ul class="segmented-controller">
+          <ul class="segmented-control">
             <li class="selected">
               <a>One</a>
             </li>
@@ -163,7 +163,7 @@ base_url: "../"
   <a class="btn pull-right">
     Right
   </a>
-  <ul class="segmented-controller">
+  <ul class="segmented-control">
     <li class="selected">
       <a>One</a>
     </li>
@@ -243,7 +243,7 @@ base_url: "../"
       <div class="component-example component-example-fullbleed">
         <!-- Segmented controller in standard bar fixed to top -->
         <nav class="bar-standard">
-          <ul class="segmented-controller">
+          <ul class="segmented-control">
             <li class="selected">
               <a>Thing one</a>
             </li>
@@ -265,7 +265,7 @@ base_url: "../"
 {% highlight html %}
 <!-- Segmented controller in standard bar fixed to top -->
 <nav class="bar-standard">
-  <ul class="segmented-controller">
+  <ul class="segmented-control">
     <li class="selected">
       <a>Thing one</a>
     </li>
@@ -622,11 +622,11 @@ base_url: "../"
 
   <!-- Segmented Controller -->
   <article class="component" id="segmentedControllers">
-    <h3 class="component-title">Segmented controller</h3>
-    <p class="component-description">Created with flex-box so button sizes and spacing are consistent. Content sections that are to be swapped in and out by the controller should all be siblings and have the class "segmented-controller-item". Then, just give each content section an id and point the link in the segmented controller to that id.</p>
+    <h3 class="component-title">Segmented control</h3>
+    <p class="component-description">Created with flex-box so button sizes and spacing are consistent. Content sections that are to be swapped in and out by the controller should all be siblings and have the class "segmented-control-item". Then, just give each content section an id and point the link in the segmented controller to that id.</p>
 
     <div class="component-example">
-      <ul class="segmented-controller">
+      <ul class="segmented-control">
         <li class="selected">
           <a href="#item1mobile">Thing one</a>
         </li>
@@ -638,14 +638,14 @@ base_url: "../"
         </li>
       </ul>
       <div class="card">
-        <p id="item1mobile" class="segmented-controller-item selected">Item 1</p>
-        <p id="item2mobile" class="segmented-controller-item">Item 2</p>
-        <p id="item3mobile" class="segmented-controller-item">Item 3</p>
+        <p id="item1mobile" class="segmented-control-item selected">Item 1</p>
+        <p id="item2mobile" class="segmented-control-item">Item 2</p>
+        <p id="item3mobile" class="segmented-control-item">Item 3</p>
       </div>
     </div>
 
 {% highlight html %}
-<ul class="segmented-controller">
+<ul class="segmented-control">
   <li class="selected">
     <a href="#item1mobile">Thing one</a>
   </li>
@@ -657,9 +657,9 @@ base_url: "../"
   </li>
 </ul>
 <div class="card">
-  <p id="item1mobile" class="segmented-controller-item selected">Item 1</p>
-  <p id="item2mobile" class="segmented-controller-item">Item 2</p>
-  <p id="item3mobile" class="segmented-controller-item">Item 3</p>
+  <p id="item1mobile" class="segmented-control-item selected">Item 1</p>
+  <p id="item2mobile" class="segmented-control-item">Item 2</p>
+  <p id="item3mobile" class="segmented-control-item">Item 3</p>
 </div>
 </div>
 {% endhighlight %}

dist/android-theme.css

@@ -238,20 +238,20 @@ textarea,
   color: #f20754;
 }
 
-.segmented-controller {
+.segmented-control {
   background-color: transparent;
   border: 1px solid #33b5e5;
   border-radius: 3px;
 }
-.segmented-controller li {
+.segmented-control li {
   border-left: 1px solid #33b5e5;
 }
-.segmented-controller li > a {
+.segmented-control li > a {
   padding-top: 9px;
   padding-bottom: 10px;
   color: #33b5e5;
 }
-.segmented-controller li.selected {
+.segmented-control li.selected {
   background-color: #33b5e5;
 }
 

dist/ios-theme.css

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

dist/ratchet-theme.css

@@ -87,29 +87,29 @@
   color: #fff;
 }
 
-.segmented-controller {
+.segmented-control {
   border-color: #1eb0e9;
 }
-.segmented-controller li {
+.segmented-control li {
   border-left-color: #1eb0e9;
 }
-.segmented-controller li > a {
+.segmented-control li > a {
   color: #1eb0e9;
 }
-.segmented-controller li.selected {
+.segmented-control li.selected {
   background-color: #1eb0e9;
 }
 
-.bar-title .segmented-controller {
+.bar-title .segmented-control {
   border-color: #fff;
 }
-.bar-title .segmented-controller li {
+.bar-title .segmented-control li {
   border-left-color: #fff;
 }
-.bar-title .segmented-controller li > a {
+.bar-title .segmented-control li > a {
   color: #fff;
 }
-.bar-title .segmented-controller li.selected {
+.bar-title .segmented-control li.selected {
   background-color: rgba(255, 255, 255, 0.4);
 }
 

dist/ratchet.css

@@ -833,7 +833,7 @@ input[type="button"] {
   margin-right: 10px;
 }
 
-.segmented-controller {
+.segmented-control {
   position: relative;
   display: table;
   padding: 0;
@@ -845,7 +845,7 @@ input[type="button"] {
   border: 1px solid #ccc;
   border-radius: 4px;
 }
-.segmented-controller li {
+.segmented-control li {
   display: table-cell;
   overflow: hidden;
   width: 1%;
@@ -853,7 +853,7 @@ input[type="button"] {
   white-space: nowrap;
   border-left: 1px solid #ccc;
 }
-.segmented-controller li > a {
+.segmented-control li > a {
   display: block;
   padding-top: 6px;
   padding-bottom: 7px;
@@ -862,81 +862,81 @@ input[type="button"] {
   color: #333;
   text-overflow: ellipsis;
 }
-.segmented-controller li:first-child {
+.segmented-control li:first-child {
   border-left-width: 0;
 }
-.segmented-controller li:active {
+.segmented-control li:active {
   background-color: #eee;
 }
-.segmented-controller li.selected {
+.segmented-control li.selected {
   background-color: #ccc;
 }
 
-.segmented-controller-primary {
+.segmented-control-primary {
   border: 1px solid #428bca;
 }
-.segmented-controller-primary li {
+.segmented-control-primary li {
   border-color: inherit;
 }
-.segmented-controller-primary li > a {
+.segmented-control-primary li > a {
   color: #428bca;
 }
-.segmented-controller-primary li:active {
+.segmented-control-primary li:active {
   background-color: #cde1f1;
 }
-.segmented-controller-primary li.selected {
+.segmented-control-primary li.selected {
   background-color: #428bca;
 }
-.segmented-controller-primary li.selected > a {
+.segmented-control-primary li.selected > a {
   color: #fff;
 }
 
-.segmented-controller-positive {
+.segmented-control-positive {
   border: 1px solid #5cb85c;
 }
-.segmented-controller-positive li {
+.segmented-control-positive li {
   border-color: inherit;
 }
-.segmented-controller-positive li > a {
+.segmented-control-positive li > a {
   color: #5cb85c;
 }
-.segmented-controller-positive li:active {
+.segmented-control-positive li:active {
   background-color: #d8eed8;
 }
-.segmented-controller-positive li.selected {
+.segmented-control-positive li.selected {
   background-color: #5cb85c;
 }
-.segmented-controller-positive li.selected > a {
+.segmented-control-positive li.selected > a {
   color: #fff;
 }
 
-.segmented-controller-negative {
+.segmented-control-negative {
   border: 1px solid #d9534f;
 }
-.segmented-controller-negative li {
+.segmented-control-negative li {
   border-color: inherit;
 }
-.segmented-controller-negative li > a {
+.segmented-control-negative li > a {
   color: #d9534f;
 }
-.segmented-controller-negative li:active {
+.segmented-control-negative li:active {
   background-color: #f9e2e2;
 }
-.segmented-controller-negative li.selected {
+.segmented-control-negative li.selected {
   background-color: #d9534f;
 }
-.segmented-controller-negative li.selected > a {
+.segmented-control-negative li.selected > a {
   color: #fff;
 }
 
-.segmented-controller-item {
+.segmented-control-item {
   display: none;
 }
-.segmented-controller-item.selected {
+.segmented-control-item.selected {
   display: block;
 }
 
-[class*="bar-"] .segmented-controller {
+[class*="bar-"] .segmented-control {
   top: 8px;
   margin: 0 auto;
 }

dist/ratchet.js

@@ -534,7 +534,7 @@
 
 !function () {
   var getTarget = function (target) {
-    var i, popovers = document.querySelectorAll('.segmented-controller li a');
+    var i, popovers = document.querySelectorAll('.segmented-control li a');
     for (; target && target !== document; target = target.parentNode) {
       for (i = popovers.length; i--;) { if (popovers[i] === target) return target; }
     }

docs-assets/css/docs.css

@@ -295,26 +295,26 @@ body {
   -webkit-transition: padding-top 0.2s linear, padding-bottom 0.2s linear;
   transition: padding-top 0.2s linear, padding-bottom 0.2s linear;
 }
-.platform-toggle .segmented-controller {
+.platform-toggle .segmented-control {
   max-width: 300px;
   margin: 0 auto;
   border-color: #00d1fe;
   background-color: transparent;
 }
-.platform-toggle .segmented-controller li {
+.platform-toggle .segmented-control li {
   cursor: pointer;
   border-color: #00d1fe;
 }
-.platform-toggle .segmented-controller li a {
+.platform-toggle .segmented-control li a {
   color: #00d1fe;
 }
-.platform-toggle .segmented-controller li:active {
+.platform-toggle .segmented-control li:active {
   background-color: rgba(0, 209, 254, 0.3);
 }
-.platform-toggle .segmented-controller li.selected {
+.platform-toggle .segmented-control li.selected {
   background-color: #00d1fe;
 }
-.platform-toggle .segmented-controller li.selected a {
+.platform-toggle .segmented-control li.selected a {
   color: #fff;
 }
 
@@ -392,7 +392,7 @@ body {
   margin: 10px;
 }
 
-#segmentedControllersInDevice .segmented-controller {
+#segmentedControllersInDevice .segmented-control {
   margin-right: 10px;
   margin-left: 10px;
 }
@@ -1011,77 +1011,77 @@ hr {
 .platform-ios .badge-negative.badge-inverted {
   color: #dd524d;
 }
-.platform-ios .segmented-controller {
+.platform-ios .segmented-control {
   color: #929292;
   background-color: transparent;
   border: 1px solid #929292;
 }
-.platform-ios .segmented-controller li {
+.platform-ios .segmented-control li {
   border-color: #929292;
   -webkit-transition: background-color 0.1s linear;
   transition: background-color 0.1s linear;
 }
-.platform-ios .segmented-controller li:active {
+.platform-ios .segmented-control li:active {
   background-color: #ebebeb;
 }
-.platform-ios .segmented-controller li.selected {
+.platform-ios .segmented-control li.selected {
   background-color: #929292;
 }
-.platform-ios .segmented-controller li.selected > a {
+.platform-ios .segmented-control li.selected > a {
   color: #fff;
 }
-.platform-ios .segmented-controller-primary {
+.platform-ios .segmented-control-primary {
   border: 1px solid #007aff;
 }
-.platform-ios .segmented-controller-primary li {
+.platform-ios .segmented-control-primary li {
   border-color: inherit;
 }
-.platform-ios .segmented-controller-primary li > a {
+.platform-ios .segmented-control-primary li > a {
   color: #007aff;
 }
-.platform-ios .segmented-controller-primary li:active {
+.platform-ios .segmented-control-primary li:active {
   background-color: #b3d7ff;
 }
-.platform-ios .segmented-controller-primary li.selected {
+.platform-ios .segmented-control-primary li.selected {
   background-color: #007aff;
 }
-.platform-ios .segmented-controller-primary li.selected > a {
+.platform-ios .segmented-control-primary li.selected > a {
   color: #fff;
 }
-.platform-ios .segmented-controller-positive {
+.platform-ios .segmented-control-positive {
   border: 1px solid #4cd964;
 }
-.platform-ios .segmented-controller-positive li {
+.platform-ios .segmented-control-positive li {
   border-color: inherit;
 }
-.platform-ios .segmented-controller-positive li > a {
+.platform-ios .segmented-control-positive li > a {
   color: #4cd964;
 }
-.platform-ios .segmented-controller-positive li:active {
+.platform-ios .segmented-control-positive li:active {
   background-color: #dff8e3;
 }
-.platform-ios .segmented-controller-positive li.selected {
+.platform-ios .segmented-control-positive li.selected {
   background-color: #4cd964;
 }
-.platform-ios .segmented-controller-positive li.selected > a {
+.platform-ios .segmented-control-positive li.selected > a {
   color: #fff;
 }
-.platform-ios .segmented-controller-negative {
+.platform-ios .segmented-control-negative {
   border: 1px solid #dd524d;
 }
-.platform-ios .segmented-controller-negative li {
+.platform-ios .segmented-control-negative li {
   border-color: inherit;
 }
-.platform-ios .segmented-controller-negative li > a {
+.platform-ios .segmented-control-negative li > a {
   color: #dd524d;
 }
-.platform-ios .segmented-controller-negative li:active {
+.platform-ios .segmented-control-negative li:active {
   background-color: #fae4e3;
 }
-.platform-ios .segmented-controller-negative li.selected {
+.platform-ios .segmented-control-negative li.selected {
   background-color: #dd524d;
 }
-.platform-ios .segmented-controller-negative li.selected > a {
+.platform-ios .segmented-control-negative li.selected > a {
   color: #fff;
 }
 .platform-ios .popover {
@@ -1372,20 +1372,20 @@ hr {
 .platform-android .badge-negative.badge-inverted {
   color: #f20754;
 }
-.platform-android .segmented-controller {
+.platform-android .segmented-control {
   background-color: transparent;
   border: 1px solid #33b5e5;
   border-radius: 3px;
 }
-.platform-android .segmented-controller li {
+.platform-android .segmented-control li {
   border-left: 1px solid #33b5e5;
 }
-.platform-android .segmented-controller li > a {
+.platform-android .segmented-control li > a {
   padding-top: 9px;
   padding-bottom: 10px;
   color: #33b5e5;
 }
-.platform-android .segmented-controller li.selected {
+.platform-android .segmented-control li.selected {
   background-color: #33b5e5;
 }
 .platform-android .popover {

lib/js/segmented-controllers.js

@@ -6,7 +6,7 @@
 
 !function () {
   var getTarget = function (target) {
-    var i, popovers = document.querySelectorAll('.segmented-controller li a');
+    var i, popovers = document.querySelectorAll('.segmented-control li a');
     for (; target && target !== document; target = target.parentNode) {
       for (i = popovers.length; i--;) { if (popovers[i] === target) return target; }
     }

lib/sass/docs.scss

@@ -312,7 +312,7 @@ body {
     @include transition(padding-top .2s linear, padding-bottom .2s linear);
   }
 
-  .segmented-controller {
+  .segmented-control {
     max-width: 300px;
     margin: 0 auto;
     border-color: #00d1fe;
@@ -411,7 +411,7 @@ body {
 
 //Segmented Control
 #segmentedControllersInDevice {
-  .segmented-controller {
+  .segmented-control {
     margin-right: 10px;
     margin-left: 10px;
   }

lib/sass/segmented-controllers.scss

@@ -2,7 +2,7 @@
 // Segmented controllers
 // --------------------------------------------------
 
-.segmented-controller {
+.segmented-control {
   position: relative;
   display: table;
   padding: 0;
@@ -55,7 +55,7 @@
 // --------------------------------------------------
 
 // Primary
-.segmented-controller-primary {
+.segmented-control-primary {
   border: 1px solid $primary-color;
 
   li {
@@ -78,7 +78,7 @@
 }
 
 // Positive
-.segmented-controller-positive {
+.segmented-control-positive {
   border: 1px solid $positive-color;
 
   li {
@@ -101,7 +101,7 @@
 }
 
 // Negative
-.segmented-controller-negative {
+.segmented-control-negative {
   border: 1px solid $negative-color;
 
   li {
@@ -123,7 +123,7 @@
   }
 }
 
-.segmented-controller-item {
+.segmented-control-item {
   display: none;
 
   &.selected {
@@ -136,7 +136,7 @@
 // --------------------------------------------------
 
 // Remove standard segmented bottom margin
-[class*="bar-"] .segmented-controller {
+[class*="bar-"] .segmented-control {
   top: 8px;
   margin: 0 auto;
 }

lib/sass/theme-android.scss

@@ -346,7 +346,7 @@ textarea,
 // Segmented controllers
 // --------------------------------------------------
 
-.segmented-controller {
+.segmented-control {
   background-color: transparent;
   border: 1px solid $primary-color;
   border-radius: 3px;

lib/sass/theme-classic.scss

@@ -125,7 +125,7 @@ $negative-color: #e71e1e;
 // Segmented controllers
 // --------------------------------------------------
 
-.segmented-controller {
+.segmented-control {
   border-color: $primary-color;
 
   li {
@@ -145,7 +145,7 @@ $negative-color: #e71e1e;
 
 // Segmented controller in all bars
 // --------------------------------------------------
-.bar-title .segmented-controller {
+.bar-title .segmented-control {
   border-color: #fff;
 
   li {

lib/sass/theme-ios.scss

@@ -345,7 +345,7 @@ textarea,
 // Segmented controllers
 // --------------------------------------------------
 
-.segmented-controller {
+.segmented-control {
   color: $default-color;
   background-color: transparent;
   border: 1px solid $default-color;
@@ -371,7 +371,7 @@ textarea,
 // --------------------------------------------------
 
 // Primary
-.segmented-controller-primary {
+.segmented-control-primary {
   border: 1px solid $primary-color;
 
   li {
@@ -394,7 +394,7 @@ textarea,
 }
 
 // Positive
-.segmented-controller-positive {
+.segmented-control-positive {
   border: 1px solid $positive-color;
 
   li {
@@ -417,7 +417,7 @@ textarea,
 }
 
 // Negative
-.segmented-controller-negative {
+.segmented-control-negative {
   border: 1px solid $negative-color;
 
   li {