starting the android theme

Gruntfile.js

@@ -46,7 +46,8 @@ module.exports = function(grunt) {
         files: {
           '<%= meta.distPath %><%= pkg.name %>.css': '<%= meta.srcPath %>sass/ratchet.scss',
           '<%= meta.distPath %><%= pkg.name %>-theme.css': '<%= meta.srcPath %>sass/theme-classic.scss',
-          '<%= meta.distPath %>ios-theme.css': '<%= meta.srcPath %>sass/theme-ios.scss'
+          '<%= meta.distPath %>ios-theme.css': '<%= meta.srcPath %>sass/theme-ios.scss',
+          '<%= meta.distPath %>android-theme.css': '<%= meta.srcPath %>sass/theme-android.scss'
         }
       }
     },

_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

@@ -313,7 +313,15 @@ h6 {
   width: 320px;
   height: 548px;
   overflow: hidden;
-  background-color: #efeff4;
+  background-color: $chrome-color;
+  background: rgb(0,0,0); /* Old browsers */
+  background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(34,34,34,1) 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(34,34,34,1))); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); /* IE10+ */
+  background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#222222',GradientType=0 ); /* IE6-9 */
 }
 
 .iphone .content,

dist/android-theme.css

@@ -0,0 +1,268 @@
+/*
+ * =====================================================
+ * Ratchet v2.0.0
+ * Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton
+ * Licensed under http://www.opensource.org/licenses/MIT
+ *
+ * Designed and built by @connors, @dhg, and @fat.
+ * =====================================================
+ */
+
+.content {
+  background-color: #111111;
+}
+
+[class*="bar-"] {
+  height: 50px;
+  background-color: #111111;
+  border-bottom: 1px solid #565656;
+}
+
+.bar-tab {
+  height: 70px;
+  border-top: 1px solid #565656;
+}
+
+.title {
+  padding-left: 10px;
+  line-height: 50px;
+  color: white;
+  text-align: left;
+}
+
+.popover .bar-nav {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+.table-view .table-view-cell {
+  border-bottom: 0;
+  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;
+}
+.table-view .table-view-divider {
+  border-top: 0;
+  border-bottom: 0;
+}
+
+.popover .table-view {
+  border-radius: 12px;
+}
+
+select,
+textarea,
+input[type="text"],
+input[type=search],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="tel"],
+input[type="color"],
+.input-group {
+  height: 40px;
+  padding: 10px 15px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+input[type=search] {
+  height: 34px;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.1);
+  border: 0;
+  border-radius: 6px;
+}
+
+input[type=search]:focus {
+  text-align: left;
+}
+
+select,
+textarea,
+.input-group {
+  height: auto;
+}
+
+.input-group {
+  padding: 0;
+}
+
+.input-group input {
+  border: 0;
+}
+
+.input-group input:last-child {
+  background-image: none;
+}
+
+.input-row {
+  border-bottom: 0;
+}
+
+.input-row:last-child,
+.input-row label + input {
+  background-image: none;
+}
+
+[class*="button"] {
+  border: 1px solid white;
+  color: white;
+  background-color: transparent;
+  -webkit-transition: background-color, opacity, color;
+  transition: background-color, opacity, color;
+  -webkit-transition-duration: 0.2s;
+  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 {
+  color: #33b5e5;
+  border: 1px solid #33b5e5;
+}
+.button-primary:active, .button-primary.active, .button-primary.button-filled {
+  background-color: #33b5e5;
+}
+
+.button-positive {
+  color: #81c700;
+  border: 1px solid #81c700;
+}
+.button-positive:active, .button-positive.active, .button-positive.button-filled {
+  background-color: #81c700;
+}
+
+.button-negative {
+  color: #f20754;
+  border: 1px solid #f20754;
+}
+.button-negative:active, .button-negative.active, .button-negative.button-filled {
+  background-color: #f20754;
+}
+
+.button-link {
+  color: #33b5e5;
+}
+.button-link:active, .button-link.active {
+  color: #33b5e5;
+}
+
+.button-link:active, .button-link.active {
+  color: #33b5e5;
+  opacity: .3;
+}
+
+.bar-nav [class*="button"] {
+  color: #33b5e5;
+  -webkit-transition: opacity 0.2s linear;
+  transition: opacity 0.2s linear;
+}
+.bar-nav .button-prev:before,
+.bar-nav .button-prev:after,
+.bar-nav .button-next:before,
+.bar-nav .button-next:after {
+  background-color: #33b5e5;
+}
+
+[class*="badge"] {
+  color: white;
+}
+[class*="badge"].badge-filled {
+  color: white;
+}
+
+.badge-primary {
+  color: #33b5e5;
+}
+.badge-primary.badge-filled {
+  color: #fff;
+  background-color: #33b5e5;
+}
+
+.badge-positive {
+  color: #81c700;
+}
+.badge-positive.badge-filled {
+  color: #fff;
+  background-color: #81c700;
+}
+
+.badge-negative {
+  color: #f20754;
+}
+.badge-negative.badge-filled {
+  color: #fff;
+  background-color: #f20754;
+}
+
+.segmented-controller {
+  background-color: transparent;
+  border: 1px solid #33b5e5;
+}
+.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 {
+  color: #33b5e5;
+}
+.segmented-controller li.selected {
+  background-color: #33b5e5;
+}
+
+.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);
+  -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;
+  -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;
+}

