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"> <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> <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 id="mc_embed_signup_scroll">
<div class="control is-grouped"> <div class="field is-grouped">
<div class="control has-icon is-expanded"> <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> <input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
<span class="icon is-small"> <span class="icon is-small">

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

@ -260,7 +260,7 @@ doc-subtab: button
<h4 class="subtitle">With Font Awesome icons</h4> <h4 class="subtitle">With Font Awesome icons</h4>
{% capture button_fa_example %} {% capture button_fa_example %}
<p class="control"> <p class="field">
<a class="button"> <a class="button">
<span class="icon is-small"> <span class="icon is-small">
<i class="fa fa-bold"></i> <i class="fa fa-bold"></i>
@ -277,7 +277,7 @@ doc-subtab: button
</span> </span>
</a> </a>
</p> </p>
<p class="control"> <p class="field">
<a class="button"> <a class="button">
<span class="icon"> <span class="icon">
<i class="fa fa-github"></i> <i class="fa fa-github"></i>
@ -303,7 +303,7 @@ doc-subtab: button
</span> </span>
</a> </a>
</p> </p>
<p class="control"> <p class="field">
<a class="button is-small"> <a class="button is-small">
<span class="icon is-small"> <span class="icon is-small">
<i class="fa fa-github"></i> <i class="fa fa-github"></i>
@ -352,63 +352,63 @@ doc-subtab: button
</p> </p>
</div> </div>
{% capture button_only_icon_example %} {% capture button_only_icon_example %}
<p class="control"> <p class="field">
<a class="button is-small"> <a class="button is-small">
<span class="icon is-small"> <span class="icon is-small">
<i class="fa fa-header"></i> <i class="fa fa-header"></i>
</span> </span>
</a> </a>
</p> </p>
<p class="control"> <p class="field">
<a class="button"> <a class="button">
<span class="icon is-small"> <span class="icon is-small">
<i class="fa fa-header"></i> <i class="fa fa-header"></i>
</span> </span>
</a> </a>
<a class="button"> <a class="button">
<span class="icon"> <span class="icon">
<i class="fa fa-header"></i> <i class="fa fa-header"></i>
</span> </span>
</a> </a>
</p> </p>
<p class="control"> <p class="field">
<a class="button is-medium"> <a class="button is-medium">
<span class="icon is-small"> <span class="icon is-small">
<i class="fa fa-header"></i> <i class="fa fa-header"></i>
</span> </span>
</a> </a>
<a class="button is-medium"> <a class="button is-medium">
<span class="icon"> <span class="icon">
<i class="fa fa-header"></i> <i class="fa fa-header"></i>
</span> </span>
</a> </a>
<a class="button is-medium"> <a class="button is-medium">
<span class="icon is-medium"> <span class="icon is-medium">
<i class="fa fa-header"></i> <i class="fa fa-header"></i>
</span> </span>
</a> </a>
</p> </p>
<p class="control"> <p class="field">
<a class="button is-large"> <a class="button is-large">
<span class="icon is-small"> <span class="icon is-small">
<i class="fa fa-header"></i> <i class="fa fa-header"></i>
</span> </span>
</a> </a>
<a class="button is-large"> <a class="button is-large">
<span class="icon"> <span class="icon">
<i class="fa fa-header"></i> <i class="fa fa-header"></i>
</span> </span>
</a> </a>
<a class="button is-large"> <a class="button is-large">
<span class="icon is-medium"> <span class="icon is-medium">
<i class="fa fa-header"></i> <i class="fa fa-header"></i>
</span> </span>
</a> </a>
<a class="button is-large"> <a class="button is-large">
<span class="icon is-large"> <span class="icon is-large">
<i class="fa fa-header"></i> <i class="fa fa-header"></i>
</span> </span>
</a> </a>
</p> </p>
{% endcapture %} {% endcapture %}
{{button_only_icon_example}} {{button_only_icon_example}}
@ -424,10 +424,10 @@ doc-subtab: button
<h3 class="title">Button group</h3> <h3 class="title">Button group</h3>
<div class="content"> <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> </div>
{% capture button_group_example %} {% capture button_group_example %}
<div class="control is-grouped"> <div class="field is-grouped">
<p class="control"> <p class="control">
<a class="button is-primary"> <a class="button is-primary">
Save changes Save changes
@ -456,29 +456,35 @@ doc-subtab: button
<h3 class="title">Button addons</h3> <h3 class="title">Button addons</h3>
<div class="content"> <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> </div>
{% capture button_addons_example %} {% capture button_addons_example %}
<p class="control has-addons"> <div class="field has-addons">
<a class="button"> <p class="control">
<span class="icon is-small"> <a class="button">
<i class="fa fa-align-left"></i> <span class="icon is-small">
</span> <i class="fa fa-align-left"></i>
<span>Left</span> </span>
</a> <span>Left</span>
<a class="button"> </a>
<span class="icon is-small"> </p>
<i class="fa fa-align-center"></i> <p class="control">
</span> <a class="button">
<span>Center</span> <span class="icon is-small">
</a> <i class="fa fa-align-center"></i>
<a class="button"> </span>
<span class="icon is-small"> <span>Center</span>
<i class="fa fa-align-right"></i> </a>
</span> </p>
<span>Right</span> <p class="control">
</a> <a class="button">
</p> <span class="icon is-small">
<i class="fa fa-align-right"></i>
</span>
<span>Right</span>
</a>
</p>
</div>
{% endcapture %} {% endcapture %}
<div class="example"> <div class="example">
{{button_addons_example}} {{button_addons_example}}
@ -494,20 +500,24 @@ doc-subtab: button
<p>You can group together addons as well:</p> <p>You can group together addons as well:</p>
</div> </div>
{% capture button_group_addons_example %} {% capture button_group_addons_example %}
<div class="control is-grouped"> <div class="field has-addons">
<p class="control has-addons"> <p class="control">
<a class="button"> <a class="button">
<span class="icon is-small"> <span class="icon is-small">
<i class="fa fa-bold"></i> <i class="fa fa-bold"></i>
</span> </span>
<span>Bold</span> <span>Bold</span>
</a> </a>
</p>
<p class="control">
<a class="button"> <a class="button">
<span class="icon is-small"> <span class="icon is-small">
<i class="fa fa-italic"></i> <i class="fa fa-italic"></i>
</span> </span>
<span>Italic</span> <span>Italic</span>
</a> </a>
</p>
<p class="control">
<a class="button"> <a class="button">
<span class="icon is-small"> <span class="icon is-small">
<i class="fa fa-underline"></i> <i class="fa fa-underline"></i>
@ -515,19 +525,26 @@ doc-subtab: button
<span>Underline</span> <span>Underline</span>
</a> </a>
</p> </p>
<p class="control has-addons"> </div>
<div class="field has-addons">
<p class="control">
<a class="button"> <a class="button">
<span class="icon is-small"> <span class="icon is-small">
<i class="fa fa-align-left"></i> <i class="fa fa-align-left"></i>
</span> </span>
<span>Left</span> <span>Left</span>
</a> </a>
</p>
<p class="control">
<a class="button"> <a class="button">
<span class="icon is-small"> <span class="icon is-small">
<i class="fa fa-align-center"></i> <i class="fa fa-align-center"></i>
</span> </span>
<span>Center</span> <span>Center</span>
</a> </a>
</p>
<p class="control">
<a class="button"> <a class="button">
<span class="icon is-small"> <span class="icon is-small">
<i class="fa fa-align-right"></i> <i class="fa fa-align-right"></i>

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

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