add checkbox and radio elements

1 files changed, 77 insertions, 0 deletions

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