Add form-checkbox, radio and switch validation styles

4 files changed, 72 insertions, 42 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 {
diff --git a/src/modals.less b/src/modals.less
index 60aa2b1..8ff16f5 100644
--- a/src/modals.less
+++ b/src/modals.less
@@ -19,7 +19,7 @@
     z-index: @zindex-4;
 
     .modal-overlay {
-      background: fade(@dark-color, 50%);
+      background: fade(@bg-color, 75%);
       bottom: 0;
       cursor: default;
       display: block;
diff --git a/src/pagination.less b/src/pagination.less
index a896e0e..e4e5c94 100644
--- a/src/pagination.less
+++ b/src/pagination.less
@@ -21,7 +21,6 @@
       &:hover {
         color: @primary-color;
       }
-      &[disabled],
       &.disabled {
         cursor: default;
         opacity: .5;
diff --git a/src/tables.less b/src/tables.less
index bbe47e2..3ff0f47 100644
--- a/src/tables.less
+++ b/src/tables.less
@@ -39,8 +39,4 @@
     border-bottom: @border-width solid @border-color;
     padding: @unit-3 @unit-2;
   }
-
-  th {
-    border-bottom-color: @gray-color-dark;
-  }
 }