From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Sun, 28 May 2017 15:07:29 +0000 (+0100)
Subject: Fix #759
X-Git-Tag: 0.4.2~1^2~1
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=eb3fd3bc66a4645d002c425d814b5b0994f2b71c;p=thirdparty%2Fbulma.git

Fix #759
---

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 81ea39e33..bc3a79a91 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 cac502ec3..b59e1ed86 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 48ca15fd9..7ba0f4e51 100644
--- a/docs/documentation/elements/button.html
+++ b/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>
diff --git a/docs/documentation/elements/form.html b/docs/documentation/elements/form.html
index 2d0ad159b..ce2a4a507 100644
--- a/docs/documentation/elements/form.html
+++ b/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 %}
diff --git a/sass/elements/button.sass b/sass/elements/button.sass
index 68879224e..23032f927 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,