From a643b15f5df18bbfc7960c0c6c41b32d927c78bb Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Sat, 8 Feb 2014 23:44:01 -0800
Subject: [PATCH] seg controls

---
 _includes/header.html       |  3 +++
 components.html             |  2 +-
 dist/android-theme.css      | 37 +++++++++++++++++++++----------
 docs-assets/css/docs.css    | 38 ++++++++++++++++++++------------
 lib/sass/theme-android.scss | 44 +++++++++++++++++++++++++++----------
 5 files changed, 85 insertions(+), 39 deletions(-)

diff --git a/_includes/header.html b/_includes/header.html
index 37c35cc..88a210c 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -25,6 +25,9 @@
 <script type="text/javascript" src="//use.typekit.net/asj6ttm.js"></script>
 <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
 
+<!-- Roboto -->
+<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,500' rel='stylesheet' type='text/css'>
+
 <script>
   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', 'UA-36050008-1']);
diff --git a/components.html b/components.html
index a9f0eeb..000dde3 100644
--- a/components.html
+++ b/components.html
@@ -940,7 +940,7 @@ document
 {% highlight html %}
 <header class="bar bar-nav">
   <a href="#myPopover"> 
-    <h1 class="title">Popover title</h3>
+    <h1 class="title">Tap this title</h3>
   </a>
 </header>
 {% endhighlight %}
diff --git a/dist/android-theme.css b/dist/android-theme.css
index 8590638..28c1add 100644
--- a/dist/android-theme.css
+++ b/dist/android-theme.css
@@ -8,7 +8,6 @@
  * =====================================================
  */
 
-@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,500);
 body {
   font-family: "Roboto", sans-serif;
   font-size: 18px;
@@ -66,7 +65,7 @@ a {
   position: static;
   padding-left: 15px;
   font-size: 18px;
-  line-height: 50px;
+  line-height: 49px;
   text-align: left;
 }
 
@@ -113,7 +112,7 @@ a {
 }
 
 .table-view .btn {
-  margin-top: -3px;
+  margin-top: -4px;
 }
 
 select,
@@ -197,7 +196,7 @@ textarea,
   padding: 0;
   color: #33b5e5;
   font-size: 18px;
-  line-height: 50px;
+  line-height: 49px;
 }
 .bar .btn-link:active, .bar .btn-link.active {
   color: #1a9bcb;
@@ -292,7 +291,11 @@ textarea,
   font-size: 18px;
 }
 
