Explain tags

diff --git a/docs/_includes/heading.html b/docs/_includes/heading.html
index 4c743777c486e0e3542ba14944e942167162bbdf..defdfac33015e4e1f827cac9d39fb19adbf9b9f5 100644 (file)
--- a/docs/_includes/heading.html
+++ b/docs/_includes/heading.html
@@ -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>

diff --git a/docs/_includes/variables.html b/docs/_includes/variables.html
index c0dd3e203f2e5d0e7102c15f6cdeebac946ec624..e3d5e294e74246c53636eadbcc702139656f86c4 100644 (file)
--- a/docs/_includes/variables.html
+++ b/docs/_includes/variables.html
@@ -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>

diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass
index 75954645d2f618eea8fa99bfe730c40caf042876..6e402acfc5c173f571a14f83f4cabe835e82458f 100644 (file)
--- a/docs/_sass/specific.sass
+++ b/docs/_sass/specific.sass
@@ -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

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index bacf89581b7c9e094a70f0be1a3c0e454ae8c9b3..9e5d70a9fba902cd0addc0e43daa98e8380f6cf5 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -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;

diff --git a/docs/documentation/elements/tag.html b/docs/documentation/elements/tag.html
index a2d35a9a6b167b3e0c91ea75138fec44e0b0b7de..078e8b2df276ad857565e0ef57e266b87763e8e0 100644 (file)
--- a/docs/documentation/elements/tag.html
+++ b/docs/documentation/elements/tag.html
@@ -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>

diff --git a/sass/elements/tag.sass b/sass/elements/tag.sass
index 46aa1b612b8d678ffaa07176875063e6cca03ee3..380f1043a38eb51261ec63a41034219bea45a8d6 100755 (executable)
--- a/sass/elements/tag.sass
+++ b/sass/elements/tag.sass
@@ -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