Add <progress> and <meter> support

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 6723e7de898c399eb0275f30f597ebdfcc3651e8..ff22c4275050c00b0cffdb95fa39b3463b8b0125 100644 (file)
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -13,6 +13,8 @@
 
 @include foundation-everything;
 @include foundation-range-input;
+@include foundation-progress-element;
+@include foundation-meter-element;
 @include motion-ui-transitions;
 
 @import 'foundation-docs';

diff --git a/docs/pages/progress-bar.md b/docs/pages/progress-bar.md
index 755f47b346c5d7b5b37fb6fba734524c24ad8718..ac4b5051f9e18660376ddf19339a4c7dd057e78a 100644 (file)
--- a/docs/pages/progress-bar.md
+++ b/docs/pages/progress-bar.md
@@ -35,10 +35,14 @@ Add a `width` CSS property to the inner meter to fill the progress bar.
 A progress bar can be styled with the `.success`, `.warning`, and `.alert` colors.
 
 ```html_example
-<div class="success progress" role="progressbar" tabindex="0" aria-valuenow="25" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100">
+<div class="secondary progress" role="progressbar" tabindex="0" aria-valuenow="25" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100">
   <div class="progress-meter" style="width: 25%"></div>
 </div>
 
+<div class="success progress">
+  <div class="progress-meter" style="width: 50%"></div>
+</div>
+
 <div class="warning progress">
   <div class="progress-meter" style="width: 50%"></div>
 </div>
@@ -61,3 +65,48 @@ You can add text inside the meter of a progress bar. Make sure the text you use
   </span>
 </div>
 ```
+
+---
+
+## Native Progress
+
+As an alternative to our custom progress bar style, you can also opt to use the native `<progress>` element. It provides a more succinct way to create progress bars, but it's not supported in IE9, and some other older browsers. [View `<progress>` element support.](http://caniuse.com/#feat=progress)
+
+```html_example
+<progress max="100" value="75"></progress>
+```
+
+If you're using the Sass version of Foundation, add this line to your main Sass file to export the `<progress>` CSS:
+
+```scss
+@import foundation-progress-element;
+```
+
+The `<progress>` element can be styled with the same coloring classes: `.secondary`, `.success`, `.warning`, and `.alert`.
+
+```html_example
+<progress class="secondary" max="100" value="75"></progress>
+<progress class="success" max="100" value="75"></progress>
+<progress class="warning" max="100" value="75"></progress>
+<progress class="alert" max="100" value="75"></progress>
+```
+
+---
+
+## Native Meter
+
+For the *extra* adventurous developers out there, we also provide styles for the `<meter>` element. What's the difference? `<progress>` represents a value that changes over time, like storage capacity. `<meter>` represents a value that fluctates around some optimum value. It also has *no* support in Internet Explorer, Mobile Safari, or Android 2. [View `<meter>` element support.](http://caniuse.com/#search=meter)
+
+If you're using the Sass version of Foundation, add this line to your main Sass file to export the `<meter>` CSS:
+
+```scss
+@import foundation-progress-element;
+```
+
+The meter automatically colors itself based on the current values, and the defined low, medium, and high ranges. [Learn more about the mechanics of `<meter>` values.](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Meters_and_progress_bars)
+
+```html_example
+<meter value="30" min="0" low="33" medium="66" optimum="100" max="100"></meter>
+<meter value="50" min="0" low="33" medium="66" optimum="100" max="100"></meter>
+<meter value="100" min="0" low="33" medium="66" optimum="100" max="100"></meter>
+```

