diff options
Diffstat (limited to 'docs/elements/forms.html')
-rw-r--r-- | docs/elements/forms.html | 21 |
1 files changed, 20 insertions, 1 deletions
diff --git a/docs/elements/forms.html b/docs/elements/forms.html index 25b2450..97d5980 100644 --- a/docs/elements/forms.html +++ b/docs/elements/forms.html @@ -19,7 +19,9 @@ <body> <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> - <div class="btns"><a class="btn btn-primary float-right" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a><a class="btn mr-1 float-right" href="https://www.paypal.me/picturepan2" target="_blank">Sponsor</a></div> + <div class="btns d-flex"> + <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> + </div> </div> <div class="docs-sidebar off-canvas-sidebar" id="sidebar"> <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework"> @@ -76,6 +78,8 @@ </li> <li class="menu-item"><a href="../layout/responsive.html">Responsive</a> </li> + <li class="menu-item"><a href="../layout/hero.html">Hero</a> + </li> <li class="menu-item"><a href="../layout/navbar.html">Navbar</a> </li> </ul> @@ -200,6 +204,7 @@ </div> </div> <p>Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.</p> + <h4 class="s-subtitle" id="forms-input">Form input<a class="anchor" href="#forms-input" aria-hidden="true">#</a></h4> <div class="docs-demo columns"> <div class="column col-6 col-xs-12"> <div class="form-group"> @@ -218,6 +223,7 @@ <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">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-1"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Name"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> + <h4 class="s-subtitle" id="forms-textarea">Form textarea<a class="anchor" href="#forms-textarea" aria-hidden="true">#</a></h4> <div class="docs-demo columns"> <div class="column col-6 col-xs-12"> <div class="form-group"> @@ -232,6 +238,7 @@ <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-3"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Textarea"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"3"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> + <h4 class="s-subtitle" id="forms-select">Form select<a class="anchor" href="#forms-select" aria-hidden="true">#</a></h4> <div class="docs-demo columns"> <div class="column col-6 col-xs-12"> <div class="form-group"> @@ -262,6 +269,7 @@ <span class="hljs-tag"></<span class="hljs-name">select</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> + <h4 class="s-subtitle" id="forms-radio">Form radio<a class="anchor" href="#forms-radio" aria-hidden="true">#</a></h4> <div class="docs-demo columns"> <div class="column col-6 col-xs-12"> <form> @@ -290,6 +298,7 @@ <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-switch">Form switch<a class="anchor" href="#forms-switch" aria-hidden="true">#</a></h4> <div class="docs-demo columns"> <div class="column col-6 col-xs-12"> <div class="form-group"> @@ -312,6 +321,7 @@ <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-checkbox">Form checkbox<a class="anchor" href="#forms-checkbox" aria-hidden="true">#</a></h4> <div class="docs-demo columns"> <div class="column col-6 col-xs-12"> <div class="form-group"> @@ -949,6 +959,15 @@ </div> </div> </div> + <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> + <script> + docsearch({ + apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', + indexName: 'picturepan2_spectre', + inputSelector: '.docs-search', + debug: true + }); + </script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), |