Add file

docs/_includes/meta.html

@@ -8,6 +8,14 @@
     </div>
   {% endif %}
 
+  {% if include.experimental %}
+    <div class="control">
+      <div class="tags">
+        <span class="tag is-warning">Experimental</span>
+      </div>
+    </div>
+  {% endif %}
+
   {% if include.since %}
     <div class="control">
       <div class="tags has-addons">

docs/_includes/subnav-form.html

@@ -19,6 +19,12 @@
       <a class="navbar-item is-tab {% if page.doc-subtab == 'radio' %}is-active{% endif %}" href="{{ site.url }}/documentation/form/radio/">
         Radio
       </a>
+      <a class="navbar-item is-tab {% if page.doc-subtab == 'file' %}is-active{% endif %}" href="{{ site.url }}/documentation/form/file/">
+        File
+        <span class="tag is-success" style="margin-left: 1em;">
+          New!
+        </span>
+      </a>
     </div>
   </div>
 </nav>

docs/_sass/specific.sass

@@ -37,10 +37,15 @@
 .anchor-title
   padding-top: 1.5rem
   position: relative
+  +mobile
+    padding-left: 2rem
 
 .anchor-link
   position: absolute
   right: calc(100% + 1rem)
+  +mobile
+    left: 0
+    right: auto
 
 .article-image
   background-color: $primary

docs/documentation/form/file.html

