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 color helpers

Browse Source
This commit is contained in:
Jeremy Thomas
2018-04-08 15:34:40 +01:00
parent 7f03c86c1e
commit 7ece5f5156
9 changed files with 150 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/documentation/components/dropdown.html
View File

@@ -327,8 +327,6 @@ doc-subtab: dropdown
{% include anchor.html name="Dropup" %}
{% include elements/new-tag.html version="0.5.4" %}
<div class="content">
<p>
You can add the <code>is-up</code> modifier to have a dropdown menu that appears above the dropdown button.

2
docs/documentation/elements/table.html
View File

@@ -467,8 +467,6 @@ doc-subtab: table
</div>
</div>
{% include elements/new-tag.html version="0.5.4" %}
<div class="columns">
<div class="column">
<p>You can add a <strong>hover effect</strong> on each row</p>

104
docs/documentation/modifiers/color-helpers.html Normal file
View File

@@ -0,0 +1,104 @@
---
title: Color helpers
layout: documentation
doc-tab: modifiers
doc-subtab: color-helpers
---
{% include subnav/subnav-modifiers.html %}
<section class="section">
<div class="container">
<h1 class="title">Color helpers</h1>
<h2 class="subtitle">
Change the <strong>color</strong> of the text and/or background
</h2>
{% include anchor.html name="Text color" %}
<div class="content">
<p>
You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
</p>
</div>
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Color
</th>
</tr>
</thead>
<tbody>
<tr><td><code>has-text-white</code></td><td>{% include color/white.html %}</td></tr>
<tr><td><code>has-text-black</code></td><td>{% include color/black.html %}</td></tr>
<tr><td><code>has-text-light</code></td><td>{% include color/white-ter.html %}</td></tr>
<tr><td><code>has-text-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
<tr><td><code>has-text-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
<tr><td><code>has-text-info</code></td><td>{% include color/cyan.html %}</td></tr>
<tr><td><code>has-text-link</code></td><td>{% include color/blue.html %}</td></tr>
<tr><td><code>has-text-success</code></td><td>{% include color/green.html %}</td></tr>
<tr><td><code>has-text-warning</code></td><td>{% include color/yellow.html %}</td></tr>
<tr><td><code>has-text-danger</code></td><td>{% include color/red.html %}</td></tr>
<tr><td><code>has-text-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
<tr><td><code>has-text-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
<tr><td><code>has-text-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
<tr><td><code>has-text-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
<tr><td><code>has-text-grey</code></td><td>{% include color/grey.html %}</td></tr>
<tr><td><code>has-text-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
<tr><td><code>has-text-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
<tr><td><code>has-text-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
<tr><td><code>has-text-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
</tbody>
</table>
{% include anchor.html name="Background color" %}
{% include elements/new-tag.html version="0.6.3" %}
<div class="content">
<p>
You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
</p>
</div>
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Background color
</th>
</tr>
</thead>
<tbody>
<tr><td><code>has-background-white</code></td><td>{% include color/white.html %}</td></tr>
<tr><td><code>has-background-black</code></td><td>{% include color/black.html %}</td></tr>
<tr><td><code>has-background-light</code></td><td>{% include color/white-ter.html %}</td></tr>
<tr><td><code>has-background-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
<tr><td><code>has-background-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
<tr><td><code>has-background-info</code></td><td>{% include color/cyan.html %}</td></tr>
<tr><td><code>has-background-link</code></td><td>{% include color/blue.html %}</td></tr>
<tr><td><code>has-background-success</code></td><td>{% include color/green.html %}</td></tr>
<tr><td><code>has-background-warning</code></td><td>{% include color/yellow.html %}</td></tr>
<tr><td><code>has-background-danger</code></td><td>{% include color/red.html %}</td></tr>
<tr><td><code>has-background-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
<tr><td><code>has-background-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
<tr><td><code>has-background-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
<tr><td><code>has-background-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
<tr><td><code>has-background-grey</code></td><td>{% include color/grey.html %}</td></tr>
<tr><td><code>has-background-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
<tr><td><code>has-background-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
<tr><td><code>has-background-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
<tr><td><code>has-background-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
</tbody>
</table>
</div>
</section>