Merge pull request #208 from picturepan2/0.2.14 v0.2.14

0.2.14

1 files changed, 122 insertions, 19 deletions

diff --git a/docs/elements.html b/docs/elements.html
index 85448a3..c672613 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -81,7 +81,7 @@
 
       <div class="docs-content column col-9 col-sm-12">
         <section id="typography" class="container">
-          <header class="text-center"><h3>Typography</h3></header>
+          <header class="text-center"><h3><a href="#typography" class="anchor" aria-hidden="true">#</a>Typography</h3></header>
           <section class="notes">
             <p><strong>Typography</strong> sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.</p>
           </section>
@@ -287,7 +287,7 @@
         </section>
 
         <section id="tables" class="container">
-          <header class="text-center"><h3>Tables</h3></header>
+          <header class="text-center"><h3><a href="#tables" class="anchor" aria-hidden="true">#</a>Tables</h3></header>
           <section class="notes">
             <p><strong>Tables</strong> include default styles for tables and data sets.</p>
           </section>
@@ -349,7 +349,7 @@
         </section>
 
         <section id="buttons" class="container">
-          <header class="text-center"><h3>Buttons</h3></header>
+          <header class="text-center"><h3><a href="#buttons" class="anchor" aria-hidden="true">#</a>Buttons</h3></header>
           <section class="notes">
             <p><strong>Buttons</strong> include simple button styles for actions in different types and sizes. </p>
           </section>
@@ -446,9 +446,6 @@
               <button class="btn btn-primary btn-sm">small</button>
             </div>
           </div>
-          <section class="notes">
-            <p>Icons with the <code>icon</code> class can be correctly rendered in each button size. </p>
-          </section>
 
 <!-- buttons example -->
 <pre class="code" data-lang="HTML"><code>&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary btn-lg&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; large&lt;<span class="tag">/button</span>&gt;
@@ -504,7 +501,7 @@
         </section>
 
         <section id="forms" class="container">
-          <header class="text-center"><h3>Forms</h3></header>
+          <header class="text-center"><h3><a href="#forms" class="anchor" aria-hidden="true">#</a>Forms</h3></header>
           <section class="notes">
             <p><strong>Forms</strong> provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.  </p>
           </section>
@@ -717,6 +714,9 @@
           </section>
           <div class="columns">
             <div class="column col-4">
+              <label class="form-label label-sm">Label</label>
+            </div>
+            <div class="column col-4">
               <input class="form-input input-sm" type="text" placeholder="Name" />
             </div>
             <div class="column col-4">
@@ -727,12 +727,12 @@
                 <option>Hipchat</option>
               </select>
             </div>
-            <div class="column col-4">
-              <label class="form-label label-sm">Label</label>
-            </div>
           </div>
           <div class="columns">
             <div class="column col-4">
+              <label class="form-label label-lg">Label</label>
+            </div>
+            <div class="column col-4">
               <input class="form-input input-lg" type="text" placeholder="Name" />
             </div>
             <div class="column col-4">
@@ -743,11 +743,93 @@
                 <option>Hipchat</option>
               </select>
             </div>
+          </div>
+
+          <header class="text-center"><h4>Form icons</h4></header>
+          <section class="notes">
+            <p>Add a wrapper with the <code>has-icon-left</code>/<code>has-icon-right</code> class to &lt;input&gt; element. And add the icon with <code>form-icon</code> class next to the &lt;input&gt;.</p>
+          </section>
+          <div class="columns">
+            <div class="column col-4">
+              <div class="has-icon-left">
+                <input class="form-input input-sm" type="text" placeholder="Name" />
+                <i class="form-icon icon icon-cross"></i>
+              </div>
+            </div>
             <div class="column col-4">
-              <label class="form-label label-lg">Label</label>
+              <div class="has-icon-left">
+                <input class="form-input" type="text" placeholder="Name" />
+                <i class="form-icon icon icon-cross"></i>
+              </div>
+            </div>
+            <div class="column col-4">
+              <div class="has-icon-left">
+                <input class="form-input input-lg" type="text" placeholder="Name" />
+                <i class="form-icon icon icon-cross"></i>
+              </div>
+            </div>
+          </div>
+          <div class="columns">
+            <div class="column col-4">
+              <div class="has-icon-right">
+                <input class="form-input input-sm" type="text" placeholder="Name" />
+                <i class="form-icon icon icon-check"></i>
+              </div>
+            </div>
+            <div class="column col-4">
+              <div class="has-icon-right">
+                <input class="form-input" type="text" placeholder="Name" />
+                <i class="form-icon icon icon-check"></i>
+              </div>
+            </div>
+            <div class="column col-4">
+              <div class="has-icon-right">
+                <input class="form-input input-lg" type="text" placeholder="Name" />
+                <i class="form-icon icon icon-check"></i>
+              </div>
+            </div>
+          </div>
+
+<!-- form icons example -->
+<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- form input with Spectre icon --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;has-icon-left&quot;</span>&gt;
+  &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;...&quot;</span> /&gt;
+  &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon icon icon-check&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
+&lt;<span class="tag">/div</span>&gt;
+</code></pre>
+
+          <section class="notes">
+            <p>You can use the <code>loading</code> class for loading or posting state.</p>
+          </section>
+
+          <div class="columns">
+            <div class="column col-4">
+              <div class="has-icon-right">
+                <input class="form-input input-sm" type="text" placeholder="Name" />
+                <i class="form-icon loading"></i>
+              </div>
+            </div>
+            <div class="column col-4">
+              <div class="has-icon-right">
+                <input class="form-input" type="text" placeholder="Name" />
+                <i class="form-icon loading"></i>
+              </div>
+            </div>
+            <div class="column col-4">
+              <div class="has-icon-right">
+                <input class="form-input input-lg" type="text" placeholder="Name" />
+                <i class="form-icon loading"></i>
+              </div>
             </div>
           </div>
 
