add checkbox and radio elements

3 files changed, 173 insertions, 57 deletions

diff --git a/demo/index.html b/demo/index.html
index ceb4e99..d3740c5 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -119,7 +119,7 @@
         </section>
         <section class="layout">
             <header class="text-center"><h4>forms</h4></header>
-            <form>
+            <form class="col-6">
                 <div class="form-group">
                     <label class="form-label" for="input-example-1">Name</label>
                     <input class="form-input" type="text" id="input-example-1" placeholder="Name">
diff --git a/dist/spectre.css b/dist/spectre.css
index 3d08967..a58851c 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -529,88 +529,57 @@ ol ol {
     display: -ms-flexbox;
     display: flex;
   }
-  .column.col-12 {
+  .column.col-12,
+  .column.col-11,
+  .column.col-10,
+  .column.col-9,
+  .column.col-8,
+  .column.col-7,
+  .column.col-6,
+  .column.col-5,
+  .column.col-4,
+  .column.col-3,
+  .column.col-2,
+  .column.col-1 {
     -webkit-box-flex: 0;
     -webkit-flex: none;
         -ms-flex: none;
             flex: none;
+  }
+  .col-12 {
     width: 100%;
   }
-  .column.col-11 {
-    -webkit-box-flex: 0;
-    -webkit-flex: none;
-        -ms-flex: none;
-            flex: none;
+  .col-11 {
     width: 91.66666667%;
   }
-  .column.col-10 {
-    -webkit-box-flex: 0;
-    -webkit-flex: none;
-        -ms-flex: none;
-            flex: none;
+  .col-10 {
     width: 83.33333333%;
   }
-  .column.col-9 {
-    -webkit-box-flex: 0;
-    -webkit-flex: none;
-        -ms-flex: none;
-            flex: none;
+  .col-9 {
     width: 75%;
   }
-  .column.col-8 {
-    -webkit-box-flex: 0;
-    -webkit-flex: none;
-        -ms-flex: none;
-            flex: none;
+  .col-8 {
     width: 66.66666667%;
   }
-  .column.col-7 {
-    -webkit-box-flex: 0;
-    -webkit-flex: none;
-        -ms-flex: none;
-            flex: none;
+  .col-7 {
     width: 58.33333333%;
   }
-  .column.col-6 {
-    -webkit-box-flex: 0;
-    -webkit-flex: none;
-        -ms-flex: none;
-            flex: none;
+  .col-6 {
     width: 50%;
   }
-  .column.col-5 {
-    -webkit-box-flex: 0;
-    -webkit-flex: none;
-        -ms-flex: none;
-            flex: none;
+  .col-5 {
     width: 41.66666667%;
   }
-  .column.col-4 {
-    -webkit-box-flex: 0;
-    -webkit-flex: none;
-        -ms-flex: none;
-            flex: none;
+  .col-4 {
     width: 33.33333333%;
   }
-  .column.col-3 {
-    -webkit-box-flex: 0;
-    -webkit-flex: none;
-        -ms-flex: none;
-            flex: none;
+  .col-3 {
     width: 25%;
   }
-  .column.col-2 {
-    -webkit-box-flex: 0;
-    -webkit-flex: none;
-        -ms-flex: none;
-            flex: none;
+  .col-2 {
     width: 16.66666667%;
   }
-  .column.col-1 {
-    -webkit-box-flex: 0;
-    -webkit-flex: none;
-        -ms-flex: none;
-            flex: none;
+  .col-1 {
     width: 8.33333333%;
   }
 }
@@ -796,9 +765,11 @@ button.btn-block {
 textarea.form-input {
   height: auto;
 }
+.has-success .form-input,
 .form-input.is-success {
   border-color: #00c372;
 }
+.has-danger .form-input,
 .form-input.is-danger {
   border-color: #e74c3c;
 }
@@ -826,6 +797,74 @@ textarea.form-input {
   line-height: 1.4rem;
   padding: .4rem .6rem;
 }
+.form-checkbox,
+.form-radio {
+  line-height: 1.8rem;
+  padding: .3rem 1.8rem .3rem 1.8rem;
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+}
+.form-checkbox input,
+.form-radio input {
+  font-size: 14px;
+  line-height: 24px;
+  vertical-align: top;
+  border: 0.1rem solid #c5c5c5;
+  float: left;
+  display: inline-block;
+  width: 1.4rem;
+  height: 1.4rem;
+  padding: 0;
+  position: absolute;
+  top: .5rem;
+  left: 0;
+  cursor: pointer;
+  outline: none;
+  -webkit-appearance: none;
+}
+.form-checkbox input:hover,
+.form-radio input:hover {
+  border-color: #9f9f9f;
+}
+.form-checkbox input:checked,
+.form-radio input:checked {
+  background-color: #5764C6;
+  border-color: #5764C6;
+}
+.form-checkbox input {
+  border-radius: 2px;
+}
+.form-checkbox input:checked::after {
+  width: .6rem;
+  height: 1rem;
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -0.6rem;
+  margin-left: -0.3rem;
+  border: .2rem solid #fff;
+  border-top-width: 0;
+  border-left-width: 0;
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+}
+.form-radio input {
+  border-radius: .7rem;
+}
+.form-radio input:checked::after {
+  width: .4rem;
+  height: .4rem;
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -0.2rem;
+  margin-left: -0.2rem;
+  border-radius: .2rem;
+  background-color: #fff;
+}
 .clearfix::after,
 .container::after,
 .columns::after {
diff --git a/src/forms.less b/src/forms.less
index 301b45a..965894e 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -2,6 +2,7 @@
 .form-group:not(:last-child) {
   margin-bottom: 1rem;
 }
+// Form element: Input boxes
 .form-input {
   position: relative;
   display: block;
@@ -59,19 +60,23 @@
   }
 
   // Status
+  .has-success &,
   &.is-success {
     border-color: @control-color-success;
   }
+  .has-danger &,
   &.is-danger {
     border-color: @control-color-danger;
   }
 
   // TODO: Input with icons
 }
+// Form element: Label
 .form-label {
   display: block;
   margin-bottom: .5rem;
 }
+// Form element: Select
 .form-select {
   &:not([multiple]) {
     height: 3.2rem;
@@ -98,4 +103,76 @@
   }
 }
 
+// Form element: Checkbox and radio
+.form-checkbox,
+.form-radio {
+  line-height: 1.8rem;
+  padding: .3rem 1.8rem .3rem 1.8rem;
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+}
+.form-checkbox input,
+.form-radio input {
+  font-size: 14px;
+  line-height: 24px;
+  vertical-align: top;
+  border: .1rem solid @control-color;
+  float: left;
+  display: inline-block;
+  width: 1.4rem;
+  height: 1.4rem;
+  padding: 0;
+  position: absolute;
+  top: .5rem;
+  left: 0;
+  cursor: pointer;
+  outline: none;
+  -webkit-appearance: none;
 
+  &:hover {
+    border-color: darken(@control-color, 15%);
+  }
+  &:checked {
+    background-color: @core-color;
+    border-color: @core-color;
+  }
+}
+.form-checkbox input {
+  border-radius: 2px;
+
+  &:checked {
+    &::after {
+      width: .6rem;
+      height: 1rem;
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-top: -.6rem;
+      margin-left: -.3rem;
+      border: .2rem solid #fff;
+      border-top-width: 0;
+      border-left-width: 0;
+      transform: rotate(45deg);
+    }
+  }
+}
+.form-radio input {
+  border-radius: .7rem;
+
+  &:checked {
+    &::after {
+      width: .4rem;
+      height: .4rem;
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-top: -.2rem;
+      margin-left: -.2rem;
+      border-radius: .2rem;
+      background-color: #fff;
+    }
+  }
+}
\ No newline at end of file