diff --git a/CHANGELOG.md b/CHANGELOG.md index 81ea39e3..bc3a79a9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ * Fix #747 remove flex-shrink for is-expanded * Fix #702 add icons support for select dropdown * Fix #712 delete button as flexbox item +* Fix #759 static button ## 0.4.1 diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index cac502ec..b59e1ed8 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -1617,6 +1617,14 @@ a.box:active { position: absolute !important; } +.button.is-static { + background-color: whitesmoke; + border-color: #dbdbdb; + color: #7a7a7a; + box-shadow: none; + pointer-events: none; +} + button.button, input[type="submit"].button { line-height: 1; diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html index 48ca15fd..7ba0f4e5 100644 --- a/docs/documentation/elements/button.html +++ b/docs/documentation/elements/button.html @@ -232,6 +232,35 @@ doc-subtab: button
{% highlight html %} {{button_loading_example}} +{% endhighlight %} +
+ + +

+ New! + 0.4.2 +

+ +

+ Static +

+ +{% capture button_static_example %} +Static +{% endcapture %} +
+
+ +
+

+ You can create a non-interactive button by using the is-static modifier. This is useful to align a text label with an input, for example when using form addons. +

+
+{{button_static_example}} +
+
+{% highlight html %} +{{button_static_example}} {% endhighlight %}
diff --git a/docs/documentation/elements/form.html b/docs/documentation/elements/form.html index 2d0ad159..ce2a4a50 100644 --- a/docs/documentation/elements/form.html +++ b/docs/documentation/elements/form.html @@ -696,7 +696,7 @@ doc-subtab: form
-

Form addons

+

Form addons

If you want to attach controls together, use the has-addons modifier on the control container:

@@ -720,6 +720,37 @@ doc-subtab: form {% endhighlight %}

You can attach inputs, buttons, and dropdowns only.

+
+ +

+ New! + 0.4.2 +

+ +
+

It can be useful to append a static button.

+
+ +{% capture addons_static_example %} +
+

+ +

+

+ + @gmail.com + +

+
+{% endcapture %} +
+{{addons_static_example}} +
+{% highlight html %} +{{addons_static_example}} +{% endhighlight %} + +

Use the is-expanded modifier on the element you want to fill up the remaining space (in this case, the input):

{% capture addons_expanded_example %} diff --git a/sass/elements/button.sass b/sass/elements/button.sass index 68879224..23032f92 100644 --- a/sass/elements/button.sass +++ b/sass/elements/button.sass @@ -11,6 +11,10 @@ $button-focus-border: $link-focus-border !default $button-active: $link-active !default $button-active-border: $link-active-border !default +$button-static: $grey !default +$button-static-background: $white-ter !default +$button-static-border: $grey-lighter !default + $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default // The button sizes use mixins so they can be used at different breakpoints @@ -178,6 +182,12 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default +loader +center(1em) position: absolute !important + &.is-static + background-color: $button-static-background + border-color: $button-static-border + color: $button-static + box-shadow: none + pointer-events: none // Adjustment for vertical spacing button.button,