Add list of tags post

This commit is contained in:
Jeremy Thomas 2017-08-03 20:46:00 +01:00
parent 941d86da28
commit 3b37e2c0e7
7 changed files with 32 additions and 4 deletions

View File

@ -39,6 +39,9 @@
<a class="navbar-item {% if page.doc-tab == 'grid' %}is-active{% endif %}" href="{{ site.url }}/documentation/grid/columns/"> <a class="navbar-item {% if page.doc-tab == 'grid' %}is-active{% endif %}" href="{{ site.url }}/documentation/grid/columns/">
Grid Grid
</a> </a>
<a class="navbar-item {% if page.doc-tab == 'layout' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/container/">
Layout
</a>
<a class="navbar-item {% if page.doc-tab == 'form' %}is-active{% endif %}" href="{{ site.url }}/documentation/form/general/"> <a class="navbar-item {% if page.doc-tab == 'form' %}is-active{% endif %}" href="{{ site.url }}/documentation/form/general/">
Form Form
</a> </a>
@ -54,9 +57,6 @@
Components Components
</a> </a>
{% endif %} {% endif %}
<a class="navbar-item {% if page.doc-tab == 'layout' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/container/">
Layout
</a>
<hr class="navbar-divider"> <hr class="navbar-divider">
<div class="navbar-item"> <div class="navbar-item">
<div> <div>

View File

@ -0,0 +1,20 @@
---
layout: post
title: "New feature: list of tags"
introduction: "What's better than one tag? Multiple tags!"
color: "orange"
name: "List of tags"
icon: "tag"
---
The [tag](/documentation/elements/tag/) is a small but useful element that can be used in many contexts, to **enhance** the meaning of the text it's attached to.
A tag rarely comes on its own though, so Bulma now supports [list of tags](/documentation/elements/tag/#list-of-tags). The same way you can [group controls](together), you can now **group tags together** to form a list that can span multiple lines.
<figure>
<a href="/documentation/elements/tag/#list-of-tags">
<img src="/images/blog/list-of-tags.png" alt="List of tags in CSS" width="660" height="401">
</a>
</figure>
As a **bonus**, there is also a [delete tag](/documentation/elements/tag/#combinations) available!

View File

@ -61,6 +61,8 @@
background-color: $color background-color: $color
&.is-bootstrap &.is-bootstrap
background-color: $bootstrap background-color: $bootstrap
&.is-orange
background-color: $orange
&:hover &:hover
.article-overlay .article-overlay
opacity: 0.25 opacity: 0.25

View File

@ -2310,6 +2310,7 @@ a.box:active {
} }
.content figure { .content figure {
margin: 2em;
text-align: center; text-align: center;
} }
@ -10269,6 +10270,10 @@ html.route-index #carbon {
background-color: #6f5499; background-color: #6f5499;
} }
.article-image.is-orange {
background-color: #ff470f;
}
.article-image:hover .article-overlay { .article-image:hover .article-overlay {
opacity: 0.25; opacity: 0.25;
} }

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB

View File

@ -86,6 +86,7 @@ $content-table-foot-cell-color: $text-strong !default
dd dd
margin-left: 2em margin-left: 2em
figure figure
margin: 2em
text-align: center text-align: center
img img
display: inline-block display: inline-block