mirror of
https://github.com/jgthms/bulma
synced 2026-03-19 03:44:31 -07:00
adds table-container to colors, functions, mixins, and variables tables
This commit is contained in:
Spencer Kordecki
committed by
Jeremy Thomas
Jeremy Thomas
parent
a531ea2758
commit
57808aebab
@@ -28,203 +28,207 @@ breadcrumb:
|
||||
<li>otherwise, it outputs <code>#fff</code></li>
|
||||
</ul>
|
||||
<p>Its purpose is to guarantee a <strong>readable</strong> shade for the <em>text</em> when the input color is used as the <em>background</em>.</p>
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>color</th>
|
||||
<th>color luminance</th>
|
||||
<th>findColorInvert()</th>
|
||||
<th>result</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #00d1b2;"></span>
|
||||
<code>#00d1b2</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.52831</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #00d1b2; border-color: #00d1b2; color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #3273dc;"></span>
|
||||
<code>#3273dc</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.23119</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #3273dc; border-color: #3273dc; color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #23d160;"></span>
|
||||
<code>#23d160</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.51067</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #23d160; border-color: #23d160; color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #ffdd57;"></span>
|
||||
<code>#ffdd57</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.76863</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0, 0, 0, 0.7);"></span>
|
||||
<code>rgba(0, 0, 0, 0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #ffdd57; border-color: #ffdd57; color: rgba(0, 0, 0, 0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #ff3860;"></span>
|
||||
<code>#ff3860</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.27313</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #ff3860; border-color: #ff3860; color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #ffb3b3;"></span>
|
||||
<code>#ffb3b3</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.61796</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||
<code>rgba(0,0,0,0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #ffb3b3; border-color: #ffb3b3; color: rgba(0,0,0,0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #ffbc6b;"></span>
|
||||
<code>#ffbc6b</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.63053</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||
<code>rgba(0,0,0,0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #ffbc6b; border-color: #ffbc6b; color: rgba(0,0,0,0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: hsl(294, 71%, 79%);"></span>
|
||||
<code>hsl(294, 71%, 79%)</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.5529</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||
<code>rgba(0,0,0,0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>color</th>
|
||||
<th>color luminance</th>
|
||||
<th>findColorInvert()</th>
|
||||
<th>result</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #00d1b2;"></span>
|
||||
<code>#00d1b2</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.52831</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #00d1b2; border-color: #00d1b2; color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #3273dc;"></span>
|
||||
<code>#3273dc</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.23119</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #3273dc; border-color: #3273dc; color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #23d160;"></span>
|
||||
<code>#23d160</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.51067</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #23d160; border-color: #23d160; color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #ffdd57;"></span>
|
||||
<code>#ffdd57</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.76863</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0, 0, 0, 0.7);"></span>
|
||||
<code>rgba(0, 0, 0, 0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #ffdd57; border-color: #ffdd57; color: rgba(0, 0, 0, 0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #ff3860;"></span>
|
||||
<code>#ff3860</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.27313</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #ff3860; border-color: #ff3860; color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #ffb3b3;"></span>
|
||||
<code>#ffb3b3</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.61796</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||
<code>rgba(0,0,0,0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #ffb3b3; border-color: #ffb3b3; color: rgba(0,0,0,0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #ffbc6b;"></span>
|
||||
<code>#ffbc6b</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.63053</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||
<code>rgba(0,0,0,0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #ffbc6b; border-color: #ffbc6b; color: rgba(0,0,0,0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: hsl(294, 71%, 79%);"></span>
|
||||
<code>hsl(294, 71%, 79%)</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.5529</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||
<code>rgba(0,0,0,0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p>
|
||||
For colors that have a luminance close to the <code>0.55</code> threshold, it can be useful to <strong>override</strong> the <code>findColorInvert()</code> function, and rather set the invert color <strong>manually.</strong>
|
||||
<br>
|
||||
For example, this shade of <span class="bd-color" style="background: hsl(294, 71%, 79%); float: none; height: 16px; width: 16px; margin-right: 0; vertical-align: middle;"></span> purple has a color luminance of <code>0.5529</code>. It can be preferable to set a color invert of white instead of transparent black:
|
||||
</p>
|
||||
<table class="table is-bordered">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>
|
||||
with <code>findColorInvert()</code>
|
||||
</th>
|
||||
<td>
|
||||
<code>$purple-invert: findColorInvert($purple)</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||
<code>rgba(0,0,0,0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
with manual setting
|
||||
</th>
|
||||
<td>
|
||||
<code>$purple-invert: #fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>
|
||||
with <code>findColorInvert()</code>
|
||||
</th>
|
||||
<td>
|
||||
<code>$purple-invert: findColorInvert($purple)</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||
<code>rgba(0,0,0,0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
with manual setting
|
||||
</th>
|
||||
<td>
|
||||
<code>$purple-invert: #fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user