mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add list of buttons
This commit is contained in:
Jeremy Thomas
parent
1523ce8527
commit
7c94b4e439
13
CHANGELOG.md
13
CHANGELOG.md
@ -4,6 +4,7 @@
|
||||
|
||||
### New features
|
||||
|
||||
* 🎉 [List of buttons](https://bulma.io/documentation/elements/button/#list-of-buttons)
|
||||
* #1287 New `.is-invisible` helper
|
||||
|
||||
## 0.6.0
|
||||
@ -131,7 +132,7 @@ The `$link` color is used instead of `$primary` in the following components:
|
||||
|
||||
### New features
|
||||
|
||||
* 🎉 #280 [File upload element](http://bulma.io/documentation/form/file/)
|
||||
* 🎉 #280 [File upload element](https://bulma.io/documentation/form/file/)
|
||||
* `$container-offset` variable to determine the `.container` breakpoints
|
||||
* #1001 Text case helpers
|
||||
|
||||
@ -150,7 +151,7 @@ The `$link` color is used instead of `$primary` in the following components:
|
||||
|
||||
### New features
|
||||
|
||||
* 🎉 [List of tags](http://bulma.io/documentation/elements/tag/#list-of-tags)
|
||||
* 🎉 [List of tags](https://bulma.io/documentation/elements/tag/#list-of-tags)
|
||||
* New **variable naming system**: `component`-`subcomponent`-`state`-`property`
|
||||
* Improved **customization** thanks to new set of variables
|
||||
* #934 New `.is-shadowless` helper
|
||||
@ -244,9 +245,9 @@ Variable name changes (mostly appending `-color`):
|
||||
|
||||
### Improved documentation
|
||||
|
||||
* [Starter template](http://bulma.io/documentation/overview/start/#starter-template)
|
||||
* [Colors page](http://bulma.io/documentation/overview/colors/)
|
||||
* [Typography helpers](http://bulma.io/documentation/modifiers/typography-helpers/)
|
||||
* [Starter template](https://bulma.io/documentation/overview/start/#starter-template)
|
||||
* [Colors page](https://bulma.io/documentation/overview/colors/)
|
||||
* [Typography helpers](https://bulma.io/documentation/modifiers/typography-helpers/)
|
||||
* **Meta** information for all elements and components
|
||||
* **Variables** information for most elements and components
|
||||
|
||||
@ -261,7 +262,7 @@ Variable name changes (mostly appending `-color`):
|
||||
|
||||
### New features
|
||||
|
||||
* New [dropdown button](http://bulma.io/documentation/components/dropdown/)!
|
||||
* New [dropdown button](https://bulma.io/documentation/components/dropdown/)!
|
||||
* The breakpoints and `.container` **gap** can be customized with the new `$gap` variable
|
||||
* The `.container` has 2 new modifiers: `.is-widescreen` and `.is-fullhd`
|
||||
|
||||
|
||||
@ -2475,6 +2475,75 @@ a.box:active {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.buttons .button {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.buttons .button:not(:last-child) {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.buttons:last-child {
|
||||
margin-bottom: -0.5rem;
|
||||
}
|
||||
|
||||
.buttons:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.buttons.has-addons .button:not(:first-child) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
.buttons.has-addons .button:not(:last-child) {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.buttons.has-addons .button:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.buttons.has-addons .button:hover, .buttons.has-addons .button.is-hovered {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.buttons.has-addons .button:focus, .buttons.has-addons .button.is-focused, .buttons.has-addons .button:active, .buttons.has-addons .button.is-active, .buttons.has-addons .button.is-selected {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.buttons.has-addons .button:focus:hover, .buttons.has-addons .button.is-focused:hover, .buttons.has-addons .button:active:hover, .buttons.has-addons .button.is-active:hover, .buttons.has-addons .button.is-selected:hover {
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.buttons.is-centered {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.buttons.is-right {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
@ -12387,25 +12456,25 @@ html.route-index .hero.is-primary a.column:hover .title strong {
|
||||
|
||||
@-webkit-keyframes rainbow {
|
||||
0% {
|
||||
background-position: 0% 80%;
|
||||
background-position: 1% 80%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 20%;
|
||||
background-position: 99% 20%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 80%;
|
||||
background-position: 1% 80%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-position: 0% 80%;
|
||||
background-position: 1% 80%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 20%;
|
||||
background-position: 99% 20%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 80%;
|
||||
background-position: 1% 80%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -367,6 +367,83 @@ doc-subtab: button
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture buttons %}
|
||||
<div class="buttons">
|
||||
<span class="button is-success">Save changes</span>
|
||||
<span class="button is-info">Save and continue</span>
|
||||
<span class="button is-danger">Cancel</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture buttons_multiple %}
|
||||
<div class="buttons">
|
||||
<span class="button">One</span>
|
||||
<span class="button">Two</span>
|
||||
<span class="button">Three</span>
|
||||
<span class="button">Four</span>
|
||||
<span class="button">Five</span>
|
||||
<span class="button">Six</span>
|
||||
<span class="button">Seven</span>
|
||||
<span class="button">Eight</span>
|
||||
<span class="button">Nine</span>
|
||||
<span class="button">Ten</span>
|
||||
<span class="button">Eleven</span>
|
||||
<span class="button">Twelve</span>
|
||||
<span class="button">Thirteen</span>
|
||||
<span class="button">Fourteen</span>
|
||||
<span class="button">Fifteen</span>
|
||||
<span class="button">Sixteen</span>
|
||||
<span class="button">Seventeen</span>
|
||||
<span class="button">Eighteen</span>
|
||||
<span class="button">Nineteen</span>
|
||||
<span class="button">Twenty</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture buttons_addons %}
|
||||
<div class="buttons has-addons">
|
||||
<span class="button">Yes</span>
|
||||
<span class="button">Maybe</span>
|
||||
<span class="button">No</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture buttons_addons_centered %}
|
||||
<div class="buttons has-addons is-centered">
|
||||
<span class="button">Yes</span>
|
||||
<span class="button">Maybe</span>
|
||||
<span class="button">No</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture buttons_addons_right %}
|
||||
<div class="buttons has-addons is-right">
|
||||
<span class="button">Yes</span>
|
||||
<span class="button">Maybe</span>
|
||||
<span class="button">No</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture buttons_addons_selected %}
|
||||
<div class="buttons has-addons">
|
||||
<span class="button is-success is-selected">Yes</span>
|
||||
<span class="button">Maybe</span>
|
||||
<span class="button">No</span>
|
||||
</div>
|
||||
|
||||
<div class="buttons has-addons">
|
||||
<span class="button">Yes</span>
|
||||
<span class="button is-info is-selected">Maybe</span>
|
||||
<span class="button">No</span>
|
||||
</div>
|
||||
|
||||
<div class="buttons has-addons">
|
||||
<span class="button">Yes</span>
|
||||
<span class="button">Maybe</span>
|
||||
<span class="button is-danger is-selected">No</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-elements.html %}
|
||||
|
||||
<section class="section">
|
||||
@ -572,6 +649,124 @@ doc-subtab: button
|
||||
|
||||
{% include snippet.html content=button_group_addons_example %}
|
||||
|
||||
{% include anchor.html name="List of buttons" %}
|
||||
|
||||
{% include elements/new-tag.html version="0.6.1" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can now create a <strong>list of buttons</strong> with the <code>.buttons</code> container.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ buttons }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ buttons }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
If the list is <strong>very long</strong>, it will automatically wrap on <strong>multiple lines</strong>, while keeping all buttons <strong>evenly spaced</strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ buttons_multiple }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ buttons_multiple }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can <strong>attach buttons together</strong> with the <code>.has-addons</code> modifier.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ buttons_addons }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ buttons_addons }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
Use the <code>is-centered</code> or the <code>is-right</code> modifiers to alter the <strong>alignment</strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ buttons_addons_centered }}
|
||||
{{ buttons_addons_right }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ buttons_addons_centered }}{{ buttons_addons_right }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use any <strong>modifier</strong> class on each button to differentiate them. Make sure to add the <code>is-selected</code> modifier as well to make sure the selected button is <em>above</em> its siblings.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ buttons_addons_selected }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ buttons_addons_selected }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message is-info">
|
||||
<div class="message-header">
|
||||
<p>Difference between <a href="{{ site.url }}/documentation/form/general/#form-group">form groups</a> and <strong>list of buttons</strong></p>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
<div class="content">
|
||||
<p>
|
||||
While this list of buttons style can be achieved with either <code>field is-grouped</code> or the new <code>buttons</code> class, there are a few differences:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>buttons</code> has a <strong>simpler markup</strong>
|
||||
</li>
|
||||
<li>
|
||||
<code>buttons</code> can only contain <code>button</code> elements
|
||||
</li>
|
||||
<li>
|
||||
<code>field is-grouped</code> can contain <em>any</em> type of <code>control</code> inputs
|
||||
</li>
|
||||
<li>
|
||||
<code>field is-grouped</code> can be forced to fit all controls on a <strong>single line</strong>
|
||||
</li>
|
||||
<li>
|
||||
with <code>field is-grouped</code> you can <strong>expand</strong> one of the controls
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Basically, if you only want a list of <em>buttons</em>, using <code>buttons</code> is recommended. If you need more control on the styling and the elements, use a <a href="{{ site.url }}/documentation/form/general/#form-group">form group</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include variables.html type='element' %}
|
||||
|
||||
</div>
|
||||
|
||||
@ -983,6 +983,19 @@ variables_form_keys:
|
||||
|
||||
{% include snippet.html content=group_multiline_example clipped=true %}
|
||||
|
||||
<div class="message is-info">
|
||||
<div class="message-header">
|
||||
<p>List of buttons</p>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
<div class="content">
|
||||
<p>
|
||||
If you only need a list of <em>buttons</em>, try out the new <code>buttons</code> class with which you can create a <a href="{{ site.url }}/documentation/elements/button/#list-of-buttons">multiline list of buttons</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Horizontal form" %}
|
||||
|
||||
<div class="content">
|
||||
@ -1021,7 +1034,7 @@ variables_form_keys:
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=field_label_example horizontal=true more=true %}
|
||||
|
||||
|
||||
{% include anchor.html name="Variables" %}
|
||||
|
||||
<div class="content">
|
||||
|
||||
@ -199,3 +199,43 @@ $button-static-border-color: $grey-lighter !default
|
||||
color: $button-static-color
|
||||
box-shadow: none
|
||||
pointer-events: none
|
||||
|
||||
.buttons
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-start
|
||||
.button
|
||||
margin-bottom: 0.5rem
|
||||
&:not(:last-child)
|
||||
margin-right: 0.5rem
|
||||
&:last-child
|
||||
margin-bottom: -0.5rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1rem
|
||||
&.has-addons
|
||||
.button
|
||||
&:not(:first-child)
|
||||
border-bottom-left-radius: 0
|
||||
border-top-left-radius: 0
|
||||
&:not(:last-child)
|
||||
border-bottom-right-radius: 0
|
||||
border-top-right-radius: 0
|
||||
margin-right: -1px
|
||||
&:last-child
|
||||
margin-right: 0
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
z-index: 2
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active,
|
||||
&.is-selected
|
||||
z-index: 3
|
||||
&:hover
|
||||
z-index: 4
|
||||
&.is-centered
|
||||
justify-content: center
|
||||
&.is-right
|
||||
justify-content: flex-end
|
||||
|
||||
Loading…
Reference in New Issue
Block a user