From d051add0d537c298475fa9c281d758c1ec98ed32 Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Wed, 13 Jan 2016 17:59:55 -0800 Subject: [PATCH] Add and support --- docs/assets/scss/docs.scss | 2 + docs/pages/progress-bar.md | 51 +++++++++++++++++- scss/components/_progress-bar.scss | 24 --------- scss/forms/_forms.scss | 2 + scss/forms/_meter.scss | 87 ++++++++++++++++++++++++++++++ scss/forms/_progress.scss | 82 ++++++++++++++++++++++++++++ scss/forms/_range.scss | 2 + 7 files changed, 225 insertions(+), 25 deletions(-) create mode 100644 scss/forms/_meter.scss create mode 100644 scss/forms/_progress.scss diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss index 6723e7de8..ff22c4275 100644 --- 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 755f47b34..ac4b5051f 100644 --- 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 -
+
+
+
+
+
@@ -61,3 +65,48 @@ You can add text inside the meter of a progress bar. Make sure the text you use
``` + +--- + +## Native Progress + +As an alternative to our custom progress bar style, you can also opt to use the native `` element. It provides a more succinct way to create progress bars, but it's not supported in IE9, and some other older browsers. [View `` element support.](http://caniuse.com/#feat=progress) + +```html_example + +``` + +If you're using the Sass version of Foundation, add this line to your main Sass file to export the `` CSS: + +```scss +@import foundation-progress-element; +``` + +The `` element can be styled with the same coloring classes: `.secondary`, `.success`, `.warning`, and `.alert`. + +```html_example + + + + +``` + +--- + +## Native Meter + +For the *extra* adventurous developers out there, we also provide styles for the `` element. What's the difference? `` represents a value that changes over time, like storage capacity. `` represents a value that fluctates around some optimum value. It also has *no* support in Internet Explorer, Mobile Safari, or Android 2. [View `` 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 `` 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 `` values.](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Meters_and_progress_bars) + +```html_example + + + +``` diff --git a/scss/components/_progress-bar.scss b/scss/components/_progress-bar.scss index 0313768d4..ed065c396 100644 --- 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 b0222cd5f..e7cd3146f 100644 --- 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 index 000000000..64c847ead --- /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 index 000000000..51dc25ee1 --- /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 c56707535..548edcb45 100644 --- 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; -- 2.47.2