From: Mark Otto <markdotto@gmail.com>
Date: Tue, 9 Feb 2016 07:21:32 +0000 (-0800)
Subject: Alternate fix to #17965: Updates to use the new class name and adds some basic docs... 
X-Git-Tag: v4.0.0-alpha.3~246^2~1
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=09aefaa2afe05f438b99caa63bb888c62c40bf73;p=thirdparty%2Fbootstrap.git

Alternate fix to #17965: Updates to use the new class name and adds some basic docs for custom checkbox/radio validation
---

diff --git a/docs/components/forms.md b/docs/components/forms.md
index 134bd88c19..6f95ecb3d8 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -762,6 +762,33 @@ Custom checkboxes and radios can also be disabled. Add the `disabled` boolean at
 </label>
 {% endexample %}
 
+#### Validation states
+
+Add other states to your custom forms with our validation classes.
+
+{% example html %}
+<div class="form-group has-success">
+  <label class="custom-control custom-checkbox">
+    <input type="checkbox" class="custom-control-input">
+    <span class="custom-control-indicator"></span>
+    <span class="custom-control-description">Check this custom checkbox</span>
+  </label>
+</div>
+<div class="form-group has-warning">
+  <label class="custom-control custom-checkbox">
+    <input type="checkbox" class="custom-control-input">
+    <span class="custom-control-indicator"></span>
+    <span class="custom-control-description">Check this custom checkbox</span>
+  </label>
+</div>
+<div class="form-group has-danger m-b-0">
+  <label class="custom-control custom-checkbox">
+    <input type="checkbox" class="custom-control-input">
+    <span class="custom-control-indicator"></span>
+    <span class="custom-control-description">Check this custom checkbox</span>
+  </label>
+</div>
+{% endexample %}
 
 #### Stacked
 
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index b87429c1b0..fde8295314 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -14,7 +14,8 @@
   &.radio label,
   &.checkbox label,
   &.radio-inline label,
-  &.checkbox-inline label  {
+  &.checkbox-inline label,
+  .custom-control {
     color: $color;
   }
   // Set the border and box shadow on specific inputs to match