library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use field for buttons

Browse Source
This commit is contained in:
Jeremy Thomas 2017-03-12 17:37:22 +00:00
parent 9fc8cdf225
commit dc3e216da9
3 changed files with 102 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_includes/footer.html
View File

@ -13,7 +13,7 @@
<div class="column">
<form action="https://bbxdesign.us3.list-manage.com/subscribe/post?u=b43b93fe633f0560b2a72a69c&amp;id=52585e8803" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="control is-grouped">
<div class="field is-grouped">
<div class="control has-icon is-expanded">
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
<span class="icon is-small">

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

@ -260,7 +260,7 @@ doc-subtab: button
<h4 class="subtitle">With Font Awesome icons</h4>
{% capture button_fa_example %}
<p class="control">
<p class="field">
<a class="button">
<span class="icon is-small">
<i class="fa fa-bold"></i>
@ -277,7 +277,7 @@ doc-subtab: button
</span>
</a>
</p>
<p class="control">
<p class="field">
<a class="button">
<span class="icon">
<i class="fa fa-github"></i>
@ -303,7 +303,7 @@ doc-subtab: button
</span>
</a>
</p>
<p class="control">
<p class="field">
<a class="button is-small">
<span class="icon is-small">
<i class="fa fa-github"></i>
@ -352,14 +352,14 @@ doc-subtab: button
</p>
</div>
{% capture button_only_icon_example %}
<p class="control">
<p class="field">
<a class="button is-small">
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
</a>
</p>
<p class="control">
<p class="field">
<a class="button">
<span class="icon is-small">
<i class="fa fa-header"></i>
@ -371,7 +371,7 @@ doc-subtab: button
</span>
</a>
</p>
<p class="control">
<p class="field">
<a class="button is-medium">
<span class="icon is-small">
<i class="fa fa-header"></i>
@ -388,7 +388,7 @@ doc-subtab: button
</span>
</a>
</p>
<p class="control">
<p class="field">
<a class="button is-large">
<span class="icon is-small">
<i class="fa fa-header"></i>
@ -424,10 +424,10 @@ doc-subtab: button
<h3 class="title">Button group</h3>
<div class="content">
<p>If you want to <strong>group</strong> buttons together, use the <code>is-grouped</code> modifier on the <code>control</code> container:</p>
<p>If you want to <strong>group</strong> buttons together, use the <code>is-grouped</code> modifier on the <code>field</code> container:</p>
</div>
{% capture button_group_example %}
<div class="control is-grouped">
<div class="field is-grouped">
<p class="control">
<a class="button is-primary">
Save changes
@ -456,22 +456,27 @@ doc-subtab: button
<h3 class="title">Button addons</h3>
<div class="content">
<p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>control</code> container:</p>
<p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>field</code> container:</p>
</div>
{% capture button_addons_example %}
<p class="control has-addons">
<div class="field has-addons">
<p class="control">
<a class="button">
<span class="icon is-small">
<i class="fa fa-align-left"></i>
</span>
<span>Left</span>
</a>
</p>
<p class="control">
<a class="button">
<span class="icon is-small">
<i class="fa fa-align-center"></i>
</span>
<span>Center</span>
</a>
</p>
<p class="control">
<a class="button">
<span class="icon is-small">
<i class="fa fa-align-right"></i>
@ -479,6 +484,7 @@ doc-subtab: button
<span>Right</span>
</a>
</p>
</div>
{% endcapture %}
<div class="example">
{{button_addons_example}}
@ -494,20 +500,24 @@ doc-subtab: button
<p>You can group together addons as well:</p>
</div>
{% capture button_group_addons_example %}
<div class="control is-grouped">
<p class="control has-addons">
<div class="field has-addons">
<p class="control">
<a class="button">
<span class="icon is-small">
<i class="fa fa-bold"></i>
</span>
<span>Bold</span>
</a>
</p>
<p class="control">
<a class="button">
<span class="icon is-small">
<i class="fa fa-italic"></i>
</span>
<span>Italic</span>
</a>
</p>
<p class="control">
<a class="button">
<span class="icon is-small">
<i class="fa fa-underline"></i>
@ -515,19 +525,26 @@ doc-subtab: button
<span>Underline</span>
</a>
</p>
<p class="control has-addons">
</div>
<div class="field has-addons">
<p class="control">
<a class="button">
<span class="icon is-small">
<i class="fa fa-align-left"></i>
</span>
<span>Left</span>
</a>
</p>
<p class="control">
<a class="button">
<span class="icon is-small">
<i class="fa fa-align-center"></i>
</span>
<span>Center</span>
</a>
</p>
<p class="control">
<a class="button">
<span class="icon is-small">
<i class="fa fa-align-right"></i>

2
docs/documentation/elements/form.html
View File

@ -31,8 +31,8 @@ doc-subtab: form
</div>
{% capture form_example %}
<label class="label">Name</label>
<div class="field">
<label class="label">Name</label>
<p class="control">
<input class="input" type="text" placeholder="Text input">
</p>