Skip to content

Commit

Permalink
Fix #1875
Browse files Browse the repository at this point in the history
  • Loading branch information
@jgthms
jgthms committed Oct 31, 2018
1 parent 2d2c8f7 commit 7d739cf
Show file tree
Hide file tree
Showing 6 changed files with 191 additions and 9 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
43 changes: 43 additions & 0 deletions docs/css/bulma-docs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand Down
75 changes: 74 additions & 1 deletion docs/documentation/elements/button.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,30 @@

{% 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>
Expand Down Expand Up @@ -502,8 +521,62 @@

{% 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 %}
Expand Down
61 changes: 60 additions & 1 deletion docs/documentation/elements/tag.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,37 @@
{% 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 %}
Expand Down Expand Up @@ -265,9 +292,21 @@

<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
Expand All @@ -284,6 +323,26 @@
</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">
Expand Down
12 changes: 8 additions & 4 deletions sass/elements/button.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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)
Expand Down
8 changes: 5 additions & 3 deletions sass/elements/tag.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit 7d739cf

Please sign in to comment.