Fix delete element

docs/documentation/elements/delete.html

@@ -0,0 +1,95 @@
+---
+layout: documentation
+doc-tab: elements
+doc-subtab: delete
+---
+
+{% include subnav-elements.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Delete</h1>
+    <h2 class="subtitle">
+      A versatile <strong>delete</strong> cross
+    </h2>
+
+    <hr>
+
+    <div class="content">
+      <p>
+        The <code>.delete</code> element is a stand-alone element that can be used in different contexts.
+      </p>
+    </div>
+
+{% capture cross_example %}
+<a class="delete"></a>
+{% endcapture %}
+<div class="columns">
+<div class="column">
+  <div class="content">
+    <p>
+      On its own, it's a simple circle with a cross:
+    </p>
+  </div>
+  {{cross_example}}
+</div>
+<div class="column">
+{% highlight html %}
+{{cross_example}}
+{% endhighlight %}
+</div>
+</div>
+
+{% capture cross_sizes_example %}
+<a class="delete is-small"></a>
+<a class="delete"></a>
+<a class="delete is-medium"></a>
+<a class="delete is-large"></a>
+{% endcapture %}
+<div class="columns">
+<div class="column">
+  <div class="content">
+    <p>
+      It comes in <strong>4 sizes</strong>:
+    </p>
+  </div>
+  {{cross_sizes_example}}
+</div>
+<div class="column">
+{% highlight html %}
+{{cross_sizes_example}}
+{% endhighlight %}
+</div>
+</div>
+
+{% capture cross_elements_example %}
+<div class="block">
+  <span class="tag is-success">
+    Hello World
+    <button class="delete is-small"></button>
+  </span>
+</div>
+
+<div class="notification is-danger">
+  <button class="delete"></button>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
+</div>
+{% endcapture %}
+<div class="columns">
+<div class="column">
+  <div class="content">
+    <p>
+      Bulma uses it for the <a href="/documentation/elements/tag/">tags</a> and the <a href="/documentation/elements/notification/">notifications</a>:
+    </p>
+  </div>
+  {{cross_elements_example}}
+</div>
+<div class="column">
+{% highlight html %}
+{{cross_elements_example}}
+{% endhighlight %}
+</div>
+</div>
+
+  </div>
+</section>

docs/documentation/elements/form.html

@@ -419,7 +419,7 @@ doc-subtab: form
         <span class="tag is-success">New!</span>
       </p>
       <p>
-        If the control contains an icon, Bulma will make sure the button remains <strong>centered</strong>, no matter the size of the input <em>or</em> of the icon.
+        If the control contains an icon, Bulma will make sure the icon remains <strong>centered</strong>, no matter the size of the input <em>or</em> of the icon.
       </p>
     </div>
     {{icons_sizes_example}}
@@ -581,7 +581,11 @@ doc-subtab: form
 
     <h3 class="title">Form group</h3>
     <div class="content">
-      <p>If you want to <strong>group</strong> controls together, use the <code>is-grouped</code> modifier on the <code>control</code> container:</p>
+      <p>
+        If you want to <strong>group</strong> controls together, use the <code>is-grouped</code> modifier on the <code>control</code> container.
+        <br>
+        Add the <code>is-expanded</code> modifier on the control element you want to <strong>fill up the remaining space</strong>.
+      </p>
     </div>
 {% capture group_example %}
 <div class="control is-grouped">
@@ -601,9 +605,6 @@ doc-subtab: form
 {% highlight html %}
 {{group_example}}
 {% endhighlight %}
-    <div class="content">
-      <p>Add the <code>is-expanded</code> modifier on the control element you want to <strong>fill up the remaining space</strong>.</p>
-    </div>
 
     <hr>
 

docs/documentation/elements/icon.html

@@ -16,7 +16,7 @@ doc-subtab: icon
     <hr>
 
     <div class="content">
-      <p>Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class:</p>
+      <p>Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class as a container:</p>
     </div>
 
     <div class="example">
@@ -32,7 +32,7 @@ doc-subtab: icon
 {% endhighlight %}
 
     <div class="content">
-      <p>The <code>icon</code> container will take up <em>exactly</em> <strong>24 x 24 pixels</strong>. The icon itself is sized at <strong>21px</strong>.</p>
+      <p>The <code>icon</code> container will take up <em>exactly</em> <strong>1.5rem x 1.5rem</strong>. The icon itself is sized at <strong>21px</strong>.</p>
     </div>
 
     <hr>
@@ -57,25 +57,25 @@ doc-subtab: icon
           <td><code>icon is-small</code></td>
           <td><span class="icon is-small"><i class="fa fa-home"></i></span></td>
           <td>14px</td>
-          <td>16x16px</td>
+          <td>1rem x 1rem</td>
         </tr>
         <tr>
           <td><code>icon</code></td>
           <td><span class="icon"><i class="fa fa-home"></i></span></td>
           <td>21px</td>
-          <td>24x24px</td>
+          <td>1.5rem x 1.5rem</td>
         </tr>
         <tr>
           <td><code>icon is-medium</code></td>
           <td><span class="icon is-medium"><i class="fa fa-home"></i></span></td>
           <td>28px</td>
-          <td>32x32px</td>
+          <td>2rem x 2rem</td>
         </tr>
         <tr>
           <td><code>icon is-large</code></td>
           <td><span class="icon is-large"><i class="fa fa-home"></i></span></td>
           <td>42px</td>
-          <td>48x48px</td>
+          <td>3rem x 3rem</td>
         </tr>
       </tbody>
     </table>