mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-22 12:53:23 +02:00
Code Issues Releases Wiki Activity

kss - fixing search form

Browse Source
This commit is contained in:
Luis Sacristán
2017-10-04 21:09:31 +02:00
parent 5c588c46a7
commit cc89e47825
5 changed files with 239 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
doc/styleguide/section-forms.html
View File

@@ -42,12 +42,12 @@
<ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-forms.html#kssref-forms-login">
<span class="kss-nav__name">Search</span>
<span class="kss-nav__name">Login</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-forms.html#kssref-forms-login">
<span class="kss-nav__name">Login</span>
<a class="kss-nav__menu-link kss-nav__ref " href="section-forms.html#kssref-forms-search">
<span class="kss-nav__name">Search</span>
</a>
</li>
<li class="kss-nav__menu-item">
@@ -107,82 +107,6 @@
</div>
<div id="kssref-forms-login" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-forms-login">
Search
</a>
</h2>
<div class="kss-description">
<p>WebSlides provides a easy way for search forms creating. Connect it to your search engine and help your users to find information in your site. Longforms are part of a whole website, a search form allows to find more relevant information in your site.</p>
</div>
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;92" title="Search form - Components" target="_blank">Search form - Components</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<form action="/" method="post">
<fieldset>
<legend>Welcome back</legend>
<p><label>Username or Email</label>
<input tabindex="1" name="email" placeholder="your@email.com" required="" type="text">
</p>
<p><label>Password <span class="alignright"><a href="#" title="Forgot password?">Forgot?</a></span></label>
<input tabindex="2" name="password" placeholder="6 characters minimum" required="" type="password">
</p>
<p>
<button type="submit" tabindex="3" title="Login">Login ›</button>
</p>
</fieldset>
</form>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;form action&#x3D;&quot;/&quot; method&#x3D;&quot;post&quot;&gt;
&lt;fieldset&gt;
&lt;legend&gt;Welcome back&lt;/legend&gt;
&lt;p&gt;&lt;label&gt;Username or Email&lt;/label&gt;
&lt;input tabindex&#x3D;&quot;1&quot; name&#x3D;&quot;email&quot; placeholder&#x3D;&quot;your@email.com&quot; required&#x3D;&quot;&quot; type&#x3D;&quot;text&quot;&gt;
&lt;/p&gt;
&lt;p&gt;&lt;label&gt;Password &lt;span class&#x3D;&quot;alignright&quot;&gt;&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Forgot password?&quot;&gt;Forgot?&lt;/a&gt;&lt;/span&gt;&lt;/label&gt;
&lt;input tabindex&#x3D;&quot;2&quot; name&#x3D;&quot;password&quot; placeholder&#x3D;&quot;6 characters minimum&quot; required&#x3D;&quot;&quot; type&#x3D;&quot;password&quot;&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;button type&#x3D;&quot;submit&quot; tabindex&#x3D;&quot;3&quot; title&#x3D;&quot;Login&quot;&gt;Login ›&lt;/button&gt;
&lt;/p&gt;
&lt;/fieldset&gt;
&lt;/form&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_form.scss</code>, line 146
</div>
</div>
<div id="kssref-forms-login" class="kss-section kss-section--depth-2 ">
@@ -256,7 +180,65 @@
</details>
<div class="kss-source kss-style">
Source: <code>modules/_form.scss</code>, line 163
Source: <code>modules/_form.scss</code>, line 164
</div>
</div>
<div id="kssref-forms-search" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-forms-search">
Search
</a>
</h2>
<div class="kss-description">
<p>WebSlides provides a easy way for search forms creating. Connect it to your search engine and help your users to find information in your site. Longforms are part of a whole website, a search form allows to find more relevant information in your site.</p>
</div>
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;92" title="Search form - Components" target="_blank">Search form - Components</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas urna nisi, mollis sit amet venenatis nec, pulvinar id mi.</p>
<form action="/" class="user" method="post">
<input name="location" tabindex="1" placeholder="Type here..." required="" type="search">
<button type="submit" tabindex="2" title="Search">Search ›</button>
</form>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas urna nisi, mollis sit amet venenatis nec, pulvinar id mi.&lt;/p&gt;
&lt;form action&#x3D;&quot;/&quot; class&#x3D;&quot;user&quot; method&#x3D;&quot;post&quot;&gt;
&lt;input name&#x3D;&quot;location&quot; tabindex&#x3D;&quot;1&quot; placeholder&#x3D;&quot;Type here...&quot; required&#x3D;&quot;&quot; type&#x3D;&quot;search&quot;&gt;
&lt;button type&#x3D;&quot;submit&quot; tabindex&#x3D;&quot;2&quot; title&#x3D;&quot;Search&quot;&gt;Search ›&lt;/button&gt;
&lt;/form&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_form.scss</code>, line 146
</div>
</div>