From 0082f690ed5378a3a6d0243b84ac8eb597034989 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Wed, 13 Apr 2016 14:29:17 +0800
Subject: fix radio and checkbox styles

---
 index.html | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

(limited to 'index.html')

diff --git a/index.html b/index.html
index 6e192e5..3cb698c 100644
--- a/index.html
+++ b/index.html
@@ -514,10 +514,12 @@
                         <div class="form-group">
                             <label class="form-label">Gender</label>
                             <label class="form-radio">
-                                <input type="radio" name="gender" /> Male
+                                <input type="radio" name="gender" />
+                                <i class="form-icon"></i> Male
                             </label>
                             <label class="form-radio">
-                                <input type="radio" name="gender" checked /> Female
+                                <input type="radio" name="gender" checked />
+                                <i class="form-icon"></i> Female
                             </label>
                         </div>
                         <div class="form-group">
@@ -531,7 +533,7 @@
                         <div class="form-group">
                             <label class="form-switch">
                                 <input type="checkbox" />
-                                Send me emails with news and tips
+                                <i class="form-icon"></i> Send me emails with news and tips
                             </label>
                         </div>
                         <div class="form-group">
@@ -541,7 +543,7 @@
                         <div class="form-group">
                             <label class="form-checkbox">
                                 <input type="checkbox" />
-                                Remember me
+                                <i class="form-icon"></i> Remember me
                             </label>
                         </div>
                         <div class="form-group">
@@ -568,10 +570,12 @@
                             <label class="form-label col-3">Gender</label>
                             <div class="col-9">
                                 <label class="form-radio">
-                                    <input type="radio" name="gender" /> Male
+                                    <input type="radio" name="gender" />
+                                    <i class="form-icon"></i> Male
                                 </label>
                                 <label class="form-radio">
-                                    <input type="radio" name="gender" checked /> Female
+                                    <input type="radio" name="gender" checked />
+                                    <i class="form-icon"></i> Female
                                 </label>
                             </div>
                         </div>
@@ -591,7 +595,7 @@
                             <div class="col-9">
                                 <label class="form-switch">
                                     <input type="checkbox" />
-                                    Send me emails with news and tips
+                                    <i class="form-icon"></i> Send me emails with news and tips
                                 </label>
                             </div>
                         </div>
@@ -606,7 +610,7 @@
                             <div class="col-9">
                                 <label class="form-checkbox">
                                     <input type="checkbox" />
-                                    Remember me
+                                    <i class="form-icon"></i> Remember me
                                 </label>
                             </div>
                         </div>
@@ -1899,7 +1903,7 @@
     <footer class="bg-grey">
         <section id="copyright" class="grid-footer grid-960">
             <p>
-                <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.6
+                <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.7
             </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>
-- 
cgit v1.3.1-23-gd82d


From c2b83c4adf9bc003fc98c1f6be12daa95e400203 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Wed, 13 Apr 2016 14:49:17 +0800
Subject: update forms doc and example code

---
 index.html     | 10 ++++++----
 src/forms.less |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

(limited to 'index.html')

diff --git a/index.html b/index.html
index 3cb698c..c3729f2 100644
--- a/index.html
+++ b/index.html
@@ -637,10 +637,12 @@
     &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; Male
+            &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; Female
+            &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>
@@ -656,7 +658,7 @@
     &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;
-            Send me emails with news and tips
+            &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>
@@ -668,7 +670,7 @@
     &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;
-            Remember me
+            &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;
diff --git a/src/forms.less b/src/forms.less
index 339cae4..e542491 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -253,7 +253,7 @@
       transition: left .15s ease;
     }
   }
-  
+
   input:checked + .form-icon {
     background-color: @core-color;
     border-color: @core-color;
-- 
cgit v1.3.1-23-gd82d