From: Geoff Kimball Date: Wed, 13 Jan 2016 22:36:10 +0000 (-0800) Subject: Add support X-Git-Tag: v6.2.0-rc.1~74^2~3 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=ec0d6edadb05bd0f138e86fa1368cdca05681724;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Add support --- diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss index 552b46610..6723e7de8 100644 --- a/docs/assets/scss/docs.scss +++ b/docs/assets/scss/docs.scss @@ -12,6 +12,7 @@ @import 'motion-ui'; @include foundation-everything; +@include foundation-range-input; @include motion-ui-transitions; @import 'foundation-docs'; diff --git a/docs/pages/slider.md b/docs/pages/slider.md index 069165a36..a739907dc 100644 --- a/docs/pages/slider.md +++ b/docs/pages/slider.md @@ -80,3 +80,27 @@ Wait, you want a visible input AND a slider? You're crazy, but ok. Change the va ``` + +--- + +## Native Range Slider + +In Foundation 6.2, we introduced styles for ``, the native HTML element for range sliders. It's not supported in every browser, namely IE9 and some older mobile browsers. [View browser support for the range input type.](http://caniuse.com/#feat=input-range) + +```html_example + +``` + +If you're using the Sass version of Foundation, add this line to your main Sass file: + +```scss +@include foundation-range-input; +``` + +It's possible to use both the JavaScript slider and the native slider in the same codebase, as the CSS selectors used don't overlap. Here's what's different about the native slider: + +- Less markup: just write `` and you're good. +- No JavaScript is needed, which guarantees it runs faster in most browsers. +- To disable the slider, add `disabled` as an attribute, instead of a class. +- No support for vertical orientation. +- No support for two handles. diff --git a/scss/components/_slider.scss b/scss/components/_slider.scss index 3f2d7d3c4..6952c32d6 100644 --- a/scss/components/_slider.scss +++ b/scss/components/_slider.scss @@ -9,43 +9,11 @@ /// @group slider //// -/// Default height of the slider. -/// @type Number -$slider-height: 0.5rem !default; - -/// Default slider width of a vertical slider. +/// Default slider width of a vertical slider. (Doesn't apply to the native slider.) /// @type Number $slider-width-vertical: $slider-height !default; -/// Default background color of the slider's track. -/// @type Color -$slider-background: $light-gray !default; - -/// Default color of the active fill color of the slider. -/// @type Color -$slider-fill-background: $medium-gray !default; - -/// Default height of the handle of the slider. -/// @type Number -$slider-handle-height: 1.4rem !default; - -/// Default width of the handle of the slider. -/// @type Number -$slider-handle-width: 1.4rem !default; - -/// Default color of the handle for the slider. -/// @type Color -$slider-handle-background: $primary-color !default; - -/// Default fade amount of a disabled slider. -/// @type Number -$slider-opacity-disabled: 0.25 !default; - -/// Default radius for slider. -/// @type Number -$slider-radius: $global-radius !default; - -/// Transition properties to apply to the slider handle and fill. +/// Transition properties to apply to the slider handle and fill. (Doesn't apply to the native slider.) /// @type Transition $slider-transition: all 0.2s ease-in-out !default; diff --git a/scss/forms/_forms.scss b/scss/forms/_forms.scss index 0d9aa9706..b0222cd5f 100644 --- a/scss/forms/_forms.scss +++ b/scss/forms/_forms.scss @@ -18,6 +18,7 @@ $form-spacing: rem-calc(16) !default; 'input-group', 'fieldset', 'select', + 'range', 'error'; @mixin foundation-forms { diff --git a/scss/forms/_range.scss b/scss/forms/_range.scss new file mode 100644 index 000000000..c56707535 --- /dev/null +++ b/scss/forms/_range.scss @@ -0,0 +1,143 @@ +/// Default height of the slider. +/// @type Number +$slider-height: 0.5rem !default; + +/// Default background color of the slider's track. +/// @type Color +$slider-background: $light-gray !default; + +/// Default color of the active fill color of the slider. +/// @type Color +$slider-fill-background: $medium-gray !default; + +/// Default height of the handle of the slider. +/// @type Number +$slider-handle-height: 1.4rem !default; + +/// Default width of the handle of the slider. +/// @type Number +$slider-handle-width: 1.4rem !default; + +/// Default color of the handle for the slider. +/// @type Color +$slider-handle-background: $primary-color !default; + +/// Default fade amount of a disabled slider. +/// @type Number +$slider-opacity-disabled: 0.25 !default; + +/// Default radius for slider. +/// @type Number +$slider-radius: $global-radius !default; + +@mixin foundation-range-input { + input[type="range"] { + $slider-background: $light-gray; + $slider-height: 0.5rem; + $slider-radius: 0px; + $slider-thumb-height: 1.4rem; + $slider-thumb-width: 1.4rem; + $slider-thumb-color: $primary-color; + $slider-opacity-disabled: 0.25; + $slider-fill-background: $medium-gray; + + $margin: ($slider-thumb-height - $slider-height) / 2; + + -webkit-appearance: none; + -moz-appearance: none; + display: block; + width: 100%; + height: auto; + cursor: pointer; + margin-top: $margin; + margin-bottom: $margin; + border: 0; + line-height: 1; + margin-bottom: $global-margin; + + @if has-value($slider-radius) { + border-radius: $slider-radius; + } + + &:focus { + outline: 0; + } + + &[disabled] { + opacity: $slider-opacity-disabled; + } + + // Chrome/Safari + &::-webkit-slider-runnable-track { + height: $slider-height; + background: $slider-background; + } + + &::-webkit-slider-thumb { + -webkit-appearance: none; + background: $slider-thumb-color; + width: $slider-thumb-width; + height: $slider-thumb-height; + margin-top: -$margin; + + @if has-value($slider-radius) { + 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; + width: $slider-thumb-width; + height: $slider-thumb-height; + margin-top: -$margin; + + @if has-value($slider-radius) { + border-radius: $slider-radius; + } + } + + // Internet Explorer + &::-ms-track { + height: $slider-height; + background: $slider-background; + color: transparent; + border: 0; + overflow: visible; + border-top: $margin solid $body-background; + border-bottom: $margin solid $body-background; + } + + &::-ms-thumb { + background: $slider-thumb-color; + width: $slider-thumb-width; + height: $slider-thumb-height; + border: 0; + + @if has-value($slider-radius) { + border-radius: $slider-radius; + } + } + + &::-ms-fill-lower { + background: $slider-fill-background; + } + + &::-ms-fill-upper { + background: $slider-background; + } + + @at-root { + output { + line-height: $slider-thumb-height; + vertical-align: middle; + margin-left: 0.5em; + } + } + } +}