Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix #1875

Browse Source
This commit is contained in:
Jeremy Thomas
2018-10-31 19:22:21 +00:00
parent 2d2c8f7a30
commit 7d739cfadb
6 changed files with 191 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
docs/documentation/elements/button.html
View File

@@ -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 %}

61
docs/documentation/elements/tag.html
View File

@@ -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">