diff --git a/scss/components/_progress-bar.scss b/scss/components/_progress-bar.scss
index 0313768d40dc1c90af074e45bcaadd0a13c84c20..ed065c3966fe06f24975ca689225eab4f1ed98d0 100644 (file)
--- a/scss/components/_progress-bar.scss
+++ b/scss/components/_progress-bar.scss
@@ -2,30 +2,6 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-////
-/// @group progress-bar
-////
-
-/// Height of a progress bar.
-/// @type Number
-$progress-height: 1rem !default;
-
-/// Background color of a progress bar.
-/// @type Color
-$progress-background: $medium-gray !default;
-
-/// Bottom margin of a progress bar.
-/// @type Number
-$progress-margin-bottom: $global-margin !default;
-
-/// Default color of a progress bar's meter.
-/// @type Color
-$progress-meter-background: $primary-color !default;
-
-/// Default radius of a progress bar.
-/// @type Number
-$progress-radius: $global-radius !default;
-
 /// Adds styles for a progress bar container.
 @mixin progress-container {
   background-color: $progress-background;

diff --git a/scss/forms/_forms.scss b/scss/forms/_forms.scss
index b0222cd5f97ce93780302fc60cbecc55f0a0a50d..e7cd3146f2dc7cbb5abe33228eaf5b0aafb4947a 100644 (file)
--- a/scss/forms/_forms.scss
+++ b/scss/forms/_forms.scss
@@ -19,6 +19,8 @@ $form-spacing: rem-calc(16) !default;
   'fieldset',
   'select',
   'range',
+  'progress',
+  'meter',
   'error';
 
 @mixin foundation-forms {

diff --git a/scss/forms/_meter.scss b/scss/forms/_meter.scss
new file mode 100644 (file)
index 0000000..64c847e
--- /dev/null
+++ b/scss/forms/_meter.scss
@@ -0,0 +1,87 @@
+$meter-height: $progress-height !default;
+$meter-radius: $progress-radius !default;
+$meter-background: $progress-background !default;
+$meter-fill-good: $success-color !default;
+$meter-fill-medium: $warning-color !default;
+$meter-fill-bad: $alert-color !default;
+
+@mixin foundation-meter-element {
+  meter {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    display: block;
+    width: 100%;
+    height: $meter-height;
+    margin-bottom: 1rem;
+
+    @if has-value($meter-radius) {
+      border-radius: $meter-radius;
+    }
+
+    // For Firefox
+    background: $meter-background;
+    border: 0;
+
+    // Chrome/Safari
+    &::-webkit-meter-bar {
+      background: $meter-background;
+
+      @if has-value($meter-radius) {
+        border-radius: $meter-radius;
+      }
+    }
+
+    &::-webkit-meter-inner-element {
+      @if has-value($meter-radius) {
+        border-radius: $meter-radius;
+      }
+    }
+
+    &::-webkit-meter-optimum-value {
+      background: $meter-fill-good;
+
+      @if has-value($meter-radius) {
+        border-radius: $meter-radius;
+      }
+    }
+
+    &::-webkit-meter-suboptimum-value {
+      background: $meter-fill-medium;
+
+      @if has-value($meter-radius) {
+        border-radius: $meter-radius;
+      }
+    }
+
+    &::-webkit-meter-even-less-good-value {
+      background: $meter-fill-bad;
+
+      @if has-value($meter-radius) {
+        border-radius: $meter-radius;
+      }
+    }
+
+    // Firefox
+    background: $meter-background;
+
+    &::-moz-meter-bar {
+      background: $primary-color;
+
+      @if has-value($meter-radius) {
+        border-radius: $meter-radius;
+      }
+    }
+
+    &:-moz-meter-optimum::-moz-meter-bar {
+      background: $meter-fill-good;
+    }
+
+    &:-moz-meter-sub-optimum::-moz-meter-bar {
+      background: $meter-fill-medium;
+    }
+
+    &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+      background: $meter-fill-bad;
+    }
+  }
+}

diff --git a/scss/forms/_progress.scss b/scss/forms/_progress.scss
new file mode 100644 (file)
index 0000000..51dc25e
--- /dev/null
+++ b/scss/forms/_progress.scss
@@ -0,0 +1,82 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group progress-bar
+////
+
+/// Height of a progress bar.
+/// @type Number
+$progress-height: 1rem !default;
+
+/// Background color of a progress bar.
+/// @type Color
+$progress-background: $medium-gray !default;
+
+/// Bottom margin of a progress bar.
+/// @type Number
+$progress-margin-bottom: $global-margin !default;
+
+/// Default color of a progress bar's meter.
+/// @type Color
+$progress-meter-background: $primary-color !default;
+
+/// Default radius of a progress bar.
+/// @type Number
+$progress-radius: $global-radius !default;
+
+@mixin foundation-progress-element {
+  progress {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    display: block;
+    width: 100%;
+    height: $progress-height;
+    margin-bottom: $progress-margin-bottom;
+
+    @if hasvalue($progress-radius) {
+      border-radius: $progress-radius;
+    }
+
+    // For Firefox
+    background: $progress-background;
+    border: 0;
+
+    &::-webkit-progress-bar {
+      background: $progress-background;
+
+      @if hasvalue($progress-radius) {
+        border-radius: $progress-radius;
+      }
+    }
+
+    &::-webkit-progress-value {
+      background: $progress-meter-background;
+
+      @if hasvalue($progress-radius) {
+        border-radius: $progress-radius;
+      }
+    }
+
+    &::-moz-progress-bar {
+      background: $progress-meter-background;
+
+      @if hasvalue($progress-radius) {
+        border-radius: $progress-radius;
+      }
+    }
+
+    @each $name, $color in $foundation-palette {
+      &.#{$name} {
+        &::-webkit-progress-value {
+          background: $color;
+        }
+
+        &::-moz-progress-bar {
+          background: $color;
+        }
+      }
+    }
+  }
+}

diff --git a/scss/forms/_range.scss b/scss/forms/_range.scss
index c56707535e35cc5d04db408556e76558ac9a4d1b..548edcb45e1c5a44ea4b721aeebe357f119a491a 100644 (file)
--- a/scss/forms/_range.scss
+++ b/scss/forms/_range.scss
@@ -84,12 +84,14 @@ $slider-radius: $global-radius !default;
         border-radius: $slider-radius;
       }
     }
+
     // Firefox
     &::-moz-range-track {
       -moz-appearance: none;
       height: $slider-height;
       background: #ccc;
     }
+    
     &::-moz-range-thumb {
       -moz-appearance: none;
       background: $slider-thumb-color;