Update changelog

CHANGELOG.md

@@ -7,6 +7,14 @@
 * #1236 `.table` hover effect is opt-in, by using the `.is-hoverable` modifier class
 * #1254 `.dropdown` now supports `.is-up` modifier
 
+### Improvements
+
+* #1257 Include placeholder mixin in `=input`
+
+### Issues closed
+
+* #708 Import variables in mixins
+
 ## 0.5.3
 
 ### New features

docs/_includes/elements/new-tag.html

@@ -0,0 +1,4 @@
+<div class="tags has-addons">
+  <span class="tag">New!</span>
+  <span class="tag is-info">{{ include.version }}</span>
+</div>

docs/documentation/components/dropdown.html

@@ -193,7 +193,7 @@ variables:
 {% endcapture %}
 
 {% capture dropdown_up_example %}
-<div class="dropdown is-up is-active">
+<div class="dropdown is-up">
   <div class="dropdown-trigger">
     <button class="button is-info" aria-haspopup="true" aria-controls="dropdown-menu7">
       <span>Dropup button</span>
@@ -351,6 +351,8 @@ variables:
 
     {% include anchor.html name="Dropup" %}
 
+    {% include elements/new-tag.html version="0.5.4" %}
+
     <div class="content">
       <p>
         You can add the <code>is-up</code> modifier to have a dropdown menu that appears above the dropdown button.
@@ -358,8 +360,8 @@ variables:
     </div>
 
     <div class="columns">
-      <div class="column is-half" style="display: flex; align-items: flex-end;">
-        {{dropdown_up_example}}
+      <div class="column is-half">
+        {{ dropdown_up_example }}
       </div>
       <div class="column is-half">
         {% highlight html %}{{dropdown_up_example}}{% endhighlight %}

docs/documentation/elements/button.html

@@ -534,10 +534,6 @@ variables:
     <div class="columns">
       <div class="column">
         <div class="content">
-          <p>
-            <span class="tag is-success">New!</span>
-            <span class="tag is-info">0.4.2</span>
-          </p>
           <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/form/general#form-addons">form addons</a>.
           </p>

docs/documentation/elements/table.html

@@ -382,10 +382,6 @@ variables:
           </ul>
         </li>
       </ul>
-      <p>
-        <span class="tag is-success">New!</span>
-        <span class="tag is-info">0.4.2</span>
-      </p>
       <p>
         You can set a table row as <strong>selected</strong> by appending the <code>is-selected</code> modifier on a <code>&lt;tr&gt;</code>
       </p>
@@ -506,6 +502,8 @@ variables:
       </div>
     </div>
 
+    {% include elements/new-tag.html version="0.5.4" %}
+
     <div class="columns">
       <div class="column">
         <p>You can add a <strong>hover effect</strong> on each row</p>

docs/documentation/form/general.html

@@ -936,10 +936,6 @@ variables:
     </div>
 
     <div class="content">
-      <p>
-        <span class="tag is-success">New!</span>
-        <span class="tag is-info">0.4.2</span>
-      </p>
       <p>It can be useful to append a <a href="{{site.url}}/documentation/elements/button#static-button">static button</a>.</p>
     </div>
 
@@ -993,10 +989,6 @@ variables:
     {% include snippet.html content=group_expanded_example %}
 
     <div id="form-group-multiline" class="content">
-      <p>
-        <span class="tag is-success">New!</span>
-        <span class="tag is-info">0.4.4</span>
-      </p>
       <p>
         Add the <code>is-grouped-multiline</code> modifier to allow controls to fill up <strong>multiple lines</strong>. This is ideal for a long list of controls.
       </p>
@@ -1042,9 +1034,9 @@ variables:
     </div>
 
     {% include snippet.html content=field_label_example horizontal=true clipped=true %}
-		
+
 		{% capture custom_message %}Form elements can be <strong>customized</strong> using the following generic variables. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.{% endcapture %}
-			
+
     {% include variables.html custom_message = custom_message %}
 
   </div>

docs/documentation/form/input.html

@@ -357,10 +357,6 @@ variables:
     {% if site.vernum >= 43 %}
       <div class="columns">
         <div class="column is-half">
-          <p style="margin-bottom: 0.5rem;">
-            <span class="tag is-success">New!</span>
-            <span class="tag is-info">0.4.3</span>
-          </p>
           <div class="content">
             <p>
               You can resize the loading spinner by appending <code>is-small</code>, <code>is-medium</code> or <code>is-large</code> to the <code>control</code> container.

docs/documentation/form/select.html

@@ -304,10 +304,6 @@ doc-subtab: select
       <div class="columns">
         <div class="column is-half">
           <div class="content">
-            <p>
-              <span class="tag is-success">New!</span>
-              <span class="tag is-info">0.4.4</span>
-            </p>
             <p>
               You can style a <strong>multiple select</strong> dropdown, by using the <code>is-multiple</code> modifier, and by using the <code>multiple</code> HTML attribute.
             </p>

docs/documentation/form/textarea.html

@@ -143,10 +143,6 @@ doc-subtab: textarea
     {% include snippet.html content=textarea_example %}
 
     <div class="content">
-      <p>
-        <span class="tag is-success">New!</span>
-        <span class="tag is-info">0.4.4</span>
-      </p>
       <p>
         You can set the height of the textarea using the `rows` HTML attribute.
       </p>
@@ -183,10 +179,6 @@ doc-subtab: textarea
     {% if site.vernum >= 43 %}
       <div class="columns">
         <div class="column is-half">
-          <p style="margin-bottom: 0.5rem;">
-            <span class="tag is-success">New!</span>
-            <span class="tag is-info">0.4.3</span>
-          </p>
           <div class="content">
             <p>
               You can resize the loading spinner by appending <code>is-small</code>, <code>is-medium</code> or <code>is-large</code> to the <code>control</code> container.

docs/documentation/layout/container.html

@@ -98,10 +98,6 @@ doc-subtab: container
 <div class="container">
   <h3 class="title is-4">Breakpoint containers</h3>
   <div class="content">
-    <p>
-      <span class="tag is-success">New!</span>
-      <span class="tag is-info">0.4.4</span>
-    </p>
     <p>
       With the two modifiers <code>.is-widescreen</code> and <code>.is-fullhd</code>, you can have a <em>fullwidth</em> container <strong>until</strong> those specific breakpoints.
     </p>