Add file alignment

docs/documentation/form/file.html

@@ -100,8 +100,8 @@ variables:
 </div>
 {% endcapture %}
 
-{% capture file_centered %}
-<div class="file is-centered">
+{% capture file_boxed %}
+<div class="file is-boxed">
   <label class="file-label">
     <input class="file-input" type="file" name="resume">
     <span class="file-cta">
@@ -116,8 +116,8 @@ variables:
 </div>
 {% endcapture %}
 
-{% capture file_centered_name %}
-<div class="file has-name is-centered">
+{% capture file_boxed_name %}
+<div class="file has-name is-boxed">
   <label class="file-label">
     <input class="file-input" type="file" name="resume">
     <span class="file-cta">
@@ -172,7 +172,7 @@ variables:
 </div>
 
 <div class="field">
-  <div class="file is-warning is-centered">
+  <div class="file is-warning is-boxed">
     <label class="file-label">
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
@@ -188,7 +188,7 @@ variables:
 </div>
 
 <div class="field">
-  <div class="file is-danger has-name is-centered">
+  <div class="file is-danger has-name is-boxed">
     <label class="file-label">
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
@@ -351,9 +351,9 @@ variables:
 </div>
 {% endcapture %}
 
-{% capture file_sizes_centered %}
+{% capture file_sizes_boxed %}
 <div class="field">
-  <div class="file is-small is-centered">
+  <div class="file is-small is-boxed">
     <label class="file-label">
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
@@ -369,7 +369,7 @@ variables:
 </div>
 
 <div class="field">
-  <div class="file is-centered">
+  <div class="file is-boxed">
     <label class="file-label">
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
@@ -385,7 +385,7 @@ variables:
 </div>
 
 <div class="field">
-  <div class="file is-medium is-centered">
+  <div class="file is-medium is-boxed">
     <label class="file-label">
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
@@ -401,7 +401,7 @@ variables:
 </div>
 
 <div class="field">
-  <div class="file is-large is-centered">
+  <div class="file is-large is-boxed">
     <label class="file-label">
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
@@ -417,9 +417,51 @@ variables:
 </div>
 {% endcapture %}
 
-{% capture file_sizes_centered_name %}
+{% capture file_centered %}
 <div class="field">
-  <div class="file is-small is-centered has-name">
+  <div class="file is-centered is-boxed is-success has-name">
+    <label class="file-label">
+      <input class="file-input" type="file" name="resume">
+      <span class="file-cta">
+        <span class="file-icon">
+          <i class="fa fa-upload"></i>
+        </span>
+        <span class="file-label">
+          Centered file…
+        </span>
+      </span>
+      <span class="file-name">
+        {{ page.file_name }}
+      </span>
+    </label>
+  </div>
+</div>
+{% endcapture %}
+
+{% capture file_right %}
+<div class="field">
+  <div class="file is-right is-info">
+    <label class="file-label">
+      <input class="file-input" type="file" name="resume">
+      <span class="file-cta">
+        <span class="file-icon">
+          <i class="fa fa-upload"></i>
+        </span>
+        <span class="file-label">
+          Right file…
+        </span>
+      </span>
+      <span class="file-name">
+        {{ page.file_name }}
+      </span>
+    </label>
+  </div>
+</div>
+{% endcapture %}
+
+{% capture file_sizes_boxed_name %}
+<div class="field">
+  <div class="file is-small is-boxed has-name">
     <label class="file-label">
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
@@ -438,7 +480,7 @@ variables:
 </div>
 
 <div class="field">
-  <div class="file is-centered has-name">
+  <div class="file is-boxed has-name">
     <label class="file-label">
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
@@ -457,7 +499,7 @@ variables:
 </div>
 
 <div class="field">
-  <div class="file is-medium is-centered has-name">
+  <div class="file is-medium is-boxed has-name">
     <label class="file-label">
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
@@ -476,7 +518,7 @@ variables:
 </div>
 
 <div class="field">
-  <div class="file is-large is-centered has-name">
+  <div class="file is-large is-boxed has-name">
     <label class="file-label">
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
@@ -614,15 +656,15 @@ variables:
       <div class="column">
         <div class="content">
           <p>
-            You can have a <strong>centered block</strong> with the <code>.is-centered</code> modifier.
+            You can have a <strong>boxed block</strong> with the <code>.is-boxed</code> modifier.
           </p>
         </div>
         <div class="example">
-          {{ file_centered }}
+          {{ file_boxed }}
         </div>
       </div>
       <div class="column highlight-full">
-        {% highlight html %}{{ file_centered }}{% endhighlight %}
+        {% highlight html %}{{ file_boxed }}{% endhighlight %}
       </div>
     </div>
 
@@ -630,15 +672,15 @@ variables:
       <div class="column">
         <div class="content">
           <p>
-            You can <strong>combine</strong> <code>.has-name</code> and <code>.is-centered</code>.
+            You can <strong>combine</strong> <code>.has-name</code> and <code>.is-boxed</code>.
           </p>
         </div>
         <div class="example">
-          {{ file_centered_name }}
+          {{ file_boxed_name }}
         </div>
       </div>
       <div class="column highlight-full">
-        {% highlight html %}{{ file_centered_name }}{% endhighlight %}
+        {% highlight html %}{{ file_boxed_name }}{% endhighlight %}
       </div>
     </div>
 
@@ -711,22 +753,60 @@ variables:
     <div class="columns">
       <div class="column">
         <div class="example">
-          {{ file_sizes_centered }}
+          {{ file_sizes_boxed }}
         </div>
       </div>
       <div class="column">
-        {% highlight html %}{{ file_sizes_centered }}{% endhighlight %}
+        {% highlight html %}{{ file_sizes_boxed }}{% endhighlight %}
       </div>
     </div>
 
     <div class="columns">
       <div class="column">
         <div class="example">
-          {{ file_sizes_centered_name }}
+          {{ file_sizes_boxed_name }}
         </div>
       </div>
       <div class="column">
-        {% highlight html %}{{ file_sizes_centered_name }}{% endhighlight %}
+        {% highlight html %}{{ file_sizes_boxed_name }}{% endhighlight %}
+      </div>
+    </div>
+
+    {% include heading.html name="Alignment" %}
+
+    <div class="content">
+      <p>
+        You can <strong>align</strong> the file input:
+      </p>
+      <ul>
+        <li>
+          to the <strong>center</strong> with the <code>is-centered</code> modifier
+        </li>
+        <li>
+          to the <strong>right</strong> with the <code>is-right</code> modifier
+        </li>
+      </ul>
+    </div>
+
+    <div class="columns">
+      <div class="column">
+        <div class="example">
+          {{ file_centered }}
+        </div>
+      </div>
+      <div class="column">
+        {% highlight html %}{{ file_centered }}{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column">
+        <div class="example">
+          {{ file_right }}
+        </div>
+      </div>
+      <div class="column">
+        {% highlight html %}{{ file_right }}{% endhighlight %}
       </div>
     </div>