Move common form styles into mixins

h/static/styles/base.scss

@@ -18,10 +18,6 @@ $error-red: $hypothered-desat !default;
 $error-red-light: #e0b0b0 !default;
 $error-red-lightest: #fff1f3 !default;
 
-$focus-yellow: #fffbeb !default;
-$focus-yellow-dark: #ece3c5 !default;
-$focus-yellow-darker: #cbbb95 !default;
-
 $button-text-color: $gray-dark !default;
 $button-background-start: $white !default;
 $button-background-end: #f0f0f0 !default;

h/static/styles/forms.scss

 // Common form styles.
+@import "mixins/forms";
 @import "compass/css3/images";
 @import "compass/utilities/general/clearfix";
 
@@ -68,36 +69,17 @@
 }
 
 .form-input {
-  border: 1px solid $gray-lighter;
-  border-radius: 2px;
-  padding: 7px 10px;
-  font-weight: normal;
-  font-size: 15px;
-  color: $gray;
-  background-color: #FAFAFA;
+  @include form-input;
 
   &:focus, &.js-focus {
-    outline: none;
-    background-color: #FFF;
-    border-color: #51A7E8;
-    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.075) inset, 0px 0px 5px rgba(81, 167, 232, 0.5);
-
-    @include placeholder {
-      color: $gray;
-    }
+    @include form-input-focus;
   }
 }
 
 .form-field-error {
   .form-input {
     &, &:focus, &.js-focus {
-      color: $error-red;
-      border-color: $error-red-light;
-      background-color: $error-red-lightest;
-    }
-
-    @include placeholder {
-      color: $error-red-light;
+      @include form-input-error;
     }
   }
 
@@ -207,44 +189,23 @@
 }
 
 .btn {
-  @include background(linear-gradient($button-background-gradient...));
-  @include box-shadow(0 1px 0 rgba(0, 0, 0, 0.15));
-
-  display: inline-block;
-  font-size: 13px;
-  font-weight: bold;
-  color: $button-text-color;
-  text-shadow: 0 1px 0 #FFF;
-  border-radius: 2px;
-  border: 1px solid #ACACAC;
-  padding: 7px 12px 6px;
+  @include btn;
 
-  &:hover, &:active, &.js-hover, &.js-active {
-    @include box-shadow(0 1px 0 rgba(0, 0, 0, 0.05));
-    outline: none;
-    color: $button-text-color;
-    background: $button-background-start;
-    border-color: #bababa;
+  &:hover, &:focus, &:active,
+  &.js-hover, &.js-focus, &.js-active {
+    @include btn-hover;
   }
 
   &:focus, &.js-focus {
-    border-color: #51A7E8;
-    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.075) inset, 0px 0px 5px rgba(81, 167, 232, 0.5);
+    @include focus-outline;
   }
 
   &:active, &.js-active {
-    @include box-shadow(inset 0 1px 0 rgba(0, 0, 0, 0.1));
-    background: $button-background-end;
-    color: #424242;
-    border-color: #bababa;
+    @include btn-active;
   }
 
   &[disabled], &.js-disabled {
-    @include box-shadow(none);
-    cursor: default;
-    background: #F0F0F0;
-    border-color: #CECECE;
-    color: $gray-light;
+    @include btn-disabled;
   }
 }
 

h/static/styles/mixins/forms.scss

+@import "../base";
+
+@mixin focus-outline {
+  border-color: #51A7E8;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.075) inset, 0px 0px 5px rgba(81, 167, 232, 0.5);
+}
+
+@mixin form-input {
+  border: 1px solid $gray-lighter;
+  border-radius: 2px;
+  padding: 7px 10px;
+  font-weight: normal;
+  font-size: 15px;
+  color: $gray;
+  background-color: #FAFAFA;
+}
+
+@mixin form-input-focus {
+  outline: none;
+  background-color: #FFF;
+
+  @include focus-outline;
+  @include placeholder {
+    color: $gray;
+  }
+}
+
+@mixin form-input-error {
+  color: $error-red;
+  border-color: $error-red-light;
+  background-color: $error-red-lightest;
+
+  @include placeholder {
+    color: $error-red-light;
+  }
+}
+
+@mixin btn {
+  @include background(linear-gradient($button-background-gradient...));
+  @include box-shadow(0 1px 0 rgba(0, 0, 0, 0.15));
+
+  display: inline-block;
+  font-size: 13px;
+  font-weight: bold;
+  color: $button-text-color;
+  text-shadow: 0 1px 0 #FFF;
+  border-radius: 2px;
+  border: 1px solid #ACACAC;
+  padding: 7px 12px 6px;
+}
+
+@mixin btn-hover {
+  @include box-shadow(0 1px 0 rgba(0, 0, 0, 0.05));
+  outline: none;
+  color: $button-text-color;
+  background: $button-background-start;
+  border-color: #bababa;
+}
+
+@mixin btn-active {
+  @include box-shadow(inset 0 1px 0 rgba(0, 0, 0, 0.1));
+  background: $button-background-end;
+  color: #424242;
+  border-color: #bababa;
+}
+
+@mixin btn-disabled {
+  @include box-shadow(none);
+  cursor: default;
+  background: #F0F0F0;
+  border-color: #CECECE;
+  color: $gray-light;
+}