dist/ios-theme.css

@@ -8,6 +8,10 @@
  * =====================================================
  */
 
+.content {
+  background-color: #efeff4;
+}
+
 [class*="bar-"] {
   border-bottom: 0;
   background-color: rgba(247, 247, 247, 0.98);

dist/ratchet.css

@@ -253,7 +253,7 @@ strong {
   bottom: 0;
   left: 0;
   overflow: auto;
-  background-color: #efeff4;
+  background-color: #fff;
   -webkit-overflow-scrolling: touch;
 }
 

lib/sass/base.scss

@@ -36,7 +36,7 @@ strong {
   bottom: 0;
   left: 0;
   overflow: auto;
-  background-color: #efeff4;
+  background-color: #fff;
   -webkit-overflow-scrolling: touch;
 }
 

lib/sass/theme-android.scss

@@ -0,0 +1,402 @@
+@import "mixins.scss";
+
+//
+// Android theme
+// The visual and interaction styles for Android
+//
+// --------------------------------------------------
+
+
+// Variables
+// --------------------------------------------------
+
+// Type (Change to Roboto)
+$font-family-default: "Helvetica Neue", Helvetica, sans-serif;
+$font-size-default: 17px;
+$font-weight: 500;
+$font-weight-light: 400;
+$line-height-default: 21px;
+
+// Colors
+// Main theme colors
+$primary-color:  #33b5e5;
+$chrome-color:   #111;
+
+// Action colors
+$default-color:  #fff;
+$positive-color: #81c700;
+$negative-color: #f20754;
+
+// Bars
+$bar-base-height:  50px;
+$bar-tab-height:   70px;
+
+// Borders
+$border-default: 1px solid #565656;
+$border-radius: 0;
+
+
+// Base
+// --------------------------------------------------
+
+.content {
+  background-color: $chrome-color;
+  background: rgb(0,0,0); /* Old browsers */
+  background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(68,68,68,1) 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(68,68,68,1))); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(68,68,68,1) 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(68,68,68,1) 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(68,68,68,1) 100%); /* IE10+ */
+  background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(68,68,68,1) 100%); /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#444444',GradientType=0 ); /* IE6-9 */
+}
+
+// Bars
+// --------------------------------------------------
+
+[class*="bar-"] {
+  height: $bar-base-height;
+  background-color: $chrome-color;
+  border-bottom: $border-default;
+}
+.bar-tab {
+  height: $bar-tab-height;
+  border-top: $border-default;
+}
+// Left aligned text in the .bar-nav 
+.title {
+  padding-left: 10px;
+  line-height: $bar-base-height;
+  color: $default-color;
+  text-align: left;
+}
+
+
+// Nav bar in popovers
+// --------------------------------------------------
+
+.popover .bar-nav {
+  border-bottom: 1px solid rgba(0,0,0,.15);
+}
+
+
+// Table views
+// --------------------------------------------------
+
+.table-view {
+  .table-view-cell {
+    border-bottom: 0;
+    @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-divider {
+    border-top: 0;
+    border-bottom: 0;
+  }
+}
+
+.popover .table-view {
+  border-radius: 12px;
+}
+
+
+// Forms
+// --------------------------------------------------
+
+select,
+textarea,
+input[type="text"],
+input[type=search],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="tel"],
+input[type="color"],
+.input-group {
+  height: 40px;
+  padding: 10px 15px;  border: 1px solid rgba(0, 0, 0, .2);
+}
+
+// Rounded search input
+input[type=search] {
+  height: 34px;
+  text-align: center;
+  background-color: rgba(0,0,0,.1);
+  border: 0;
+  border-radius: 6px;
+}
+input[type=search]:focus {
+  text-align: left;
+}
+select,
+textarea,
+.input-group {
+  height: auto;
+}
+
+// Input groups (cluster multiple inputs together into a single group)
+// -------------------------------------------------------------------
+.input-group {
+  padding: 0;
+}
+.input-group input {
+  border: 0;
+}
+// Remove bottom border on last input to avoid double bottom border
+.input-group input:last-child {
+  background-image: none;
+}
+
+// Input groups with labels
+// --------------------------------------------------
+
+// To use labels with input groups, wrap a label and an input in an .input-row
+.input-row {
+  border-bottom: 0;
+}
+// Remove bottom border on last input-row to avoid double bottom border
+.input-row:last-child,
+.input-row label + input {
+  background-image: none;
+}
+
+
+// Buttons
+// --------------------------------------------------
+
+[class*="button"] {
+  border: 1px solid $default-color;
+  color: $default-color;
+  background-color: transparent;
+  @include transition(background-color, opacity, color);
+  @include transition-duration(.2s);
+  @include transition-timing-function(linear);
+
+  // Active & filled button styles
+  &:active,
+  &.active,
+  &.button-filled {
+    color: #fff;
+    background-color: $default-color;
+  }
+}
+
+
+// Other button types
+// --------------------------------------------------
+
+// Primary button (Default color is blue)
+.button-primary {
+  color: $primary-color;
+  border: 1px solid $primary-color;
+
+  &:active,
+  &.active,
+  &.button-filled {
+    background-color: $primary-color;
+  }
+}
+
+// Positive button (Default color is green)
+.button-positive {
+  color: $positive-color;
+  border: 1px solid $positive-color;
+
+  &:active,
+  &.active,
+  &.button-filled {
+    background-color: $positive-color;
+  }
+}
+
+// Negative button (Default color is red)
+.button-negative {
+  color: $negative-color;
+  border: 1px solid $negative-color;
+
+  &:active,
+  &.active,
+  &.button-filled {
+    background-color: $negative-color;
+  }
+}
+
+// Link button (Buttons that look like links)
+.button-link {
+  color: $primary-color;
+
+  &:active,
+  &.active {
+    color: $primary-color;
+  }
+}
+
+// Link button (Buttons that look like links)
+.button-link {
+  &:active,
+  &.active {
+    color: $primary-color;
+    opacity: .3;
+  }
+}
+
+// Buttons in nav bars
+// --------------------------------------------------
+
+.bar-nav {
+  [class*="button"] {
+    color: $primary-color;
+    @include transition(opacity .2s linear);
+  }
+
+  // Directional buttons in nav bars
+  // --------------------------------------------------
+
+  .button-prev:before,
+  .button-prev:after,
+  .button-next:before,
+  .button-next:after {
+    background-color: $primary-color;
+  }
+}
+
+
+//
+// Badges
+// --------------------------------------------------
+
+[class*="badge"] {
+  color: $default-color;
+
+  &.badge-filled {
+    color: $default-color;
+  }
+}
+
+
+// Badge modifiers
+// --------------------------------------------------
+
+// Main badge
+.badge-primary {
+  color: $primary-color;
+
+  &.badge-filled {
+    color: #fff;
+    background-color: $primary-color;
+  }
+}
+
+// Positive badge
+.badge-positive {
+  color: $positive-color;
+
+  &.badge-filled {
+    color: #fff;
+    background-color: $positive-color;
+  }
+}
+
+// Negative badge
+.badge-negative {
+  color: $negative-color;
+
+  &.badge-filled {
+    color: #fff;
+    background-color: $negative-color;
+  }
+}
+
+
+//
+// Segmented controllers
+// --------------------------------------------------
+
+.segmented-controller {
+  background-color: transparent;
+  border: 1px solid $primary-color;
+
+  li {
+    border-left: 1px solid $primary-color;
+    @include transition(background-color .1s linear);
+    
+    // Link that fills each section
+    > a {
+      color: $primary-color;
+    }
+
+    // Selected segment of controller
+    &.selected {
+      background-color: $primary-color;
+    }
+  }
+}
+
+
+//
+// Popovers
+// --------------------------------------------------
+
+.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;
+  }
+}
+
+
+//
+// Modal styles
+// --------------------------------------------------
+
+//
+// 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);
+    @include box-shadow(0 3px 3px rgba(0,0,0,.08));
+    @include transition-property(-webkit-transform, border, width);
+  }
+  &:active .toggle-handle {
+    width: 35px;
+  }
+  // Active state for toggle
+  &.active {
+    border: 2px solid $positive-color;
+    background-color: transparent;
+    @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;
+    }
+  }
+}

lib/sass/theme-ios.scss

@@ -2,14 +2,15 @@
 
 //
 // iOS theme
-// Provides the visual and interaction style from iOS
+// The visual and interaction styles from iOS
 //
 // --------------------------------------------------
 
 
-// Colors
+// Variables
 // --------------------------------------------------
 
+// Colors
 // Main theme colors
 $primary-color:  #007aff;
 $chrome-color:   rgba(247,247,247,.98);
@@ -19,12 +20,18 @@ $default-color:  #929292;
 $positive-color: #4cd964;
 $negative-color: #dd524d;
 
-
 // iOS style transitions
-// --------------------------------------------------
 $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods
 
 
+// Base
+// --------------------------------------------------
+
+.content {
+  background-color: #efeff4;
+}
+
+
 // Bars
 // --------------------------------------------------