diff options
1 files changed, 89 insertions, 4 deletions
| -rw-r--r-- | docs/elements.html | 93 |
diff --git a/docs/elements.html b/docs/elements.html index 1ccbbd3..c672613 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -714,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"> @@ -724,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"> @@ -740,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 <input> element. And add the icon with <code>form-icon</code> class next to the <input>.</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"><!-- form input with Spectre icon --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"has-icon-left"</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span> /> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon icon icon-check"</span>><<span class="tag">/i</span>> +<<span class="tag">/div</span>> +</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"><!-- form input with loading icon --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"has-icon-right"</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span> /> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon loading"</span>><<span class="tag">/i</span>> +<<span class="tag">/div</span>> +</code></pre> + <header class="text-center"><h4>Input types</h4></header> <div class="columns"> <div class="column col-9 col-sm-12"> |