From 7c94b4e4393634f4c3b622fdc7c4c7ef83c7e2ab Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Tue, 17 Oct 2017 11:53:44 +0100 Subject: [PATCH] Add list of buttons --- CHANGELOG.md | 13 +- docs/css/bulma-docs.css | 81 +++++++++- docs/documentation/elements/button.html | 195 ++++++++++++++++++++++++ docs/documentation/form/general.html | 15 +- sass/elements/button.sass | 40 +++++ 5 files changed, 331 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 36ca5a15..d6d012bf 100644 --- a/CHANGELOG.md +++ b/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` diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 68f3d6db..9605f741 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -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%; } } diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html index 439d4ddd..52c31a4a 100644 --- a/docs/documentation/elements/button.html +++ b/docs/documentation/elements/button.html @@ -367,6 +367,83 @@ doc-subtab: button {% endcapture %} +{% capture buttons %} +
+ Save changes + Save and continue + Cancel +
+{% endcapture %} + +{% capture buttons_multiple %} +
+ One + Two + Three + Four + Five + Six + Seven + Eight + Nine + Ten + Eleven + Twelve + Thirteen + Fourteen + Fifteen + Sixteen + Seventeen + Eighteen + Nineteen + Twenty +
+{% endcapture %} + +{% capture buttons_addons %} +
+ Yes + Maybe + No +
+{% endcapture %} + +{% capture buttons_addons_centered %} +
+ Yes + Maybe + No +
+{% endcapture %} + +{% capture buttons_addons_right %} +
+ Yes + Maybe + No +
+{% endcapture %} + +{% capture buttons_addons_selected %} +
+ Yes + Maybe + No +
+ +
+ Yes + Maybe + No +
+ +
+ Yes + Maybe + No +
+{% endcapture %} + {% include subnav-elements.html %}
@@ -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" %} + +
+
+
+

+ You can now create a list of buttons with the .buttons container. +

+
+
+ {{ buttons }} +
+
+
+ {% highlight html %}{{ buttons }}{% endhighlight %} +
+
+ +
+
+
+

+ If the list is very long, it will automatically wrap on multiple lines, while keeping all buttons evenly spaced. +

+
+
+ {{ buttons_multiple }} +
+
+
+ {% highlight html %}{{ buttons_multiple }}{% endhighlight %} +
+
+ +
+
+
+

+ You can attach buttons together with the .has-addons modifier. +

+
+
+ {{ buttons_addons }} +
+
+
+ {% highlight html %}{{ buttons_addons }}{% endhighlight %} +
+
+ +
+
+
+

+ Use the is-centered or the is-right modifiers to alter the alignment. +

+
+
+ {{ buttons_addons_centered }} + {{ buttons_addons_right }} +
+
+
+ {% highlight html %}{{ buttons_addons_centered }}{{ buttons_addons_right }}{% endhighlight %} +
+
+ +
+
+
+

+ You can use any modifier class on each button to differentiate them. Make sure to add the is-selected modifier as well to make sure the selected button is above its siblings. +

+
+
+ {{ buttons_addons_selected }} +
+
+
+ {% highlight html %}{{ buttons_addons_selected }}{% endhighlight %} +
+
+ +
+
+

Difference between form groups and list of buttons

+
+
+
+

+ While this list of buttons style can be achieved with either field is-grouped or the new buttons class, there are a few differences: +

+
    +
  • + buttons has a simpler markup +
    • +
  • + buttons can only contain button elements +
    • +
  • + field is-grouped can contain any type of control inputs +
    • +
  • + field is-grouped can be forced to fit all controls on a single line +
    • +
  • + with field is-grouped you can expand one of the controls +
    • +
+

+ Basically, if you only want a list of buttons, using buttons is recommended. If you need more control on the styling and the elements, use a form group. +

+
+
+
+ {% include variables.html type='element' %} diff --git a/docs/documentation/form/general.html b/docs/documentation/form/general.html index 2fc9035f..6e190676 100644 --- a/docs/documentation/form/general.html +++ b/docs/documentation/form/general.html @@ -983,6 +983,19 @@ variables_form_keys: {% include snippet.html content=group_multiline_example clipped=true %} +
+
+

List of buttons

+
+
+
+

+ If you only need a list of buttons, try out the new buttons class with which you can create a multiline list of buttons. +

+
+
+
+ {% include anchor.html name="Horizontal form" %}
@@ -1021,7 +1034,7 @@ variables_form_keys:
{% include snippet.html content=field_label_example horizontal=true more=true %} - + {% include anchor.html name="Variables" %}
diff --git a/sass/elements/button.sass b/sass/elements/button.sass index e3862955..6a428a0a 100644 --- a/sass/elements/button.sass +++ b/sass/elements/button.sass @@ -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