coming back to the android theme. super rough right now.

_includes/header.html

@@ -7,7 +7,7 @@
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 <link rel="stylesheet" href="dist/ratchet.css">
-<link rel="stylesheet" href="dist/ios-theme.css">
+<link rel="stylesheet" href="dist/android-theme.css">
 <link rel="stylesheet" href="assets/css/docs.css">
 <link rel="stylesheet" href="assets/css/pygments.css">
 <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

assets/css/docs.css

@@ -314,14 +314,14 @@ h6 {
   height: 548px;
   overflow: hidden;
   background-color: #efeff4;
-  /*background: rgb(0,0,0);
+  background: rgb(0,0,0);
   background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(34,34,34,1) 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(34,34,34,1)));
   background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%);
   background: -o-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%);
   background: -ms-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%);
   background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#222222',GradientType=0 );*/
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#222222',GradientType=0 );
 }
 
 .iphone .content,

dist/android-theme.css

@@ -24,8 +24,8 @@
   background-color: #111111;
   border-bottom: 1px solid #565656;
 }
-[class*="bar-"] [class*="button"] {
+[class*="bar-"].bar-header-secondary {
-  line-height: 50px;
+  top: 51px;
 }
 
 .bar-tab {
@@ -35,6 +35,7 @@
 }
 
 .title {
+  position: static;
   padding-left: 10px;
   line-height: 50px;
   color: white;
@@ -46,10 +47,7 @@
 }
 
 .table-view .table-view-cell {
-  border-bottom: 0;
+  border-bottom: 1px solid #565656;
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
-  background-position: 15px 100%;
-  background-repeat: no-repeat;
 }
 .table-view .table-view-cell:last-child {
   background-image: none;
@@ -125,110 +123,132 @@ textarea,
 }
 
 [class*="button"] {
-  border: 1px solid white;
+  border: 1px solid #565656;
   color: white;
-  background-color: transparent;
+  background-color: #111111;
-  -webkit-transition: background-color, opacity, color;
+  border-radius: 3px;
-  transition: background-color, opacity, color;
+}
-  -webkit-transition-duration: 0.2s;
+[class*="button"]:active, [class*="button"].active {
-  transition-duration: 0.2s;
-  -webkit-transition-timing-function: linear;
-  transition-timing-function: linear;
-}
-[class*="button"]:active, [class*="button"].active, [class*="button"].button-filled {
   color: #fff;
   background-color: white;
 }
 
-.button-primary {
+[class*="bar-"] [class*="button"] {
+  padding-top: 9px;
+  padding-bottom: 9px;
+}
+[class*="bar-"] .button-link {
+  padding: 0;
   color: #33b5e5;
-  border: 1px solid #33b5e5;
+  line-height: 50px;
+}
+[class*="bar-"] .button-link:active, [class*="bar-"] .button-link.active {
+  color: #1a9bcb;
 }
-.button-primary:active, .button-primary.active, .button-primary.button-filled {
+
+.button-primary {
+  color: #fff;
+  border: 1px solid #33b5e5;
   background-color: #33b5e5;
 }
+.button-primary:active, .button-primary.active {
+  border: 1px solid #1a9bcb;
+  background-color: #1a9bcb;
+}
 
 .button-positive {
-  color: #81c700;
+  color: #fff;
   border: 1px solid #81c700;
-}
-.button-positive:active, .button-positive.active, .button-positive.button-filled {
   background-color: #81c700;
 }
+.button-positive:active, .button-positive.active {
+  border: 1px solid #609400;
+  background-color: #609400;
+}
 
 .button-negative {
-  color: #f20754;
+  color: #fff;
   border: 1px solid #f20754;
-}
-.button-negative:active, .button-negative.active, .button-negative.button-filled {
   background-color: #f20754;
 }
+.button-negative:active, .button-negative.active {
+  border: 1px solid #c00643;
+  background-color: #c00643;
+}
 
-.button-link {
+.button-outlined {
-  color: #33b5e5;
+  background-color: transparent;
 }
-.button-link:active, .button-link.active {
+.button-outlined.button-primary {
   color: #33b5e5;
 }
+.button-outlined.button-positive {
+  color: #81c700;
+}
+.button-outlined.button-negative {
+  color: #f20754;
+}
+.button-outlined.button-primary:active, .button-outlined.button-positive:active, .button-outlined.button-negative:active {
+  color: #fff;
+}
 
-.button-link:active, .button-link.active {
+.button-link {
   color: #33b5e5;
-  opacity: .3;
+  background-color: transparent;
+  border: none;
+}
+.button-link:active, .button-link.active {
+  color: #1a9bcb;
+  background-color: transparent;
 }
 
-.bar-nav [class*="button"] {
+.bar-nav .button-link {
   color: #33b5e5;
-  -webkit-transition: opacity 0.2s linear;
-  transition: opacity 0.2s linear;
 }
-.bar-nav .button-prev:before,
+.bar-nav .button-link:active {
-.bar-nav .button-prev:after,
+  color: #33b5e5;
-.bar-nav .button-next:before,
+  opacity: .6;
-.bar-nav .button-next:after {
-  background-color: #33b5e5;
 }
 
-[class*="badge"] {
+[class*="badge"].badge-inverted {
-  color: white;
-}
-[class*="badge"].badge-filled {
   color: white;
 }
 
 .badge-primary {
-  color: #33b5e5;
-}
-.badge-primary.badge-filled {
   color: #fff;
   background-color: #33b5e5;
 }
+.badge-primary.badge-inverted {
+  color: #33b5e5;
+}
 
 .badge-positive {
-  color: #81c700;
-}
-.badge-positive.badge-filled {
   color: #fff;
   background-color: #81c700;
 }
+.badge-positive.badge-inverted {
+  color: #81c700;
+}
 
 .badge-negative {
-  color: #f20754;
-}
-.badge-negative.badge-filled {
   color: #fff;
   background-color: #f20754;
 }
+.badge-negative.badge-inverted {
+  color: #f20754;
+}
 
 .segmented-controller {
   background-color: transparent;
   border: 1px solid #33b5e5;
+  border-radius: 3px;
 }
 .segmented-controller li {
   border-left: 1px solid #33b5e5;
-  -webkit-transition: background-color 0.1s linear;
-  transition: background-color 0.1s linear;
 }
 .segmented-controller li > a {
+  padding-top: 9px;
+  padding-bottom: 10px;
   color: #33b5e5;
 }
 .segmented-controller li.selected {
@@ -237,42 +257,20 @@ textarea,
 
 .popover {
   border-radius: 12px;
-  -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
 }
 .popover:after {
   border-bottom: 15px solid #111111;
 }
 
-.toggle {
-  border: 2px solid #e6e6e6;
-  -webkit-box-shadow: inset 0 0 0 0 #e1e1e1;
-  box-shadow: inset 0 0 0 0 #e1e1e1;
-  -webkit-transition-property: box-shadow, border;
-  transition-property: box-shadow, border;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-}
 .toggle .toggle-handle {
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  border: 1px solid #565656;
-  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
-  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
-  -webkit-transition-property: -webkit-transform, border, width;
-  transition-property: -webkit-transform, border, width;
 }
 .toggle:active .toggle-handle {
   width: 35px;
 }
 .toggle.active {
   border: 2px solid #81c700;
-  background-color: transparent;
+  background-color: #81c700;
-  -webkit-box-shadow: inset 0 0 0 13px #81c700;
-  box-shadow: inset 0 0 0 13px #81c700;
-}
-.toggle.active:active .toggle-handle,
-.toggle.active .toggle-handle:active {
-  -webkit-transform: translate3d(10px, 0, 0) !important;
-  transform: translate3d(10px, 0, 0) !important;
 }
 .toggle.active .toggle-handle {
   border-color: #81c700;

lib/sass/badges.scss

@@ -83,3 +83,8 @@
   right: 0;
   margin-right: 10px;
 }
+
+// Badges in table-views
+// --------------------------------------------------
+
+

lib/sass/theme-android.scss

@@ -51,8 +51,9 @@ $border-radius: 0;
   background-color: $chrome-color;
   border-bottom: $border-default;
 
-  [class*="button"] {
+  // Modifier class to dock any bar below .bar-nav
-    line-height: $bar-base-height;
+  &.bar-header-secondary {
+    top: $bar-base-height + 1;
   }
 }
 .bar-tab {
@@ -62,6 +63,7 @@ $border-radius: 0;
 }
 // Left aligned text in the .bar-nav 
 .title {
+  position: static;
   padding-left: 10px;
   line-height: $bar-base-height;
   color: $default-color;
@@ -82,17 +84,15 @@ $border-radius: 0;
 
 .table-view {
   .table-view-cell {
-    border-bottom: 0;
+    border-bottom: $border-default;
-    @include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset.
   
     // Remove the border from the last table view item
     &:last-child {
       background-image: none;
     }
   }
-  // Table view dividers
-  // --------------------------------------------------
 
+  // Table view dividers
   .table-view-divider {
     border-top: 0;
     border-bottom: 0;
@@ -176,21 +176,34 @@ textarea,
 // --------------------------------------------------
 
 [class*="button"] {
-  border: 1px solid $default-color;
+  border: $border-default;
   color: $default-color;
-  background-color: transparent;
+  background-color: $chrome-color;
-  @include transition(background-color, opacity, color);
+  border-radius: 3px;
-  @include transition-duration(.2s);
-  @include transition-timing-function(linear);
 
   // Active & filled button styles
   &:active,
-  &.active,
+  &.active {
-  &.button-filled {
     color: #fff;
     background-color: $default-color;
   }
 }
+[class*="bar-"] {
+  [class*="button"] {
+    padding-top: 9px;
+    padding-bottom: 9px;
+  }
+  .button-link {
+    padding: 0;
+    color: $primary-color;
+    line-height: $bar-base-height;
+
+    &:active,
+    &.active {
+      color: darken($primary-color, 10%);
+    }
+  }
+}
 
 
 // Other button types
@@ -198,56 +211,74 @@ textarea,
 
 // Primary button (Default color is blue)
 .button-primary {
-  color: $primary-color;
+  color: #fff;
   border: 1px solid $primary-color;
+  background-color: $primary-color;
 
   &:active,
-  &.active,
+  &.active {
-  &.button-filled {
+    border: 1px solid darken($primary-color, 10%);
-    background-color: $primary-color;
+    background-color: darken($primary-color, 10%);
   }
 }
 
 // Positive button (Default color is green)
 .button-positive {
-  color: $positive-color;
+  color: #fff;
   border: 1px solid $positive-color;
+  background-color: $positive-color;
 
   &:active,
-  &.active,
+  &.active {
-  &.button-filled {
+    border: 1px solid darken($positive-color, 10%);
-    background-color: $positive-color;
+    background-color: darken($positive-color, 10%);
   }
 }
 
 // Negative button (Default color is red)
 .button-negative {
-  color: $negative-color;
+  color: #fff;
   border: 1px solid $negative-color;
+  background-color: $negative-color;
 
   &:active,
-  &.active,
+  &.active {
-  &.button-filled {
+    border: 1px solid darken($negative-color, 10%);
-    background-color: $negative-color;
+    background-color: darken($negative-color, 10%);
   }
 }
 
-// Link button (Buttons that look like links)
+// Outlined buttons 
-.button-link {
+.button-outlined {
-  color: $primary-color;
+  background-color: transparent;
 
-  &:active,
+  &.button-primary {
-  &.active {
     color: $primary-color;
   }
+  &.button-positive {
+    color: $positive-color;
+  }
+  &.button-negative {
+    color: $negative-color;
+  }
+  // Active states
+  &.button-primary:active,
+  &.button-positive:active,
+  &.button-negative:active {
+    color: #fff;
+  }
 }
 
 // Link button (Buttons that look like links)
 .button-link {
+  color: $primary-color;
+  background-color: transparent;
+  border: none;
+
   &:active,
   &.active {
-    color: $primary-color;
+    color: darken($primary-color, 10%);
-    opacity: .3;
+    background-color: transparent;
   }
 }
 
@@ -255,19 +286,13 @@ textarea,
 // --------------------------------------------------
 
 .bar-nav {
-  [class*="button"] {
+  .button-link {
     color: $primary-color;
-    @include transition(opacity .2s linear);
-  }
-
-  // Directional buttons in nav bars
-  // --------------------------------------------------
 
-  .button-prev:before,
+    &:active {
-  .button-prev:after,
+      color: $primary-color;
-  .button-next:before,
+      opacity: .6;
-  .button-next:after {
+    }
-    background-color: $primary-color;
   }
 }
 
@@ -277,9 +302,7 @@ textarea,
 // --------------------------------------------------
 
 [class*="badge"] {
-  color: $default-color;
+  &.badge-inverted {
-
-  &.badge-filled {
     color: $default-color;
   }
 }
@@ -290,31 +313,31 @@ textarea,
 
 // Main badge
 .badge-primary {
-  color: $primary-color;
-
-  &.badge-filled {
   color: #fff;
   background-color: $primary-color;
+
+  &.badge-inverted {
+    color: $primary-color;
   }
 }
 
 // Positive badge
 .badge-positive {
-  color: $positive-color;
-
-  &.badge-filled {
   color: #fff;
   background-color: $positive-color;
+
+  &.badge-inverted {
+    color: $positive-color;
   }
 }
 
 // Negative badge
 .badge-negative {
-  color: $negative-color;
-
-  &.badge-filled {
   color: #fff;
   background-color: $negative-color;
+
+  &.badge-inverted {
+    color: $negative-color;
   }
 }
 
@@ -326,13 +349,15 @@ textarea,
 .segmented-controller {
   background-color: transparent;
   border: 1px solid $primary-color;
+  border-radius: 3px;
 
   li {
     border-left: 1px solid $primary-color;
-    @include transition(background-color .1s linear);
     
     // Link that fills each section
     > a {
+      padding-top: 9px;
+      padding-bottom: 10px;
       color: $primary-color;
     }
 
@@ -350,7 +375,6 @@ textarea,
 
 .popover {
   border-radius: 12px;
-  @include transition(-webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out);
 
   &:after {
     border-bottom: 15px solid $chrome-color;
@@ -366,16 +390,9 @@ textarea,
 // Toggles styles
 // --------------------------------------------------
 .toggle {
-  border: 2px solid #e6e6e6;
-  @include box-shadow(inset 0 0 0 0 #e1e1e1);
-  @include transition-property(box-shadow, border);
-  @include transition-duration(.2s);
-
   // Sliding handle
   .toggle-handle {
-    border: 1px solid rgba(0, 0, 0, .2);
+    border: $border-default;
-    @include box-shadow(0 3px 3px rgba(0,0,0,.08));
-    @include transition-property(-webkit-transform, border, width);
   }
   &:active .toggle-handle {
     width: 35px;
@@ -383,14 +400,7 @@ textarea,
   // Active state for toggle
   &.active {
     border: 2px solid $positive-color;
-    background-color: transparent;
+    background-color: $positive-color;
-    @include box-shadow(inset 0 0 0 13px $positive-color);
-
-    // Handle when the handle and the container is active
-    &:active .toggle-handle,
-    .toggle-handle:active {
-      @include transform(translate3d(10px,0,0) !important); // Evil important tag is used to overwrite js.
-    }
 
     .toggle-handle {
       border-color: $positive-color;