Merge pull request #249 from picturepan2/0.2.15 v0.2.15

0.2.15

1 files changed, 138 insertions, 104 deletions

diff --git a/src/forms.less b/src/forms.less
index 6583585..b0e9a9e 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -1,21 +1,31 @@
 // Forms
 .form-group {
   &:not(:last-child) {
-    margin-bottom: @layout-padding;
+    margin-bottom: @layout-spacing;
   }
 }
 
+fieldset {
+  margin-bottom: @layout-spacing-lg;
+}
+
+legend {
+  font-size: @font-size-lg;
+  font-weight: 500;
+  margin-bottom: @layout-spacing-lg;
+}
+
 // Form element: Label
 .form-label {
   display: block;
-  padding: .6rem 0;
+  padding: @control-padding-v + @border-width 0;
 
   &.label-sm {
-    padding: .2rem 0;
+    padding: @control-padding-v-sm + @border-width 0;
   }
 
   &.label-lg {
-    padding: 1rem 0;
+    padding: @control-padding-v-lg + @border-width 0;
   }
 }
 
@@ -30,11 +40,11 @@
   .control-transition();
   display: block;
   font-size: @font-size;
-  height: 3.2rem;
-  line-height: 2rem;
+  height: @control-size;
+  line-height: @line-height;
   max-width: 100%;
   outline: none;
