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;">
|
||||
|
||||
<h3 id="{{ include.name | downcase }}" class="title" style="padding-top: 1.5rem;">
|
||||
<h3 id="{{ include.name | slugify }}" class="title anchor-title">
|
||||
{{ include.name }}
|
||||
<a class="anchor-link" href="#{{ include.name | slugify }}">
|
||||
#
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
@ -1,8 +1,4 @@
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="variables" class="title" style="padding-top: 1.5rem;">
|
||||
Variables
|
||||
</h3>
|
||||
{% include heading.html name="Variables" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
|
||||
@ -34,6 +34,14 @@
|
||||
&:hover
|
||||
border-bottom-color: $primary
|
||||
|
||||
.anchor-title
|
||||
padding-top: 1.5rem
|
||||
position: relative
|
||||
|
||||
.anchor-link
|
||||
position: absolute
|
||||
right: calc(100% + 1rem)
|
||||
|
||||
.article-image
|
||||
background-color: $primary
|
||||
display: block
|
||||
|
||||
@ -3477,6 +3477,42 @@ input[type="submit"].button {
|
||||
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 {
|
||||
border-radius: 290486px;
|
||||
}
|
||||
@ -8432,6 +8468,16 @@ html.route-index #carbon {
|
||||
border-bottom-color: #00d1b2;
|
||||
}
|
||||
|
||||
.anchor-title {
|
||||
padding-top: 1.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.anchor-link {
|
||||
position: absolute;
|
||||
right: calc(100% + 1rem);
|
||||
}
|
||||
|
||||
.article-image {
|
||||
background-color: #00d1b2;
|
||||
display: block;
|
||||
|
||||
@ -16,7 +16,7 @@ variables:
|
||||
</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tags %}
|
||||
{% capture tags_colors %}
|
||||
<span class="tag is-black">Black</span>
|
||||
<span class="tag is-dark">Dark</span>
|
||||
<span class="tag is-light">Light</span>
|
||||
@ -52,8 +52,137 @@ variables:
|
||||
</span>
|
||||
{% 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 %}
|
||||
|
||||
{% 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">
|
||||
<div class="container">
|
||||
<h1 class="title">Tags</h1>
|
||||
@ -135,7 +264,7 @@ variables:
|
||||
</span>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
{% highlight html %}{{ tags }}{% endhighlight %}
|
||||
{% highlight html %}{{ tags_colors }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -176,11 +305,23 @@ variables:
|
||||
</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" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
You can also append a <strong>delete button</strong>.
|
||||
You can append a <strong>delete button</strong>.
|
||||
</div>
|
||||
<div class="column is-2">
|
||||
<p class="field">
|
||||
@ -207,6 +348,109 @@ variables:
|
||||
</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 %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -54,6 +54,32 @@ $tag-radius: $radius !default
|
||||
&.is-large
|
||||
font-size: $size-medium
|
||||
// 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
|
||||
border-radius: 290486px
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user