Merge branch 'master' into active-states

dist/css/ratchet-theme-android.css

@@ -332,6 +332,33 @@ a:active {
   border-bottom: 2px solid #a9a9a9;
 }
 
+.table-view-cell .navigate-left > .btn,
+.table-view-cell .navigate-left > .badge,
+.table-view-cell .navigate-left > .toggle,
+.table-view-cell .navigate-right > .btn,
+.table-view-cell .navigate-right > .badge,
+.table-view-cell .navigate-right > .toggle,
+.table-view-cell .push-left > .btn,
+.table-view-cell .push-left > .badge,
+.table-view-cell .push-left > .toggle,
+.table-view-cell .push-right > .btn,
+.table-view-cell .push-right > .badge,
+.table-view-cell .push-right > .toggle,
+.table-view-cell > a .navigate-left > .btn,
+.table-view-cell > a .navigate-left > .badge,
+.table-view-cell > a .navigate-left > .toggle,
+.table-view-cell > a .navigate-right > .btn,
+.table-view-cell > a .navigate-right > .badge,
+.table-view-cell > a .navigate-right > .toggle,
+.table-view-cell > a .push-left > .btn,
+.table-view-cell > a .push-left > .badge,
+.table-view-cell > a .push-left > .toggle,
+.table-view-cell > a .push-right > .btn,
+.table-view-cell > a .push-right > .badge,
+.table-view-cell > a .push-right > .toggle {
+  right: 15px;
+}
+
 select,
 textarea,
 input[type="text"],

dist/css/ratchet.css

@@ -896,6 +896,7 @@ select {
 }
 
 .input-row {
+  height: 35px;
   overflow: hidden;
   border-bottom: 1px solid #ddd;
 }