-  padding: .5rem .8rem;
+  padding: @control-padding-v @control-padding-h;
   position: relative;
   width: 100%;
   &:focus {
@@ -48,14 +58,14 @@
   // Input sizes
   &.input-sm {
     font-size: @font-size-sm;
-    height: 2.4rem;
-    padding: .1rem .8rem;
+    height: @control-size-sm;
+    padding: @control-padding-v-sm @control-padding-h;
   }
 
   &.input-lg {
     font-size: @font-size-lg;
-    height: 4rem;
-    padding: .9rem .8rem;
+    height: @control-size-lg;
+    padding: @control-padding-v-lg @control-padding-h;
   }
 
   &.input-inline {
@@ -78,7 +88,8 @@
 // Form element: Input hint
 .form-input-hint {
   color: @gray-color;
-  margin-top: .4rem;
+  font-size: @font-size-sm;
+  margin-top: @unit-1;
 
   .has-success &,
   .is-success + & {
@@ -98,21 +109,21 @@
   border-radius: @border-radius;
   color: inherit;
   font-size: @font-size;
-  line-height: 2rem;
+  line-height: @line-height;
   outline: none;
-  padding: .5rem .8rem;
+  padding: @control-padding-v @control-padding-h;
   vertical-align: middle;
   width: 100%;
 
   &[multiple] {
     option {
-      padding: .2rem .4rem;
+      padding: @unit-h @unit-1;
     }
   }
   &:not([multiple]) {
-    background: @bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center / .8rem 1rem;
-    height: 3.2rem;
-    padding-right: 2.4rem;
+    background: @bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right (@control-icon-size / 2) center / .4rem .5rem;
+    height: @control-size;
+    padding-right: @control-icon-size + @control-padding-h;
   }
   &:focus {
     border-color: @primary-color;
@@ -125,50 +136,14 @@
   // Select sizes
   &.select-sm {
     font-size: @font-size-sm;
-    height: 2.4rem;
-    padding: .1rem 2rem .1rem .6rem;
+    height: @control-size-sm;
+    padding: @control-padding-v-sm (@control-icon-size + @control-padding-h) @control-padding-v-sm @control-padding-h;
   }
 
   &.select-lg {
     font-size: @font-size-lg;
-    height: 4rem;
-    padding: .9rem 2.4rem .9rem .8rem;
-  }
-}
-
-// Form validation states
-.form-input,
-.form-select {
-  .has-success &,
-  &.is-success {
-    border-color: @control-color-success;
-    &:focus {
-      .control-shadow(@control-color-success);
-    }
-  }
-
-  .has-error &,
-  &.is-error {
-    border-color: @control-color-error;
-    &:focus {
-      .control-shadow(@control-color-error);
-    }
-  }
-}
-
-// validation based on :placeholder-shown (Edge doesn't support it yet)
-.form-input {
-  &:not(:placeholder-shown) {
-    &:invalid {
-      border-color: @control-color-error;
-      &:focus {
-        .control-shadow(@control-color-error);
-      }
-
-      & + .form-input-hint {
-        color: @control-color-error;
-      }
-    }
+    height: @control-size-lg;
+    padding: @control-padding-v-lg (@control-icon-size + @control-padding-h) @control-padding-v-lg @control-padding-h;
   }
 }
 
@@ -178,31 +153,32 @@
   position: relative;
 
   .form-icon {
-    margin: 0 .8rem;
-    min-width: 1.4rem;
+    height: @control-icon-size;
+    margin: 0 @control-padding-v;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
+    width: @control-icon-size;
   }
 }
 
 .has-icon-left {
   .form-icon {
-    left: 0;
+    left: @border-width;
   }
 
   .form-input {
-    padding-left: 3rem;
+    padding-left: @control-icon-size + @control-padding-v * 2;
   }
 }
 
 .has-icon-right {
   .form-icon {
-    right: 0;
+    right: @border-width;
   }
 
   .form-input {
-    padding-right: 3rem;
+    padding-right: @control-icon-size + @control-padding-v * 2;
   }
 }
 
@@ -211,16 +187,17 @@
 .form-radio,
 .form-switch {
   display: inline-block;
-  line-height: 2rem;
+  line-height: @line-height;
+  padding: (@control-size-sm - @line-height) / 2  (@control-icon-size + @control-padding-h);
   position: relative;
 
   input {
     clip: rect(0, 0, 0, 0);
-    height: .1rem;
-    margin: -.1rem;
+    height: 1px;
+    margin: -1px;
     overflow: hidden;
     position: absolute;
-    width: .1rem;
+    width: 1px;
     &:focus + .form-icon {
       border-color: @primary-color;
       .control-shadow();
@@ -242,14 +219,12 @@
 
 .form-checkbox,
 .form-radio {
-  padding: .2rem 2rem;
-
   .form-icon {
     background: @bg-color-light;
-    height: 1.4rem;
+    height: @control-icon-size;
     left: 0;
-    top: .5rem;
-    width: 1.4rem;
+    top: (@control-size-sm - @control-icon-size) / 2;
+    width: @control-icon-size;
   }
 
   input {
@@ -267,18 +242,18 @@
     &:checked + .form-icon {
       &::before {
         background-clip: padding-box;
-        border: .2rem solid @light-color;
+        border: @border-width-lg solid @light-color;
         border-left-width: 0;
         border-top-width: 0;
         content: "";
-        height: 1rem;
+        height: 10px;
         left: 50%;
-        margin-left: -.3rem;
-        margin-top: -.6rem;
+        margin-left: -3px;
+        margin-top: -6px;
         position: absolute;
         top: 50%;
         transform: rotate(45deg);
-        width: .6rem;
+        width: 6px;
       }
     }
     &:indeterminate + .form-icon {
@@ -287,20 +262,20 @@
       &::before {
         background: @bg-color-light;
         content: "";
-        height: .2rem;
+        height: 2px;
         left: 50%;
-        margin-left: -.5rem;
-        margin-top: -.1rem;
+        margin-left: -5px;
+        margin-top: -1px;
         position: absolute;
         top: 50%;
-        width: 1rem;
+        width: 10px;
       }
     }
   }
 }
 .form-radio {
   .form-icon {
-    border-radius: .7rem;
+    border-radius: @control-icon-size / 2;
   }
 
   input {
@@ -309,13 +284,13 @@
         background: @bg-color-light;
         border-radius: @border-radius;
         content: "";
-        height: .4rem;
+        height: 4px;
         left: 50%;
-        margin-left: -.2rem;
-        margin-top: -.2rem;
+        margin-left: -2px;
+        margin-top: -2px;
         position: absolute;
         top: 50%;
-        width: .4rem;
+        width: 4px;
       }
     }
   }
@@ -323,34 +298,34 @@
 
 // Form element: Switch
 .form-switch {
-  padding: .2rem 2rem .2rem 3.6rem;
+  padding-left: (@unit-8 + @control-padding-h);
 
   .form-icon {
     background: @gray-color-light;
     background-clip: padding-box;
-    border-radius: .9rem;
-    height: 1.8rem;
+    border-radius: @unit-2 + @border-width;
+    height: @unit-4 + @border-width * 2;
     left: 0;
-    top: .3rem;
-    width: 3rem;
+    top: (@control-size-sm - @unit-4) / 2 - @border-width;
+    width: @unit-8;
     &::before {
       background: @bg-color-light;
-      border-radius: .8rem;
+      border-radius: @unit-2;
       content: "";
       display: block;
-      height: 1.6rem;
+      height: @unit-4;
       left: 0;
       position: absolute;
       top: 0;
       .control-transition();
-      width: 1.6rem;
+      width: @unit-4;
     }
   }
 
   input {
     &:checked + .form-icon {
       &::before {
-        left: 1.2rem;
+        left: 14px;
       }
     }
     &:active + .form-icon {
@@ -369,16 +344,16 @@
     background: @bg-color;
     border: @border-width solid @border-color-dark;
     border-radius: @border-radius;
-    line-height: 2rem;
-    padding: .5rem .8rem;
+    line-height: @line-height;
+    padding: @control-padding-v @control-padding-h;
 
     &.addon-sm {
       font-size: @font-size-sm;
-      padding: .1rem .8rem;
+      padding: @control-padding-v-sm @control-padding-h;
     }
     &.addon-lg {
       font-size: @font-size-lg;
-      padding: .9rem .8rem;
+      padding: @control-padding-v-lg @control-padding-h;
     }
   }
   .input-group-addon,
@@ -396,12 +371,12 @@
     }
     &:not(:first-child):not(:last-child) {
       border-radius: 0;
-      margin-left: -.1rem;
+      margin-left: -@border-width;
     }
     &:last-child:not(:first-child) {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
-      margin-left: -.1rem;
+      margin-left: -@border-width;
     }
     &:focus {
       z-index: @zindex-0;
@@ -417,6 +392,65 @@
   }
 }
 
+// Form validation states
+.form-input,
+.form-select {
+  .has-success &,
+  &.is-success {
+    border-color: @control-color-success;
+    &:focus {
+      .control-shadow(@control-color-success);
+    }
+  }
+
+  .has-error &,
+  &.is-error {
+    border-color: @control-color-error;
+    &:focus {
+      .control-shadow(@control-color-error);
+    }
+  }
+}
+
+.form-checkbox,
+.form-radio,
+.form-switch {
+  .has-error &,
+  &.is-error {
+    .form-icon {
+      border-color: @control-color-error;
+    }
+    
+    input {
+      &:checked + .form-icon {
+        background: @control-color-error;
+        border-color: @control-color-error;
+      }
+
+      &:focus + .form-icon {
+        border-color: @control-color-error;
+        .control-shadow(@control-color-error);
+      }
+    }
+  }
+}
+
+// validation based on :placeholder-shown (Edge doesn't support it yet)
+.form-input {
+  &:not(:placeholder-shown) {
+    &:invalid {
+      border-color: @control-color-error;
+      &:focus {
+        .control-shadow(@control-color-error);
+      }
+
+      & + .form-input-hint {
+        color: @control-color-error;
+      }
+    }
+  }
+}
+
 // Form disabled and readonly
 .form-input,
 .form-select {
@@ -458,7 +492,7 @@ input {
 
 // Form Horizontal
 .form-horizontal {
-  padding: @layout-padding;
+  padding: @layout-spacing;
 
   .form-group {
     display: flex;
@@ -467,6 +501,6 @@ input {
   .form-checkbox,
   .form-radio,
   .form-switch {
-    margin: .4rem 0;
+    margin: (@control-size - @control-size-sm) / 2 0;
   }
 }