use .active instead of .selected

components.html

@@ -22,7 +22,7 @@ base_url: "../"
 
   <div class="platform-toggle">
     <ul class="segmented-control">
-      <li  class="platform-switch selected" data-platform="">
+      <li  class="platform-switch active" data-platform="">
         <a>Base</a>
       </li>
       <li class="platform-switch" data-platform="platform-ios">
@@ -142,7 +142,7 @@ base_url: "../"
             Right
           </a>
           <ul class="segmented-control">
-            <li class="selected">
+            <li class="active">
               <a>One</a>
             </li>
             <li>
@@ -164,7 +164,7 @@ base_url: "../"
     Right
   </a>
   <ul class="segmented-control">
-    <li class="selected">
+    <li class="active">
       <a>One</a>
     </li>
     <li>
@@ -185,7 +185,7 @@ base_url: "../"
 
       <div class="component-example component-example-fullbleed">
         <nav class="bar-tab">
-          <a class="tab-item selected" href="#">
+          <a class="tab-item active" href="#">
             <span class="icon icon-share"></span>
             <div class="tab-label">Label</div>
           </a>
@@ -210,7 +210,7 @@ base_url: "../"
 
 {% highlight html %}
 <nav class="bar-tab">
-  <a class="tab-item selected" href="#">
+  <a class="tab-item active" href="#">
     <span class="icon icon-share"></span>
     <div class="tab-label">Label</div>
   </a>
@@ -244,7 +244,7 @@ base_url: "../"
         <!-- Segmented controller in standard bar fixed to top -->
         <nav class="bar-standard">
           <ul class="segmented-control">
-            <li class="selected">
+            <li class="active">
               <a>Thing one</a>
             </li>
             <li>
@@ -266,7 +266,7 @@ base_url: "../"
 <!-- Segmented controller in standard bar fixed to top -->
 <nav class="bar-standard">
   <ul class="segmented-control">
-    <li class="selected">
+    <li class="active">
       <a>Thing one</a>
     </li>
     <li>
@@ -627,7 +627,7 @@ base_url: "../"
 
     <div class="component-example">
       <ul class="segmented-control">
-        <li class="selected">
+        <li class="active">
           <a href="#item1mobile">Thing one</a>
         </li>
         <li>
@@ -638,7 +638,7 @@ base_url: "../"
         </li>
       </ul>
       <div class="card">
-        <p id="item1mobile" class="segmented-control-item selected">Item 1</p>
+        <p id="item1mobile" class="segmented-control-item active">Item 1</p>
         <p id="item2mobile" class="segmented-control-item">Item 2</p>
         <p id="item3mobile" class="segmented-control-item">Item 3</p>
       </div>
@@ -646,7 +646,7 @@ base_url: "../"
 
 {% highlight html %}
 <ul class="segmented-control">
-  <li class="selected">
+  <li class="active">
     <a href="#item1mobile">Thing one</a>
   </li>
   <li>
@@ -657,7 +657,7 @@ base_url: "../"
   </li>
 </ul>
 <div class="card">
-  <p id="item1mobile" class="segmented-control-item selected">Item 1</p>
+  <p id="item1mobile" class="segmented-control-item active">Item 1</p>
   <p id="item2mobile" class="segmented-control-item">Item 2</p>
   <p id="item3mobile" class="segmented-control-item">Item 3</p>
 </div>

dist/android-theme.css

@@ -251,7 +251,7 @@ textarea,
   padding-bottom: 10px;
   color: #33b5e5;
 }
