Cleaning up the tab bar active states.

11 years ago · 6634952a9f
2 changed files with 31 additions and 18 deletions
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@ -360,20 +360,23 @@ strong {
  -webkit-box-flex: 1;
  box-flex: 1;
 }
+.tab-item .tab-label,
 .tab-item .icon {
-  width: 24px;
-  height: 24px;
-  margin-top: -2px;
+  color: #929292;
 }
-
-.tab-label {
+.tab-item .tab-label {
  margin-top: -2px;
  font-size: 11px;
  font-weight: 400;
-  color: #929292;
 }
-
-.tab-item.active .tab-label {
+.tab-item .icon {
+  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;
 }

--- a/lib/sass/bars.scss
+++ b/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
-.tab-label {
-  margin-top: -2px;
-  font-size: 11px;
-  font-weight: 400;
-  color: $default-color;
-}
-.tab-item.active .tab-label {
-  color: $primary-color;
+  // Active states for the tab bar
+  &.active,
+  &:active {
+    .tab-label,
+    .icon {
+      color: $primary-color;
+    }
+  }
 }

 // Nav bar in popovers