Merge pull request #103 from picturepan2/feature/new-checkbox

Feature/new checkbox

1 files changed, 76 insertions, 72 deletions

diff --git a/index.html b/index.html
index ba1c044..2d482b0 100644
--- a/index.html
+++ b/index.html
@@ -546,29 +546,88 @@
                         </div>
                     </form>
                 </div>
+            </div>
+
+            <!-- forms example -->
+<pre class="code lang-html">
+&lt;<span class="tag">form</span>&gt;
+    <span class="com">&lt;!-- form input control --&gt;</span>
+    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
+        &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;input-example-1&quot;</span>&gt;Name&lt;<span class="tag">/label</span>&gt;
+        &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-1&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;Name&quot;</span> /&gt;
+    &lt;<span class="tag">/div</span>&gt;
+    <span class="com">&lt;!-- form radio control --&gt;</span>
+    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
+        &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label&quot;</span>&gt;Gender&lt;<span class="tag">/label</span>&gt;
+        &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-radio&quot;</span>&gt;
+            &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;gender&quot;</span> /&gt;
+            &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Male
+        &lt;<span class="tag">/label</span>&gt;
+        &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-radio&quot;</span>&gt;
+            &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;gender&quot;</span> <span class="atn">checked</span> /&gt;
+            &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Female
+        &lt;<span class="tag">/label</span>&gt;
+    &lt;<span class="tag">/div</span>&gt;
+    <span class="com">&lt;!-- form select control --&gt;</span>
+    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
+        &lt;<span class="tag">select</span> <span class="atn">class</span>=<span class="atv">&quot;form-select&quot;</span>&gt;
+            &lt;<span class="tag">option</span>&gt;Choose an option&lt;<span class="tag">/option</span>&gt;
+            &lt;<span class="tag">option</span>&gt;Slack&lt;<span class="tag">/option</span>&gt;
+            &lt;<span class="tag">option</span>&gt;Skype&lt;<span class="tag">/option</span>&gt;
+            &lt;<span class="tag">option</span>&gt;Hipchat&lt;<span class="tag">/option</span>&gt;
+        &lt;<span class="tag">/select</span>&gt;
+    &lt;<span class="tag">/div</span>&gt;
+    <span class="com">&lt;!-- form switch control --&gt;</span>
+    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
+        &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-switch&quot;</span>&gt;
+            &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;checkbox&quot;</span> /&gt;
+            &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Send me emails with news and tips
+        &lt;<span class="tag">/label</span>&gt;
+    &lt;<span class="tag">/div</span>&gt;
+    <span class="com">&lt;!-- form textarea control --&gt;</span>
+    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
+        &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;input-example-3&quot;</span>&gt;Message&lt;<span class="tag">/label</span>&gt;
+        &lt;<span class="tag">textarea</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-3&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;Textarea&quot;</span> <span class="atn">rows</span>=<span class="atv">&quot;3&quot;</span>&gt;&lt;<span class="tag">/textarea</span>&gt;
+    &lt;<span class="tag">/div</span>&gt;
+    <span class="com">&lt;!-- form checkbox control --&gt;</span>
+    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
+        &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-checkbox&quot;</span>&gt;
+            &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;checkbox&quot;</span> /&gt;
+            &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;  Remember me
+        &lt;<span class="tag">/label</span>&gt;
+    &lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">/form</span>&gt;
+</pre>
+
+            <section class="notes">
+                <p>You can use <code>:indeterminate</code> pseudo class for indeterminate state of checkboxes.</p>
+                <p>If you want to have a horizontal form, add the class <code>form-horizontal</code> to the &lt;form&gt; container. And add the class <code>col-[1-12]</code> to the child elements for form row layout. </p>
+            </section>
+
+            <div class="columns">
                 <div class="column col-6">
                     <form class="form-horizontal" action="#forms">
                         <div class="form-group">
-                            <div class="col-sm-3">
+                            <div class="col-3">
                                 <label class="form-label" for="input-example-4">Name</label>
                             </div>
-                            <div class="col-sm-9">
+                            <div class="col-9">
                                 <input class="form-input" type="text" id="input-example-4" placeholder="Name" />
                             </div>
                         </div>
                         <div class="form-group">
-                            <div class="col-sm-3">
+                            <div class="col-3">
                                 <label class="form-label" for="input-example-5">Email</label>
                             </div>
-                            <div class="col-sm-9">
+                            <div class="col-9">
                                 <input class="form-input" type="email" id="input-example-5" placeholder="Email" />
                             </div>
                         </div>
                         <div class="form-group">
-                            <div class="col-sm-3">
+                            <div class="col-3">
                                 <label class="form-label">Gender</label>
                             </div>
-                            <div class="col-sm-9">
+                            <div class="col-9">
                                 <label class="form-radio">
                                     <input type="radio" name="gender" />
                                     <i class="form-icon"></i> Male
@@ -580,8 +639,8 @@
                             </div>
                         </div>
                         <div class="form-group">
-                            <div class="col-sm-3"></div>
-                            <div class="col-sm-9">
+                            <div class="col-3"></div>
+                            <div class="col-9">
                                 <select class="form-select">
                                     <option>Choose an option</option>
                                     <option>Slack</option>
@@ -591,8 +650,8 @@
                             </div>
                         </div>
                         <div class="form-group">
