Add form input doc

diff --git a/docs/documentation/form/general.html b/docs/documentation/form/general.html
index 7c9257fcbdda44160bac4bdb50f8dd53d5e1e006..a99f81ec428221c4896963b161e6d0f3a20ecc20 100644 (file)
--- a/docs/documentation/form/general.html
+++ b/docs/documentation/form/general.html
@@ -7,9 +7,9 @@ doc-subtab: general
 {% capture example %}
 <div class="field">
   <label class="label">Name</label>
-  <p class="control">
+  <div class="control">
     <input class="input" type="text" placeholder="Text input">
-  </p>
+  </div>
 </div>
 
 <div class="field">
@@ -140,16 +140,194 @@ doc-subtab: general
 </div>
 {% endcapture %}
 
+{% capture icons_example %}
+<div class="field">
+  <p class="control has-icons-left has-icons-right">
+    <input class="input" type="email" placeholder="Email">
+    <span class="icon is-small is-left">
+      <i class="fa fa-envelope"></i>
+    </span>
+    <span class="icon is-small is-right">
+      <i class="fa fa-check"></i>
+    </span>
+  </p>
+</div>
+<div class="field">
+  <p class="control has-icons-left">
+    <input class="input" type="password" placeholder="Password">
+    <span class="icon is-small is-left">
+      <i class="fa fa-lock"></i>
+    </span>
+  </p>
+</div>
+<div class="field">
+  <p class="control">
+    <button class="button is-success">
+      Login
+    </button>
+  </p>
+</div>
+{% endcapture %}
+
+{% capture select_icons_example %}
+<div class="field">
+  <p class="control has-icons-left">
+    <span class="select">
+      <select>
+        <option selected>Country</option>
+        <option>Select dropdown</option>
+        <option>With options</option>
+      </select>
+    </span>
+    <span class="icon is-small is-left">
+      <i class="fa fa-globe"></i>
+    </span>
+  </p>
+</div>
+{% endcapture %}
+
+{% capture has_icons_small_example %}
+<div class="field">
+  <label class="label is-small">Small input</label>
+  <div class="control has-icons-left has-icons-right">
+    <input class="input is-small" type="email" placeholder="Email">
+    <span class="icon is-small is-left">
+      <i class="fa fa-envelope"></i>
+    </span>
+    <span class="icon is-small is-right">
+      <i class="fa fa-check"></i>
+    </span>
+  </div>
+</div>
+{% endcapture %}
+
+{% capture has_icons_normal_example %}
+<div class="field">
+  <label class="label">Normal input</label>
+  <div class="control has-icons-left has-icons-right">
+    <input class="input" type="email" placeholder="Email">
+    <span class="icon is-small is-left">
+      <i class="fa fa-envelope"></i>
+    </span>
+    <span class="icon is-small is-right">
+      <i class="fa fa-check"></i>
+    </span>
+  </div>
+</div>
+
+<div class="field">
+  <div class="control has-icons-left has-icons-right">
+    <input class="input" type="email" placeholder="Email">
+    <span class="icon is-left">
+      <i class="fa fa-envelope"></i>
+    </span>
+    <span class="icon is-right">
+      <i class="fa fa-check"></i>
+    </span>
+  </div>
+</div>
+{% endcapture %}
+
+{% capture has_icons_medium_example %}
+<div class="field">
+  <label class="label is-medium">Medium input</label>
+  <div class="control has-icons-left has-icons-right">
+    <input class="input is-medium" type="email" placeholder="Email">
+    <span class="icon is-small is-left">
+      <i class="fa fa-envelope"></i>
+    </span>
+    <span class="icon is-small is-right">
+      <i class="fa fa-check"></i>
+    </span>
+  </div>
+</div>
+
+<div class="field">
+  <div class="control has-icons-left has-icons-right">
+    <input class="input is-medium" type="email" placeholder="Email">
+    <span class="icon is-left">
+      <i class="fa fa-envelope"></i>
+    </span>
+    <span class="icon is-right">
+      <i class="fa fa-check"></i>
+    </span>
+  </div>
+</div>
+
+<div class="field">
+  <div class="control has-icons-left has-icons-right">
+    <input class="input is-medium" type="email" placeholder="Email">
+    <span class="icon is-medium is-left">
+      <i class="fa fa-envelope"></i>
+    </span>
+    <span class="icon is-medium is-right">
+      <i class="fa fa-check"></i>
+    </span>
+  </div>
+</div>
+{% endcapture %}
+
+{% capture has_icons_large_example %}
+<div class="field">
+  <label class="label is-large">Large input</label>
+  <div class="control has-icons-left has-icons-right">
+    <input class="input is-large" type="email" placeholder="Email">
+    <span class="icon is-small is-left">
+      <i class="fa fa-envelope"></i>
+    </span>
+    <span class="icon is-small is-right">
+      <i class="fa fa-check"></i>
+    </span>
+  </div>
+</div>
+
+<div class="field">
+  <div class="control has-icons-left has-icons-right">
+    <input class="input is-large" type="email" placeholder="Email">
+    <span class="icon is-left">
+      <i class="fa fa-envelope"></i>
+    </span>
+    <span class="icon is-right">
+      <i class="fa fa-check"></i>
+    </span>
+  </div>
+</div>
+
+<div class="field">
+  <div class="control has-icons-left has-icons-right">
+    <input class="input is-large" type="email" placeholder="Email">
+    <span class="icon is-medium is-left">
+      <i class="fa fa-envelope"></i>
+    </span>
+    <span class="icon is-medium is-right">
+      <i class="fa fa-check"></i>
+    </span>
+  </div>
+</div>
+
+<div class="field">
+  <div class="control has-icons-left has-icons-right">
+    <input class="input is-large" type="email" placeholder="Email">
+    <span class="icon is-large is-left">
+      <i class="fa fa-envelope"></i>
+    </span>
+    <span class="icon is-large is-right">
+      <i class="fa fa-check"></i>
+    </span>
+  </div>
+</div>
+{% endcapture %}
+
 {% capture addons_example %}
 <div class="field has-addons">
