Add generic button component

src/styles/clay/_base.scss

@@ -183,6 +183,7 @@ label {
   padding: 0 $item-spacing-h $item-spacing-v ;
   @include font-size(0.9);
   color: $color-gray-9;
+  text-align: left;
 }
 
 .inputs {

src/styles/clay/_vars.scss

@@ -34,7 +34,7 @@ $color-gray-9: #a4a4a4 ;
 $color-gray-10: #ececec;
 $color-gray-11: #f2f2f2;
 
-$button-padding: 0.7rem;
-$button-padding-ios: 0.6rem;
+$button-padding: 0.6rem;
+$button-padding-ios: 0.5rem;
 
 $box-shadow-small-components: $color-gray-1 0 0.1rem 0.1rem;

src/styles/clay/components/button.scss

@@ -0,0 +1,12 @@
+.component-button {
+  text-align: center;
+
+  .section & {
+    padding-bottom: 0;
+  }
+
+  .description {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}

src/styles/clay/elements/_button.scss

@@ -3,52 +3,30 @@
 button,
 .button {
   @include font-pfdin(medium);
+  @include font-size(1);
   text-transform: uppercase;
-  background-color: $color-gray-4;
+  background-color: $color-gray-7;
   border-radius: $border-radius;
-  font-size: 1rem;
-  line-height: 1;
   border: none;
   display: inline-block;
 
   color: $color-white;
   min-width: 12rem;
   text-align: center;
-  margin: 0 auto;
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
-
+  margin: 0 auto $item-spacing-v;
   padding: $button-padding;
 
+  @include tap-highlight($color-gray-8);
+
   .platform-ios & {
     padding: $button-padding-ios;
   }
 
-  &:disabled {
-    background-color: $color-gray-3;
-    color: $color-gray-8;
-  }
-
-  &:not(:disabled):active {
-    background-color: $color-gray-8;
-  }
-
-  &.orange, &[type="submit"] {
+  &.primary, &[type="submit"] {
     background-color: $color-orange;
 
-    &:disabled {
-      background-color: $color-orange-dark;
-      color: $color-gray-3;
-    }
-
-    &:not(:disabled):active {
-      background-color: $color-red;
-    }
+    @include tap-highlight($color-red);
   }
-
-  &.light-grey {
-    background-color: $color-gray-5;
-  }
-
 }
 
 a.button {