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

Add fullheight Section, Add more color helpers, Add tablet Container, Add list of checkboxes and radios

Browse Source
This commit is contained in:
Jeremy Thomas
2024-07-07 17:59:24 +01:00
parent 2ed62be159
commit ab4a7b7d18
27 changed files with 490 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
docs/documentation/helpers/color-helpers.html
View File

@@ -217,6 +217,33 @@ breadcrumb:
</tbody>
</table>
<p class="block">
You can also <strong>inherit</strong> the color, or use the
<strong>current</strong> one:
</p>
<table class="table is-bordered">
<thead>
<tr>
<th>Class</th>
<th>Value</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>has-text-current</code></td>
<td>{% include docs/color/current.html %}</td>
<td class="has-text-current">Hello Bulma</td>
</tr>
<tr>
<td><code>has-text-inherit</code></td>
<td>{% include docs/color/inherit.html %}</td>
<td class="has-text-inherit">Hello Bulma</td>
</tr>
</tbody>
</table>
{% assign vernum = site.data.meta.version | downcase | remove: '.' | plus: 0 %}
{% include docs/elements/anchor.html name="Background color" %}
@@ -238,52 +265,52 @@ breadcrumb:
<tr>
<td><code>has-background-white</code></td>
<td>{% include docs/color/white.html %}</td>
<td class="has-background-white" style="width: 3rem;"></td>
<td class="has-background-white" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-black</code></td>
<td>{% include docs/color/black.html %}</td>
<td class="has-background-black" style="width: 3rem;"></td>
<td class="has-background-black" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-light</code></td>
<td>{% include docs/color/white-ter.html %}</td>
<td class="has-background-light" style="width: 3rem;"></td>
<td class="has-background-light" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-dark</code></td>
<td>{% include docs/color/grey-darker.html %}</td>
<td class="has-background-dark" style="width: 3rem;"></td>
<td class="has-background-dark" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-primary</code></td>
<td>{% include docs/color/turquoise.html %}</td>
<td class="has-background-primary" style="width: 3rem;"></td>
<td class="has-background-primary" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-link</code></td>
<td>{% include docs/color/blue.html %}</td>
<td class="has-background-link" style="width: 3rem;"></td>
<td class="has-background-link" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-info</code></td>
<td>{% include docs/color/cyan.html %}</td>
<td class="has-background-info" style="width: 3rem;"></td>
<td class="has-background-info" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-success</code></td>
<td>{% include docs/color/green.html %}</td>
<td class="has-background-success" style="width: 3rem;"></td>
<td class="has-background-success" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-warning</code></td>
<td>{% include docs/color/yellow.html %}</td>
<td class="has-background-warning" style="width: 3rem;"></td>
<td class="has-background-warning" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-danger</code></td>
<td>{% include docs/color/red.html %}</td>
<td class="has-background-danger" style="width: 3rem;"></td>
<td class="has-background-danger" style="width: 3rem"></td>
</tr>
</tbody>
</table>
@@ -299,47 +326,47 @@ breadcrumb:
<tr>
<td><code>has-background-black-bis</code></td>
<td>{% include docs/color/black-bis.html %}</td>
<td class="has-background-black-bis" style="width: 3rem;"></td>
<td class="has-background-black-bis" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-black-ter</code></td>
<td>{% include docs/color/black-ter.html %}</td>
<td class="has-background-black-ter" style="width: 3rem;"></td>
<td class="has-background-black-ter" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-grey-darker</code></td>
<td>{% include docs/color/grey-darker.html %}</td>
<td class="has-background-grey-darker" style="width: 3rem;"></td>
<td class="has-background-grey-darker" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-grey-dark</code></td>
<td>{% include docs/color/grey-dark.html %}</td>
<td class="has-background-grey-dark" style="width: 3rem;"></td>
<td class="has-background-grey-dark" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-grey</code></td>
<td>{% include docs/color/grey.html %}</td>
<td class="has-background-grey" style="width: 3rem;"></td>
<td class="has-background-grey" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-grey-light</code></td>
<td>{% include docs/color/grey-light.html %}</td>
<td class="has-background-grey-light" style="width: 3rem;"></td>
<td class="has-background-grey-light" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-grey-lighter</code></td>
<td>{% include docs/color/grey-lighter.html %}</td>
<td class="has-background-grey-lighter" style="width: 3rem;"></td>
<td class="has-background-grey-lighter" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-white-ter</code></td>
<td>{% include docs/color/white-ter.html %}</td>
<td class="has-background-white-ter" style="width: 3rem;"></td>
<td class="has-background-white-ter" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-white-bis</code></td>
<td>{% include docs/color/white-bis.html %}</td>
<td class="has-background-white-bis" style="width: 3rem;"></td>
<td class="has-background-white-bis" style="width: 3rem"></td>
</tr>
</tbody>
</table>
@@ -421,3 +448,30 @@ breadcrumb:
</tr>
</tbody>
</table>
<p class="block">
You can also <strong>inherit</strong> the background color, or use the
<strong>current color</strong> as background one:
</p>
<table class="table is-bordered">
<thead>
<tr>
<th>Class</th>
<th>Value</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>has-background-current</code></td>
<td>{% include docs/color/current.html %}</td>
<td class="has-background-current">Hello Bulma</td>
</tr>
<tr>
<td><code>has-background-inherit</code></td>
<td>{% include docs/color/inherit.html %}</td>
<td class="has-background-inherit">Hello Bulma</td>
</tr>
</tbody>
</table>