145 lines
3.2 KiB
SCSS
145 lines
3.2 KiB
SCSS
// Foundation for Sites by ZURB
|
|
// foundation.zurb.com
|
|
// Licensed under MIT Open Source
|
|
|
|
////
|
|
/// @group slider
|
|
////
|
|
|
|
/// 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 {
|
|
// scss-lint:disable QualifyingElement
|
|
input[type="range"] {
|
|
$margin: ($slider-handle-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;
|
|
|
|
@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-handle {
|
|
-webkit-appearance: none;
|
|
background: $slider-handle-background;
|
|
width: $slider-handle-width;
|
|
height: $slider-handle-height;
|
|
margin-top: -$margin;
|
|
|
|
@if has-value($slider-radius) {
|
|
border-radius: $slider-radius;
|
|
}
|
|
}
|
|
|
|
// Firefox
|
|
&::-moz-range-track {
|
|
-moz-appearance: none;
|
|
height: $slider-height;
|
|
background: $slider-background;
|
|
}
|
|
|
|
&::-moz-range-thumb {
|
|
-moz-appearance: none;
|
|
background: $slider-handle-background;
|
|
width: $slider-handle-width;
|
|
height: $slider-handle-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-handle-background;
|
|
width: $slider-handle-width;
|
|
height: $slider-handle-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-handle-height;
|
|
vertical-align: middle;
|
|
margin-left: 0.5em;
|
|
}
|
|
}
|
|
}
|
|
}
|