Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-17 10:54:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix delete element

Browse Source
This commit is contained in:
Jeremy Thomas
2016-10-30 16:11:04 +00:00
parent 84a40052fc
commit 36822ed3fb
9 changed files with 667 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
docs/documentation/elements/delete.html Normal file
View File

@@ -0,0 +1,95 @@
---
layout: documentation
doc-tab: elements
doc-subtab: delete
---
{% include subnav-elements.html %}
<section class="section">
<div class="container">
<h1 class="title">Delete</h1>
<h2 class="subtitle">
A versatile <strong>delete</strong> cross
</h2>
<hr>
<div class="content">
<p>
The <code>.delete</code> element is a stand-alone element that can be used in different contexts.
</p>
</div>
{% capture cross_example %}
<a class="delete"></a>
{% endcapture %}
<div class="columns">
<div class="column">
<div class="content">
<p>
On its own, it's a simple circle with a cross:
</p>
</div>
{{cross_example}}
</div>
<div class="column">
{% highlight html %}
{{cross_example}}
{% endhighlight %}
</div>
</div>
{% capture cross_sizes_example %}
<a class="delete is-small"></a>
<a class="delete"></a>
<a class="delete is-medium"></a>
<a class="delete is-large"></a>
{% endcapture %}
<div class="columns">
<div class="column">
<div class="content">
<p>
It comes in <strong>4 sizes</strong>:
</p>
</div>
{{cross_sizes_example}}
</div>
<div class="column">
{% highlight html %}
{{cross_sizes_example}}
{% endhighlight %}
</div>
</div>
{% capture cross_elements_example %}
<div class="block">
<span class="tag is-success">
Hello World
<button class="delete is-small"></button>
</span>
</div>
<div class="notification is-danger">
<button class="delete"></button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
{% endcapture %}
<div class="columns">
<div class="column">
<div class="content">
<p>
Bulma uses it for the <a href="/documentation/elements/tag/">tags</a> and the <a href="/documentation/elements/notification/">notifications</a>:
</p>
</div>
{{cross_elements_example}}
</div>
<div class="column">
{% highlight html %}
{{cross_elements_example}}
{% endhighlight %}
</div>
</div>
</div>
</section>