Highlight rows and columns

This commit is contained in:
Jeremy Thomas
2020-05-11 00:25:29 +01:00
parent 8c65f02627
commit ea1a8f57c5
13 changed files with 677 additions and 1088 deletions

View File

@@ -34,26 +34,26 @@ breadcrumb:
{% endcapture %}
{% capture flex %}
<td class="is-narrow has-background-primary-light">
<p><strong class="has-text-primary">Flex</strong></p>
<td class="is-narrow has-text-primary has-background-primary-light">
Flex
</td>
{% endcapture %}
{% capture visible %}
<td class="is-narrow has-background-primary-light">
<p><strong class="has-text-primary">Visible</strong></p>
<td class="is-narrow has-text-success has-background-success-light">
Visible
</td>
{% endcapture %}
{% capture hidden %}
<td class="is-narrow">
<p class="has-text-grey-light">Hidden</p>
<td class="is-narrow has-text-danger has-background-danger-light">
Hidden
</td>
{% endcapture %}
{% capture unchanged %}
<td class="is-narrow">
<p class="has-text-grey-light">Unchanged</p>
<td class="is-narrow has-text-grey-light">
Unchanged
</td>
{% endcapture %}
@@ -286,3 +286,22 @@ breadcrumb:
</tbody>
</table>
</div>
{% include elements/anchor.html name="Other visibility helpers" %}
<table class="table is-bordered">
<tbody>
<tr>
<td><code>is-invisible</code></td>
<td>Adds visibility <strong>hidden</strong></td>
</tr>
<tr>
<td><code>is-hidden</code></td>
<td>Hides element</td>
</tr>
<tr>
<td><code>is-sr-only</code></td>
<td>Hide elements <strong>visually</strong> but keep the element available to be announced by a <strong>screen reader</strong></td>
</tr>
</tbody>
</table>