Add file colors

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index f65bcb21590d1b759ce4b32fc8e7e592af9bc242..be9d2ec5b23a587acc3ce2cc6c1f2d67585ad97c 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -2594,6 +2594,222 @@ a.box:active {
   position: relative;
 }
 
+.file.is-white .file-cta {
+  background-color: white;
+  border-color: transparent;
+  color: #0a0a0a;
+}
+
+.file.is-white:hover .file-cta, .file.is-white.is-hovered .file-cta {
+  background-color: #f9f9f9;
+  border-color: transparent;
+  color: #0a0a0a;
+}
+
+.file.is-white:focus .file-cta, .file.is-white.is-focused .file-cta {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.25);
+  color: #0a0a0a;
+}
+
+.file.is-white:active .file-cta, .file.is-white.is-active .file-cta {
+  background-color: #f2f2f2;
+  border-color: transparent;
+  color: #0a0a0a;
+}
+
+.file.is-black .file-cta {
+  background-color: #0a0a0a;
+  border-color: transparent;
+  color: white;
+}
+
+.file.is-black:hover .file-cta, .file.is-black.is-hovered .file-cta {
+  background-color: #040404;
+  border-color: transparent;
+  color: white;
+}
+
+.file.is-black:focus .file-cta, .file.is-black.is-focused .file-cta {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.25);
+  color: white;
+}
+
+.file.is-black:active .file-cta, .file.is-black.is-active .file-cta {
+  background-color: black;
+  border-color: transparent;
+  color: white;
+}
+
+.file.is-light .file-cta {
+  background-color: whitesmoke;
+  border-color: transparent;
+  color: #363636;
+}
+
+.file.is-light:hover .file-cta, .file.is-light.is-hovered .file-cta {
+  background-color: #eeeeee;
+  border-color: transparent;
+  color: #363636;
+}
+
+.file.is-light:focus .file-cta, .file.is-light.is-focused .file-cta {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.25);
+  color: #363636;
+}
+
+.file.is-light:active .file-cta, .file.is-light.is-active .file-cta {
+  background-color: #e8e8e8;
+  border-color: transparent;
+  color: #363636;
+}
+
+.file.is-dark .file-cta {
+  background-color: #363636;
+  border-color: transparent;
+  color: whitesmoke;
+}
+
+.file.is-dark:hover .file-cta, .file.is-dark.is-hovered .file-cta {
+  background-color: #2f2f2f;
+  border-color: transparent;
+  color: whitesmoke;
+}
+
+.file.is-dark:focus .file-cta, .file.is-dark.is-focused .file-cta {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(54, 54, 54, 0.25);
+  color: whitesmoke;
+}
+
+.file.is-dark:active .file-cta, .file.is-dark.is-active .file-cta {
+  background-color: #292929;
+  border-color: transparent;
+  color: whitesmoke;
+}
+
+.file.is-primary .file-cta {
+  background-color: #00d1b2;
+  border-color: transparent;
+  color: #fff;
+}
+
+.file.is-primary:hover .file-cta, .file.is-primary.is-hovered .file-cta {
+  background-color: #00c4a7;
+  border-color: transparent;
+  color: #fff;
+}
+
+.file.is-primary:focus .file-cta, .file.is-primary.is-focused .file-cta {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.25);
+  color: #fff;
+}
+
+.file.is-primary:active .file-cta, .file.is-primary.is-active .file-cta {
+  background-color: #00b89c;
+  border-color: transparent;
+  color: #fff;
+}
+
+.file.is-info .file-cta {
+  background-color: #3273dc;
+  border-color: transparent;
+  color: #fff;
+}
+
+.file.is-info:hover .file-cta, .file.is-info.is-hovered .file-cta {
+  background-color: #276cda;
+  border-color: transparent;
+  color: #fff;
+}
+
+.file.is-info:focus .file-cta, .file.is-info.is-focused .file-cta {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.25);
+  color: #fff;
+}
+
+.file.is-info:active .file-cta, .file.is-info.is-active .file-cta {
+  background-color: #2366d1;
+  border-color: transparent;
+  color: #fff;
+}
+
+.file.is-success .file-cta {
+  background-color: #23d160;
+  border-color: transparent;
+  color: #fff;
+}
+
+.file.is-success:hover .file-cta, .file.is-success.is-hovered .file-cta {
+  background-color: #22c65b;
+  border-color: transparent;
+  color: #fff;
+}
+
+.file.is-success:focus .file-cta, .file.is-success.is-focused .file-cta {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(35, 209, 96, 0.25);
+  color: #fff;
+}
+
+.file.is-success:active .file-cta, .file.is-success.is-active .file-cta {
+  background-color: #20bc56;
+  border-color: transparent;
+  color: #fff;
+}
+
+.file.is-warning .file-cta {
+  background-color: #ffdd57;
+  border-color: transparent;
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.file.is-warning:hover .file-cta, .file.is-warning.is-hovered .file-cta {
+  background-color: #ffdb4a;
+  border-color: transparent;
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.file.is-warning:focus .file-cta, .file.is-warning.is-focused .file-cta {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(255, 221, 87, 0.25);
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.file.is-warning:active .file-cta, .file.is-warning.is-active .file-cta {
+  background-color: #ffd83d;
+  border-color: transparent;
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.file.is-danger .file-cta {
+  background-color: #ff3860;
+  border-color: transparent;
+  color: #fff;
+}
+
+.file.is-danger:hover .file-cta, .file.is-danger.is-hovered .file-cta {
+  background-color: #ff2b56;
+  border-color: transparent;
+  color: #fff;
+}
+
+.file.is-danger:focus .file-cta, .file.is-danger.is-focused .file-cta {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(255, 56, 96, 0.25);
+  color: #fff;
+}
+
+.file.is-danger:active .file-cta, .file.is-danger.is-active .file-cta {
+  background-color: #ff1f4b;
+  border-color: transparent;
+  color: #fff;
+}
+
 .file.is-small {
   font-size: 0.75rem;
 }

diff --git a/docs/documentation/form/file.html b/docs/documentation/form/file.html
index 6acb00888e833508d54e559a73c3efead2361be2..f920b9287d6c0237b89211d8d5f60285955c87f5 100644 (file)
--- a/docs/documentation/form/file.html
+++ b/docs/documentation/form/file.html
@@ -97,6 +97,78 @@ variables:
 </div>
 {% endcapture %}
 
+{% capture file_colors %}
+<div class="field">
+  <div class="file is-primary">
+    <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">
+          Primary file…
+        </span>
+      </span>
+    </label>
+  </div>
+</div>
+
+<div class="field">
+  <div class="file is-info 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">
+          Info file…
+        </span>
+      </span>
+      <span class="file-name">
+        {{ page.file_name }}
+      </span>
+    </label>
+  </div>
+</div>
+
+<div class="field">
+  <div class="file is-warning 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-cloud-upload"></i>
+        </span>
+        <span class="file-label">
+          Warning file…
+        </span>
+      </span>
+    </label>
+  </div>
+</div>
+
+<div class="field">
+  <div class="file is-danger has-name 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-cloud-upload"></i>
+        </span>
+        <span class="file-label">
+          Danger file…
+        </span>
+      </span>
+      <span class="file-name">
+        {{ page.file_name }}
+      </span>
+    </label>
+  </div>
+</div>
+{% endcapture %}
+
 {% capture file_sizes %}
 <div class="field">
   <div class="file is-small">
@@ -397,7 +469,7 @@ variables:
       include meta.html
       experimental=true
       since="0.5.1"
-      colors=false
+      colors=true
       sizes=true
       variables=true
     %}
@@ -500,6 +572,31 @@ variables:
       </div>
     </div>
 
+    {% include heading.html name="Colors" %}
+
+    <div class="columns">
+      <div class="column">
+        <div class="content">
+          <p>
+            You can style the file element by appending one of the <strong>9 color modifiers</strong>:
+          </p>
+          <ul>
+            {% for color in site.colors %}
+              <li>
+                <code>is-{{ color }}</code>
+              </li>
+            {% endfor %}
+          </ul>
+        </div>
+        <div class="example">
+          {{ file_colors }}
+        </div>
+      </div>
+      <div class="column">
+        {% highlight html %}{{ file_colors }}{% endhighlight %}
+      </div>
+    </div>
+
     {% include heading.html name="Sizes" %}
 
     <div class="content">

diff --git a/sass/elements/form.sass b/sass/elements/form.sass
index 949261fedb660564921308ec4fefc874ee46828c..3e99fd54002c2652a3c96e44236d15583759f850 100755 (executable)
--- a/sass/elements/form.sass
+++ b/sass/elements/form.sass
@@ -200,6 +200,34 @@ $help-size: $size-small !default
   display: flex
   justify-content: flex-start
   position: relative
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      .file-cta
+        background-color: $color
+        border-color: transparent
+        color: $color-invert
+      &:hover,
+      &.is-hovered
+        .file-cta
+          background-color: darken($color, 2.5%)
+          border-color: transparent
+          color: $color-invert
+      &:focus,
+      &.is-focused
+        .file-cta
+          border-color: transparent
+          box-shadow: 0 0 0.5em rgba($color, 0.25)
+          color: $color-invert
+      &:active,
+      &.is-active
+        .file-cta
+          background-color: darken($color, 5%)
+          border-color: transparent
+          color: $color-invert
+  // Sizes
   &.is-small
     font-size: $size-small
   &.is-medium
@@ -212,6 +240,7 @@ $help-size: $size-small !default
     .file-icon
       .fa
         font-size: 28px
+  // Modifiers
   &.has-name
     .file-cta
       border-bottom-right-radius: 0