+.bar-nav .btn {
+  margin-top: 7px;
+}
 .bar-nav .btn-link {
+  margin-top: 0;
   color: #33b5e5;
 }
 .bar-nav .btn-link:active {
@@ -343,20 +346,30 @@ textarea,
 }
 
 .segmented-control {
-  background-color: transparent;
-  border: 1px solid #33b5e5;
-  border-radius: 3px;
+  background-color: #cecece;
+  border: 0;
+  font-size: 14px;
+  border-radius: 2px;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
 }
 .segmented-control li {
-  border-left: 1px solid #33b5e5;
+  border-left: 1px solid #999;
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 .segmented-control li > a {
-  padding-top: 9px;
+  padding-top: 10px;
   padding-bottom: 10px;
-  color: #33b5e5;
+  color: #222222;
 }
-.segmented-control li.active {
-  background-color: #33b5e5;
+.segmented-control li:first-child {
+  border-left-width: 0;
+}
+.segmented-control li:active, .segmented-control li.active {
+  background-color: #999999;
+}
+
+.bar .segmented-control {
+  top: 7px;
 }
 
 .popover {
diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css
index 827de74..31dbdc1 100644
--- a/docs-assets/css/docs.css
+++ b/docs-assets/css/docs.css
@@ -1184,9 +1184,6 @@ hr {
   background-color: #efeff4;
 }
 
-.platform-android {
-  @import url(http://fonts.googleapis.com/css?family=Roboto:400,700,500);
-}
 .platform-android body {
   font-family: "Roboto", sans-serif;
   font-size: 18px;
@@ -1236,7 +1233,7 @@ hr {
   position: static;
   padding-left: 15px;
   font-size: 18px;
-  line-height: 50px;
+  line-height: 49px;
   text-align: left;
 }
 .platform-android .popover .bar {
@@ -1278,7 +1275,7 @@ hr {
   border-radius: 12px;
 }
 .platform-android .table-view .btn {
-  margin-top: -3px;
+  margin-top: -4px;
 }
 .platform-android select,
 .platform-android textarea,
@@ -1352,7 +1349,7 @@ hr {
   padding: 0;
   color: #33b5e5;
   font-size: 18px;
-  line-height: 50px;
+  line-height: 49px;
 }
 .platform-android .bar .btn-link:active, .platform-android .bar .btn-link.active {
   color: #1a9bcb;
@@ -1440,7 +1437,11 @@ hr {
   padding: 15px 0;
   font-size: 18px;
 }
+.platform-android .bar-nav .btn {
+  margin-top: 7px;
+}
 .platform-android .bar-nav .btn-link {
+  margin-top: 0;
   color: #33b5e5;
 }
 .platform-android .bar-nav .btn-link:active {
@@ -1485,20 +1486,29 @@ hr {
   color: #fff;
 }
 .platform-android .segmented-control {
-  background-color: transparent;
-  border: 1px solid #33b5e5;
-  border-radius: 3px;
+  background-color: #cecece;
+  border: 0;
+  font-size: 14px;
+  border-radius: 2px;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
 }
 .platform-android .segmented-control li {
-  border-left: 1px solid #33b5e5;
+  border-left: 1px solid #999;
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 .platform-android .segmented-control li > a {
-  padding-top: 9px;
+  padding-top: 10px;
   padding-bottom: 10px;
-  color: #33b5e5;
+  color: #222222;
 }
-.platform-android .segmented-control li.active {
-  background-color: #33b5e5;
+.platform-android .segmented-control li:first-child {
+  border-left-width: 0;
+}
+.platform-android .segmented-control li:active, .platform-android .segmented-control li.active {
+  background-color: #999999;
+}
+.platform-android .bar .segmented-control {
+  top: 7px;
 }
 .platform-android .popover {
   top: 100px;
diff --git a/lib/sass/theme-android.scss b/lib/sass/theme-android.scss
index 76b3ed8..f9cf172 100644
--- a/lib/sass/theme-android.scss
+++ b/lib/sass/theme-android.scss
@@ -6,9 +6,6 @@
 //
 // --------------------------------------------------
 
-@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,500);
-
-
 // Variables
 // --------------------------------------------------
 
@@ -110,7 +107,7 @@ a {
   position: static;
   padding-left: 15px;
   font-size: $font-size-default;
-  line-height: $bar-base-height;
+  line-height: 49px;
   text-align: left;
 }
 // `bar-nav` in popovers
@@ -276,7 +273,7 @@ textarea,
     padding: 0;
     color: $primary-color;
     font-size: $font-size-default;
-    line-height: $bar-base-height;
+    line-height: 49px;
 
     &:active,
     &.active {
@@ -402,7 +399,11 @@ textarea,
 // --------------------------------------------------
 
 .bar-nav {
+  .btn {
+    margin-top: 7px;
+  }
   .btn-link {
+    margin-top: 0;
     color: $primary-color;
 
     &:active {
@@ -483,26 +484,45 @@ textarea,
 // --------------------------------------------------
 
 .segmented-control {
-  background-color: transparent;
-  border: 1px solid $primary-color;
-  border-radius: 3px;
+  background-color: #cecece;
+  border: 0;
+  font-size: 14px;
+  border-radius: $border-radius;
+  box-shadow: 0 1px 1px rgba(0,0,0,.25);
 
   li {
-    border-left: 1px solid $primary-color;
+    border-left: 1px solid #999;
+      box-shadow: inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2);
     
     // Link that fills each section
     > a {
-      padding-top: 9px;
+      padding-top: 10px;
       padding-bottom: 10px;
-      color: $primary-color;
+      color: $text-color;
     }
+
+    // Remove border-left and shadow from first section
+    &:first-child {
+      border-left-width: 0;
+    }
+
+    &:active,
     &.active {
-      background-color: $primary-color;
+      background-color: $default-color;
     }
   }
 }
 
 
+// Segmented controller in all bars
+// --------------------------------------------------
+
+// Remove standard segmented bottom margin
+.bar .segmented-control {
+  top: 7px;
+}
+
+
 //
 // Popovers
 // --------------------------------------------------