diff --git a/CHANGELOG.md b/CHANGELOG.md index bd93f4e6..7fa0bae0 100644 --- a/CHANGELOG.md +++ b/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 `
` +* #2201 Fix #1875 -> `.buttons` and `.tags` group sizing (`.are-small`, `.are-medium`, `.are-large`) ### Improvements diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index d47ef9df..4d44938b 100644 --- a/docs/css/bulma-docs.css +++ b/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; } diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html index 9092a5fa..ea146467 100644 --- a/docs/documentation/elements/button.html +++ b/docs/documentation/elements/button.html @@ -44,11 +44,30 @@ meta: {% capture button_sizes_example %} Small -Normal +Default +Normal Medium Large {% endcapture %} +{% capture buttons_medium_sizes_example %} +
+ All + Medium + Size +
+{% endcapture %} + +{% capture buttons_small_normal_sizes_example %} +
+ Small + Small + Small + Normal + Small +
+{% endcapture %} + {% capture button_displays_example %} Small Normal @@ -502,8 +521,62 @@ meta: {% include elements/anchor.html name="Sizes" %} +
+

+ The button comes in 4 different sizes: +

+ +

+ 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: +

+ +
+ +{% 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 %} +Normal Medium Large {% endcapture %} +{% capture are_medium %} +
+ All + Medium + Size +
+{% endcapture %} + +{% capture are_large %} +
+ All + Large + Size +
+{% endcapture %} + +{% capture are_medium_one_large %} +
+ Medium + Normal + Medium + Large + Medium +
+{% endcapture %} + {% capture rounded %} Rounded {% endcapture %} @@ -265,9 +292,21 @@ meta:
- And 2 additional sizes. +
+

+ The tag comes in 3 different sizes. +

+

+ While the default size is the normal one, the is-normal modifier exists in case you need to reset the tag to its normal size. +

+
+

+ + Normal + +

Medium @@ -284,6 +323,26 @@ meta:

+{% include elements/new-tag.html version="0.7.3" %} + +
+

+ 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