-  <p class="control">
+  <div class="control">
     <input class="input" type="text" placeholder="Find a repository">
-  </p>
-  <p class="control">
+  </div>
+  <div class="control">
     <a class="button is-info">
       Search
     </a>
-  </p>
+  </div>
 </div>
 {% endcapture %}
 
@@ -210,8 +388,8 @@ doc-subtab: general
 
 {% capture addons_expanded_fullwidth_example %}
 <div class="field has-addons">
-  <p class="control is-expanded">
-    <span class="select is-fullwidth">
+  <div class="control is-expanded">
+    <div class="select is-fullwidth">
       <select name="country">
         <option value="Argentina">Argentina</option>
         <option value="Bolivia">Bolivia</option>
@@ -226,11 +404,11 @@ doc-subtab: general
         <option value="Uruguay">Uruguay</option>
         <option value="Venezuela">Venezuela</option>
       </select>
-    </span>
-  </p>
-  <p class="control">
+    </div>
+  </div>
+  <div class="control">
     <button type="submit" class="button is-primary">Choose</button>
-  </p>
+  </div>
 </div>
 {% endcapture %}
 
@@ -539,7 +717,6 @@ doc-subtab: general
         <li>a form <code>control</code></li>
         <li>an optional <code>help</code>text</li>
       </ul>
-      <p>It allows form fields to be <strong>spaced consistently</strong>.</p>
     </div>
 
     <div class="columns">
@@ -569,7 +746,7 @@ doc-subtab: general
     <h3 id="form-control" class="title">Form control</h3>
 
     <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 <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>
       <ul>
         <li><code>input</code></li>
         <li><code>select</code></li>
@@ -605,6 +782,95 @@ doc-subtab: general
       </div>
     </div>
 