-                            <div class="col-sm-3"></div>
-                            <div class="col-sm-9">
+                            <div class="col-3"></div>
+                            <div class="col-9">
                                 <label class="form-switch">
                                     <input type="checkbox" />
                                     <i class="form-icon"></i> Send me emails with news and tips
@@ -600,16 +659,16 @@
                             </div>
                         </div>
                         <div class="form-group">
-                            <div class="col-sm-3">
+                            <div class="col-3">
                                 <label class="form-label" for="input-example-6">Message</label>
                             </div>
-                            <div class="col-sm-9">
+                            <div class="col-9">
                                 <textarea class="form-input" id="input-example-6" placeholder="Textarea" rows="3"></textarea>
                             </div>
                         </div>
                         <div class="form-group">
-                            <div class="col-sm-3"></div>
-                            <div class="col-sm-9">
+                            <div class="col-3"></div>
+                            <div class="col-9">
                                 <label class="form-checkbox">
                                     <input type="checkbox" />
                                     <i class="form-icon"></i> Remember me
@@ -617,8 +676,8 @@
                             </div>
                         </div>
                         <div class="form-group">
-                            <div class="col-sm-3"></div>
-                            <div class="col-sm-9">
+                            <div class="col-3"></div>
+                            <div class="col-9">
                                 <button class="btn btn-primary" type="submit">Submit</button>
                                 <button class="btn btn-link" type="reset">Cancel</button>
                             </div>
@@ -629,61 +688,6 @@
 
             <!-- forms example -->
 <pre class="code lang-html">
-&lt;<span class="tag">form</span>&gt;
-    <span class="com">&lt;!-- form input control --&gt;</span>
-    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
-        &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;input-example-1&quot;</span>&gt;Name&lt;<span class="tag">/label</span>&gt;
-        &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-1&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;Name&quot;</span> /&gt;
-    &lt;<span class="tag">/div</span>&gt;
-    <span class="com">&lt;!-- form radio control --&gt;</span>
-    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
-        &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label&quot;</span>&gt;Gender&lt;<span class="tag">/label</span>&gt;
-        &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-radio&quot;</span>&gt;
-            &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;gender&quot;</span> /&gt;
-            &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Male
-        &lt;<span class="tag">/label</span>&gt;
-        &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-radio&quot;</span>&gt;
-            &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;gender&quot;</span> <span class="atn">checked</span> /&gt;
-            &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Female
-        &lt;<span class="tag">/label</span>&gt;
-    &lt;<span class="tag">/div</span>&gt;
-    <span class="com">&lt;!-- form select control --&gt;</span>
-    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
-        &lt;<span class="tag">select</span> <span class="atn">class</span>=<span class="atv">&quot;form-select&quot;</span>&gt;
-            &lt;<span class="tag">option</span>&gt;Choose an option&lt;<span class="tag">/option</span>&gt;
-            &lt;<span class="tag">option</span>&gt;Slack&lt;<span class="tag">/option</span>&gt;
-            &lt;<span class="tag">option</span>&gt;Skype&lt;<span class="tag">/option</span>&gt;
-            &lt;<span class="tag">option</span>&gt;Hipchat&lt;<span class="tag">/option</span>&gt;
-        &lt;<span class="tag">/select</span>&gt;
-    &lt;<span class="tag">/div</span>&gt;
-    <span class="com">&lt;!-- form switch control --&gt;</span>
-    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
-        &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-switch&quot;</span>&gt;
-            &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;checkbox&quot;</span> /&gt;
-            &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Send me emails with news and tips
-        &lt;<span class="tag">/label</span>&gt;
-    &lt;<span class="tag">/div</span>&gt;
-    <span class="com">&lt;!-- form textarea control --&gt;</span>
-    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
-        &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;input-example-3&quot;</span>&gt;Message&lt;<span class="tag">/label</span>&gt;
-        &lt;<span class="tag">textarea</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-3&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;Textarea&quot;</span> <span class="atn">rows</span>=<span class="atv">&quot;3&quot;</span>&gt;&lt;<span class="tag">/textarea</span>&gt;
-    &lt;<span class="tag">/div</span>&gt;
-    <span class="com">&lt;!-- form checkbox control --&gt;</span>
-    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
-        &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-checkbox&quot;</span>&gt;
-            &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;checkbox&quot;</span> /&gt;
-            &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;  Remember me
-        &lt;<span class="tag">/label</span>&gt;
-    &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/form</span>&gt;
-</pre>
-
-            <section class="notes">
-                <p>If you want to have a horizontal form, add the class <code>form-horizontal</code> to the &lt;form&gt; container. And add the class <code>col-[1-12]</code> to the child elements for form row layout. Please note <code>form-horizontal</code> only works in viewports that are at least 840px wide.</p>
-            </section>
-
-            <!-- forms example -->
-<pre class="code lang-html">
 &lt;<span class="tag">form</span> <span class="atn">class</span>=<span class="atv">&quot;form-horizontal&quot;</span>&gt;
     &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
         &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;col-sm-3&quot;</span>&gt;
@@ -2477,7 +2481,7 @@
     <footer class="bg-grey">
         <section id="copyright" class="grid-footer container grid-960">
             <p>
-                <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.26
+                <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.27
             </p>
             <p>Designed and built with love by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
         </section>