Fix #1875

CHANGELOG.md

@@ -8,6 +8,7 @@
 * #2206 Fix #2046 -> New variables `$table-head-background-color`, `$table-body-background-color` and `$table-foot-background-color` for the `.table` element
 * #592 -> Give arbitrary elements access to the image/ratio classes
 * #1682 Fix #1681 -> Adds disabled styles for `<fieldset disabled>`
+* #2201 Fix #1875 -> `.buttons` and `.tags` group sizing (`.are-small`, `.are-medium`, `.are-large`)
 
 ### Improvements
 

docs/css/bulma-docs.css

@@ -2619,6 +2619,10 @@ fieldset[disabled] .button.is-danger.is-inverted.is-outlined {
   font-size: 0.75rem;
 }
 
+.button.is-normal {
+  font-size: 1rem;
+}
+
 .button.is-medium {
   font-size: 1.25rem;
 }
@@ -2689,6 +2693,19 @@ fieldset[disabled] .button {
   margin-bottom: 1rem;
 }
 
+.buttons.are-small .button:not(.is-normal):not(.is-medium):not(.is-large) {
+  border-radius: 2px;
+  font-size: 0.75rem;
+}
+
+.buttons.are-medium .button:not(.is-small):not(.is-normal):not(.is-large) {
+  font-size: 1.25rem;
+}
+
+.buttons.are-large .button:not(.is-small):not(.is-normal):not(.is-medium) {
+  font-size: 1.5rem;
+}
+
 .buttons.has-addons .button:not(:first-child) {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
@@ -5066,6 +5083,28 @@ fieldset[disabled] .select select:hover {
   margin-bottom: 1rem;
 }
 
+.tags.are-medium .tag:not(.is-normal):not(.is-large) {
+  font-size: 1rem;
+}
+
+.tags.are-large .tag:not(.is-normal):not(.is-medium) {
+  font-size: 1.25rem;
+}
+
+.tags.has-addons .tag {
+  margin-right: 0;
+}
+
+.tags.has-addons .tag:not(:first-child) {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.tags.has-addons .tag:not(:last-child) {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+
 .tags.is-centered {
   justify-content: center;
 }
@@ -5172,6 +5211,10 @@ fieldset[disabled] .select select:hover {
   color: #fff;
 }
 
+.tag:not(body).is-normal {
+  font-size: 0.75rem;
+}
+
 .tag:not(body).is-medium {
   font-size: 1rem;
 }

docs/documentation/elements/button.html

@@ -44,11 +44,30 @@ meta:
 
 {% capture button_sizes_example %}
 <a class="button is-small">Small</a>
-<a class="button">Normal</a>
+<a class="button">Default</a>
+<a class="button is-normal">Normal</a>
 <a class="button is-medium">Medium</a>
 <a class="button is-large">Large</a>
 {% endcapture %}
 
+{% capture buttons_medium_sizes_example %}
+<div class="buttons are-medium">
+  <a class="button">All</a>
+  <a class="button">Medium</a>
+  <a class="button">Size</a>
+</div>
+{% endcapture %}
+
+{% capture buttons_small_normal_sizes_example %}
+<div class="buttons are-small">
+  <a class="button">Small</a>
+  <a class="button">Small</a>
+  <a class="button">Small</a>
+  <a class="button is-normal">Normal</a>
+  <a class="button">Small</a>
+</div>
+{% endcapture %}
+
 {% capture button_displays_example %}
 <a class="button is-small is-fullwidth">Small</a>
 <a class="button is-fullwidth">Normal</a>
@@ -502,8 +521,62 @@ meta:
 
 {% include elements/anchor.html name="Sizes" %}
 
+<div class="content">
+  <p>
+    The button comes in <strong>4 different sizes:</strong>
+  </p>
+  <ul>
+    <li>
+      small
+    </li>
+    <li>
+      normal
+    </li>
+    <li>
+      medium
+    </li>
+    <li>
+      large
+    </li>
+  </ul>
+  <p>
+    While the default size is the <strong>normal</strong> one, the <code>is-normal</code> modifier exists in case you need to reset the button to its normal size.
+  </p>
+</div>
+
 {% include elements/snippet.html wrapper="buttons" content=button_sizes_example %}
 
+{% include elements/new-tag.html version="0.7.3" %}
+
+<div class="content">
+  <p>
+    You can change the size of <strong>multiple buttons</strong> at once by wrapping them in a <code>.buttons</code> parent, and applying one of 3 modifiers:
+  </p>
+  <ul>
+    <li>
+      <code>buttons are-small</code>
+    </li>
+    <li>
+      <code>buttons are-medium</code>
+    </li>
+    <li>
+      <code>buttons are-large</code>
+    </li>
+  </ul>
+</div>
+
+{% include elements/snippet.html content=buttons_medium_sizes_example %}
+
+<div class="content">
+  <p>
+    You can change the size of only a <strong>subset of buttons</strong> by simply applying a modifier class to them.
+    <br>
+    For example, if you want all buttons to be <strong>small</strong> but still have one in its <strong>normal</strong> size, simply do the following:
+  </p>
+</div>
+
+{% 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 %}

docs/documentation/elements/tag.html

@@ -34,10 +34,37 @@ meta:
 {% endcapture %}
 
 {% capture sizes %}
+<span class="tag is-link is-normal">Normal</span>
 <span class="tag is-primary is-medium">Medium</span>
 <span class="tag is-info is-large">Large</span>
 {% endcapture %}
 
+{% capture are_medium %}
+<div class="tags are-medium">
+  <span class="tag">All</span>
+  <span class="tag">Medium</span>
+  <span class="tag">Size</span>
+</div>
+{% endcapture %}
+
+{% capture are_large %}
+<div class="tags are-large">
+  <span class="tag">All</span>
+  <span class="tag">Large</span>
+  <span class="tag">Size</span>
+</div>
+{% endcapture %}
+
+{% capture are_medium_one_large %}
+<div class="tags are-medium">
+  <span class="tag">Medium</span>
+  <span class="tag is-normal">Normal</span>
+  <span class="tag">Medium</span>
+  <span class="tag is-large">Large</span>
+  <span class="tag">Medium</span>
+</div>
+{% endcapture %}
+
 {% capture rounded %}
 <span class="tag is-rounded">Rounded</span>
 {% endcapture %}
@@ -265,9 +292,21 @@ meta:
 
 <div class="columns">
   <div class="column is-4">
-    And <strong>2 additional</strong> sizes.
+    <div class="content">
+      <p>
+        The tag comes in <strong>3 different</strong> sizes.
+      </p>
+      <p>
+        While the default size is the <strong>normal</strong> one, the <code>is-normal</code> modifier exists in case you need to reset the tag to its normal size.
+      </p>
+    </div>
   </div>
   <div class="column is-2">
+    <p class="field">
+      <span class="tag is-link is-normal">
+        Normal
+      </span>
+    </p>
     <p class="field">
       <span class="tag is-primary is-medium">
         Medium
@@ -284,6 +323,26 @@ meta:
   </div>
 </div>
 
+{% include elements/new-tag.html version="0.7.3" %}
+
+<div class="content">
+  <p>
+    You can change the size of <strong>all</strong> tags at once:
+  </p>
+</div>
+
+{% include elements/snippet.html content=are_medium %}
+
+{% include elements/snippet.html content=are_large %}
+
+<div class="content">
+  <p>
+    You can however keep the original size of a <strong>subset</strong> of tags, simply by applying one of its modifier class:
+  </p>
+</div>
+
+{% include elements/snippet.html content=are_medium_one_large %}
+
 {% include elements/anchor.html name="Modifiers" %}
 
 <div class="columns">

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,13 +237,13 @@ $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:not(.is-small):not(.is-normal):not(.is-medium)
       +button-large
   &.has-addons
     .button

sass/elements/tag.sass

@@ -18,10 +18,10 @@ $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
+    .tag:not(.is-normal):not(.is-medium)
       font-size: $size-medium
   &.has-addons
     .tag
@@ -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