tiny fix

components.html

@@ -157,8 +157,8 @@ base_url: "../"
     </article>
 
     <article class="component">
-      <h3 class="component-title">Title bar with segmented controller</h3>
-      <p class="component-description">Title bars can also house segmented controllers. Feel free to add accompanying buttons too. The control will automatically layout itself out correctly.</p>
+      <h3 class="component-title">Title bar with segmented control</h3>
+      <p class="component-description">Title bars can also house segmented controls. Feel free to add accompanying buttons too. The control will automatically layout itself out correctly.</p>
 
       <div class="component-example component-example-fullbleed">
         <header class="bar bar-nav">
@@ -265,10 +265,10 @@ base_url: "../"
 
   <article class="component">
       <h3 class="component-title">Standard bars</h3>
-      <p class="component-description">Standard bars are basic fixed elements that can be positioned in 3 places. These can be used to house buttons or segmented controllers (see following examples).</p>
+      <p class="component-description">Standard bars are basic fixed elements that can be positioned in 3 places. These can be used to house buttons or segmented controls (see following examples).</p>
 
       <div class="component-example component-example-fullbleed">
-        <!-- Segmented controller in standard bar fixed to top -->
+        <!-- Segmented control in standard bar fixed to top -->
         <nav class="bar bar-standard">
           <ul class="segmented-control">
             <li class="active">
@@ -290,7 +290,7 @@ base_url: "../"
       </div>
 
 {% highlight html %}
-<!-- Segmented controller in standard bar fixed to top -->
+<!-- Segmented controler in standard bar fixed to top -->
 <nav class="bar bar-standard">
   <ul class="segmented-control">
     <li class="active">
@@ -756,10 +756,10 @@ quis nostrud exercitation ullamco.</p>
 
   </article>
 
-  <!-- Segmented Controller -->
+  <!-- Segmented Control -->
   <article class="component" id="segmentedControllers">
     <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>
+    <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 control to that id.</p>
 
     <div class="component-example">
       <ul class="segmented-control">

dist/ios-theme.css

@@ -261,7 +261,6 @@ textarea,
 }
 
 .segmented-control {
-  color: #929292;
   background-color: transparent;
   border: 1px solid #929292;
 }
@@ -271,6 +270,9 @@ textarea,
   -moz-transition: background-color 0.1s linear;
   transition: background-color 0.1s linear;
 }
+.segmented-control li > a {
+  color: #929292;
+}
 .segmented-control li:active {
   background-color: #ebebeb;
 }

docs-assets/css/docs.css

@@ -1022,7 +1022,6 @@ hr {
   background-image: none;
 }
 .platform-ios .segmented-control {
-  color: #929292;
   background-color: transparent;
   border: 1px solid #929292;
 }
@@ -1032,6 +1031,9 @@ hr {
   -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 {
   background-color: #ebebeb;
 }

lib/sass/theme-ios.scss

@@ -364,19 +364,20 @@ textarea,
 }
 
 
-//
-// Segmented controllers
+// Segmented controls
 // --------------------------------------------------
 
 .segmented-control {
-  color: $default-color;
   background-color: transparent;
   border: 1px solid $default-color;
 
   li {
     border-color: $default-color;
     @include transition(background-color .1s linear);
-    
+
+    > a {
+      color: $default-color;
+    }
     &:active {
       background-color: lighten($default-color, 35%);
     }