refining button css

dist/ratchet.css

@@ -552,8 +552,8 @@ select {
   display: inline-block;
   padding: 4px 12px;
   margin: 0;
-  font-weight: bold;
-  line-height: 18px;
+  font-weight: 500;
+  line-height: 1;
   color: #333;
   text-align: center;
   vertical-align: top;
@@ -562,20 +562,21 @@ select {
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 4px;
 }
-[class*="button"]:active, [class*="button"].button-filled {
+[class*="button"]:active, [class*="button"].active, [class*="button"].button-filled {
   color: #fff;
   background-color: #333;
-  transition: opacity .1s linear, background-color .1s linear;
+  -webkit-transition: background-color .1s linear;
+  transition: background-color .1s linear;
 }
-[class*="button"].button-filled:active {
+[class*="button"]:disabled, [class*="button"].disabled {
   opacity: .6;
 }
 
-.button-main {
+.button-primary {
   color: #007aff;
   border: 1px solid #007aff;
 }
-.button-main:active, .button-main.button-filled {
+.button-primary:active, .button-primary.active, .button-primary.button-filled {
   background-color: #007aff;
 }
 
@@ -583,7 +584,7 @@ select {
   color: #4cd964;
   border: 1px solid #4cd964;
 }
-.button-positive:active, .button-positive.button-filled {
+.button-positive:active, .button-positive.active, .button-positive.button-filled {
   background-color: #4cd964;
 }
 
@@ -591,37 +592,24 @@ select {
   color: #dd524d;
   border: 1px solid #dd524d;
 }
-.button-negative:active, .button-negative.button-filled {
+.button-negative:active, .button-negative.active, .button-negative.button-filled {
   background-color: #dd524d;
 }
 
 .button-block {
   display: block;
-  padding: 11px 0 13px;
+  padding: 12px 0;
   margin-bottom: 10px;
   font-size: 16px;
 }
 
-button.button-block {
+input[type="submit"],
+input[type="reset"],
+input[type="button"],
+.button-block {
   width: 100%;
 }
 
-[class*="button"] [class*="count"] {
-  padding-top: 2px;
-  padding-bottom: 2px;
-  margin-right: -4px;
-  margin-left: 4px;
-  background-color: rgba(0, 0, 0, 0.1);
-}
-
-.button-block [class*="count"] {
-  position: absolute;
-  right: 0;
-  padding-top: 4px;
-  padding-bottom: 4px;
-  margin-right: 10px;
-}
-
 .chevron {
   display: block;
   height: 20px;
@@ -668,6 +656,22 @@ button.button-block {
   background-color: #e71e1e;
 }
 
+[class*="button"] [class*="count"] {
+  padding-top: 2px;
+  padding-bottom: 2px;
+  margin-right: -4px;
+  margin-left: 4px;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.button-block [class*="count"] {
+  position: absolute;
+  right: 0;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  margin-right: 10px;
+}
+
 .segmented-controller {
   display: -webkit-box;
   display: box;

lib/sass/buttons.scss

@@ -7,8 +7,8 @@
   display: inline-block;
   padding: 4px 12px;
   margin: 0;
-  font-weight: bold;
-  line-height: 18px;
+  font-weight: 500;
+  line-height: 1;
   color: #333;
   text-align: center;
   vertical-align: top;
@@ -17,86 +17,76 @@
   border: 1px solid rgba(0, 0, 0, .2);
   border-radius: 4px;
 
-  // Active
+  // Active & filled button styles
   &:active,
-  &.button-filled  {
+  &.active,
+  &.button-filled {
     color: #fff;
     background-color: #333;
-    transition: opacity .1s linear, background-color .1s linear;
+    -webkit-transition: background-color .1s linear;
+            transition: background-color .1s linear;
   }
-  &.button-filled:active {
+
+  // Disabled styles
+  &:disabled,
+  &.disabled {
     opacity: .6;
   }
 }
 
-// Buttons modifiers
+
+// Other button types
 // --------------------------------------------------
 
-// Main button
-.button-main {
+// Primary button (Default color is blue)
+.button-primary {
   color: $app-color;
   border: 1px solid $app-color;
 
   &:active,
+  &.active,
   &.button-filled {
     background-color: $app-color;
   }
 }
 
-// Positive button
+// Positive button (Default color is green)
 .button-positive {
-  color: #4cd964;
-  border: 1px solid #4cd964;
+  color: $positive-color;
+  border: 1px solid $positive-color;
 
   &:active,
+  &.active,
   &.button-filled {
-    background-color: #4cd964;
+    background-color: $positive-color;
   }
 }
 
-// Negative button
+// Negative button (Default color is red)
 .button-negative {
-  color: #dd524d;
-  border: 1px solid #dd524d;
+  color: $negative-color;
+  border: 1px solid $negative-color;
 
   &:active,
+  &.active,
   &.button-filled {
-    background-color: #dd524d;
+    background-color: $negative-color;
   }
 }
 
 // Block level buttons (full width buttons)
 .button-block {
   display: block;
-  padding: 11px 0 13px;
+  padding: 12px 0;
   margin-bottom: 10px;
   font-size: 16px;
 }
 
-// Make button elements go full width when given .button-block class
-button.button-block {
-  width: 100%;
-}
-
-// Counts in buttons
+// Button overrides
 // --------------------------------------------------
-
-// Generic styles for all counts within buttons
-[class*="button"] [class*="count"] {
-  padding-top: 2px;
-  padding-bottom: 2px;
-  margin-right: -4px;
-  margin-left: 4px;
-  background-color: rgba(0, 0, 0, .1);
+input[type="submit"],
+input[type="reset"],
+input[type="button"],
+.button-block {
+  width: 100%;
 }
-
-// Position counts within block level buttons
-// Note: These are absolutely positioned so that text of button isn't "pushed" by count and always
-// stays at true center of button
-.button-block [class*="count"] {
-  position: absolute;
-  right: 0;
-  padding-top: 4px;
-  padding-bottom: 4px;
-  margin-right: 10px;
-}

lib/sass/counts.scss

@@ -13,6 +13,7 @@
   border-radius: 100px;
 }
 
+
 // Count modifiers
 // --------------------------------------------------
 
@@ -29,4 +30,28 @@
 // Negative count
 .count-negative {
   background-color: #e71e1e;
+}
+
+
+// Counts in buttons
+// --------------------------------------------------
+
+// Generic styles for all counts within buttons
+[class*="button"] [class*="count"] {
+  padding-top: 2px;
+  padding-bottom: 2px;
+  margin-right: -4px;
+  margin-left: 4px;
+  background-color: rgba(0, 0, 0, .1);
+}
+
+// Position counts within block level buttons
+// Note: These are absolutely positioned so that text of button isn't "pushed" by count and always
+// stays at true center of button
+.button-block [class*="count"] {
+  position: absolute;
+  right: 0;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  margin-right: 10px;
 }

lib/sass/ratchet.scss

@@ -1,6 +1,10 @@
 // Variables
 $app-color: #007aff;
 $chrome-color: rgba(247,247,247,.98);
+$positive-color: #4cd964;
+$negative-color: #dd524d;
+
+
 
 // Base CSS & Reset
 @import "base.scss";