+
+ The button comes in 4 different sizes:
+
+
+ -
+ small
+
+ -
+ normal
+
+ -
+ medium
+
+ -
+ large
+
+
+
+ While the default size is the normal one, the is-normal
modifier exists in case you need to reset the button to its normal size.
+
+
+
{% include elements/snippet.html wrapper="buttons" content=button_sizes_example %}
+{% include elements/new-tag.html version="0.7.3" %}
+
+
+
+ You can change the size of multiple buttons at once by wrapping them in a .buttons
parent, and applying one of 3 modifiers:
+
+
+ -
+
buttons are-small
+
+ -
+
buttons are-medium
+
+ -
+
buttons are-large
+
+
+
+
+{% include elements/snippet.html content=buttons_medium_sizes_example %}
+
+
+
+ You can change the size of only a subset of buttons by simply applying a modifier class to them.
+
+ For example, if you want all buttons to be small but still have one in its normal size, simply do the following:
+
+
+
+{% include elements/snippet.html content=buttons_small_normal_sizes_example %}
+
{% include elements/anchor.html name="Displays" %}
{% include elements/snippet.html wrapper="buttons" content=button_displays_example %}
diff --git a/docs/documentation/elements/tag.html b/docs/documentation/elements/tag.html
index bb925391..01d61baf 100644
--- a/docs/documentation/elements/tag.html
+++ b/docs/documentation/elements/tag.html
@@ -34,10 +34,37 @@ meta:
{% endcapture %}
{% capture sizes %}
+
+
+ You can change the size of all tags at once:
+
+
+
+{% include elements/snippet.html content=are_medium %}
+
+{% include elements/snippet.html content=are_large %}
+
+
+
+ You can however keep the original size of a subset of tags, simply by applying one of its modifier class:
+
+
+
+{% include elements/snippet.html content=are_medium_one_large %}
+
{% include elements/anchor.html name="Modifiers" %}
diff --git a/sass/elements/button.sass b/sass/elements/button.sass
index 0204f3ad..e75cd2fd 100644
--- a/sass/elements/button.sass
+++ b/sass/elements/button.sass
@@ -35,6 +35,8 @@ $button-static-border-color: $grey-lighter !default
=button-small
border-radius: $radius-small
font-size: $size-small
+=button-normal
+ font-size: $size-normal
=button-medium
font-size: $size-medium
=button-large
@@ -186,6 +188,8 @@ $button-static-border-color: $grey-lighter !default
// Sizes
&.is-small
+button-small
+ &.is-normal
+ +button-normal
&.is-medium
+button-medium
&.is-large
@@ -233,14 +237,14 @@ $button-static-border-color: $grey-lighter !default
margin-bottom: 1rem
// Sizes
&.are-small
- .button
+ .button:not(.is-normal):not(.is-medium):not(.is-large)
+button-small
&.are-medium
- .button
+ .button:not(.is-small):not(.is-normal):not(.is-large)
+button-medium
&.are-large
- .button
- +button-large
+ .button:not(.is-small):not(.is-normal):not(.is-medium)
+ +button-large
&.has-addons
.button
&:not(:first-child)
diff --git a/sass/elements/tag.sass b/sass/elements/tag.sass
index 43df0683..a5fb3c4c 100644
--- a/sass/elements/tag.sass
+++ b/sass/elements/tag.sass
@@ -18,11 +18,11 @@ $tag-delete-margin: 1px !default
margin-bottom: 1rem
// Sizes
&.are-medium
- .tag
+ .tag:not(.is-normal):not(.is-large)
font-size: $size-normal
&.are-large
- .tag
- font-size: $size-medium
+ .tag:not(.is-normal):not(.is-medium)
+ font-size: $size-medium
&.has-addons
.tag
margin-right: 0
@@ -79,6 +79,8 @@ $tag-delete-margin: 1px !default
background-color: $color
color: $color-invert
// Sizes
+ &.is-normal
+ font-size: $size-small
&.is-medium
font-size: $size-normal
&.is-large