+    <!-- Font Awesome Icons -->
+    <hr>
+
+    <h3 class="title">With icons</h3>
+    <div class="content">
+      <p>You can append one of 2 <strong>modifiers</strong> on a control:</p>
+      <ul>
+        <li>
+          <code>has-icons-left</code>
+        </li>
+        <li>
+          and/or <code>has-icons-right</code>
+        </li>
+      </ul>
+      <p>You also need to add a modifier on the <strong>icon</strong>:</p>
+      <ul>
+        <li>
+          <code>icon is-left</code> if <code>has-icons-left</code> is used
+        </li>
+        <li>
+          <code>icon is-right</code> if <code>has-icons-right</code> is used
+        </li>
+      </ul>
+      <p>The size of the <strong>input</strong> will define the size of the icon container.</p>
+    </div>
+    <div class="columns">
+      <div class="column is-half">
+        {{icons_example}}
+      </div>
+      <div class="column is-half highlight-full">
+        {% highlight html %}{{icons_example}}{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-half">
+        <div class="content">
+          <p>
+            You can append icons to <strong>select dropdowns</strong> as well.
+          </p>
+        </div>
+        {{select_icons_example}}
+      </div>
+      <div class="column is-half">
+        {% highlight html %}{{select_icons_example}}{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-half">
+        <div class="content">
+          <p>
+            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>
+        {{has_icons_small_example}}
+      </div>
+      <div class="column is-half">
+        {% highlight html %}{{has_icons_small_example}}{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-half">
+        {{has_icons_normal_example}}
+      </div>
+      <div class="column is-half">
+        {% highlight html %}{{has_icons_normal_example}}{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-half">
+        {{has_icons_medium_example}}
+      </div>
+      <div class="column is-half">
+        {% highlight html %}{{has_icons_medium_example}}{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-half">
+        {{has_icons_large_example}}
+      </div>
+      <div class="column is-half">
+        {% highlight html %}{{has_icons_large_example}}{% endhighlight %}
+      </div>
+    </div>
+
     <hr>
 
     <h3 id="form-addons" class="title">Form addons</h3>
@@ -628,17 +894,17 @@ doc-subtab: general
     </div>
 
     <div class="example">
-        {{addons_static_example}}
+      {{addons_static_example}}
     </div>
-        {% highlight html %}{{addons_static_example}}{% endhighlight %}
+    {% 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>
     <div class="example">
-        {{addons_expanded_example}}
+      {{addons_expanded_example}}
     </div>
-        {% highlight html %}{{addons_expanded_example}}{% endhighlight %}
+    {% highlight html %}{{addons_expanded_example}}{% endhighlight %}
 
     <div class="content">
       <p>If you want a full width select dropdown, pair <code>control is-expanded</code> with <code>select is-fullwidth</code>.</p>

diff --git a/docs/documentation/form/input.html b/docs/documentation/form/input.html
new file mode 100644 (file)
index 0000000..eef890c
--- /dev/null
+++ b/docs/documentation/form/input.html
@@ -0,0 +1,394 @@
+---
+layout: documentation
+doc-tab: form
+doc-subtab: input
+---
+
+{% capture input_example %}
+<input class="input" type="text" placeholder="Text input">
+{% endcapture %}
+
+{% capture colors_example %}
+<div class="field">
+  <div class="control">
+    <input class="input is-primary" type="text" placeholder="Primary input">
+  </div>
+</div>
+<div class="field">
+  <div class="control">
+    <input class="input is-info" type="text" placeholder="Info input">
+  </div>
+</div>
+<div class="field">
+  <div class="control">
+    <input class="input is-success" type="text" placeholder="Success input">
+  </div>
+</div>
+<div class="field">
+  <div class="control">
+    <input class="input is-warning" type="text" placeholder="Warning input">
+  </div>
+</div>
+<div class="field">
+  <div class="control">
+    <input class="input is-danger" type="text" placeholder="Danger input">
+  </div>
+</div>
+{% endcapture %}
+
+{% capture sizes_example %}
+<div class="field">
+  <div class="control">
+    <input class="input is-small" type="text" placeholder="Small input">
+  </div>
+</div>
+<div class="field">
+  <div class="control">
+    <input class="input" type="text" placeholder="Normal input">
+  </div>
+</div>
+<div class="field">
+  <div class="control">
+    <input class="input is-medium" type="text" placeholder="Medium input">
+  </div>
+</div>
+<div class="field">
+  <div class="control">
+    <input class="input is-large" type="text" placeholder="Large input">
+  </div>
+</div>
+{% endcapture %}
+
+{% capture normal_example %}
+<div class="control">
+  <input class="input" type="text" placeholder="Normal input">
+</div>
+{% endcapture %}
+
+{% capture hover_example %}
+<div class="control">
+  <input class="input is-hovered" type="text" placeholder="Hovered input">
+</div>
+{% endcapture %}
+
+{% capture focus_example %}
+<div class="control">
+  <input class="input is-focused" type="text" placeholder="Focused input">
+</div>
+{% endcapture %}
+
+{% capture loading_example %}
+<div class="control is-loading">
+  <input class="input" type="text" placeholder="Loading input">
+</div>
+{% endcapture %}
+
+{% capture loading_sizes_example %}
+<div class="field">
+  <div class="control is-small is-loading">
+    <input class="input is-small" type="text" placeholder="Small loading input">
+  </div>
+</div>
+<div class="field">
+  <div class="control is-loading">
+    <input class="input" type="text" placeholder="Normal loading input">
+  </div>
+</div>
+<div class="field">
+  <div class="control is-medium is-loading">
+    <input class="input is-medium" type="text" placeholder="Medium loading input">
+  </div>
+</div>
+<div class="field">
+  <div class="control is-large is-loading">
+    <input class="input is-large" type="text" placeholder="Large loading input">
+  </div>
+</div>
+{% endcapture %}
+
+{% capture disabled_example %}
+<div class="control">
+  <input class="input" type="text" placeholder="Disabled input" disabled>
+</div>
+{% endcapture %}
+
+{% capture icons_example %}
+<div class="field">
+  <p class="control has-icons-left has-icons-right">
+    <input class="input" type="email" placeholder="Email">
+    <span class="icon is-small is-left">
+      <i class="fa fa-envelope"></i>
+    </span>
+    <span class="icon is-small is-right">
+      <i class="fa fa-check"></i>
+    </span>
+  </p>
+</div>
+<div class="field">
+  <p class="control has-icons-left">
+    <input class="input" type="password" placeholder="Password">
+    <span class="icon is-small is-left">
+      <i class="fa fa-lock"></i>
+    </span>
+  </p>
+</div>
+{% endcapture %}
+
+{% capture has_icons_small_example %}
+<div class="control has-icons-left has-icons-right">
+  <input class="input is-small" type="email" placeholder="Email">
+  <span class="icon is-small is-left">
+    <i class="fa fa-envelope"></i>
+  </span>
+  <span class="icon is-small is-right">
+    <i class="fa fa-check"></i>
+  </span>
+</div>
+{% endcapture %}
+
+{% capture has_icons_normal_example %}
+<div class="control has-icons-left has-icons-right">
+  <input class="input" type="email" placeholder="Email">
+  <span class="icon is-small is-left">
+    <i class="fa fa-envelope"></i>
+  </span>
+  <span class="icon is-small is-right">
+    <i class="fa fa-check"></i>
+  </span>
+</div>
+{% endcapture %}
+
+{% capture has_icons_medium_example %}
+<div class="control has-icons-left has-icons-right">
+  <input class="input is-medium" type="email" placeholder="Email">
+  <span class="icon is-left">
+    <i class="fa fa-envelope"></i>
+  </span>
+  <span class="icon is-right">
+    <i class="fa fa-check"></i>
+  </span>
+</div>
+{% endcapture %}
+
+{% capture has_icons_large_example %}
+<div class="control has-icons-left has-icons-right">
+  <input class="input is-large" type="email" placeholder="Email">
+  <span class="icon is-medium is-left">
+    <i class="fa fa-envelope"></i>
+  </span>
+  <span class="icon is-medium is-right">
+    <i class="fa fa-check"></i>
+  </span>
+</div>
+{% endcapture %}
+
+{% include subnav-form.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Input</h1>
+    <h2 class="subtitle">
+      The <strong>text input</strong> and its variations
+    </h2>
+
+    <hr>
+
+    <div class="content">
+      <p>The following form controls <strong>classes</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>
+      </ul>
+      <p>The following <a href="http://htmlreference.io/element/input/" target="_blank">type attributes</a> are supported:</p>
+      <ul>
+        <li><code>type="text"</code></li>
+        <li><code>type="password"</code></li>
+        <li><code>type="email"</code></li>
+        <li><code>type="tel"</code></li>
+      </ul>
+    </div>
+
+    <div class="columns">
+      <div class="column is-half">
+        {{input_example}}
+      </div>
+      <div class="column is-half highlight-full">
+        {% highlight html %}{{input_example}}{% endhighlight %}
+      </div>
+    </div>
+
+    <hr>
+
+    <h3 id="input-color" class="title">Colors</h3>
+
+    <div class="columns">
+      <div class="column is-half">
+        {{colors_example}}
+      </div>
+      <div class="column is-half highlight-full">
+        {% highlight html %}{{colors_example}}{% endhighlight %}
+      </div>
+    </div>
+
+    <hr>
+    <h3 id="input-size" class="title">Sizes</h3>
+    <div class="columns">
+      <div class="column is-half">
+        {{sizes_example}}
+      </div>
+      <div class="column is-half">
+        {% highlight html %}{{sizes_example}}{% endhighlight %}
+      </div>
+    </div>
+
+    <hr>
+
+    <h3 id="input-state" class="title">States</h3>
+    <h4 class="subtitle">Normal</h4>
+    <div class="columns">
+      <div class="column is-half">
+        {{normal_example}}
+      </div>
+      <div class="column is-half">
+        {% highlight html %}{{normal_example}}{% endhighlight %}
+      </div>
+    </div>
+
+    <h4 class="subtitle">Hover</h4>
+    <div class="columns">
+      <div class="column is-half">
+        {{hover_example}}
+      </div>
+      <div class="column is-half">
+        {% highlight html %}{{hover_example}}{% endhighlight %}
+      </div>
+    </div>
+
+    <h4 class="subtitle">Focus</h4>
+    <div class="columns">
+      <div class="column is-half">
+        {{focus_example}}
+      </div>
+      <div class="column is-half">
+        {% highlight html %}{{focus_example}}{% endhighlight %}
+      </div>
+    </div>
+
+    <h4 class="subtitle">Loading</h4>
+    <div class="columns">
+      <div class="column is-half">
+        {{loading_example}}
+      </div>
+      <div class="column is-half">
+        {% highlight html %}{{loading_example}}{% endhighlight %}
+      </div>
+    </div>
+
+    {% 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.
+            </p>
+          </div>
+          {{loading_sizes_example}}
+        </div>
+        <div class="column is-half">
+          {% highlight html %}{{loading_sizes_example}}{% endhighlight %}
+        </div>
+      </div>
+    {% endif %}
+
+    <h4 class="subtitle">Disabled</h4>
+    <div class="columns">
+      <div class="column is-half">
+        {{disabled_example}}
+      </div>
+      <div class="column is-half">
+        {% highlight html %}{{disabled_example}}{% endhighlight %}
+      </div>
+    </div>
+
+    <!-- Font Awesome Icons -->
+    <hr>
+
+    <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>
+        <li>
+          <code>has-icons-left</code>
+        </li>
+        <li>
+          and/or <code>has-icons-right</code>
+        </li>
+      </ul>
+      <p>You also need to add a modifier on the <strong>icon</strong>:</p>
+      <ul>
+        <li>
+          <code>icon is-left</code> if <code>has-icons-left</code> is used
+        </li>
+        <li>
+          <code>icon is-right</code> if <code>has-icons-right</code> is used
+        </li>
+      </ul>
+      <p>The size of the <strong>input</strong> will define the size of the icon container.</p>
+    </div>
+    <div class="columns">
+      <div class="column is-half">
+        {{icons_example}}
+      </div>
+      <div class="column is-half">
+        {% highlight html %}{{icons_example}}{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-half">
+        <div class="content">
+          <p>
+            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>
+        {{has_icons_small_example}}
+      </div>
+      <div class="column is-half">
+        {% highlight html %}{{has_icons_small_example}}{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-half">
+        {{has_icons_normal_example}}
+      </div>
+      <div class="column is-half">
+        {% highlight html %}{{has_icons_normal_example}}{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-half">
+        {{has_icons_medium_example}}
+      </div>
+      <div class="column is-half">
+        {% highlight html %}{{has_icons_medium_example}}{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-half">
+        {{has_icons_large_example}}
+      </div>
+      <div class="column is-half">
+        {% highlight html %}{{has_icons_large_example}}{% endhighlight %}
+      </div>
+    </div>
+
+  </div>
+</section>