fixing up the ios theme plus refineing buttons and badges

_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/android-theme.css"> -->
+<link rel="stylesheet" href="dist/ios-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]-->

dist/ios-theme.css

@@ -129,65 +129,81 @@ textarea,
 [class*="button"] {
   border: 1px solid #929292;
   color: #929292;
-  background-color: transparent;
-  -webkit-transition: background-color, opacity, color;
-  transition: background-color, opacity, color;
+  background-color: rgba(247, 247, 247, 0.98);
+  -webkit-transition: all;
+  transition: all;
   -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 {
+[class*="button"]:active, [class*="button"].active {
   color: #fff;
   background-color: #929292;
 }
 
 .button-primary {
-  color: #007aff;
+  color: #fff;
   border: 1px solid #007aff;
-}
-.button-primary:active, .button-primary.active, .button-primary.button-filled {
   background-color: #007aff;
 }
+.button-primary:active, .button-primary.active {
+  border: 1px solid #0062cc;
+  background-color: #0062cc;
+}
 
 .button-positive {
-  color: #4cd964;
+  color: #fff;
   border: 1px solid #4cd964;
-}
-.button-positive:active, .button-positive.active, .button-positive.button-filled {
   background-color: #4cd964;
 }
+.button-positive:active, .button-positive.active {
+  border: 1px solid #2ac845;
+  background-color: #2ac845;
+}
 
 .button-negative {
-  color: #dd524d;
+  color: #fff;
   border: 1px solid #dd524d;
-}
-.button-negative:active, .button-negative.active, .button-negative.button-filled {
   background-color: #dd524d;
 }
+.button-negative:active, .button-negative.active {
+  border: 1px solid #cf2d28;
+  background-color: #cf2d28;
+}
 
-.button-link {
-  color: #007aff;
+.button-outlined {
+  background-color: transparent;
 }
-.button-link:active, .button-link.active {
+.button-outlined.button-primary {
   color: #007aff;
 }
+.button-outlined.button-positive {
+  color: #4cd964;
+}
+.button-outlined.button-negative {
+  color: #dd524d;
+}
+.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: #007aff;
-  opacity: .3;
+  background-color: transparent;
+  border: none;
+}
+.button-link:active, .button-link.active {
+  color: #0062cc;
+  background-color: transparent;
 }
 
-.bar-nav [class*="button"] {
+.bar-nav .button-link {
   color: #007aff;
-  -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: #007aff;
+.bar-nav .button-link:active {
+  color: #007aff;
+  opacity: .6;
 }
 
 [class*="badge"] {

dist/ratchet.css

@@ -387,8 +387,6 @@ strong {
 }
 
 .popover .bar-nav {
-  padding-right: 15px;
-  padding-left: 15px;
   border-bottom: 1px solid #dddddd;
   border-radius: 12px 12px 0 0;
   -webkit-box-shadow: none;
@@ -462,12 +460,12 @@ strong {
   top: 50%;
   right: 10px;
 }
-.table-view .chevron,
-.table-view [class*="badge"] {
+.table-view .chevron {
   margin-top: -10px;
 }
 .table-view .chevron + [class*="badge"] {
   right: 30px;
+  margin-top: -9px;
 }
 .table-view [class*="button"] {
   left: auto;

index.html

@@ -102,7 +102,7 @@ layout: default
 
 {% highlight html %}
 <header class="bar-nav">
-  <a class="button-primary pull-left">
+  <a class="button-link pull-left">
     Left
   </a>
   <a class="button-link pull-right">

lib/sass/bars.scss

@@ -136,8 +136,6 @@
 // --------------------------------------------------
 
 .popover .bar-nav {
-  padding-right: 15px;
-  padding-left: 15px;
   border-bottom: $border-default;
   border-radius: 12px 12px 0 0;
   @include box-shadow(none);

lib/sass/buttons.scss

@@ -93,7 +93,6 @@
   &.button-negative:active {
     color: #fff;
   }
-
 }
 
 // Link button (Buttons that look like links)

lib/sass/table-views.scss

@@ -94,14 +94,14 @@
   }
 
   // Position chevrons/badges vertically centered on the right in table view items
-  .chevron,
-  [class*="badge"] {
+  .chevron {
     margin-top: -10px; // Half height of chevron
   }
 
   // Push badge over if there's a sibling chevron
   .chevron + [class*="badge"] {
     right: 30px;
+    margin-top: -9px;
   }
 
   // Position buttons vertically centered on the right in table view items

lib/sass/theme-ios.scss

@@ -177,15 +177,14 @@ textarea,
 [class*="button"] {
   border: 1px solid $default-color;
   color: $default-color;
-  background-color: transparent;
-  @include transition(background-color, opacity, color);
+  background-color: $chrome-color;
+  @include transition(all);
   @include transition-duration(.2s);
   @include transition-timing-function(linear);
 
   // Active & filled button styles
   &:active,
-  &.active,
-  &.button-filled {
+  &.active {
     color: #fff;
     background-color: $default-color;
   }
@@ -197,56 +196,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,
-  &.button-filled {
-    background-color: $primary-color;
+  &.active {
+    border: 1px solid darken($primary-color, 10%);
+    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,
-  &.button-filled {
-    background-color: $positive-color;
+  &.active {
+    border: 1px solid darken($positive-color, 10%);
+    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,
-  &.button-filled {
-    background-color: $negative-color;
+  &.active {
+    border: 1px solid darken($negative-color, 10%);
+    background-color: darken($negative-color, 10%);
   }
 }
 
-// Link button (Buttons that look like links)
-.button-link {
-  color: $primary-color;
+// Outlined buttons 
+.button-outlined {
+  background-color: transparent;
 
-  &:active,
-  &.active {
+  &.button-primary {
     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;
-    opacity: .3;
+    color: darken($primary-color, 10%);
+    background-color: transparent;
   }
 }
 
@@ -254,19 +271,13 @@ textarea,
 // --------------------------------------------------
 
 .bar-nav {
-  [class*="button"] {
+  .button-link {
     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;
+    &:active {
+      color: $primary-color;
+      opacity: .6;
+    }
   }
 }