Clean up form styles a bit, style batch button

app/components/proposal-list/template.hbs

@@ -7,9 +7,8 @@
 {{/each}}
 
 {{#if confirmProposals}}
-  <center>
+  <p class="actions">
-    <button disabled={{submitButtonDisabled}} {{action 'confirm'}}>
+    <input type="submit" disabled={{submitButtonDisabled}}
-      Submit selected
+           value="Confirm selected" {{action 'confirm'}}>
-    </button>
+  </p>
-  </center>
 {{/if}}

app/styles/_forms.scss

@@ -0,0 +1,91 @@
+button, input[type=submit] {
+  display: inline-block;
+  border: 1px solid rgba(22, 21, 40, 1);
+  background-color: rgba(22, 21, 40, 0.6);
+  color: $primaryColor;
+  border-radius: 3px;
+  font-weight: 500;
+  text-transform: uppercase;
+  cursor: pointer;
+  letter-spacing: 0.1em;
+
+  &:hover {
+    background-color: rgba(22, 21, 40, 0.8);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background-color: transparent;
+  }
+}
+
+input[type=submit] {
+  padding: 0.6rem 2rem;
+}
+
+input[type=text], select {
+  width: 100%;
+  padding: 1rem;
+  border: none;
+  border-bottom: 1px solid rgba(255,255,255,0.2);
+  background-color: rgba(22, 21, 40, 0.3);
+  color: #fff;
+  font-size: 1.2rem;
+  &:focus, &.valid {
+    background-color: rgba(22, 21, 40, 0.6);
+  }
+  @include placeholder {
+    color: rgba(238, 238, 238, 0.5);
+  }
+}
+
+select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border-radius: 0;
+  background-color: rgba(22, 21, 40, 0.6);
+  background-image:
+    linear-gradient(45deg, transparent 50%, gray 50%),
+    linear-gradient(135deg, gray 50%, transparent 50%);
+  background-position:
+    calc(100% - 1.5rem) calc(1rem + 0.5rem),
+    calc(100% - 1rem) calc(1rem + 0.5rem);
+  background-size:
+    0.5rem 0.5rem,
+    0.5rem 0.5rem;
+  background-repeat: no-repeat;
+
+  &:invalid {
+    color: rgba(238, 238, 238, 0.5);
+  }
+}
+
+input[type=checkbox] {
+  display: none;
+}
+
+label.checkbox {
+  line-height: 3.2rem;
+  font-size: 1.2rem;
+  &::before {
+    display: inline-block;
+    margin-right: 0.8rem;
+    height: 3.2rem;
+    width: 3.2rem;
+    font-size: 2rem;
+    background-color: rgba(22, 21, 40, 0.3);
+    border-bottom: 1px solid rgba(255,255,255,0.2);
+    text-align: center;
+    vertical-align: middle;
+    content: '✓';
+    color: rgba(255,255,255,0.2);
+  }
+}
+
+input[type=checkbox]:checked + label.checkbox {
+  &::before {
+    background-color: rgba(22, 21, 40, 0.6);
+    color: #fff;
+  }
+}

app/styles/app.scss

@@ -84,21 +84,7 @@ section {
   }
 }
 
-button, input[type=submit] {
+@import "forms";
-  display: inline-block;
-  border: 1px solid rgba(22, 21, 40, 1);
-  background-color: rgba(22, 21, 40, 0.6);
-  color: $primaryColor;
-  border-radius: 3px;
-  font-weight: 500;
-  text-transform: uppercase;
-  cursor: pointer;
-  letter-spacing: 0.1em;
-
-  &:hover {
-    background-color: rgba(22, 21, 40, 0.8);
-  }
-}
 
 @import "components/loading-spinner";
 @import "components/contributor-list";

app/styles/components/_add-contributor.scss

@@ -1,7 +1,6 @@
 section#add-contributor, section#add-proposal {
 
   form {
-
     p {
       margin-bottom: 1rem;
 
@@ -14,81 +13,6 @@ section#add-contributor, section#add-proposal {
         }
       }
     }
-
-    input[type=text], select {
-      width: 100%;
-      padding: 1rem;
-      border: none;
-      border-bottom: 1px solid rgba(255,255,255,0.2);
-      background-color: rgba(22, 21, 40, 0.3);
-      color: #fff;
-      font-size: 1.2rem;
-      &:focus, &.valid {
-        background-color: rgba(22, 21, 40, 0.6);
-      }
-      @include placeholder {
-        color: rgba(238, 238, 238, 0.5);
-      }
-    }
-
-    select {
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      appearance: none;
-      border-radius: 0;
-      background-color: rgba(22, 21, 40, 0.6);
-      background-image:
-        linear-gradient(45deg, transparent 50%, gray 50%),
-        linear-gradient(135deg, gray 50%, transparent 50%);
-      background-position:
-        calc(100% - 1.5rem) calc(1rem + 0.5rem),
-        calc(100% - 1rem) calc(1rem + 0.5rem);
-      background-size:
-        0.5rem 0.5rem,
-        0.5rem 0.5rem;
-      background-repeat: no-repeat;
-
-      &:invalid {
-        color: rgba(238, 238, 238, 0.5);
-      }
-    }
-
-    input[type=submit] {
-      padding: 0.6rem 2rem;
-      &:disabled {
-        background-color: transparent;
-      }
-    }
-
-    input[type=checkbox] {
-      display: none;
-    }
-
-    label.checkbox {
-      line-height: 3.2rem;
-      font-size: 1.2rem;
-      &::before {
-        display: inline-block;
-        margin-right: 0.8rem;
-        height: 3.2rem;
-        width: 3.2rem;
-        font-size: 2rem;
-        background-color: rgba(22, 21, 40, 0.3);
-        border-bottom: 1px solid rgba(255,255,255,0.2);
-        text-align: center;
-        vertical-align: middle;
-        content: '✓';
-        color: rgba(255,255,255,0.2);
-      }
-    }
-
-    input[type=checkbox]:checked + label.checkbox {
-      &::before {
-        background-color: rgba(22, 21, 40, 0.6);
-        color: #fff;
-      }
-    }
-
   }
 
 }

app/styles/components/_proposal-list.scss

@@ -53,15 +53,4 @@ ul.proposal-list {
     }
   }
 
-  button {
-    margin-top: 1.1rem;
-    height: 2rem;
-    line-height: 2rem;
-    padding: 0 0.6rem;
-
-    &:disabled {
-      cursor: not-allowed;
-      color: rgba(204,204,204, 0.6);
-    }
-  }
 }