mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
adds table-container to colors, functions, mixins, and variables tables
This commit is contained in:
Spencer Kordecki
Jeremy Thomas
parent
a531ea2758
commit
57808aebab
@ -72,14 +72,16 @@ breadcrumb:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table class="table is-bordered">
|
<div class="table-container">
|
||||||
<tbody>
|
<table class="table is-bordered">
|
||||||
{% for variable_name in initial_variables.list %}
|
<tbody>
|
||||||
{% assign variable = initial_vars[variable_name] %}
|
{% for variable_name in initial_variables.list %}
|
||||||
{% include elements/variable-row.html variable=variable hide_computed =true%}
|
{% assign variable = initial_vars[variable_name] %}
|
||||||
{% endfor %}
|
{% include elements/variable-row.html variable=variable hide_computed =true%}
|
||||||
<tbody>
|
{% endfor %}
|
||||||
</table>
|
<tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
{% capture custom_message %}
|
{% capture custom_message %}
|
||||||
These are <a href="https://github.com/jgthms/bulma/blob/master/sass/{{ derived_variables.file_path }}" target="_blank" rel="nofollow">variables</a> with a value that <strong>references</strong> another variable.
|
These are <a href="https://github.com/jgthms/bulma/blob/master/sass/{{ derived_variables.file_path }}" target="_blank" rel="nofollow">variables</a> with a value that <strong>references</strong> another variable.
|
||||||
|
|||||||
@ -39,54 +39,56 @@ shades:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table class="table">
|
<div class="table-container">
|
||||||
<thead>
|
<table class="table">
|
||||||
<tr>
|
<thead>
|
||||||
<th>Color</th>
|
|
||||||
<th>Variable</th>
|
|
||||||
<th>Value</th>
|
|
||||||
<th>Computed value</th>
|
|
||||||
<th>Invert value</th>
|
|
||||||
<th>Computed invert value</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{% for color in page.colors %}
|
|
||||||
{% assign derivedColor = site.data.colors.derived | where: "id", color | first %}
|
|
||||||
{% assign initialColor = site.data.colors.initial | where: "id", derivedColor.valueId | first %}
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<th>Color</th>
|
||||||
<strong>{{ derivedColor.id | capitalize }}</strong>
|
<th>Variable</th>
|
||||||
</td>
|
<th>Value</th>
|
||||||
<td>
|
<th>Computed value</th>
|
||||||
<code>${{ derivedColor.id }}</code>
|
<th>Invert value</th>
|
||||||
</td>
|
<th>Computed invert value</th>
|
||||||
<td>
|
|
||||||
<code>${{ initialColor.id }}</code>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
{% include elements/color-square.html value=initialColor.value %}
|
|
||||||
</td>
|
|
||||||
{% if derivedColor.invertValue %}
|
|
||||||
<td>
|
|
||||||
<code>{{ derivedColor.invertValue }}</code>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
{% include elements/color-square.html value=derivedColor.invertValue %}
|
|
||||||
</td>
|
|
||||||
{% elsif derivedColor.invertId %}
|
|
||||||
{% assign invertColor = site.data.colors.initial | where: "id", derivedColor.invertId | first %}
|
|
||||||
<td>
|
|
||||||
<code>${{ derivedColor.invertId }}</code>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
{% include elements/color-square.html value=invertColor.value %}
|
|
||||||
</td>
|
|
||||||
{% endif %}
|
|
||||||
</tr>
|
</tr>
|
||||||
{% endfor %}
|
</thead>
|
||||||
</tbody>
|
<tbody>
|
||||||
</table>
|
{% for color in page.colors %}
|
||||||
|
{% assign derivedColor = site.data.colors.derived | where: "id", color | first %}
|
||||||
|
{% assign initialColor = site.data.colors.initial | where: "id", derivedColor.valueId | first %}
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<strong>{{ derivedColor.id | capitalize }}</strong>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<code>${{ derivedColor.id }}</code>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<code>${{ initialColor.id }}</code>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{% include elements/color-square.html value=initialColor.value %}
|
||||||
|
</td>
|
||||||
|
{% if derivedColor.invertValue %}
|
||||||
|
<td>
|
||||||
|
<code>{{ derivedColor.invertValue }}</code>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{% include elements/color-square.html value=derivedColor.invertValue %}
|
||||||
|
</td>
|
||||||
|
{% elsif derivedColor.invertId %}
|
||||||
|
{% assign invertColor = site.data.colors.initial | where: "id", derivedColor.invertId | first %}
|
||||||
|
<td>
|
||||||
|
<code>${{ derivedColor.invertId }}</code>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{% include elements/color-square.html value=invertColor.value %}
|
||||||
|
</td>
|
||||||
|
{% endif %}
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -94,28 +96,30 @@ shades:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table class="table">
|
<div class="table-container">
|
||||||
<thead>
|
<table class="table">
|
||||||
<tr>
|
<thead>
|
||||||
<th>Color</th>
|
|
||||||
<th>Variable</th>
|
|
||||||
<th>Value</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{% for shade in page.shades %}
|
|
||||||
{% assign initial_shade = site.data.colors.initial | where: "id", shade | first %}
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<th>Color</th>
|
||||||
<strong>{{ initial_shade.name | capitalize }}</strong>
|
<th>Variable</th>
|
||||||
</td>
|
<th>Value</th>
|
||||||
<td>
|
|
||||||
<code>${{ initial_shade.id }}</code>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
{% include elements/color-square.html value=initial_shade.value %}
|
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
{% endfor %}
|
</thead>
|
||||||
</tbody>
|
<tbody>
|
||||||
</table>
|
{% for shade in page.shades %}
|
||||||
|
{% assign initial_shade = site.data.colors.initial | where: "id", shade | first %}
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<strong>{{ initial_shade.name | capitalize }}</strong>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<code>${{ initial_shade.id }}</code>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{% include elements/color-square.html value=initial_shade.value %}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|||||||
@ -28,203 +28,207 @@ breadcrumb:
|
|||||||
<li>otherwise, it outputs <code>#fff</code></li>
|
<li>otherwise, it outputs <code>#fff</code></li>
|
||||||
</ul>
|
</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>
|
<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">
|
<div class="table-container">
|
||||||
<thead>
|
<table class="table is-bordered">
|
||||||
<tr>
|
<thead>
|
||||||
<th>color</th>
|
<tr>
|
||||||
<th>color luminance</th>
|
<th>color</th>
|
||||||
<th>findColorInvert()</th>
|
<th>color luminance</th>
|
||||||
<th>result</th>
|
<th>findColorInvert()</th>
|
||||||
</tr>
|
<th>result</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>
|
<tr>
|
||||||
<span class="bd-color" style="background: #00d1b2;"></span>
|
<td>
|
||||||
<code>#00d1b2</code>
|
<span class="bd-color" style="background: #00d1b2;"></span>
|
||||||
</td>
|
<code>#00d1b2</code>
|
||||||
<td>
|
</td>
|
||||||
<code>0.52831</code>
|
<td>
|
||||||
</td>
|
<code>0.52831</code>
|
||||||
<td>
|
</td>
|
||||||
<span class="bd-color" style="background: #fff;"></span>
|
<td>
|
||||||
<code>#fff</code>
|
<span class="bd-color" style="background: #fff;"></span>
|
||||||
</td>
|
<code>#fff</code>
|
||||||
<td>
|
</td>
|
||||||
<a class="button" style="background: #00d1b2; border-color: #00d1b2; color: #fff;">
|
<td>
|
||||||
Button
|
<a class="button" style="background: #00d1b2; border-color: #00d1b2; color: #fff;">
|
||||||
</a>
|
Button
|
||||||
</td>
|
</a>
|
||||||
</tr>
|
</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>
|
<tr>
|
||||||
<span class="bd-color" style="background: #3273dc;"></span>
|
<td>
|
||||||
<code>#3273dc</code>
|
<span class="bd-color" style="background: #3273dc;"></span>
|
||||||
</td>
|
<code>#3273dc</code>
|
||||||
<td>
|
</td>
|
||||||
<code>0.23119</code>
|
<td>
|
||||||
</td>
|
<code>0.23119</code>
|
||||||
<td>
|
</td>
|
||||||
<span class="bd-color" style="background: #fff;"></span>
|
<td>
|
||||||
<code>#fff</code>
|
<span class="bd-color" style="background: #fff;"></span>
|
||||||
</td>
|
<code>#fff</code>
|
||||||
<td>
|
</td>
|
||||||
<a class="button" style="background: #3273dc; border-color: #3273dc; color: #fff;">
|
<td>
|
||||||
Button
|
<a class="button" style="background: #3273dc; border-color: #3273dc; color: #fff;">
|
||||||
</a>
|
Button
|
||||||
</td>
|
</a>
|
||||||
</tr>
|
</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>
|
<tr>
|
||||||
<span class="bd-color" style="background: #23d160;"></span>
|
<td>
|
||||||
<code>#23d160</code>
|
<span class="bd-color" style="background: #23d160;"></span>
|
||||||
</td>
|
<code>#23d160</code>
|
||||||
<td>
|
</td>
|
||||||
<code>0.51067</code>
|
<td>
|
||||||
</td>
|
<code>0.51067</code>
|
||||||
<td>
|
</td>
|
||||||
<span class="bd-color" style="background: #fff;"></span>
|
<td>
|
||||||
<code>#fff</code>
|
<span class="bd-color" style="background: #fff;"></span>
|
||||||
</td>
|
<code>#fff</code>
|
||||||
<td>
|
</td>
|
||||||
<a class="button" style="background: #23d160; border-color: #23d160; color: #fff;">
|
<td>
|
||||||
Button
|
<a class="button" style="background: #23d160; border-color: #23d160; color: #fff;">
|
||||||
</a>
|
Button
|
||||||
</td>
|
</a>
|
||||||
</tr>
|
</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>
|
<tr>
|
||||||
<span class="bd-color" style="background: #ffdd57;"></span>
|
<td>
|
||||||
<code>#ffdd57</code>
|
<span class="bd-color" style="background: #ffdd57;"></span>
|
||||||
</td>
|
<code>#ffdd57</code>
|
||||||
<td>
|
</td>
|
||||||
<code>0.76863</code>
|
<td>
|
||||||
</td>
|
<code>0.76863</code>
|
||||||
<td>
|
</td>
|
||||||
<span class="bd-color" style="background: rgba(0, 0, 0, 0.7);"></span>
|
<td>
|
||||||
<code>rgba(0, 0, 0, 0.7)</code>
|
<span class="bd-color" style="background: rgba(0, 0, 0, 0.7);"></span>
|
||||||
</td>
|
<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);">
|
<td>
|
||||||
Button
|
<a class="button" style="background: #ffdd57; border-color: #ffdd57; color: rgba(0, 0, 0, 0.7);">
|
||||||
</a>
|
Button
|
||||||
</td>
|
</a>
|
||||||
</tr>
|
</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>
|
<tr>
|
||||||
<span class="bd-color" style="background: #ff3860;"></span>
|
<td>
|
||||||
<code>#ff3860</code>
|
<span class="bd-color" style="background: #ff3860;"></span>
|
||||||
</td>
|
<code>#ff3860</code>
|
||||||
<td>
|
</td>
|
||||||
<code>0.27313</code>
|
<td>
|
||||||
</td>
|
<code>0.27313</code>
|
||||||
<td>
|
</td>
|
||||||
<span class="bd-color" style="background: #fff;"></span>
|
<td>
|
||||||
<code>#fff</code>
|
<span class="bd-color" style="background: #fff;"></span>
|
||||||
</td>
|
<code>#fff</code>
|
||||||
<td>
|
</td>
|
||||||
<a class="button" style="background: #ff3860; border-color: #ff3860; color: #fff;">
|
<td>
|
||||||
Button
|
<a class="button" style="background: #ff3860; border-color: #ff3860; color: #fff;">
|
||||||
</a>
|
Button
|
||||||
</td>
|
</a>
|
||||||
</tr>
|
</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>
|
<tr>
|
||||||
<span class="bd-color" style="background: #ffb3b3;"></span>
|
<td>
|
||||||
<code>#ffb3b3</code>
|
<span class="bd-color" style="background: #ffb3b3;"></span>
|
||||||
</td>
|
<code>#ffb3b3</code>
|
||||||
<td>
|
</td>
|
||||||
<code>0.61796</code>
|
<td>
|
||||||
</td>
|
<code>0.61796</code>
|
||||||
<td>
|
</td>
|
||||||
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
<td>
|
||||||
<code>rgba(0,0,0,0.7)</code>
|
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||||
</td>
|
<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);">
|
<td>
|
||||||
Button
|
<a class="button" style="background: #ffb3b3; border-color: #ffb3b3; color: rgba(0,0,0,0.7);">
|
||||||
</a>
|
Button
|
||||||
</td>
|
</a>
|
||||||
</tr>
|
</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>
|
<tr>
|
||||||
<span class="bd-color" style="background: #ffbc6b;"></span>
|
<td>
|
||||||
<code>#ffbc6b</code>
|
<span class="bd-color" style="background: #ffbc6b;"></span>
|
||||||
</td>
|
<code>#ffbc6b</code>
|
||||||
<td>
|
</td>
|
||||||
<code>0.63053</code>
|
<td>
|
||||||
</td>
|
<code>0.63053</code>
|
||||||
<td>
|
</td>
|
||||||
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
<td>
|
||||||
<code>rgba(0,0,0,0.7)</code>
|
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||||
</td>
|
<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);">
|
<td>
|
||||||
Button
|
<a class="button" style="background: #ffbc6b; border-color: #ffbc6b; color: rgba(0,0,0,0.7);">
|
||||||
</a>
|
Button
|
||||||
</td>
|
</a>
|
||||||
</tr>
|
</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>
|
<tr>
|
||||||
<span class="bd-color" style="background: hsl(294, 71%, 79%);"></span>
|
<td>
|
||||||
<code>hsl(294, 71%, 79%)</code>
|
<span class="bd-color" style="background: hsl(294, 71%, 79%);"></span>
|
||||||
</td>
|
<code>hsl(294, 71%, 79%)</code>
|
||||||
<td>
|
</td>
|
||||||
<code>0.5529</code>
|
<td>
|
||||||
</td>
|
<code>0.5529</code>
|
||||||
<td>
|
</td>
|
||||||
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
<td>
|
||||||
<code>rgba(0,0,0,0.7)</code>
|
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||||
</td>
|
<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);">
|
<td>
|
||||||
Button
|
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
|
||||||
</a>
|
Button
|
||||||
</td>
|
</a>
|
||||||
</tr>
|
</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
<p>
|
<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>
|
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>
|
<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:
|
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>
|
</p>
|
||||||
<table class="table is-bordered">
|
<div class="table-container">
|
||||||
<tbody>
|
<table class="table is-bordered">
|
||||||
<tr>
|
<tbody>
|
||||||
<th>
|
<tr>
|
||||||
with <code>findColorInvert()</code>
|
<th>
|
||||||
</th>
|
with <code>findColorInvert()</code>
|
||||||
<td>
|
</th>
|
||||||
<code>$purple-invert: findColorInvert($purple)</code>
|
<td>
|
||||||
</td>
|
<code>$purple-invert: findColorInvert($purple)</code>
|
||||||
<td>
|
</td>
|
||||||
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
<td>
|
||||||
<code>rgba(0,0,0,0.7)</code>
|
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||||
</td>
|
<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);">
|
<td>
|
||||||
Button
|
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
|
||||||
</a>
|
Button
|
||||||
</td>
|
</a>
|
||||||
</tr>
|
</td>
|
||||||
<tr>
|
</tr>
|
||||||
<th>
|
<tr>
|
||||||
with manual setting
|
<th>
|
||||||
</th>
|
with manual setting
|
||||||
<td>
|
</th>
|
||||||
<code>$purple-invert: #fff</code>
|
<td>
|
||||||
</td>
|
<code>$purple-invert: #fff</code>
|
||||||
<td>
|
</td>
|
||||||
<span class="bd-color" style="background: #fff;"></span>
|
<td>
|
||||||
<code>#fff</code>
|
<span class="bd-color" style="background: #fff;"></span>
|
||||||
</td>
|
<code>#fff</code>
|
||||||
<td>
|
</td>
|
||||||
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: #fff;">
|
<td>
|
||||||
Button
|
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: #fff;">
|
||||||
</a>
|
Button
|
||||||
</td>
|
</a>
|
||||||
</tr>
|
</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -10,56 +10,58 @@ breadcrumb:
|
|||||||
- overview-mixins
|
- overview-mixins
|
||||||
---
|
---
|
||||||
|
|
||||||
<table class="table is-bordered">
|
<div class="table-container">
|
||||||
<tr>
|
<table class="table is-bordered">
|
||||||
<td><code>=arrow($color)</code></td>
|
<tr>
|
||||||
<td>Creates a CSS-only down arrow. Used for the dropdown select.</td>
|
<td><code>=arrow($color)</code></td>
|
||||||
</tr>
|
<td>Creates a CSS-only down arrow. Used for the dropdown select.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td><code>=block</code></td>
|
<tr>
|
||||||
<td>Defines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.</td>
|
<td><code>=block</code></td>
|
||||||
</tr>
|
<td>Defines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td><code>=clearfix</code></td>
|
<tr>
|
||||||
<td>Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.</td>
|
<td><code>=clearfix</code></td>
|
||||||
</tr>
|
<td>Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td><code>=center($size)</code></td>
|
<tr>
|
||||||
<td>Positions an element in the exact center of its parent. Used for the spinner in a loading button.</td>
|
<td><code>=center($size)</code></td>
|
||||||
</tr>
|
<td>Positions an element in the exact center of its parent. Used for the spinner in a loading button.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td><code>=delete</code></td>
|
<tr>
|
||||||
<td>Creates a CSS-only cross. Used for the delete element in modals, messages, tags...</td>
|
<td><code>=delete</code></td>
|
||||||
</tr>
|
<td>Creates a CSS-only cross. Used for the delete element in modals, messages, tags...</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td><code>=fa($size, $dimensions)</code></td>
|
<tr>
|
||||||
<td>Sets the style of a Font Awesome icon container.</td>
|
<td><code>=fa($size, $dimensions)</code></td>
|
||||||
</tr>
|
<td>Sets the style of a Font Awesome icon container.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td><code>=hamburger($dimensions)</code></td>
|
<tr>
|
||||||
<td>Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".</td>
|
<td><code>=hamburger($dimensions)</code></td>
|
||||||
</tr>
|
<td>Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td><code>=loader</code></td>
|
<tr>
|
||||||
<td>Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.</td>
|
<td><code>=loader</code></td>
|
||||||
</tr>
|
<td>Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td><code>=overflow-touch</code></td>
|
<tr>
|
||||||
<td>Sets the style of a container so that it keeps momentum when scrolling on iOS devices.</td>
|
<td><code>=overflow-touch</code></td>
|
||||||
</tr>
|
<td>Sets the style of a container so that it keeps momentum when scrolling on iOS devices.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td><code>=overlay($offset: 0)</code></td>
|
<tr>
|
||||||
<td>Makes the element overlay its parent container, like the transparent modal background.</td>
|
<td><code>=overlay($offset: 0)</code></td>
|
||||||
</tr>
|
<td>Makes the element overlay its parent container, like the transparent modal background.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td><code>=placeholder</code></td>
|
<tr>
|
||||||
<td>Sets the styles of an input placeholder.</td>
|
<td><code>=placeholder</code></td>
|
||||||
</tr>
|
<td>Sets the styles of an input placeholder.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td><code>=unselectable</code></td>
|
<tr>
|
||||||
<td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
|
<td><code>=unselectable</code></td>
|
||||||
</tr>
|
<td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
|
||||||
</table>
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p>
|
<p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user