mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Explain tags
This commit is contained in:
Jeremy Thomas
parent
0e2f716de5
commit
2bd66119f0
@ -1,5 +1,8 @@
|
|||||||
<hr style="margin-bottom: 0;">
|
<hr style="margin-bottom: 0;">
|
||||||
|
|
||||||
<h3 id="{{ include.name | downcase }}" class="title" style="padding-top: 1.5rem;">
|
<h3 id="{{ include.name | slugify }}" class="title anchor-title">
|
||||||
{{ include.name }}
|
{{ include.name }}
|
||||||
|
<a class="anchor-link" href="#{{ include.name | slugify }}">
|
||||||
|
#
|
||||||
|
</a>
|
||||||
</h3>
|
</h3>
|
||||||
|
|||||||
@ -1,8 +1,4 @@
|
|||||||
<hr style="margin-bottom: 0;">
|
{% include heading.html name="Variables" %}
|
||||||
|
|
||||||
<h3 id="variables" class="title" style="padding-top: 1.5rem;">
|
|
||||||
Variables
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
@ -34,6 +34,14 @@
|
|||||||
&:hover
|
&:hover
|
||||||
border-bottom-color: $primary
|
border-bottom-color: $primary
|
||||||
|
|
||||||
|
.anchor-title
|
||||||
|
padding-top: 1.5rem
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
.anchor-link
|
||||||
|
position: absolute
|
||||||
|
right: calc(100% + 1rem)
|
||||||
|
|
||||||
.article-image
|
.article-image
|
||||||
background-color: $primary
|
background-color: $primary
|
||||||
display: block
|
display: block
|
||||||
|
|||||||
@ -3477,6 +3477,42 @@ input[type="submit"].button {
|
|||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tag.is-delete {
|
||||||
|
margin-left: 1px;
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
width: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag.is-delete:before, .tag.is-delete:after {
|
||||||
|
background-color: currentColor;
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
left: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
||||||
|
transform-origin: center center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag.is-delete:before {
|
||||||
|
height: 1px;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag.is-delete:after {
|
||||||
|
height: 50%;
|
||||||
|
width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag.is-delete:hover, .tag.is-delete:focus {
|
||||||
|
background-color: #e8e8e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag.is-delete:active {
|
||||||
|
background-color: #dbdbdb;
|
||||||
|
}
|
||||||
|
|
||||||
.tag.is-rounded {
|
.tag.is-rounded {
|
||||||
border-radius: 290486px;
|
border-radius: 290486px;
|
||||||
}
|
}
|
||||||
@ -8432,6 +8468,16 @@ html.route-index #carbon {
|
|||||||
border-bottom-color: #00d1b2;
|
border-bottom-color: #00d1b2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.anchor-title {
|
||||||
|
padding-top: 1.5rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anchor-link {
|
||||||
|
position: absolute;
|
||||||
|
right: calc(100% + 1rem);
|
||||||
|
}
|
||||||
|
|
||||||
.article-image {
|
.article-image {
|
||||||
background-color: #00d1b2;
|
background-color: #00d1b2;
|
||||||
display: block;
|
display: block;
|
||||||
|
|||||||
@ -16,7 +16,7 @@ variables:
|
|||||||
</span>
|
</span>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
{% capture tags %}
|
{% capture tags_colors %}
|
||||||
<span class="tag is-black">Black</span>
|
<span class="tag is-black">Black</span>
|
||||||
<span class="tag is-dark">Dark</span>
|
<span class="tag is-dark">Dark</span>
|
||||||
<span class="tag is-light">Light</span>
|
<span class="tag is-light">Light</span>
|
||||||
@ -52,8 +52,137 @@ variables:
|
|||||||
</span>
|
</span>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture is_delete %}
|
||||||
|
<a class="tag is-delete"></a>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture tags %}
|
||||||
|
<div class="tags">
|
||||||
|
<span class="tag">One</span>
|
||||||
|
<span class="tag">Two</span>
|
||||||
|
<span class="tag">Three</span>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture tags_multiple %}
|
||||||
|
<div class="tags">
|
||||||
|
<span class="tag">One</span>
|
||||||
|
<span class="tag">Two</span>
|
||||||
|
<span class="tag">Three</span>
|
||||||
|
<span class="tag">Four</span>
|
||||||
|
<span class="tag">Five</span>
|
||||||
|
<span class="tag">Six</span>
|
||||||
|
<span class="tag">Seven</span>
|
||||||
|
<span class="tag">Eight</span>
|
||||||
|
<span class="tag">Nine</span>
|
||||||
|
<span class="tag">Ten</span>
|
||||||
|
<span class="tag">Eleven</span>
|
||||||
|
<span class="tag">Twelve</span>
|
||||||
|
<span class="tag">Thirteen</span>
|
||||||
|
<span class="tag">Fourteen</span>
|
||||||
|
<span class="tag">Fifteen</span>
|
||||||
|
<span class="tag">Sixteen</span>
|
||||||
|
<span class="tag">Seventeen</span>
|
||||||
|
<span class="tag">Eighteen</span>
|
||||||
|
<span class="tag">Nineteen</span>
|
||||||
|
<span class="tag">Twenty</span>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture tags_addons %}
|
||||||
|
<div class="tags has-addons">
|
||||||
|
<span class="tag">Package</span>
|
||||||
|
<span class="tag is-primary">Bulma</span>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture tags_field_addons %}
|
||||||
|
<div class="field is-grouped is-grouped-multiline">
|
||||||
|
<div class="control">
|
||||||
|
<div class="tags has-addons">
|
||||||
|
<span class="tag is-dark">npm</span>
|
||||||
|
<span class="tag is-info">0.5.0</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="control">
|
||||||
|
<div class="tags has-addons">
|
||||||
|
<span class="tag is-dark">build</span>
|
||||||
|
<span class="tag is-success">passing</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="control">
|
||||||
|
<div class="tags has-addons">
|
||||||
|
<span class="tag is-dark">chat</span>
|
||||||
|
<span class="tag is-primary">on gitter</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture tags_delete_addons %}
|
||||||
|
<div class="tags has-addons">
|
||||||
|
<span class="tag is-info">Alex Smith</span>
|
||||||
|
<a class="tag is-delete"></a>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
{% include subnav-elements.html %}
|
{% include subnav-elements.html %}
|
||||||
|
|
||||||
|
{% capture tags_blog_addons %}
|
||||||
|
<div class="field is-grouped is-grouped-multiline">
|
||||||
|
<div class="control">
|
||||||
|
<div class="tags has-addons">
|
||||||
|
<span class="tag is-info">Technology</span>
|
||||||
|
<a class="tag is-delete"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="control">
|
||||||
|
<div class="tags has-addons">
|
||||||
|
<span class="tag is-info">CSS</span>
|
||||||
|
<a class="tag is-delete"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="control">
|
||||||
|
<div class="tags has-addons">
|
||||||
|
<span class="tag is-info">Flexbox</span>
|
||||||
|
<a class="tag is-delete"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="control">
|
||||||
|
<div class="tags has-addons">
|
||||||
|
<span class="tag is-info">Web Design</span>
|
||||||
|
<a class="tag is-delete"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="control">
|
||||||
|
<div class="tags has-addons">
|
||||||
|
<span class="tag is-info">Open Source</span>
|
||||||
|
<a class="tag is-delete"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="control">
|
||||||
|
<div class="tags has-addons">
|
||||||
|
<span class="tag is-info">Community</span>
|
||||||
|
<a class="tag is-delete"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="control">
|
||||||
|
<div class="tags has-addons">
|
||||||
|
<span class="tag is-info">Documentation</span>
|
||||||
|
<a class="tag is-delete"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1 class="title">Tags</h1>
|
<h1 class="title">Tags</h1>
|
||||||
@ -135,7 +264,7 @@ variables:
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="column is-6">
|
<div class="column is-6">
|
||||||
{% highlight html %}{{ tags }}{% endhighlight %}
|
{% highlight html %}{{ tags_colors }}{% endhighlight %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -176,11 +305,23 @@ variables:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-4">
|
||||||
|
You can add the <code>is-delete</code> modifier to turn the tag into a <strong>delete button</strong>.
|
||||||
|
</div>
|
||||||
|
<div class="column is-2">
|
||||||
|
{{ is_delete }}
|
||||||
|
</div>
|
||||||
|
<div class="column is-6">
|
||||||
|
{% highlight html %}{{ is_delete }}{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{% include heading.html name="Combinations" %}
|
{% include heading.html name="Combinations" %}
|
||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-4">
|
<div class="column is-4">
|
||||||
You can also append a <strong>delete button</strong>.
|
You can append a <strong>delete button</strong>.
|
||||||
</div>
|
</div>
|
||||||
<div class="column is-2">
|
<div class="column is-2">
|
||||||
<p class="field">
|
<p class="field">
|
||||||
@ -207,6 +348,109 @@ variables:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{% include heading.html name="List of tags" %}
|
||||||
|
|
||||||
|
<div class="tags has-addons">
|
||||||
|
<span class="tag is-success">New!</span>
|
||||||
|
<span class="tag is-info">0.5.0</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
You can now create a <strong>list of tags</strong> with the <code>.tags</code> container.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="example">
|
||||||
|
{{ tags }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
{% highlight html %}{{ tags }}{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
If the list is <strong>very long</strong>, it will automatically wrap on <strong>multiple lines</strong>, while keeping all tags <strong>evenly spaced</strong>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="example">
|
||||||
|
{{ tags_multiple }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column highlight-full">
|
||||||
|
{% highlight html %}{{ tags_multiple }}{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
You can <strong>attach tags together</strong> with the <code>.has-addons</code> modifier.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="example">
|
||||||
|
{{ tags_addons }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column highlight-full">
|
||||||
|
{% highlight html %}{{ tags_addons }}{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
You can attach a <strong>text</strong> tag with a <strong>delete</strong> tag together.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="example">
|
||||||
|
{{ tags_delete_addons }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column highlight-full">
|
||||||
|
{% highlight html %}{{ tags_delete_addons }}{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
If you want to attach <code>.tags</code> containers <strong>together</strong>, simply use the <code>.field</code> element with the <code>.is-grouped</code> and <code>.is-grouped-multiline</code> modifiers.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="example">
|
||||||
|
{{ tags_field_addons }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column highlight-full">
|
||||||
|
{% highlight html %}{{ tags_field_addons }}{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
This can be useful for a long list of <strong>blog tags</strong>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="example">
|
||||||
|
{{ tags_blog_addons }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
{% highlight html %}{{ tags_blog_addons }}{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{% include variables.html element=true %}
|
{% include variables.html element=true %}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -54,6 +54,32 @@ $tag-radius: $radius !default
|
|||||||
&.is-large
|
&.is-large
|
||||||
font-size: $size-medium
|
font-size: $size-medium
|
||||||
// Modifiers
|
// Modifiers
|
||||||
|
&.is-delete
|
||||||
|
margin-left: 1px
|
||||||
|
padding: 0
|
||||||
|
position: relative
|
||||||
|
width: 2em
|
||||||
|
&:before,
|
||||||
|
&:after
|
||||||
|
background-color: currentColor
|
||||||
|
content: ""
|
||||||
|
display: block
|
||||||
|
left: 50%
|
||||||
|
position: absolute
|
||||||
|
top: 50%
|
||||||
|
transform: translateX(-50%) translateY(-50%) rotate(45deg)
|
||||||
|
transform-origin: center center
|
||||||
|
&:before
|
||||||
|
height: 1px
|
||||||
|
width: 50%
|
||||||
|
&:after
|
||||||
|
height: 50%
|
||||||
|
width: 1px
|
||||||
|
&:hover,
|
||||||
|
&:focus
|
||||||
|
background-color: darken($tag-background-color, 5%)
|
||||||
|
&:active
|
||||||
|
background-color: darken($tag-background-color, 10%)
|
||||||
&.is-rounded
|
&.is-rounded
|
||||||
border-radius: 290486px
|
border-radius: 290486px
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user