diff options
Diffstat (limited to 'docs/elements.html')
| -rw-r--r-- | docs/elements.html | 93 |
1 files changed, 81 insertions, 12 deletions
diff --git a/docs/elements.html b/docs/elements.html index 6a7f1b1..babb472 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -18,7 +18,7 @@ <div class="docs-container off-canvas off-canvas-sidebar-show"> <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a><a class="btn btn-primary" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a></div> <div class="docs-sidebar off-canvas-sidebar" id="sidebar"> - <div class="docs-brand"><a class="docs-logo" href="/"><img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> + <div class="docs-brand"><a class="docs-logo" href="index.html"><img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> <h2>SPECTRE</h2></a></div> <div class="docs-nav"> <div class="accordion-container"> @@ -133,7 +133,7 @@ <h3 class="s-title">Typography<a class="anchor" href="#typography" aria-hidden="true">#</a></h3> <div class="docs-ad"> <div class="hide-md text-center"> - <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> + <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> @@ -399,7 +399,7 @@ <div class="container" id="buttons"> <h3 class="s-title">Buttons<a class="anchor" href="#buttons" aria-hidden="true">#</a></h3> <div class="docs-ad docs-ad-sidebar text-center"> - <script id="_carbonads_js" async="" type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script> + <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script> </div> <p>Buttons include simple button styles for actions in different types and sizes.</p> <div class="docs-demo columns"> @@ -682,7 +682,62 @@ <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> - <p>You can use <code>:indeterminate</code> pseudo class for indeterminate state of checkboxes.</p> + <div class="docs-demo columns"> + <div class="column"> + <div class="form-group"> + <label class="form-checkbox"> + <input id="docs-demo-checkbox" type="checkbox"><i class="form-icon"></i> Select all + </label> + </div> + </div> + </div> + <script> + document.getElementById("docs-demo-checkbox").indeterminate = true; + + </script> + <p>You can change checkbox to indeterminate state by setting the <code>indeterminate</code> property of input checkboxes to <code>true</code>.</p> + <h4 class="s-subtitle" id="forms-inline">Inline forms<a class="anchor" href="#forms-inline" aria-hidden="true">#</a></h4> + <div class="docs-demo columns"> + <div class="column col-6 col-xs-12"> + <form> + <div class="form-group"> + <label class="form-radio form-inline"> + <input type="radio" name="gender" checked=""><i class="form-icon"></i> Male + </label> + <label class="form-radio form-inline"> + <input type="radio" name="gender"><i class="form-icon"></i> Female + </label> + </div> + <div class="form-group"> + <label class="form-checkbox form-inline"> + <input type="checkbox"><i class="form-icon"></i> Checkbox 1 + </label> + <label class="form-checkbox form-inline"> + <input type="checkbox" checked=""><i class="form-icon"></i> Checkbox 2 + </label> + </div> + </form> + </div> + </div> + <p>You can add the <code>form-inline</code> class to the form components to make them inline in one row.</p> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio form-inline"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">""</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Male + <span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio form-inline"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Female + <span class="hljs-tag"></<span class="hljs-name">label</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox form-inline"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Checkbox 1 + <span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox form-inline"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">""</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Checkbox 2 + <span class="hljs-tag"></<span class="hljs-name">label</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +</code></pre> <h4 class="s-subtitle" id="forms-horizontal">Horizontal forms<a class="anchor" href="#forms-horizontal" aria-hidden="true">#</a></h4> <p>If you want to have a horizontal form, add the <code>form-horizontal</code> class to the <form> container. And add the <code>col-<1-12></code> and <code>col-xs/sm/lg/xl-<1-12></code> class to the child elements for responsive form row layout. @@ -1037,9 +1092,6 @@ <span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> <h4 class="s-subtitle" id="forms-validation">Form validation styles<a class="anchor" href="#forms-validation" aria-hidden="true">#</a></h4> - <p>To use form validation styles, you can either add <code>is-success</code> or <code>is-error</code> class to the controls or add <code>has-success</code> or <code>has-error</code> class to parent elements. - Use the <code>form-input-hint</code> class to provide form validation success and error messages. - </p> <div class="docs-demo columns"> <div class="column col-9 col-sm-12"> <fieldset> @@ -1054,11 +1106,6 @@ <input class="form-input" id="input-example-18" type="password" placeholder="Password"> <p class="form-input-hint">Passwords must have at least 8 characters.</p> </div> - <div class="form-group"> - <label class="form-label" for="input-example-21">Email</label> - <input class="form-input" id="input-example-21" type="text" placeholder="Email" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$"> - <p class="form-input-hint">The Email address is unavailable.</p> - </div> </fieldset> <fieldset> <legend>Select</legend> @@ -1104,6 +1151,9 @@ </fieldset> </div> </div> + <p>To use form validation styles, you can either add <code>is-success</code> or <code>is-error</code> class to the controls or add <code>has-success</code> or <code>has-error</code> class to parent elements. + Use the <code>form-input-hint</code> class to provide form validation success and error messages. + </p> <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">form</span>></span> <span class="hljs-comment"><!-- form validation class: has-success --></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group has-success"</span>></span> @@ -1128,6 +1178,25 @@ <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">form</span>></span> </code></pre> + <div class="docs-demo columns"> + <div class="column col-9 col-sm-12"> + <div class="form-group"> + <label class="form-label" for="input-example-21">Email</label> + <input class="form-input" id="input-example-21" type="text" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,14}$"> + </div> + <div class="form-group"> + <label class="form-label" for="input-example-22">Password</label> + <input class="form-input" id="input-example-22" type="password" placeholder="Password" pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$"> + </div> + </div> + </div> + <p>You can use input <code>pattern</code> attribute to validate the value as well.</p> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- pattern validation example for Email --></span> +<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Email"</span> <span class="hljs-attr">pattern</span>=<span class="hljs-string">"[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,14}$"</span>></span> + +<span class="hljs-comment"><!-- pattern validation example for password (8 or more characters that are of at least one number, and one uppercase and lowercase letter) --></span> +<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"password"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Password"</span> <span class="hljs-attr">pattern</span>=<span class="hljs-string">"^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$"</span>></span> +</code></pre> <h4 class="s-subtitle" id="forms-disabled">Form disabled styles<a class="anchor" href="#forms-disabled" aria-hidden="true">#</a></h4> <p> Add the <code>disabled</code> attribute to the element or <fieldset> for a disabled form components style.</p> |