mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add list of tags post
This commit is contained in:
parent
941d86da28
commit
3b37e2c0e7
@ -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>
|
||||||
|
20
docs/_posts/2017-08-03-list-of-tags.md
Normal file
20
docs/_posts/2017-08-03-list-of-tags.md
Normal 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!
|
@ -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
|
||||||
|
@ -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
BIN
docs/images/blog/list-of-tags.png
Normal file
BIN
docs/images/blog/list-of-tags.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 83 KiB |
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user