diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/assets/js/src/application.js | 4 | ||||
| -rw-r--r-- | docs/components/custom-forms.md | 16 |
2 files changed, 19 insertions, 1 deletions
diff --git a/docs/assets/js/src/application.js b/docs/assets/js/src/application.js index 8dfb82651..a349157a2 100644 --- a/docs/assets/js/src/application.js +++ b/docs/assets/js/src/application.js @@ -10,7 +10,6 @@ */ /* global ZeroClipboard */ -/* global SimpleJekyllSearch */ !function ($) { 'use strict'; @@ -102,6 +101,9 @@ $(this).prev('.progress-striped').toggleClass('progress-animated') }) + // Custom indeterminate checkbox + $('.bs-example-indeterminate input').prop('indeterminate', true) + // Config ZeroClipboard ZeroClipboard.config({ moviePath: '/assets/flash/ZeroClipboard.swf', diff --git a/docs/components/custom-forms.md b/docs/components/custom-forms.md index 97a469671..f42ce2759 100644 --- a/docs/components/custom-forms.md +++ b/docs/components/custom-forms.md @@ -29,6 +29,22 @@ In the checked states, we use **base64 embedded SVG icons** from [Open Iconic](h </label> {% endexample %} +Custom checkboxes can also utilize the `:indeterminate` pseudo class. + +<div class="bs-example bs-example-indeterminate"> + <label class="c-input c-checkbox"> + <input type="checkbox"> + <span class="c-indicator"></span> + Check this custom checkbox + </label> +</div> + +**Heads up!** You'll need to set this state manually via JavaScript as there is no available HTML attribute for specifying it. If you're using jQuery, something like this should suffice: + +{% highlight js %} +$('.your-checkbox').prop('indeterminate', true) +{% endhighlight %} + ### Radios {% example html %} |