Cleaning up the tab bar active states.

dist/ratchet.css

@@ -360,20 +360,23 @@ strong {
   -webkit-box-flex: 1;
   box-flex: 1;
 }
+.tab-item .tab-label,
 .tab-item .icon {
-  width: 24px;
+  color: #929292;
-  height: 24px;
-  margin-top: -2px;
 }
-
+.tab-item .tab-label {
-.tab-label {
   margin-top: -2px;
   font-size: 11px;
   font-weight: 400;
-  color: #929292;
 }
-
+.tab-item .icon {
-.tab-item.active .tab-label {
+  width: 24px;
+  height: 24px;
+  margin-top: -2px;
+}
+.tab-item.active .tab-label,
+.tab-item.active .icon, .tab-item:active .tab-label,
+.tab-item:active .icon {
   color: #007aff;
 }
 

lib/sass/bars.scss

@@ -99,11 +99,9 @@
   text-align: center;
   @include box-flex(1);
 
+  .tab-label,
   .icon {
-    width: 24px;
+    color: $default-color;
-    height: 24px;
-    margin-top: -2px;
-  }
   }
 
   // Label for tab
@@ -111,11 +109,23 @@
     margin-top: -2px;
     font-size: 11px;
     font-weight: 400;
-  color: $default-color;
   }
-.tab-item.active .tab-label {
+  
+  .icon {
+    width: 24px;
+    height: 24px;
+    margin-top: -2px;
+  }
+
+  // Active states for the tab bar
+  &.active,
+  &:active {
+    .tab-label,
+    .icon {
       color: $primary-color;
     }
+  }
+}
 
 // Nav bar in popovers
 // --------------------------------------------------