Add file alignment

docs/css/bulma-docs.css

@@ -543,14 +543,176 @@ table th {
   text-align: center !important;
 }
 
+@media screen and (max-width: 768px) {
+  .has-text-centered-mobile {
+    text-align: center !important;
+  }
+}
+
+@media screen and (min-width: 769px), print {
+  .has-text-centered-tablet {
+    text-align: center !important;
+  }
+}
+
+@media screen and (min-width: 769px) and (max-width: 1007px) {
+  .has-text-centered-tablet-only {
+    text-align: center !important;
+  }
+}
+
+@media screen and (max-width: 1007px) {
+  .has-text-centered-touch {
+    text-align: center !important;
+  }
+}
+
+@media screen and (min-width: 1008px) {
+  .has-text-centered-desktop {
+    text-align: center !important;
+  }
+}
+
+@media screen and (min-width: 1008px) and (max-width: 1199px) {
+  .has-text-centered-desktop-only {
+    text-align: center !important;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .has-text-centered-widescreen {
+    text-align: center !important;
+  }
+}
+
+@media screen and (min-width: 1200px) and (max-width: 1391px) {
+  .has-text-centered-widescreen-only {
+    text-align: center !important;
+  }
+}
+
+@media screen and (min-width: 1392px) {
+  .has-text-centered-fullhd {
+    text-align: center !important;
+  }
+}
+
 .has-text-left {
   text-align: left !important;
 }
 
+@media screen and (max-width: 768px) {
+  .has-text-left-mobile {
+    text-align: left !important;
+  }
+}
+
+@media screen and (min-width: 769px), print {
+  .has-text-left-tablet {
+    text-align: left !important;
+  }
+}
+
+@media screen and (min-width: 769px) and (max-width: 1007px) {
+  .has-text-left-tablet-only {
+    text-align: left !important;
+  }
+}
+
+@media screen and (max-width: 1007px) {
+  .has-text-left-touch {
+    text-align: left !important;
+  }
+}
+
+@media screen and (min-width: 1008px) {
+  .has-text-left-desktop {
+    text-align: left !important;
+  }
+}
+
+@media screen and (min-width: 1008px) and (max-width: 1199px) {
+  .has-text-left-desktop-only {
+    text-align: left !important;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .has-text-left-widescreen {
+    text-align: left !important;
+  }
+}
+
+@media screen and (min-width: 1200px) and (max-width: 1391px) {
+  .has-text-left-widescreen-only {
+    text-align: left !important;
+  }
+}
+
+@media screen and (min-width: 1392px) {
+  .has-text-left-fullhd {
+    text-align: left !important;
+  }
+}
+
 .has-text-right {
   text-align: right !important;
 }
 
+@media screen and (max-width: 768px) {
+  .has-text-right-mobile {
+    text-align: right !important;
+  }
+}
+
+@media screen and (min-width: 769px), print {
+  .has-text-right-tablet {
+    text-align: right !important;
+  }
+}
+
+@media screen and (min-width: 769px) and (max-width: 1007px) {
+  .has-text-right-tablet-only {
+    text-align: right !important;
+  }
+}
+
+@media screen and (max-width: 1007px) {
+  .has-text-right-touch {
+    text-align: right !important;
+  }
+}
+
+@media screen and (min-width: 1008px) {
+  .has-text-right-desktop {
+    text-align: right !important;
+  }
+}
+
+@media screen and (min-width: 1008px) and (max-width: 1199px) {
+  .has-text-right-desktop-only {
+    text-align: right !important;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .has-text-right-widescreen {
+    text-align: right !important;
+  }
+}
+
+@media screen and (min-width: 1200px) and (max-width: 1391px) {
+  .has-text-right-widescreen-only {
+    text-align: right !important;
+  }
+}
+
+@media screen and (min-width: 1392px) {
+  .has-text-right-fullhd {
+    text-align: right !important;
+  }
+}
+
 .is-capitalized {
   text-transform: capitalize !important;
 }
@@ -3108,14 +3270,20 @@ a.box:active {
           justify-content: center;
 }
 
-.file.is-centered .file-label {
+.file.is-right {
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+}
+
+.file.is-boxed .file-label {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
 }
 
-.file.is-centered .file-cta {
+.file.is-boxed .file-cta {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
@@ -3124,36 +3292,36 @@ a.box:active {
   padding: 1em 3em;
 }
 
-.file.is-centered .file-name {
+.file.is-boxed .file-name {
   border-width: 0 1px 1px;
 }
 
-.file.is-centered .file-icon {
+.file.is-boxed .file-icon {
   height: 1.5em;
   width: 1.5em;
 }
 
-.file.is-centered .file-icon .fa {
+.file.is-boxed .file-icon .fa {
   font-size: 21px;
 }
 
-.file.is-centered.is-small .file-icon .fa {
+.file.is-boxed.is-small .file-icon .fa {
   font-size: 14px;
 }
 
-.file.is-centered.is-medium .file-icon .fa {
+.file.is-boxed.is-medium .file-icon .fa {
   font-size: 28px;
 }
 
-.file.is-centered.is-large .file-icon .fa {
+.file.is-boxed.is-large .file-icon .fa {
   font-size: 35px;
 }
 
-.file.is-centered.has-name .file-cta {
+.file.is-boxed.has-name .file-cta {
   border-radius: 3px 3px 0 0;
 }
 
-.file.is-centered.has-name .file-name {
+.file.is-boxed.has-name .file-name {
   border-radius: 0 0 3px 3px;
   border-width: 0 1px 1px;
 }
@@ -3202,7 +3370,7 @@ a.box:active {
 }
 
 .file-label:hover .file-name {
-  border-color: #eeeeee;
+  border-color: #d5d5d5;
 }
 
 .file-label:active .file-cta {
@@ -3211,7 +3379,7 @@ a.box:active {
 }
 
 .file-label:active .file-name {
-  border-color: #e8e8e8;
+  border-color: #cfcfcf;
 }
 
 .file-input {
@@ -3249,7 +3417,7 @@ a.box:active {
   padding-top: calc(0.375em - 1px);
   position: relative;
   vertical-align: top;
-  border-color: transparent;
+  border-color: #dbdbdb;
   border-radius: 3px;
   font-size: 1em;
   padding-left: 1em;
@@ -3276,7 +3444,7 @@ a.box:active {
 }
 
 .file-name {
-  border-color: whitesmoke;
+  border-color: #dbdbdb;
   border-style: solid;
   border-width: 1px 1px 1px 0;
   display: block;
@@ -6113,6 +6281,9 @@ a.navbar-item:hover, a.navbar-item.is-active,
 }
 
 @media screen and (max-width: 1007px) {
+  .navbar > .container {
+    display: block;
+  }
   .navbar-brand .navbar-item {
     -webkit-box-align: center;
         -ms-flex-align: center;

docs/documentation/form/file.html

@@ -100,8 +100,8 @@ variables:
 </div>
 {% endcapture %}
 
-{% capture file_centered %}
+{% capture file_boxed %}
-<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">
@@ -116,8 +116,8 @@ variables:
 </div>
 {% endcapture %}
 
-{% capture file_centered_name %}
+{% capture file_boxed_name %}
-<div class="file has-name is-centered">
+<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>
 

sass/elements/form.sass

@@ -20,7 +20,7 @@ $input-icon-active-color: $grey !default
 
 $input-radius: $radius !default
 
-$file-border-color: transparent !default
+$file-border-color: $border !default
 $file-radius: $radius !default
 
 $file-cta-background-color: $white-ter !default
@@ -28,7 +28,7 @@ $file-cta-color: $grey-dark !default
 $file-cta-hover-color: $grey-darker !default
 $file-cta-active-color: $grey-darker !default
 
-$file-name-border-color: $file-cta-background-color !default
+$file-name-border-color: $border !default
 $file-name-border-style: solid !default
 $file-name-border-width: 1px 1px 1px 0 !default
 $file-name-max-width: 16em !default
@@ -250,6 +250,9 @@ $help-size: $size-small !default
       border-top-left-radius: 0
   &.is-centered
     justify-content: center
+  &.is-right
+    justify-content: flex-end
+  &.is-boxed
     .file-label
       flex-direction: column
     .file-cta