mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
87 lines
2.5 KiB
HTML
87 lines
2.5 KiB
HTML
---
|
|
title: Colors
|
|
layout: documentation
|
|
doc-tab: overview
|
|
doc-subtab: colors
|
|
colors:
|
|
- id: "white"
|
|
- id: "black"
|
|
- id: "light"
|
|
- id: "dark"
|
|
- id: "primary"
|
|
- id: "link"
|
|
- id: "info"
|
|
- id: "success"
|
|
- id: "warning"
|
|
- id: "danger"
|
|
---
|
|
|
|
{% include subnav-overview.html %}
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<h1 class="title">Colors</h1>
|
|
<h2 class="subtitle">The <strong>colors</strong> that <strong>style</strong> most Bulma elements and components</h2>
|
|
|
|
<hr>
|
|
|
|
<div class="content">
|
|
<p>
|
|
Most elements and components have color variations thanks to <strong>modifiers</strong> with syntax <code>.is-$color</code>, like <code>is-primary</code> or <code>is-dark</code>.
|
|
</p>
|
|
<p>
|
|
This is thanks to the <code>$colors</code> <strong>Sass map</strong>, through which Bulma cycles to grab all the colors and their inverts.
|
|
</p>
|
|
</div>
|
|
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<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.variables.derived.colors | where: "id", color.id | first %}
|
|
{% assign initialColor = site.data.variables.initial.colors | 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.variables.initial.colors | 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>
|
|
</section>
|