-.segmented-control li.selected {
+.segmented-control li.active {
   background-color: #33b5e5;
 }
 

dist/ios-theme.css

@@ -257,10 +257,10 @@ textarea,
 .segmented-control li:active {
   background-color: #ebebeb;
 }
-.segmented-control li.selected {
+.segmented-control li.active {
   background-color: #929292;
 }
-.segmented-control li.selected > a {
+.segmented-control li.active > a {
   color: #fff;
 }
 
@@ -276,10 +276,10 @@ textarea,
 .segmented-control-primary li:active {
   background-color: #b3d7ff;
 }
-.segmented-control-primary li.selected {
+.segmented-control-primary li.active {
   background-color: #007aff;
 }
-.segmented-control-primary li.selected > a {
+.segmented-control-primary li.active > a {
   color: #fff;
 }
 
@@ -295,10 +295,10 @@ textarea,
 .segmented-control-positive li:active {
   background-color: #dff8e3;
 }
-.segmented-control-positive li.selected {
+.segmented-control-positive li.active {
   background-color: #4cd964;
 }
-.segmented-control-positive li.selected > a {
+.segmented-control-positive li.active > a {
   color: #fff;
 }
 
@@ -314,10 +314,10 @@ textarea,
 .segmented-control-negative li:active {
   background-color: #fae4e3;
 }
-.segmented-control-negative li.selected {
+.segmented-control-negative li.active {
   background-color: #dd524d;
 }
-.segmented-control-negative li.selected > a {
+.segmented-control-negative li.active > a {
   color: #fff;
 }
 

dist/ratchet-theme.css

@@ -96,7 +96,7 @@
 .segmented-control li > a {
   color: #1eb0e9;
 }
-.segmented-control li.selected {
+.segmented-control li.active {
   background-color: #1eb0e9;
 }
 
@@ -109,7 +109,7 @@
 .bar-title .segmented-control li > a {
   color: #fff;
 }
-.bar-title .segmented-control li.selected {
+.bar-title .segmented-control li.active {
   background-color: rgba(255, 255, 255, 0.4);
 }
 

dist/ratchet.css

@@ -868,7 +868,7 @@ input[type="button"] {
 .segmented-control li:active {
   background-color: #eee;
 }
-.segmented-control li.selected {
+.segmented-control li.active {
   background-color: #ccc;
 }
 
@@ -884,10 +884,10 @@ input[type="button"] {
 .segmented-control-primary li:active {
   background-color: #cde1f1;
 }
-.segmented-control-primary li.selected {
+.segmented-control-primary li.active {
   background-color: #428bca;
 }
-.segmented-control-primary li.selected > a {
+.segmented-control-primary li.active > a {
   color: #fff;
 }
 
@@ -903,10 +903,10 @@ input[type="button"] {
 .segmented-control-positive li:active {
   background-color: #d8eed8;
 }
-.segmented-control-positive li.selected {
+.segmented-control-positive li.active {
   background-color: #5cb85c;
 }
-.segmented-control-positive li.selected > a {
+.segmented-control-positive li.active > a {
   color: #fff;
 }
 
@@ -922,17 +922,17 @@ input[type="button"] {
 .segmented-control-negative li:active {
   background-color: #f9e2e2;
 }
-.segmented-control-negative li.selected {
+.segmented-control-negative li.active {
   background-color: #d9534f;
 }
-.segmented-control-negative li.selected > a {
+.segmented-control-negative li.active > a {
   color: #fff;
 }
 
 .segmented-control-item {
   display: none;
 }
-.segmented-control-item.selected {
+.segmented-control-item.active {
   display: block;
 }
 

dist/ratchet.js

@@ -545,7 +545,7 @@
     var activeBodies;
     var targetBody;
     var targetTab;
-    var className     = 'selected';
+    var className     = 'active';
     var classSelector = '.' + className;
     var targetAnchor  = getTarget(e.target);
 

docs-assets/css/docs.css

@@ -311,10 +311,10 @@ body {
 .platform-toggle .segmented-control li:active {
   background-color: rgba(0, 209, 254, 0.3);
 }
-.platform-toggle .segmented-control li.selected {
+.platform-toggle .segmented-control li.active {
   background-color: #00d1fe;
 }
-.platform-toggle .segmented-control li.selected a {
+.platform-toggle .segmented-control li.active a {
   color: #fff;
 }
 
@@ -1024,10 +1024,10 @@ hr {
 .platform-ios .segmented-control li:active {
   background-color: #ebebeb;
 }
-.platform-ios .segmented-control li.selected {
+.platform-ios .segmented-control li.active {
   background-color: #929292;
 }
-.platform-ios .segmented-control li.selected > a {
+.platform-ios .segmented-control li.active > a {
   color: #fff;
 }
 .platform-ios .segmented-control-primary {
@@ -1042,10 +1042,10 @@ hr {
 .platform-ios .segmented-control-primary li:active {
   background-color: #b3d7ff;
 }
-.platform-ios .segmented-control-primary li.selected {
+.platform-ios .segmented-control-primary li.active {
   background-color: #007aff;
 }
-.platform-ios .segmented-control-primary li.selected > a {
+.platform-ios .segmented-control-primary li.active > a {
   color: #fff;
 }
 .platform-ios .segmented-control-positive {
@@ -1060,10 +1060,10 @@ hr {
 .platform-ios .segmented-control-positive li:active {
   background-color: #dff8e3;
 }
-.platform-ios .segmented-control-positive li.selected {
+.platform-ios .segmented-control-positive li.active {
   background-color: #4cd964;
 }
-.platform-ios .segmented-control-positive li.selected > a {
+.platform-ios .segmented-control-positive li.active > a {
   color: #fff;
 }
 .platform-ios .segmented-control-negative {
@@ -1078,10 +1078,10 @@ hr {
 .platform-ios .segmented-control-negative li:active {
   background-color: #fae4e3;
 }
-.platform-ios .segmented-control-negative li.selected {
+.platform-ios .segmented-control-negative li.active {
   background-color: #dd524d;
 }
-.platform-ios .segmented-control-negative li.selected > a {
+.platform-ios .segmented-control-negative li.active > a {
   color: #fff;
 }
 .platform-ios .popover {
@@ -1385,7 +1385,7 @@ hr {
   padding-bottom: 10px;
   color: #33b5e5;
 }
-.platform-android .segmented-control li.selected {
+.platform-android .segmented-control li.active {
   background-color: #33b5e5;
 }
 .platform-android .popover {

docs-assets/js/docs.js

@@ -76,9 +76,9 @@ $(function() {
         components.addClass(platform);
       }
 
-      // Deal with selected states
-      $(this).siblings('.selected').removeClass('selected');
-      $(this).addClass('selected');
+      // Deal with active states
+      $(this).siblings('.active').removeClass('active');
+      $(this).addClass('active');
     });
 
     win.on('scroll', calculateScroll);

lib/js/segmented-controllers.js

@@ -17,7 +17,7 @@
     var activeBodies;
     var targetBody;
     var targetTab;
-    var className     = 'selected';
+    var className     = 'active';
     var classSelector = '.' + className;
     var targetAnchor  = getTarget(e.target);
 

lib/sass/docs.scss

@@ -328,7 +328,7 @@ body {
       &:active {
         background-color: rgba(0,209,254,.3);
       }
-      &.selected {
+      &.active {
         background-color: #00d1fe;
 
         a {

lib/sass/segmented-controllers.scss

@@ -39,13 +39,11 @@
       border-left-width: 0;
     }
 
-    // Active state of segmented controller
+    // Active states of segmented controller
     &:active {
       background-color: #eee;
     }
-
-    // Selected segment of controller
-    &.selected {
+    &.active {
       background-color: #ccc;
     }
   }
@@ -67,7 +65,7 @@
     &:active {
       background-color: lighten($primary-color, 35%);
     }
-    &.selected {
+    &.active {
       background-color: $primary-color;
       
       > a {
@@ -90,7 +88,7 @@
     &:active {
       background-color: lighten($positive-color, 35%);
     }
-    &.selected {
+    &.active {
       background-color: $positive-color;
       
       > a {
@@ -113,7 +111,7 @@
     &:active {
       background-color: lighten($negative-color, 35%);
     }
-    &.selected {
+    &.active {
       background-color: $negative-color;
       
       > a {
@@ -126,7 +124,7 @@
 .segmented-control-item {
   display: none;
 
-  &.selected {
+  &.active {
     display: block;
   }
 }

lib/sass/theme-android.scss

@@ -360,9 +360,7 @@ textarea,
       padding-bottom: 10px;
       color: $primary-color;
     }
-
-    // Selected segment of controller
-    &.selected {
+    &.active {
       background-color: $primary-color;
     }
   }

lib/sass/theme-classic.scss

@@ -137,7 +137,7 @@ $negative-color: #e71e1e;
     }
 
     // Active segment of controller
-    &.selected {
+    &.active {
       background-color: $primary-color;
     }
   }
@@ -157,7 +157,7 @@ $negative-color: #e71e1e;
     }
 
     // Active segment of controller
-    &.selected {
+    &.active {
       background-color: rgba(255,255,255,.4);
     }
   }

lib/sass/theme-ios.scss

@@ -357,7 +357,7 @@ textarea,
     &:active {
       background-color: lighten($default-color, 35%);
     }
-    &.selected {
+    &.active {
       background-color: $default-color;
       
       > a {
@@ -383,7 +383,7 @@ textarea,
     &:active {
       background-color: lighten($primary-color, 35%);
     }
-    &.selected {
+    &.active {
       background-color: $primary-color;
       
       > a {
@@ -406,7 +406,7 @@ textarea,
     &:active {
       background-color: lighten($positive-color, 35%);
     }
-    &.selected {
+    &.active {
       background-color: $positive-color;
       
       > a {
@@ -429,7 +429,7 @@ textarea,
     &:active {
       background-color: lighten($negative-color, 35%);
     }
-    &.selected {
+    &.active {
       background-color: $negative-color;
       
       > a {