Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-18 03:14:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add meta to components

Browse Source
This commit is contained in:
Jeremy Thomas
2017-07-28 23:27:59 +01:00
parent 24bc5ed795
commit 28856f6388
12 changed files with 765 additions and 420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,19 +2,33 @@
layout: documentation
doc-tab: components
doc-subtab: message
variables:
- name: $message-background-color
value: $background
- name: $message-radius
value: $radius
- name: $message-header-background-color
value: $text
- name: $message-header-color
value: $text-invert
- name: $message-header-padding
value: 0.5em 0.75em
- name: $message-header-radius
value: $radius
- name: $message-body-border
value: 1px solid $border
- name: $message-body-color
value: $text
- name: $message-body-padding
value: 1em 1.25em
- name: $message-body-radius
value: $radius
- name: $message-body-pre-background-color
value: $white
- name: $message-body-pre-code-background-color
value: transparent
---
{% include subnav-components.html %}
<section class="section">
<div class="container">
<h1 class="title">Messages</h1>
<h2 class="subtitle">
Colored <strong>message</strong> blocks, to emphasize part of your page
</h2>
<hr>
{% capture message_example %}
<article class="message">
<div class="message-header">
@@ -80,23 +94,7 @@ doc-subtab: message
</div>
</article>
{% endcapture %}
<div class="columns">
<div class="column is-half">
{{message_example}}
</div>
<div class="column is-half">
{% highlight html %}
{{message_example}}
{% endhighlight %}
</div>
</div>
<hr>
<h3 class="subtitle">Message body only</h3>
<div class="content">
<p>You can <strong>omit</strong> the message header:</p>
</div>
{% capture message_body_example %}
<article class="message">
<div class="message-body">
@@ -134,16 +132,49 @@ doc-subtab: message
</div>
</article>
{% endcapture %}
<div class="columns">
<div class="column is-half">
{{message_body_example}}
</div>
<div class="column is-half">
{% highlight html %}
{{message_body_example}}
{% endhighlight %}
</div>
</div>
{% include subnav-components.html %}
<section class="section">
<div class="container">
<h1 class="title">Messages</h1>
<h2 class="subtitle">
Colored <strong>message</strong> blocks, to emphasize part of your page
</h2>
{%
include meta.html
colors=true
sizes=true
variables=true
%}
<hr>
<div class="columns">
<div class="column is-half">
{{message_example}}
</div>
<div class="column is-half">
{% highlight html %}{{message_example}}{% endhighlight %}
</div>
</div>
<hr>
<h3 class="subtitle">Message body only</h3>
<div class="content">
<p>You can <strong>omit</strong> the message header:</p>
</div>
<div class="columns">
<div class="column is-half">
{{message_body_example}}
</div>
<div class="column is-half">
{% highlight html %}{{message_body_example}}{% endhighlight %}
</div>
</div>
{% include variables.html %}
</div>
</section>