Fix #759

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
 

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;

docs/documentation/elements/button.html

@@ -232,6 +232,35 @@ doc-subtab: button
   <div class="column">
 {% highlight html %}
 {{button_loading_example}}
+{% endhighlight %}
+  </div>
+</div>
+
+    <p id="static-button" style="margin-bottom: 0.5rem;">
+      <span class="tag is-success">New!</span>
+      <span class="tag is-info">0.4.2</span>
+    </p>
+
+    <h4 class="subtitle">
+      Static
+    </h4>
+
+{% capture button_static_example %}
+<span class="button is-static">Static</span>
+{% endcapture %}
+<div class="columns">
+  <div class="column">
+
+    <div class="content">
+      <p>
+        You can create a <strong>non-interactive button</strong> by using the <code>is-static</code> modifier. This is useful to align a text label with an input, for example when using <a href="{{site.url}}/documentation/elements/form#form-addons">form addons</a>.
+      </p>
+    </div>
+{{button_static_example}}
+  </div>
+  <div class="column">
+{% highlight html %}
+{{button_static_example}}
 {% endhighlight %}
   </div>
 </div>

docs/documentation/elements/form.html

@@ -696,7 +696,7 @@ doc-subtab: form
 
     <hr>
 
-    <h3 class="title">Form addons</h3>
+    <h3 id="form-addons" class="title">Form addons</h3>
     <div class="content">
       <p>If you want to <strong>attach</strong> controls together, use the <code>has-addons</code> modifier on the <code>control</code> container:</p>
     </div>
@@ -720,6 +720,37 @@ doc-subtab: form
 {% endhighlight %}
     <div class="content">
       <p>You can attach inputs, buttons, and dropdowns <strong>only</strong>.</p>
+    </div>
+
+    <p style="margin-bottom: 0.5rem;">
+      <span class="tag is-success">New!</span>
+      <span class="tag is-info">0.4.2</span>
+    </p>
+
+    <div class="content">
+      <p>It can be useful to append a <a href="{{site.url}}/documentation/elements/button#static-button">static button</a>.</p>
+    </div>
+
+{% capture addons_static_example %}
+<div class="field has-addons">
+  <p class="control">
+    <input class="input" type="text" placeholder="Your email">
+  </p>
+  <p class="control">
+    <a class="button is-static">
+      @gmail.com
+    </a>
+  </p>
+</div>
+{% endcapture %}
+    <div class="example">
+{{addons_static_example}}
+    </div>
+{% highlight html %}
+{{addons_static_example}}
+{% endhighlight %}
+
+    <div class="content">
       <p>Use the <code>is-expanded</code> modifier on the element you want to fill up the remaining space (in this case, the input):</p>
     </div>
 {% capture addons_expanded_example %}

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,