Refactoring the segmented controllers

lib/css/bars.css

@@ -183,40 +183,10 @@
 
 .bar-title .segmented-controller {
   line-height: 18px;
-  background-color: transparent; /* Will remove after the segmented-controller refactor.  */
-  background-image: none; /* Will remove after the segmented-controller refactor.  */
-  border: 1px solid #007aff;
-  border-radius: 3px;
   -webkit-box-flex: 1;
           box-flex: 1;
 }
 
-/* Set color for tab border and highlight */
-.bar-title .segmented-controller li {
-  border-left: 1px solid #007aff;
-}
-
-/* Remove left-hand border from first tab */
-.bar-title .segmented-controller li:first-child {
-  border-left-width: 0;
-}
-
-/* Depressed state (active) */
-.bar-title .segmented-controller li.active {
-  background-color: #007aff;
-  box-shadow: none; /* Will remove after the segmented-controller refactor.  */
-}
-
-/* Set color of links to blue */
-.bar-title .segmented-controller li > a {
-  color: #007aff;
-  text-shadow: none; /* Will remove after the segmented-controller refactor.  */
-}
-/* Set color of links to blue */
-.bar-title .segmented-controller li.active > a {
-  color: #fff;
-}
-
 
 /* Search forms in standard bar
 -------------------------------------------------- */

lib/css/buttons.css

@@ -14,7 +14,7 @@
   cursor: pointer;
   background-color: transparent;
   border: 1px solid rgba(0, 0, 0, .5);
-  border-radius: 3px;
+  border-radius: 4px;
 }
 
 /* Active */

lib/css/chevrons.css

@@ -19,12 +19,12 @@
 
 /* Position and rotate respective 1/2's of the chevron */
 .chevron:before {
-  top: 4px;
+  top: 5px;
   -webkit-transform: rotate(45deg);
           transform: rotate(45deg);
 }
 .chevron:after {
-  top: 8px;
+  top: 9px;
   -webkit-transform: rotate(-45deg);
           transform: rotate(-45deg);
 }

lib/css/segmented-controllers.css

@@ -8,14 +8,10 @@
   overflow: hidden;
   font-size: 12px;
   font-weight: bold;
-  text-shadow: 0 1px rgba(255, 255, 255, .5);
   list-style: none;
-  background-color: #f8f8f8;
-  background-image: -webkit-linear-gradient(top, #f8f8f8 0, #d4d4d4 100%);
-  background-image: linear-gradient(to bottom, #f8f8f8 0, #d4d4d4 100%);
-  border: 1px solid #aaa;
-  border-radius: 3px;
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(255, 255, 255, .8);
+  background-color: transparent;
+  border: 1px solid #007aff;
+  border-radius: 4px;
   -webkit-box-orient: horizontal;
           box-orient: horizontal;
 }
@@ -25,8 +21,7 @@
   overflow: hidden;
   text-align: center;
   white-space: nowrap;
-  border-left: 1px solid #aaa;
-  box-shadow: inset 1px 0 rgba(255, 255, 255, .5);
+  border-left: 1px solid #007aff;
   -webkit-box-flex: 1;
           box-flex: 1;
 }
@@ -37,20 +32,22 @@
   padding: 8px 16px;
   overflow: hidden;
   line-height: 15px;
-  color: #333;
+  color: #007aff;
   text-overflow: ellipsis;
 }
 
 /* Remove border-left and shadow from first section */
 .segmented-controller li:first-child {
   border-left-width: 0;
-  box-shadow: none;
 }
 
 /* Active segment of controller */
 .segmented-controller li.active {
-  background-color: #ccc;
-  box-shadow: inset 0 1px 5px rgba(0, 0, 0, .3);
+  background-color: #007aff;
+}
+/* Set color of links to white */
+.segmented-controller li.active > a {
+  color: #fff;
 }
 
 .segmented-controller-item {