+<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- form input with loading icon --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;has-icon-right&quot;</span>&gt;
+  &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;...&quot;</span> /&gt;
+  &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon loading&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
+&lt;<span class="tag">/div</span>&gt;
+</code></pre>
+
           <header class="text-center"><h4>Input types</h4></header>
           <div class="columns">
             <div class="column col-9 col-sm-12">
@@ -833,7 +915,11 @@
             <div class="column col-xs-12">
               <div class="input-group">
                 <input type="text" class="form-input input-sm" placeholder="username" />
-                <span class="input-group-addon addon-sm">@slack.com</span>
+                <select class="form-select select-sm">
+                  <option>Slack</option>
+                  <option>Skype</option>
+                  <option>Hipchat</option>
+                </select>
               </div>
             </div>
             <div class="column col-xs-12">
@@ -848,7 +934,11 @@
             <div class="column col-xs-12">
               <div class="input-group">
                 <input type="text" class="form-input" placeholder="username" />
-                <span class="input-group-addon">@slack.com</span>
+                <select class="form-select">
+                  <option>Slack</option>
+                  <option>Skype</option>
+                  <option>Hipchat</option>
+                </select>
               </div>
             </div>
             <div class="column col-xs-12">
@@ -863,7 +953,11 @@
             <div class="column col-xs-12">
               <div class="input-group">
                 <input type="text" class="form-input input-lg" placeholder="username" />
-                <span class="input-group-addon addon-lg">@slack.com</span>
+                <select class="form-select select-lg">
+                  <option>Slack</option>
+                  <option>Skype</option>
+                  <option>Hipchat</option>
+                </select>
               </div>
             </div>
             <div class="column col-xs-12">
@@ -939,6 +1033,15 @@
               </div>
             </div>
           </div>
+          <div class="columns">
+            <div class="column col-6 col-xs-12">
+              <div class="form-group">
+                <label class="form-label" for="input-example-21">Email</label>
+                <input class="form-input" type="text" id="input-example-21" placeholder="Email" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$" />
+                <p class="form-input-hint">The name is invalid.</p>
+              </div>
+            </div>
+          </div>
 
 <!-- forms example -->
 <pre class="code" data-lang="HTML"><code>&lt;<span class="tag">form</span>&gt;
@@ -1012,7 +1115,7 @@
         </section>
 
         <section id="icons" class="container">
-          <header class="text-center"><h3>Icons <small class="label">experimental</small></h3></header>
+          <header class="text-center"><h3><a href="#icons" class="anchor" aria-hidden="true">#</a>Icons <small class="label">experimental</small></h3></header>
           <section class="notes">
             <p><strong>Icons</strong> are single-element, responsive and pure CSS icons. You can include <code>spectre-icons.css</code> located in the <code>dist</code> folder to your web &lt;head&gt; to have these CSS icons.</p>
           </section>
@@ -1261,7 +1364,7 @@
         </section>
 
         <section id="labels" class="container">
-          <header class="text-center"><h3>Labels</h3></header>
+          <header class="text-center"><h3><a href="#labels" class="anchor" aria-hidden="true">#</a>Labels</h3></header>
           <section class="notes">
             <p><strong>Labels</strong> are formatted text tags for highlighted, informative information.</p>
           </section>
@@ -1286,7 +1389,7 @@
         </section>
 
         <section id="codes" class="container">
-          <header class="text-center"><h3>Codes</h3></header>
+          <header class="text-center"><h3><a href="#codes" class="anchor" aria-hidden="true">#</a>Codes</h3></header>
           <section class="notes">
             <p><strong>Codes</strong> are inline and multiline code snippets.</p>
             <p>For inline code, you can use the element <code>&lt;code&gt;</code>. For multiline code snippet blocks, you can use &lt;pre&gt; with the <code>code</code> class as a container, and add &lt;code&gt; inside it. The <code>data-lang</code> attribute is rendered as the language name in the top right.</p>
@@ -1309,7 +1412,7 @@
         </section>
 
         <section id="media" class="container">
-          <header class="text-center"><h3>Media</h3></header>
+          <header class="text-center"><h3><a href="#media" class="anchor" aria-hidden="true">#</a>Media</h3></header>
           <section class="notes">
             <p><strong>Media</strong> includes responsive images, figures and video classes. </p>
             <p>Add the <code>img-responsive</code> class to &lt;img&gt; elements. The images will scale with the parent sizes.</p>
@@ -1344,7 +1447,7 @@
 </code></pre>
 
           <section class="notes">
-            <p>You can use the element <code>&lt;figure&gt;</code> for an image with a caption. Add the <code>figure</code> class to &lt;figure&gt; element. The images with the <code>img-responsive</code> class will be responsive. And the included class <code>figure-caption</code> will provide basic style for caption. Also, you can use <code>text-left</code>, <code>text-center</code> and <code>text-right</code> for caption alignment.  </p>
+            <p>You can use the element &lt;figure&gt; for an image with a caption. Add the <code>figure</code> class to &lt;figure&gt; element. The images with the <code>img-responsive</code> class will be responsive. And the included class <code>figure-caption</code> will provide basic style for caption. Also, you can use <code>text-left</code>, <code>text-center</code> and <code>text-right</code> for caption alignment.  </p>
           </section>
           <div class="columns">
             <div class="column col-12">