diff --git a/docs/_includes/heading.html b/docs/_includes/heading.html index 4c743777..defdfac3 100644 --- a/docs/_includes/heading.html +++ b/docs/_includes/heading.html @@ -1,5 +1,8 @@
-

+

{{ include.name }} + + # +

diff --git a/docs/_includes/variables.html b/docs/_includes/variables.html index c0dd3e20..e3d5e294 100644 --- a/docs/_includes/variables.html +++ b/docs/_includes/variables.html @@ -1,8 +1,4 @@ -
- -

- Variables -

+{% include heading.html name="Variables" %}

diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass index 75954645..6e402acf 100644 --- 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 bacf8958..9e5d70a9 100644 --- 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 a2d35a9a..078e8b2d 100644 --- a/docs/documentation/elements/tag.html +++ b/docs/documentation/elements/tag.html @@ -16,7 +16,7 @@ variables: {% endcapture %} -{% capture tags %} +{% capture tags_colors %} Black Dark Light @@ -52,8 +52,137 @@ variables: {% endcapture %} +{% capture is_delete %} + +{% endcapture %} + +{% capture tags %} +

+ One + Two + Three +
+{% endcapture %} + +{% capture tags_multiple %} +
+ One + Two + Three + Four + Five + Six + Seven + Eight + Nine + Ten + Eleven + Twelve + Thirteen + Fourteen + Fifteen + Sixteen + Seventeen + Eighteen + Nineteen + Twenty +
+{% endcapture %} + +{% capture tags_addons %} +
+ Package + Bulma +
+{% endcapture %} + +{% capture tags_field_addons %} +
+
+
+ npm + 0.5.0 +
+
+ +
+
+ build + passing +
+
+ +
+
+ chat + on gitter +
+
+
+{% endcapture %} + +{% capture tags_delete_addons %} +
+ Alex Smith + +
+{% endcapture %} + {% include subnav-elements.html %} +{% capture tags_blog_addons %} +
+
+
+ Technology + +
+
+ +
+
+ CSS + +
+
+ +
+
+ Flexbox + +
+
+ +
+
+ Web Design + +
+
+ +
+
+ Open Source + +
+
+ +
+
+ Community + +
+
+ +
+
+ Documentation + +
+
+
+{% endcapture %} +

Tags

@@ -135,7 +264,7 @@ variables:
- {% highlight html %}{{ tags }}{% endhighlight %} + {% highlight html %}{{ tags_colors }}{% endhighlight %}
@@ -176,11 +305,23 @@ variables: +
+
+ You can add the is-delete modifier to turn the tag into a delete button. +
+
+ {{ is_delete }} +
+
+ {% highlight html %}{{ is_delete }}{% endhighlight %} +
+
+ {% include heading.html name="Combinations" %}
- You can also append a delete button. + You can append a delete button.

@@ -207,6 +348,109 @@ variables:

+ {% include heading.html name="List of tags" %} + +
+ New! + 0.5.0 +
+ +
+
+
+

+ You can now create a list of tags with the .tags container. +

+
+
+ {{ tags }} +
+
+
+ {% highlight html %}{{ tags }}{% endhighlight %} +
+
+ +
+
+
+

+ If the list is very long, it will automatically wrap on multiple lines, while keeping all tags evenly spaced. +

+
+
+ {{ tags_multiple }} +
+
+
+ {% highlight html %}{{ tags_multiple }}{% endhighlight %} +
+
+ +
+
+
+

+ You can attach tags together with the .has-addons modifier. +

+
+
+ {{ tags_addons }} +
+
+
+ {% highlight html %}{{ tags_addons }}{% endhighlight %} +
+
+ +
+
+
+

+ You can attach a text tag with a delete tag together. +

+
+
+ {{ tags_delete_addons }} +
+
+
+ {% highlight html %}{{ tags_delete_addons }}{% endhighlight %} +
+
+ +
+
+
+

+ If you want to attach .tags containers together, simply use the .field element with the .is-grouped and .is-grouped-multiline modifiers. +

+
+
+ {{ tags_field_addons }} +
+
+
+ {% highlight html %}{{ tags_field_addons }}{% endhighlight %} +
+
+ +
+
+
+

+ This can be useful for a long list of blog tags. +

+
+
+ {{ tags_blog_addons }} +
+
+
+ {% highlight html %}{{ tags_blog_addons }}{% endhighlight %} +
+
+ {% include variables.html element=true %} diff --git a/sass/elements/tag.sass b/sass/elements/tag.sass index 46aa1b61..380f1043 100755 --- 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