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,22 +99,32 @@
   text-align: center;
   @include box-flex(1);
 
+  .tab-label,
+  .icon {
+    color: $default-color;
+  }
+
+  // Label for tab
+  .tab-label {
+    margin-top: -2px;
+    font-size: 11px;
+    font-weight: 400;
+  }
+  
   .icon {
     width: 24px;
     height: 24px;
     margin-top: -2px;
   }
-}
 
-// Label for tab
+  // Active states for the tab bar
-.tab-label {
+  &.active,
-  margin-top: -2px;
+  &:active {
-  font-size: 11px;
+    .tab-label,
-  font-weight: 400;
+    .icon {
-  color: $default-color;
+      color: $primary-color;
-}
+    }
-.tab-item.active .tab-label {
+  }
-  color: $primary-color;
 }
 
 // Nav bar in popovers