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

Add responsive button sizes (#3484)

Browse Source 
* Add responsive button sizes

* Clean up code

* Add responsive buttons playground
This commit is contained in:
Jeremy Thomas
2022-02-06 15:57:04 +00:00
committed by GitHub
parent 80e0396424
commit d773f4dcd5
18 changed files with 259 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -609,6 +609,43 @@ meta:
{% include elements/snippet.html content=buttons_small_normal_sizes_example %}
<table class="table is-bordered">
<thead>
<tr>
<th>Name</th>
<th>Fixed size</th>
<th>Responsive <small class="has-text-grey has-text-weight-normal">(resize window to see in action)</small></th>
</tr>
</thead>
</table>
{% include elements/anchor.html name="Responsive sizes" %}
{% include elements/new-tag.html version="0.9.4" %}
<div class="content">
<p>
If you want different button sizes for each breakpoint, you can use Bulma's <strong>responsive</strong> buttons. Simply append the <code>is-responsive</code> modifier:
</p>
</div>
{% include snippets/responsive-buttons.html %}
<div class="block">
<a target="_blank" class="button is-small is-link is-outlined" href="{{ site.url }}/playground/responsive-buttons/">
<span>Open table in new window</span>
<span class="icon">
<i class="fa fa-external-link-alt"></i>
</span>
</a>
</div>
<div class="content">
<p>
You can customise the sizes by overwriting the <code>$button-responsive-sizes</code> Sass variable.
</p>
</div>
{% include elements/anchor.html name="Displays" %}
{% include elements/snippet.html wrapper="buttons" content=button_displays_example %}