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

Meta button

Browse Source
This commit is contained in:
Jeremy Thomas
2017-07-28 23:45:40 +01:00
parent 28856f6388
commit 741e9d2d40
3 changed files with 395 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
docs/documentation/components/message.html
View File

@@ -39,6 +39,9 @@ variables:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
</div>
</article>
{% endcapture %}
{% capture message_colors_example %}
<article class="message is-dark">
<div class="message-header">
<p>Dark</p>
@@ -95,6 +98,54 @@ variables:
</article>
{% endcapture %}
{% capture message_small %}
<article class="message is-small">
<div class="message-header">
<p>Small message</p>
<button class="delete is-small"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus.
</div>
</article>
{% endcapture %}
{% capture message_normal %}
<article class="message">
<div class="message-header">
<p>Normal message</p>
<button class="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus.
</div>
</article>
{% endcapture %}
{% capture message_medium %}
<article class="message is-medium">
<div class="message-header">
<p>Medium message</p>
<button class="delete is-medium"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus.
</div>
</article>
{% endcapture %}
{% capture message_large %}
<article class="message is-large">
<div class="message-header">
<p>Large message</p>
<button class="delete is-large"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus.
</div>
</article>
{% endcapture %}
{% capture message_body_example %}
<article class="message">
<div class="message-body">
@@ -174,6 +225,63 @@ variables:
</div>
</div>
<hr style="margin-bottom: 0;">
<h3 id="colors" class="title" style="padding-top: 1.5rem;">
Colors
</h3>
<div class="columns">
<div class="column is-half">
{{message_colors_example}}
</div>
<div class="column is-half">
{% highlight html %}{{message_colors_example}}{% endhighlight %}
</div>
</div>
<hr style="margin-bottom: 0;">
<h3 id="sizes" class="title" style="padding-top: 1.5rem;">
Sizes
</h3>
<div class="columns">
<div class="column is-half">
{{message_small}}
</div>
<div class="column is-half">
{% highlight html %}{{message_small}}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column is-half">
{{message_normal}}
</div>
<div class="column is-half">
{% highlight html %}{{message_normal}}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column is-half">
{{message_medium}}
</div>
<div class="column is-half">
{% highlight html %}{{message_medium}}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column is-half">
{{message_large}}
</div>
<div class="column is-half">
{% highlight html %}{{message_large}}{% endhighlight %}
</div>
</div>
{% include variables.html %}
</div>