mirror/chota
1
0
Fork 0
mirror of https://github.com/jenil/chota.git synced 2023-08-10 21:13:07 +03:00
Code Issues Projects Releases Wiki Activity

Clarify the difference between details and .dropdown

Browse Source
This commit is contained in:
yne 2019-09-15 00:13:53 +02:00
parent ed20f00004
commit f05ce0504d
1 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
docs/_includes/utilities.html
View File

@ -87,12 +87,34 @@
<li><code>hide-pr</code> - hides the element for printing</li>
</ul>
<h4>Details</h4>
<p>You can have a <code>&lt;details&gt;</code> with a <code>.dropdown</code> class to defines a toggle-able block of content with a summary and additional details.</p>
<details class="dropdown">
<p>You can have a <code>&lt;details&gt;</code> to defines a toggle-able block of content with a summary and additional details.</p>
<details>
<summary>Read more</summary>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec
nulla vitae mollis.
</p>
</details>
<p>This can be coupled to a <code>.dropdown</code> and a couple of <code>.button</code> and <code>.card</code> classes to defines a dropdown button.</p>
<details class=dropdown>
<summary class="button outline">My Profile</summary>
<div class=card>
<p><a href="#">Edit</a></p>
<p><a href="#">Alerts&nbsp;<span class=tag>3</span></a></p>
<hr/>
<p><a href="#" class=text-error>Logout</a></p>
</div>
</details>
<details class=dropdown>
<summary class="button outline">Login</summary>
<form class="card row">
<input class=col-12 placeholder=username>
<input class=col-12 placeholder=password type=password>
<footer class=is-right>
<a class="button clear">Sign up</a>
<button type=submit>Sign in</button>
</footer>
</form>
</details>
</section>