add select and textarea

3 files changed, 66 insertions, 32 deletions

diff --git a/demo/index.html b/demo/index.html
index cc74e8e..fe38092 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -121,23 +121,24 @@
             <header class="text-center"><h4>forms</h4></header>
             <form>
                 <div class="form-group">
-                    <label class="label" for="input-example-1">Name</label>
-                    <input class="input" type="text" id="input-example-1" placeholder="Name">
+                    <label class="form-label" for="input-example-1">Name</label>
+                    <input class="form-input" type="text" id="input-example-1" placeholder="Name">
                 </div>
                 <div class="form-group">
-                    <label class="label" for="input-example-2">Email</label>
-                    <input class="input is-success" type="email" id="input-example-2" placeholder="Email">
+                    <label class="form-label" for="input-example-2">Email</label>
+                    <input class="form-input" type="email" id="input-example-2" placeholder="Email">
                 </div>
                 <div class="form-group">
-                    <label class="label">Subject</label>
-                    <select>
-                        <option>Select dropdown</option>
-                        <option>With options</option>
+                    <select class="form-select">
+                        <option>Choose an option</option>
+                        <option>Slack</option>
+                        <option>Skype</option>
+                        <option>Hipchat</option>
                     </select>
                 </div>
                 <div class="form-group">
-                    <label class="label" for="input-example-3">Message</label>
-                    <textarea class="textarea" id="input-example-3" placeholder="Textarea"></textarea>
+                    <label class="form-label" for="input-example-3">Message</label>
+                    <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
                 </div>
                 <div class="form-group">
                     <label class="checkbox">
diff --git a/dist/spectre.css b/dist/spectre.css
index 4777951..eb59dd9 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -750,12 +750,7 @@ button.btn-block {
 .form-group:not(:last-child) {
   margin-bottom: 1rem;
 }
-form .label,
-.form-group .label {
-  display: block;
-  margin-bottom: .5rem;
-}
-.input {
+.form-input {
   position: relative;
   display: block;
   width: 100%;
@@ -772,38 +767,58 @@ form .label,
   -webkit-appearance: none;
   outline: 0;
 }
-.input:focus {
+.form-input:focus {
   border-color: #5764C6;
 }
-.input[disabled] {
+.form-input[disabled] {
   opacity: .75;
   background-color: #eeeff2;
   pointer-events: none;
 }
-.input.input-sm {
+.form-input.input-sm {
   height: 2.4rem;
   border-radius: 2px;
   font-size: 1.2rem;
   line-height: 1.4rem;
   padding: .4rem .6rem;
 }
-.input.input-lg {
+.form-input.input-lg {
   height: 4.2rem;
   border-radius: 4px;
   font-size: 1.8rem;
   line-height: 2rem;
   padding: 1rem 1.2rem;
 }
-.input.input-inline {
+.form-input.input-inline {
   width: auto;
   display: inline-block;
 }
-.input.is-success {
+textarea.form-input {
+  height: auto;
+}
+.form-input.is-success {
   border-color: #00c372;
 }
-.input.is-danger {
+.form-input.is-danger {
   border-color: #e74c3c;
 }
+.form-label {
+  display: block;
+  margin-bottom: .5rem;
+}
+.form-select:not([multiple]) {
+  height: 3.2rem;
+  background-color: #fff;
+  font-size: 1.4rem;
+  line-height: 1.6rem;
+  padding: .7rem .8rem;
+  border: 0.1rem solid #c5c5c5;
+  border-radius: 3px;
+  outline: 0;
+}
+.form-select:focus {
+  border-color: #5764C6;
+}
 .clearfix::after,
 .container::after,
 .columns::after {
diff --git a/src/forms.less b/src/forms.less
index 95ed387..2b69341 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -2,14 +2,7 @@
 .form-group:not(:last-child) {
   margin-bottom: 1rem;
 }
-form,
-.form-group {
-  .label {
-    display: block;
-    margin-bottom: .5rem;
-  }
-}
-.input {
+.form-input {
   position: relative;
   display: block;
   width: 100%;
@@ -54,12 +47,17 @@ form,
     padding: 1rem 1.2rem;
   }
 
-  // Input Inlines
+  // Input Inline
   &.input-inline {
     width: auto;
     display: inline-block;
   }
 
+  // Textarea
+  textarea& {
+    height: auto;
+  }
+
   // Status
   &.is-success {
     border-color: @control-color-success;
@@ -70,5 +68,25 @@ form,
 
   // TODO: Input with icons
 }
+.form-label {
+  display: block;
+  margin-bottom: .5rem;
+}
+.form-select {
+  &:not([multiple]) {
+    height: 3.2rem;
+    background-color: #fff;
+    font-size: 1.4rem;
+    line-height: 1.6rem;
+    padding: .7rem .8rem;
+    border: .1rem solid @control-color;
+    border-radius: 3px;
+    outline: 0;
+  }
+
+  &:focus {
+    border-color: @core-color;
+  }
+}