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

Bulma v9 website (#3249)

Browse Source 
* Add Bulma v9

* Add vendor dependencies

* Fix native

* Fix sponsors

* Add style attribute
This commit is contained in:
Jeremy Thomas
2021-01-27 23:30:42 +00:00
committed by GitHub
parent c5edaea84f
commit 08ef4df2c0
1963 changed files with 157468 additions and 9452 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
docs/documentation/components/panel.html
View File

@@ -82,8 +82,47 @@ meta:
</nav>
{% endcapture %}
{% capture panel_colors_example %}
<div class="content">
<p>
The <code>panel</code> is a container for several types:
</p>
<ul>
<li>
<code>panel-heading</code> as the first child
</li>
<li>
<code>panel-tabs</code> for navigation
</li>
<li>
<code>panel-block</code> which can contain other elements, like:
<ul>
<li><code>control</code></li>
<li><code>input</code></li>
<li><code>button</code></li>
<li><code>panel-icon</code></li>
</ul>
</li>
</ul>
<p>
The <code>panel-block</code> can be an anchor tag <code>&lt;a&gt;</code> or a label <code>&lt;label&gt;</code> with a checkbox inside.
</p>
</div>
{% include elements/snippet.html content=panel_example more=true %}
{% include elements/anchor.html name="Colors" %}
<div class="content">
<p>
The panel component is available in all the <strong>different colors</strong> defined by the <a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>. Simply append one of the color modifiers.
</p>
<p>
For example, to use your primary color, use <code>"panel is-primary"</code> as a class.
</p>
</div>
{% for color in site.data.colors.justColors %}
{% capture foobar %}
<article class="panel is-{{ color }}">
<p class="panel-heading">
{{ color | capitalize }}
@@ -128,50 +167,8 @@ meta:
jgthms.github.io
</a>
</article>
{% endfor %}
{% endcapture %}
{% include elements/snippet.html content=foobar more=true %}
{% endfor %}
<div class="content">
<p>
The <code>panel</code> is a container for several types:
</p>
<ul>
<li>
<code>panel-heading</code> as the first child
</li>
<li>
<code>panel-tabs</code> for navigation
</li>
<li>
<code>panel-block</code> which can contain other elements, like:
<ul>
<li><code>control</code></li>
<li><code>input</code></li>
<li><code>button</code></li>
<li><code>panel-icon</code></li>
</ul>
</li>
</ul>
<p>
The <code>panel-block</code> can be an anchor tag <code>&lt;a&gt;</code> or a label <code>&lt;label&gt;</code> with a checkbox inside.
</p>
</div>
{% include elements/snippet.html content=panel_example more=true %}
{% include elements/anchor.html name="Colors" %}
{% include elements/new-tag.html version="0.8.0" %}
<div class="content">
<p>
The panel component is available in all the <strong>different colors</strong> defined by the <a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>. Simply append one of the color modifiers.
</p>
<p>
For example, to use your primary color, use <code>"panel is-primary"</code> as a class.
</p>
</div>
{% include elements/snippet.html content=panel_colors_example more=true %}
{% include elements/variables.html type='component' %}
{% include components/variables.html type='component' %}