update class naming and add select small size

3 files changed, 19 insertions, 3 deletions

diff --git a/demo/index.html b/demo/index.html
index fe38092..ceb4e99 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -141,17 +141,17 @@
                     <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
                 </div>
                 <div class="form-group">
-                    <label class="checkbox">
+                    <label class="form-checkbox">
                         <input type="checkbox">
                         Remember me
                     </label>
                 </div>
                 <div class="form-group">
-                    <label class="radio">
+                    <label class="form-radio">
                         <input type="radio" name="question">
                         Yes
                     </label>
-                    <label class="radio">
+                    <label class="form-radio">
                         <input type="radio" name="question">
                         No
                     </label>
diff --git a/dist/spectre.css b/dist/spectre.css
index eb59dd9..3d08967 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -819,6 +819,13 @@ textarea.form-input {
 .form-select:focus {
   border-color: #5764C6;
 }
+.form-select.select-sm {
+  height: 2.4rem;
+  border-radius: 2px;
+  font-size: 1.2rem;
+  line-height: 1.4rem;
+  padding: .4rem .6rem;
+}
 .clearfix::after,
 .container::after,
 .columns::after {
diff --git a/src/forms.less b/src/forms.less
index 2b69341..301b45a 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -87,6 +87,15 @@
   &:focus {
     border-color: @core-color;
   }
+
+  // Select Small
+  &.select-sm {
+    height: 2.4rem;
+    border-radius: 2px;
+    font-size: 1.2rem;
+    line-height: 1.4rem;
+    padding: .4rem .6rem;
+  }
 }