Fix form controls docs

Author: jgthms

CHANGELOG.md

@@ -4,7 +4,7 @@
 
 ### Big update
 
-#### Larger controls
+#### Larger form controls
 
 Controls and buttons are now `2.5em` high. You can revert this resizing by setting these previous values:
 

docs/_posts/2019-10-15-light-dark-colors.md

@@ -1,5 +1,5 @@
 ---
-title: "Light and Dark colors, better look, larger buttons, panel colors, and more"
+title: "Light and Dark colors, better look, larger form controls, panel colors, and more"
 layout: post
 introduction: "A big update for more colors and flexibility"
 color: "primary"
@@ -13,6 +13,7 @@ The new version **[Bulma 0.8.0](#)** is out! 😃 It comes with several bug fixe
 * [Light/Dark colors](#light-dark-colors)
 * [Better visual look](#better-visual-look)
 * [Panel colors](#panel-colors)
+* [Larger form controls](#larger-form-controls)
 * [4-value color map](#4-value-color-map)
 * [Scheme variables for "Dark mode"](#scheme-variables-for-dark-mode)
 
@@ -115,6 +116,19 @@ The <strong>shadows</strong> of the <code>box</code> and <code>card</code> have
   </a>
 </div>
 
+{% include elements/anchor.html name="Larger form controls" %}
+
+Form controls and buttons are now `2.5em` high. You can revert this resizing by setting these previous values:
+
+```sass
+$control-height: 2.25em
+$control-padding-vertical: calc(0.375em - #{$control-border-width})
+$control-padding-horizontal: calc(0.625em - #{$control-border-width})
+
+$button-padding-vertical: calc(0.375em - #{$button-border-width})
+$button-padding-horizontal: 0.75em
+```
+
 {% include elements/anchor.html name="4-value color map" %}
 
 The `$colors` Sass map now accepts, for each of its values, a map of up to **4** values. For example: the key `"info"` now has the `($info, $info-invert, $info-light, $info-dark)` map.

docs/documentation/form/general.html

@@ -843,30 +843,6 @@
 
 {% include elements/snippet.html content=example more=true %}
 
-{% include elements/anchor.html name="Form control" %}
-
-<div class="content">
-  <p>
-    The <code>control</code> element is a wrapper for form controls. It gives the possibility to:
-  </p>
-  <ul>
-    <li>
-      resize form controls
-    </li>
-    <li>
-      combine form controls into a group
-    </li>
-    <li>
-      combine form controls into a list
-    </li>
-    <li>
-      append and prepend icons to a form control
-    </li>
-  </ul>
-</div>
-
-{% include elements/snippet.html content=control_example %}
-
 <div class="content">
   <p>
     For the best results using Bulma, it's recommended to use the <code>control</code> element as often as possible.
@@ -895,13 +871,33 @@
 {% include elements/anchor.html name="Form control" %}
 
 <div class="content">
-  <p>The <code>control</code> is a versatile container meant to <strong>enhance single form controls</strong>. Because it has the same height as a control elements, it can <strong class="has-text-danger">only contain</strong> the following elements:</p>
+  <p>
+    The Bulma <code>control</code> is a versatile <strong>block</strong> container meant to <strong>enhance single form controls</strong>. Because it has the same height as the element that it wraps, it can <strong class="has-text-danger">only contain</strong> the following Bulma elements:
+  </p>
+
   <ul>
     <li><code>input</code></li>
     <li><code>select</code></li>
     <li><code>button</code></li>
     <li><code>icon</code></li>
   </ul>
+  <p>
+    This container gives the ability to:
+  </p>
+  <ul>
+    <li>
+      keep the <strong>spacing</strong> consistent
+    </li>
+    <li>
+      combine form controls into a <strong>group</strong>
+    </li>
+    <li>
+      combine form controls into a <strong>list</strong>
+    </li>
+    <li>
+      append and prepend <strong>icons</strong> to a form control
+    </li>
+  </ul>
 </div>
 
 {% include elements/snippet.html content=control_input_example %}