Fix #1189

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## 0.5.3
 
+### New features
+
+* #1189 `.input` readonly and `.is-static`
+* #1189 `.textarea` readonly
+
 ### Issues closed
 
 * #1177 Fix `.message .tag` combination

docs/css/bulma-docs.css

@@ -2641,6 +2641,12 @@ a.box:active {
   border-radius: 290486px;
 }
 
+.input[readonly],
+.textarea[readonly] {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
 .input.is-white,
 .textarea.is-white {
   border-color: white;
@@ -2795,6 +2801,15 @@ a.box:active {
   width: auto;
 }
 
+.input.is-static {
+  background-color: transparent;
+  border-color: transparent;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .textarea {
   display: block;
   max-width: 100%;

docs/documentation/form/input.html

@@ -144,6 +144,40 @@ variables:
 </div>
 {% endcapture %}
 
+{% capture readonly_example %}
+<div class="control">
+  <input class="input" type="text" value="This text is readonly" readonly>
+</div>
+{% endcapture %}
+
+{% capture static_example %}
+<div class="field is-horizontal">
+  <div class="field-label is-normal">
+    <label class="label">From</label>
+  </div>
+  <div class="field-body">
+    <div class="field">
+      <p class="control">
+        <input class="input is-static" type="email" value="me@example.com" readonly>
+      </p>
+    </div>
+  </div>
+</div>
+
+<div class="field is-horizontal">
+  <div class="field-label is-normal">
+    <label class="label">To</label>
+  </div>
+  <div class="field-body">
+    <div class="field">
+      <p class="control">
+        <input class="input" type="email" placeholder="Recipient email">
+      </p>
+    </div>
+  </div>
+</div>
+{% endcapture %}
+
 {% capture icons_example %}
 <div class="field">
   <p class="control has-icons-left has-icons-right">
@@ -234,9 +268,9 @@ variables:
     <div class="content">
       <p>The following <strong>modifiers</strong> are supported:</p>
       <ul>
-        <li>the <strong><a href="#input-color">color</a></strong></li>
-        <li>the <strong><a href="#input-size">size</a></strong></li>
-        <li>the <strong><a href="#input-state">state</a></strong></li>
+        <li>the <strong><a href="#colors">color</a></strong></li>
+        <li>the <strong><a href="#sizes">size</a></strong></li>
+        <li>the <strong><a href="#states">state</a></strong></li>
       </ul>
       <p>The following <a href="http://htmlreference.io/element/input/" target="_blank">type attributes</a> are supported:</p>
       <ul>
@@ -278,9 +312,8 @@ variables:
       </div>
     </div>
 
-    <hr>
+    {% include anchor.html name="States" %}
 
-    <h3 id="input-state" class="title">States</h3>
     <h4 class="subtitle">Normal</h4>
     <div class="columns">
       <div class="column is-half">
@@ -351,10 +384,39 @@ variables:
       </div>
     </div>
 
+    <h4 class="subtitle">Readonly and static inputs</h4>
+    <p style="margin-bottom: 0.5rem;">
+      <span class="tag is-success">New!</span>
+      <span class="tag is-info">0.5.3</span>
+    </p>
+    <div class="content">
+      <p>
+        If you use the <code>readonly</code> HTML attribute, the input will look similar to a normal one, but is not editable and has no shadow.
+      </p>
+    </div>
+    <div class="columns">
+      <div class="column is-half">
+        {{ readonly_example }}
+      </div>
+      <div class="column is-half">
+        {% highlight html %}{{ readonly_example }}{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="content">
+      <p>
+        If you <em>also</em> append the <code>is-static</code> modifier, it removes the background, border, shadow, and horizontal padding, while maintaining the <strong>vertical spacing</strong> so you can easily align the input in any context, like a horizontal form.
+      </p>
+    </div>
+
+    <div class="bd-example">
+      {{ static_example }}
+    </div>
+    {% highlight html %}{{ static_example }}{% endhighlight %}
+
     <!-- Font Awesome Icons -->
-    <hr>
+    {% include anchor.html name="With Font Awesome icons" %}
 
-    <h3 id="input-with-icons" class="title">With icons</h3>
     <div class="content">
       <p>You can append one of 2 <strong>modifiers</strong> on a control:</p>
       <ul>

docs/documentation/form/textarea.html

@@ -117,6 +117,12 @@ doc-subtab: textarea
 </div>
 {% endcapture %}
 
+{% capture readonly_example %}
+<div class="control">
+  <textarea class="textarea" type="text" readonly>This content is readonly</textarea>
+</div>
+{% endcapture %}
+
 {% include subnav-form.html %}
 
 <section class="section">
@@ -198,5 +204,20 @@ doc-subtab: textarea
 
     {% include snippet.html content=disabled_example %}
 
+    <h4 class="subtitle">Readonly</h4>
+
+    <div class="tags has-addons">
+      <span class="tag">New</span>
+      <span class="tag is-info">0.5.3</span>
+    </div>
+
+    <div class="content">
+      <p>
+        If you use the <code>readonly</code> HTML attribute, the textarea will look similar to a normal one, but is not editable and has no shadow.
+      </p>
+    </div>
+
+    {% include snippet.html content=readonly_example %}
+
   </div>
 </section>

sass/elements/form.sass

@@ -70,6 +70,8 @@ $help-size: $size-small !default
   width: 100%
   &[type="search"]
     border-radius: 290486px
+  &[readonly]
+    box-shadow: none
   // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)
@@ -95,6 +97,14 @@ $help-size: $size-small !default
     display: inline
     width: auto
 
+.input
+  &.is-static
+    background-color: transparent
+    border-color: transparent
+    box-shadow: none
+    padding-left: 0
+    padding-right: 0
+
 .textarea
   display: block
   max-width: 100%