@@ -903,7 +904,7 @@ select {
 .input-row label {
   float: left;
   width: 35%;
-  padding: 10px 15px;
+  padding: 8px 15px;
   font-family: "Helvetica Neue", Helvetica, sans-serif;
   line-height: 1.1;
 }

docs/assets/css/docs.css

@@ -57,8 +57,14 @@ body {
 .docs-header,
 .docs-sub-header {
   position: relative;
-  background-image: linear-gradient(45deg, #0a1855 0%, #da0024 100%);
+  background-color: #0a1855;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0a1855', endColorstr='#da0024', GradientType=0 );
+  background-image:    -moz-linear-gradient(45deg, #0a1855 0%, #da0024 100%);
+  background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #0a1855), color-stop(100%, #da0024));
+  background-image: -webkit-linear-gradient(45deg, #0a1855 0%, #da0024 100%);
+  background-image:      -o-linear-gradient(45deg, #0a1855 0%, #da0024 100%);
+  background-image:     -ms-linear-gradient(45deg, #0a1855 0%, #da0024 100%);
+  background-image:         linear-gradient(45deg, #0a1855 0%, #da0024 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0a1855', endColorstr='#da0024',GradientType=1 );
 }
 
 .docs-header {
@@ -94,9 +100,9 @@ body {
   }
   .docs-header .carbonad {
     left: 50% !important;
-    width: 300px !important;
+    width: 330px !important;
     margin-bottom: 60px !important;
-    margin-left: -150px !important;
+    margin-left: -165px !important;
   }
 
   .docs-sub-header .carbonad {
@@ -207,7 +213,7 @@ body {
 
   .docs-jump-menu {
     position: absolute;
-    left: 20px;
+    left: 15px;
     display: block;
     color: #777;
     cursor: pointer;
@@ -234,7 +240,7 @@ body {
   .docs-component-group {
     position: absolute;
     top: 35px;
-    left: 30px;
+    left: 15px;
     padding-top: 10px;
     padding-bottom: 10px;
     background-color: #fff;
@@ -278,11 +284,6 @@ body {
     background-color: #428bca;
   }
 }
-@media screen and (min-width: 1200px) {
-  .docs-jump-menu {
-    left: 30px;
-  }
-}
 .docs-header-content {
   position: relative;
   padding: 50px 10px;
@@ -296,7 +297,7 @@ body {
 }
 .docs-header-content .btn {
   display: block;
-  padding: 15px 75px 16px;
+  padding: 15px 60px 16px;
   margin-bottom: 0;
   font-size: 18px;
   color: #0a1855;
@@ -1690,6 +1691,32 @@ hr {
   border-top: 0;
   border-bottom: 2px solid #a9a9a9;
 }
+.platform-android .table-view-cell .navigate-left > .btn,
+.platform-android .table-view-cell .navigate-left > .badge,
+.platform-android .table-view-cell .navigate-left > .toggle,
+.platform-android .table-view-cell .navigate-right > .btn,
+.platform-android .table-view-cell .navigate-right > .badge,
+.platform-android .table-view-cell .navigate-right > .toggle,
+.platform-android .table-view-cell .push-left > .btn,
+.platform-android .table-view-cell .push-left > .badge,
+.platform-android .table-view-cell .push-left > .toggle,
+.platform-android .table-view-cell .push-right > .btn,
+.platform-android .table-view-cell .push-right > .badge,
+.platform-android .table-view-cell .push-right > .toggle,
+.platform-android .table-view-cell > a .navigate-left > .btn,
+.platform-android .table-view-cell > a .navigate-left > .badge,
+.platform-android .table-view-cell > a .navigate-left > .toggle,
+.platform-android .table-view-cell > a .navigate-right > .btn,
+.platform-android .table-view-cell > a .navigate-right > .badge,
+.platform-android .table-view-cell > a .navigate-right > .toggle,
+.platform-android .table-view-cell > a .push-left > .btn,
+.platform-android .table-view-cell > a .push-left > .badge,
+.platform-android .table-view-cell > a .push-left > .toggle,
+.platform-android .table-view-cell > a .push-right > .btn,
+.platform-android .table-view-cell > a .push-right > .badge,
+.platform-android .table-view-cell > a .push-right > .toggle {
+  right: 15px;
+}
 .platform-android select,
 .platform-android textarea,
 .platform-android input[type="text"],

docs/dist/css/ratchet-theme-android.css

@@ -332,6 +332,33 @@ a:active {
   border-bottom: 2px solid #a9a9a9;
 }
 
+.table-view-cell .navigate-left > .btn,
+.table-view-cell .navigate-left > .badge,
+.table-view-cell .navigate-left > .toggle,
+.table-view-cell .navigate-right > .btn,
+.table-view-cell .navigate-right > .badge,
+.table-view-cell .navigate-right > .toggle,
+.table-view-cell .push-left > .btn,
+.table-view-cell .push-left > .badge,
+.table-view-cell .push-left > .toggle,
+.table-view-cell .push-right > .btn,
+.table-view-cell .push-right > .badge,
+.table-view-cell .push-right > .toggle,
+.table-view-cell > a .navigate-left > .btn,
+.table-view-cell > a .navigate-left > .badge,
+.table-view-cell > a .navigate-left > .toggle,
+.table-view-cell > a .navigate-right > .btn,
+.table-view-cell > a .navigate-right > .badge,
+.table-view-cell > a .navigate-right > .toggle,
+.table-view-cell > a .push-left > .btn,
+.table-view-cell > a .push-left > .badge,
+.table-view-cell > a .push-left > .toggle,
+.table-view-cell > a .push-right > .btn,
+.table-view-cell > a .push-right > .badge,
+.table-view-cell > a .push-right > .toggle {
+  right: 15px;
+}
+
 select,
 textarea,
 input[type="text"],

docs/dist/css/ratchet.css

@@ -896,6 +896,7 @@ select {
 }
 
 .input-row {
+  height: 35px;
   overflow: hidden;
   border-bottom: 1px solid #ddd;
 }
@@ -903,7 +904,7 @@ select {
 .input-row label {
   float: left;
   width: 35%;
-  padding: 10px 15px;
+  padding: 8px 15px;
   font-family: "Helvetica Neue", Helvetica, sans-serif;
   line-height: 1.1;
 }

sass/docs.scss

@@ -63,8 +63,14 @@ body {
 .docs-header,
 .docs-sub-header {
   position: relative;
-  background-image: linear-gradient(45deg, #0a1855 0%,#da0024 100%);
+  background-color: #0a1855;
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a1855', endColorstr='#da0024', GradientType=0 );
+  background-image:    -moz-linear-gradient(45deg,  #0a1855 0%, #da0024 100%);
+  background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#0a1855), color-stop(100%,#da0024));
+  background-image: -webkit-linear-gradient(45deg,  #0a1855 0%,#da0024 100%);
+  background-image:      -o-linear-gradient(45deg,  #0a1855 0%,#da0024 100%);
+  background-image:     -ms-linear-gradient(45deg,  #0a1855 0%,#da0024 100%);
+  background-image:         linear-gradient(45deg,  #0a1855 0%,#da0024 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a1855', endColorstr='#da0024',GradientType=1 );
 }
 .docs-header {
   height: 100vh;
@@ -97,8 +103,8 @@ body {
     // Ads on the homepage
     .carbonad {
       left: 50% !important;
-      width: 300px !important;
+      width: 330px !important;
-      margin-left: -150px !important;
+      margin-left: -165px !important;
       margin-bottom: 60px !important;
     }
   }
@@ -210,7 +216,7 @@ body {
   // Component jump menu
   .docs-jump-menu {
     position: absolute;
-    left: 20px;
+    left: 15px;
     display: block;
     color: #777;
     cursor: pointer;
@@ -235,7 +241,7 @@ body {
   .docs-component-group {
     position: absolute;
     top: 35px;
-    left: 30px;
+    left: 15px;
     padding-top: 10px;
     padding-bottom: 10px;
     background-color: #fff;
@@ -281,12 +287,6 @@ body {
     }
   }
 }
-// Account for extra margin on large screens
-@media screen and (min-width: 1200px) {
-  .docs-jump-menu {
-    left: 30px;
-  }
-}
 
 // Main homepage header content
 // "Build mobile apps using simple..."
@@ -299,7 +299,7 @@ body {
 
   .btn {
     display: block;
-    padding: 15px 75px 16px;
+    padding: 15px 60px 16px; // Creates a button that's 330px wide.
     font-size: 18px;
     margin-bottom: 0;
     color: #0a1855;

sass/forms.scss

@@ -92,6 +92,7 @@ select {
 // To use labels with input groups, wrap a label and an input in an .input-row
 .input-row {
   overflow: hidden;
+  height: 35px; // Matches the height of inputs.
   border-bottom: $border-default;
 }
 
@@ -99,7 +100,7 @@ select {
 .input-row label {
   float: left;
   width: 35%;
-  padding: 10px 15px;
+  padding: 8px 15px;
   font-family: $font-family-default;
   line-height: 1.1; // Put the text on the baseline.
 }

sass/theme-android.scss

@@ -456,6 +456,23 @@ a {
   }
 }
 
+// Table-views with buttons, badges and toggles
+// --------------------------------------------------
+.table-view-cell,
+.table-view-cell > a {
+  // Android has no cheverons so don't bump the buttons, badges, or toggles over.
+  .navigate-left,
+  .navigate-right,
+  .push-left,
+  .push-right {
+    > .btn,
+    > .badge,
+    > .toggle {
+      right: 15px;
+    }
+  }
+}
+
 // Forms
 // --------------------------------------------------