Merge branch 'master' into gh-pages

1 files changed, 143 insertions, 35 deletions

diff --git a/src/forms.less b/src/forms.less
index afaf1d8..eaab29d 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -2,6 +2,31 @@
 .form-group:not(:last-child) {
   margin-bottom: 1rem;
 }
+.form-horizontal {
+  padding: 1rem;
+
+  .col-12,
+  .col-11,
+  .col-10,
+  .col-9,
+  .col-8,
+  .col-7,
+  .col-6,
+  .col-5,
+  .col-4,
+  .col-3,
+  .col-2,
+  .col-1 {
+    float: left;
+  }
+  .form-label {
+    padding: .8rem .4rem;
+  }
+  .form-checkbox,
+  .form-radio {
+    margin: .5rem 0;
+  }
+}
 // Form element: Input boxes
 .form-input {
   position: relative;
@@ -12,7 +37,7 @@
   background-color: #fff;
   background-image: none;
   border: .1rem solid @control-color;
-  border-radius: 3px;
+  border-radius: .3rem;
   color: @body-font-color;
   font-size: 1.4rem;
   line-height: 1.6rem;
@@ -33,7 +58,7 @@
   // Input Small
   &.input-sm {
     height: 2.4rem;
-    border-radius: 2px;
+    border-radius: .2rem;
     font-size: 1.2rem;
     line-height: 1.4rem;
     padding: .4rem .6rem;
@@ -42,8 +67,8 @@
   // Input Large
   &.input-lg {
     height: 4.2rem;
-    border-radius: 4px;
-    font-size: 1.8rem;
+    border-radius: .4rem;
+    font-size: 1.6rem;
     line-height: 2rem;
     padding: 1rem 1.2rem;
   }
@@ -61,11 +86,11 @@
 
   // Status
   .has-success &,
-  &.input-success {
+  &.is-success {
     border-color: @control-color-success;
   }
   .has-danger &,
-  &.input-danger {
+  &.is-danger {
     border-color: @control-color-danger;
   }
 
@@ -75,6 +100,7 @@
 .form-label {
   display: block;
   margin-bottom: .5rem;
+  line-height: 1.6rem;
 }
 // Form element: Select
 .form-select {
@@ -85,7 +111,7 @@
     line-height: 1.6rem;
     padding: .7rem .8rem;
     border: .1rem solid @control-color;
-    border-radius: 3px;
+    border-radius: .3rem;
     outline: 0;
   }
 
@@ -96,7 +122,7 @@
   // Select Small
   &.select-sm {
     height: 2.4rem;
-    border-radius: 2px;
+    border-radius: .2rem;
     font-size: 1.2rem;
     line-height: 1.4rem;
     padding: .4rem .6rem;
@@ -107,39 +133,38 @@
 .form-checkbox,
 .form-radio {
   line-height: 1.8rem;
-  padding: .3rem 1.8rem .3rem 1.8rem;
+  padding: .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;
+  input {
+    font-size: 1.4rem;
+    line-height: 2.4rem;
+    vertical-align: top;
+    border: .1rem solid @control-color;
+    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;
+  border-radius: .2rem;
 
   &:checked {
     &::after {
@@ -175,4 +200,87 @@
       background-color: #fff;
     }
   }
-}
\ No newline at end of file
+}
+// Form element: Switch
+.form-switch {
+  line-height: 1.8rem;
+  padding: .3rem 1.8rem .3rem 3.4rem;
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+
+  input {
+    line-height: 2.4rem;
+    vertical-align: top;
+    border: .1rem solid @control-color;
+    background-color: @control-color;
+    display: inline-block;
+    width: 3rem;
+    height: 1.8rem;
+    padding: 0;
+    border-radius: .9rem;
+    position: absolute;
+    top: .3rem;
+    left: 0;
+    cursor: pointer;
+    outline: none;
+    -webkit-appearance: none;
+
+    &::after {
+      content: "";
+      display: block;
+      width: 1.6rem;
+      height: 1.6rem;
+      border-radius: .8rem;
+      position: absolute;
+      top: 0;
+      left: 0;
+      background-color: #fff;
+      transition: left .15s ease;
+    }
+
+    &:checked {
+      background-color: @core-color;
+      border-color: @core-color;
+
+      &::after {
+        left: 1.2rem;
+        background-color: #fff;
+      }
+    }
+  }
+}
+
+// Form element: Input groups
+.input-group {
+  display: flex;
+
+  .input-group-addon {
+    line-height: 1.6rem;
+    padding: .7rem .8rem;
+    border: 1px solid @control-color;
+    border-radius: .3rem;
+    background-color: @core-border-color;
+  }
+
+  .form-input,
+  .input-group-addon,
+  .input-group-btn {
+    &:first-child:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    &:not(:first-child):not(:last-child) {
+      margin-left: -.1rem;
+      border-radius: 0;
+      z-index: 49;
+    }
+    &:last-child:not(:first-child) {
+      margin-left: -.1rem;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      z-index: 99;
+    }
+  }
+}
+