1 files changed, 71 insertions, 36 deletions

diff --git a/src/forms.less b/src/forms.less
index dd0d043..742fb8b 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -5,6 +5,16 @@
   }
 }
 
+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;
@@ -36,6 +46,7 @@
   outline: none;
   padding: @control-padding-v @control-padding-h;
   position: relative;
+
   width: 100%;
   &:focus {
     border-color: @primary-color;
@@ -78,6 +89,7 @@
 // Form element: Input hint
 .form-input-hint {
   color: @gray-color;
+  font-size: @font-size-sm;
   margin-top: @unit-1;
 
   .has-success &,
@@ -136,42 +148,6 @@
   }
 }
 
-// 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;
-      }
-    }
-  }
-}
-
 // Form Icons
 .has-icon-left,
 .has-icon-right {
@@ -417,6 +393,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 {