moving over buttons

dist/ratchet.css

@@ -500,7 +500,7 @@ strong {
   margin-left: 0;
   overflow: auto;
   background-color: #fff;
-  border-radius: 12px;
+  border-radius: 6px;
   -webkit-overflow-scrolling: touch;
 }
 
@@ -535,7 +535,7 @@ input[type="color"],
   margin-bottom: 10px;
   line-height: 21px;
   background-color: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  border: 1px solid #dddddd;
   border-radius: 3px;
   outline: none;
   -webkit-appearance: none;
@@ -578,6 +578,9 @@ select {
   margin-bottom: 0;
   background-color: transparent;
   border-bottom: 1px solid #dddddd;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
   border-radius: 0;
   -webkit-box-shadow: none;
   box-shadow: none;
@@ -625,24 +628,20 @@ select {
   font-size: 12px;
   font-weight: 400;
   line-height: 1.15;
-  color: white;
+  color: #333;
   text-align: center;
   vertical-align: top;
   cursor: pointer;
-  background-color: transparent;
+  background-color: white;
-  border: 1px solid white;
+  border: 1px solid #dddddd;
-  border-radius: 4px;
+  border-radius: 6px;
-  -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 {
+[class*="button"].button-filled {
-  color: #fff;
   background-color: white;
 }
+[class*="button"]:active, [class*="button"].active {
+  background-color: #ebebeb;
+}
 [class*="button"]:disabled, [class*="button"].disabled, [class*="button"].button-filled:active {
   opacity: .6;
 }
@@ -652,6 +651,7 @@ select {
   border: 1px solid #428bca;
 }
 .button-primary:active, .button-primary.active, .button-primary.button-filled {
+  color: #fff;
   background-color: #428bca;
 }
 
@@ -660,6 +660,7 @@ select {
   border: 1px solid #5cb85c;
 }
 .button-positive:active, .button-positive.active, .button-positive.button-filled {
+  color: #fff;
   background-color: #5cb85c;
 }
 
@@ -668,6 +669,7 @@ select {
   border: 1px solid #d9534f;
 }
 .button-negative:active, .button-negative.active, .button-negative.button-filled {
+  color: #fff;
   background-color: #d9534f;
 }
 
@@ -676,8 +678,7 @@ select {
   border: none;
 }
 .button-link:active, .button-link.active {
-  color: #428bca;
+  color: #3071a9;
-  opacity: .3;
 }
 .button-link.button-filled {
   background-color: transparent;
@@ -699,6 +700,7 @@ select {
   font-weight: 400;
   line-height: 44px;
   color: #428bca;
+  background-color: transparent;
   border: 0;
   -webkit-transition: opacity 0.2s linear;
   transition: opacity 0.2s linear;
@@ -818,14 +820,13 @@ input[type="button"] {
 
 [class*="badge"] {
   display: inline-block;
-  color: white;
+  color: #333;
 }
 [class*="badge"].badge-filled {
   padding: 2px 9px;
-  color: #fff;
   font-size: 13px;
   line-height: 1;
-  background-color: white;
+  background-color: rgba(0, 0, 0, 0.15);
   border-radius: 100px;
 }
 
@@ -833,6 +834,7 @@ input[type="button"] {
   color: #428bca;
 }
 .badge-primary.badge-filled {
+  color: #fff;
   background-color: #428bca;
 }
 
@@ -840,6 +842,7 @@ input[type="button"] {
   color: #5cb85c;
 }
 .badge-positive.badge-filled {
+  color: #fff;
   background-color: #5cb85c;
 }
 
@@ -847,6 +850,7 @@ input[type="button"] {
   color: #d9534f;
 }
 .badge-negative.badge-filled {
+  color: #fff;
   background-color: #d9534f;
 }
 
@@ -859,7 +863,7 @@ input[type="button"] {
 
 .button-filled .badge-filled,
 [class*="button"]:active .badge-filled {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(0, 0, 0, 0.15);
 }
 
 .button-block [class*="badge"] {

lib/sass/badges.scss

@@ -4,14 +4,13 @@
 
 [class*="badge"] {
   display: inline-block;
-  color: $default-color;
+  color: #333;
 
   &.badge-filled {
     padding: 2px 9px;
-    color: #fff;
     font-size: 13px;
     line-height: 1;
-    background-color: $default-color;
+    background-color: rgba(0,0,0,.15);
     border-radius: 100px;
   }
 }
@@ -25,6 +24,7 @@
   color: $primary-color;
 
   &.badge-filled {
+    color: #fff;
     background-color: $primary-color;
   }
 }
@@ -34,6 +34,7 @@
   color: $positive-color;
 
   &.badge-filled {
+    color: #fff;
     background-color: $positive-color;
   }
 }
@@ -43,6 +44,7 @@
   color: $negative-color;
 
   &.badge-filled {
+    color: #fff;
     background-color: $negative-color;
   }
 }
@@ -62,7 +64,7 @@
 // Styles for filled badges within filled buttons
 .button-filled .badge-filled,
 [class*="button"]:active .badge-filled {
-  background-color: rgba(0,0,0,.2);
+  background-color: rgba(0,0,0,.15);
 }
 
 // Position badges within block level buttons

lib/sass/buttons.scss

@@ -10,23 +10,22 @@
   font-size: $button-font-size;
   font-weight: $font-weight-light;
   line-height: 1.15; // Center button text on the phone.
-  color: $default-color;
+  color: #333;
   text-align: center;
   vertical-align: top;
   cursor: pointer;
-  background-color: transparent;
+  background-color: $chrome-color;
-  border: 1px solid $default-color;
+  border: $border-default;
-  border-radius: 4px;
+  border-radius: $border-radius;
-  @include transition(background-color, opacity, color);
+
-  @include transition-duration(.2s);
+  &.button-filled {
-  @include transition-timing-function(linear);
+    background-color: $chrome-color;
+  }
 
   // Active & filled button styles
   &:active,
-  &.active,
+  &.active {
-  &.button-filled {
+    background-color: #ebebeb;
-    color: #fff;
-    background-color: $default-color;
   }
 
   // Disabled styles & filled button active styles
@@ -49,6 +48,7 @@
   &:active,
   &.active,
   &.button-filled {
+    color: #fff;
     background-color: $primary-color;
   }
 }
@@ -61,6 +61,7 @@
   &:active,
   &.active,
   &.button-filled {
+    color: #fff;
     background-color: $positive-color;
   }
 }
@@ -73,6 +74,7 @@
   &:active,
   &.active,
   &.button-filled {
+    color: #fff;
     background-color: $negative-color;
   }
 }
@@ -84,8 +86,7 @@
 
   &:active,
   &.active {
-    color: $primary-color;
+    color: darken($primary-color, 10%);
-    opacity: .3;
   }
   &.button-filled {
     background-color: transparent;
@@ -115,6 +116,7 @@
     font-weight: $font-weight-light;
     line-height: $bar-base-height;
     color: $primary-color;
+    background-color: transparent;
     border: 0;
     @include transition(opacity .2s linear);
     @include box-flex(0);

lib/sass/forms.scss

@@ -35,7 +35,7 @@ input[type="color"],
   margin-bottom: 10px;
   line-height: $line-height-default;
   background-color: #fff;
-  border: 1px solid rgba(0, 0, 0, .2);
+  border: $border-default;
   border-radius: 3px;
   outline: none;
   -webkit-appearance: none;
@@ -85,6 +85,9 @@ select {
   margin-bottom: 0;
   background-color: transparent;
   border-bottom: $border-default;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
   border-radius: 0;
   @include box-shadow(none);
 }

lib/sass/table-views.scss

@@ -145,6 +145,6 @@
   margin-left: 0;
   overflow: auto;
   background-color: #fff;
-  border-radius: 12px;
+  border-radius: $border-radius;
   -webkit-overflow-scrolling: touch;
 }

lib/sass/theme-ios

@@ -64,9 +64,35 @@ $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods
   }
 }
 
+.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 {
+  border: 1px solid rgba(0, 0, 0, .2);
+}
+
+// Rounded search input
 input[type=search] {
   text-align: center;
   background-color: rgba(0,0,0,.1);
@@ -80,7 +106,7 @@ input[type=search]:focus {
 // Input groups (cluster multiple inputs together into a single group)
 // -------------------------------------------------------------------
 .input-group input {
-  border-bottom: 0;
+  border: 0;
   @include hairline(single, #c8c7cc, 15px);
 }
 // Remove bottom border on last input to avoid double bottom border
@@ -102,3 +128,44 @@ input[type=search]:focus {
   background-image: none;
 }
 
+
+// Buttons
+// --------------------------------------------------
+
+[class*="button"] {
+  color: $default-color;
+  background-color: transparent;
+  border-radius: 4px;
+  @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;
+  }
+}
+
+// Link button (Buttons that look like links)
+.button-link {
+  &:active,
+  &.active {
+    color: $primary-color;
+    opacity: .3;
+  }
+}
+
+//
+// Badges
+// --------------------------------------------------
+
+[class*="badge"] {
+  color: $default-color;
+
+  &.badge-filled {
+    color: #fff;
+  }
+}