@@ -0,0 +1,487 @@
+---
+title: File upload
+layout: documentation
+doc-tab: form
+doc-subtab: upload
+file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
+---
+
+{% capture file %}
+<div class="file">
+  <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">
+        Choose a file…
+      </span>
+    </span>
+  </label>
+</div>
+{% endcapture %}
+
+{% capture file_path %}
+<div class="file has-path">
+  <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">
+        Choose a file…
+      </span>
+    </span>
+    <span class="file-path">
+      {{ page.file_name }}
+    </span>
+  </label>
+</div>
+{% endcapture %}
+
+{% capture file_centered %}
+<div class="file is-centered">
+  <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">
+        Choose a file…
+      </span>
+    </span>
+  </label>
+</div>
+{% endcapture %}
+
+{% capture file_centered_path %}
+<div class="file is-centered has-path">
+  <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">
+        Choose a file…
+      </span>
+    </span>
+    <span class="file-path">
+      {{ page.file_name }}
+    </span>
+  </label>
+</div>
+{% endcapture %}
+
+{% capture file_sizes %}
+<div class="field">
+  <div class="file is-small">
+    <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">
+          Small file…
+        </span>
+      </span>
+    </label>
+  </div>
+</div>
+
+<div class="field">
+  <div class="file">
+    <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">
+          Normal file…
+        </span>
+      </span>
+    </label>
+  </div>
+</div>
+
+<div class="field">
+  <div class="file is-medium">
+    <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">
+          Medium file…
+        </span>
+      </span>
+    </label>
+  </div>
+</div>
+
+<div class="field">
+  <div class="file is-large">
+    <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">
+          Large file…
+        </span>
+      </span>
+    </label>
+  </div>
+</div>
+{% endcapture %}
+
+{% capture file_sizes_path %}
+<div class="field">
+  <div class="file is-small has-path">
+    <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">
+          Small file…
+        </span>
+      </span>
+      <span class="file-path">
+        {{ page.file_name }}
+      </span>
+    </label>
+  </div>
+</div>
+
+<div class="field">
+  <div class="file has-path">
+    <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">
+          Normal file…
+        </span>
+      </span>
+      <span class="file-path">
+        {{ page.file_name }}
+      </span>
+    </label>
+  </div>
+</div>
+
+<div class="field">
+  <div class="file is-medium has-path">
+    <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">
+          Medium file…
+        </span>
+      </span>
+      <span class="file-path">
+        {{ page.file_name }}
+      </span>
+    </label>
+  </div>
+</div>
+
+<div class="field">
+  <div class="file is-large has-path">
+    <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">
+          Large file…
+        </span>
+      </span>
+      <span class="file-path">
+        {{ page.file_name }}
+      </span>
+    </label>
+  </div>
+</div>
+{% endcapture %}
+
+{% capture file_sizes_centered %}
+<div class="field">
+  <div class="file is-small is-centered">
+    <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">
+          Small file…
+        </span>
+      </span>
+    </label>
+  </div>
+</div>
+
+<div class="field">
+  <div class="file is-centered">
+    <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">
+          Normal file…
+        </span>
+      </span>
+    </label>
+  </div>
+</div>
+
+<div class="field">
+  <div class="file is-medium is-centered">
+    <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">
+          Medium file…
+        </span>
+      </span>
+    </label>
+  </div>
+</div>
+
+<div class="field">
+  <div class="file is-large is-centered">
+    <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">
+          Large file…
+        </span>
+      </span>
+    </label>
+  </div>
+</div>
+{% endcapture %}
+
+{% capture file_sizes_centered_path %}
+<div class="field">
+  <div class="file is-small is-centered has-path">
+    <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">
+          Small file…
+        </span>
+      </span>
+      <span class="file-path">
+        {{ page.file_name }}
+      </span>
+    </label>
+  </div>
+</div>
+
+<div class="field">
+  <div class="file is-centered has-path">
+    <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">
+          Normal file…
+        </span>
+      </span>
+      <span class="file-path">
+        {{ page.file_name }}
+      </span>
+    </label>
+  </div>
+</div>
+
+<div class="field">
+  <div class="file is-medium is-centered has-path">
+    <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">
+          Medium file…
+        </span>
+      </span>
+      <span class="file-path">
+        {{ page.file_name }}
+      </span>
+    </label>
+  </div>
+</div>
+
+<div class="field">
+  <div class="file is-large is-centered has-path">
+    <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">
+          Large file…
+        </span>
+      </span>
+      <span class="file-path">
+        {{ page.file_name }}
+      </span>
+    </label>
+  </div>
+</div>
+{% endcapture %}
+
+{% include subnav-form.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">File upload</h1>
+    <h2 class="subtitle">
+      A custom <strong>file upload</strong> input, without JavaScript
+    </h2>
+    {%
+      include meta.html
+      experimental=true
+      since="0.5.1"
+      colors=false
+      sizes=true
+      variables=true
+    %}
+
+    <hr>
+
+    <div class="content">
+      <p>
+        The <code>.file</code> class is a simple wrapper around the <code>&lt;input type="radio"&gt;</code> HTML elements. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.
+      </p>
+      <p>
+        Make sure the linked radio buttons have the <strong>same value</strong> for their <code>name</code> HTML attribute.
+      </p>
+    </div>
+
+    <div class="columns">
+      <div class="column">
+        <div class="example">
+          {{ file }}
+        </div>
+      </div>
+      <div class="column highlight-full">
+        {% highlight html %}{{ file }}{% endhighlight %}
+      </div>
+    </div>
+
+    {% include heading.html name="Modifiers" %}
+
+    <div class="columns">
+      <div class="column">
+        <div class="example">
+          {{ file_path }}
+        </div>
+      </div>
+      <div class="column highlight-full">
+        {% highlight html %}{{ file_path }}{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column">
+        <div class="example">
+          {{ file_centered }}
+        </div>
+      </div>
+      <div class="column highlight-full">
+        {% highlight html %}{{ file_centered }}{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column">
+        <div class="example">
+          {{ file_centered_path }}
+        </div>
+      </div>
+      <div class="column highlight-full">
+        {% highlight html %}{{ file_centered_path }}{% endhighlight %}
+      </div>
+    </div>
+
+    {% include heading.html name="Sizes" %}
+
+    <div class="columns">
+      <div class="column">
+        <div class="example">
+          {{ file_sizes }}
+        </div>
+      </div>
+      <div class="column">
+        {% highlight html %}{{ file_sizes }}{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column">
+        <div class="example">
+          {{ file_sizes_path }}
+        </div>
+      </div>
+      <div class="column">
+        {% highlight html %}{{ file_sizes_path }}{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column">
+        <div class="example">
+          {{ file_sizes_centered }}
+        </div>
+      </div>
+      <div class="column">
+        {% highlight html %}{{ file_sizes_centered }}{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column">
+        <div class="example">
+          {{ file_sizes_centered_path }}
+        </div>
+      </div>
+      <div class="column">
+        {% highlight html %}{{ file_sizes_centered_path }}{% endhighlight %}
+      </div>
+    </div>
+  </div>
+</section>

sass/elements/form.sass

@@ -181,6 +181,137 @@ $help-size: $size-small !default
     &.is-large:after
       font-size: $size-large
 
+$file-border-color: transparent !default
+$file-radius: $radius !default
+
+// $file-cta-background-color: $white-ter !default
+$file-cta-background-color: $red !default
+$file-cta-color: $grey-dark !default
+$file-cta-hover-color: $grey-darker !default
+$file-cta-active-color: $grey-darker !default
+
+$file-path-border-color: $file-cta-background-color !default
+$file-path-border-style: solid !default
+$file-path-border-width: 1px 1px 1px 0 !default
+$file-path-max-width: 16em !default
+
+.file
+  align-items: stretch
+  display: flex
+  justify-content: flex-start
+  position: relative
+  &.is-small
+    font-size: $size-small
+  &.is-medium
+    font-size: $size-medium
+    .file-icon
+      .fa
+        font-size: 21px
+  &.is-large
+    font-size: $size-large
+    .file-icon
+      .fa
+        font-size: 28px
+  &.has-path
+    .file-cta
+      border-bottom-right-radius: 0
+      border-top-right-radius: 0
+    .file-path
+      border-bottom-left-radius: 0
+      border-top-left-radius: 0
+  &.is-centered
+    justify-content: center
+    .file-label
+      flex-direction: column
+    .file-cta
+      flex-direction: column
+      height: auto
+      padding: 1em 3em
+    .file-path
+      border-width: 0 1px 1px
+    .file-icon
+      height: 1.5em
+      width: 1.5em
+      .fa
+        font-size: 21px
+    &.is-small
+      .file-icon .fa
+        font-size: 14px
+    &.is-medium
+      .file-icon .fa
+        font-size: 28px
+    &.is-large
+      .file-icon .fa
+        font-size: 35px
+    &.has-path
+      .file-cta
+        border-radius: $file-radius $file-radius 0 0
+      .file-path
+        border-radius: 0 0 $file-radius $file-radius
+        border-width: 0 1px 1px
+
+.file-label
+  align-items: stretch
+  display: flex
+  cursor: pointer
+  justify-content: flex-start
+  overflow: hidden
+  position: relative
+  &:hover
+    .file-cta
+      background-color: darken($file-cta-background-color, 2.5%)
+      color: $file-cta-hover-color
+    .file-path
+      border-color: darken($file-path-border-color, 2.5%)
+  &:active
+    .file-cta
+      background-color: darken($file-cta-background-color, 5%)
+      color: $file-cta-active-color
+    .file-path
+      border-color: darken($file-path-border-color, 5%)
+
+.file-input
+  height: 0.01em
+  left: 0
+  outline: none
+  position: absolute
+  top: 0
+  width: 0.01em
+
+.file-cta,
+.file-path
+  +control
+  border-color: $file-border-color
+  border-radius: $file-radius
+  font-size: 1em
+  padding-left: 1em
+  padding-right: 1em
+  white-space: nowrap
+
+.file-cta
+  background-color: $file-cta-background-color
+  color: $file-cta-color
+
+.file-path
+  border-color: $file-path-border-color
+  border-style: $file-path-border-style
+  border-width: $file-path-border-width
+  display: block
+  max-width: $file-path-max-width
+  overflow: hidden
+  text-align: left
+  text-overflow: ellipsis
+
+.file-icon
+  align-items: center
+  display: flex
+  height: 1em
+  justify-content: center
+  margin-right: 0.5em
+  width: 1em
+  .fa
+    font-size: 14px
+
 .label
   color: $label-color
   display: block