New selected item highlighting and transition

app/css/button.css

@@ -0,0 +1,32 @@
+.state-button {
+    margin-left: -10px;
+    color: #aaa;
+    cursor: pointer;
+    -webkit-transition: all 350ms;
+    transition: all 350ms;
+}
+.state-button.active {
+    color: #000;
+    cursor: default;
+    -webkit-transition: all 350ms;
+    transition: all 350ms;
+}
+.state-button:before {
+    content: '';
+    display: inline-block;
+    width: 6px;
+    height: 1px;
+    background-color: #f39d41;
+    margin: 0 4px 5px 0;
+    border-radius: 5px;
+    opacity: .4;
+    -webkit-transition: all 350ms cubic-bezier(0.86, 0, 0.07, 1);
+    transition: all 350ms cubic-bezier(0.86, 0, 0.07, 1);
+}
+.state-button.active:before {
+    margin-bottom: 2px;
+    height: 6px;
+    opacity: 1;
+    -webkit-transition: all 350ms cubic-bezier(0.86, 0, 0.07, 1);
+    transition: all 350ms cubic-bezier(0.86, 0, 0.07, 1);
+}

app/css/charts.css

@@ -97,7 +97,7 @@
     width: auto;
     float: left;
     font-weight: 600;
-    margin-right: 8px;
+    margin-right: 1px;
 }
 .selector .items {
     display: block;
@@ -107,13 +107,7 @@
 }
 .selector li {
     display: inline-block;
-    color: #aaa;
-    cursor: pointer;
-    margin-right: 8px;
-}
-.selector li.active {
-    color: #000;
-    cursor: default;
+    margin: 0 0 0 5px;
 }
 
 .whatsgoingon {