diff options
1 files changed, 93 insertions, 0 deletions
| -rw-r--r-- | src/_sliders.scss | 93 |
diff --git a/src/_sliders.scss b/src/_sliders.scss new file mode 100644 index 0000000..da80a83 --- /dev/null +++ b/src/_sliders.scss @@ -0,0 +1,93 @@ +// Sliders +// Credit: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ +.slider { + appearance: none; + background: transparent; + display: block; + width: 100%; + height: $unit-6; + + &:focus { + @include control-shadow(); + outline: none; + } + + // Slider Thumb + &::-webkit-slider-thumb { + -webkit-appearance: none; + background: $primary-color; + border: 0; + border-radius: 50%; + height: $unit-3; + margin-top: -($unit-3 - $unit-h) / 2; + transition: transform .2s ease; + width: $unit-3; + } + &::-moz-range-thumb { + background: $primary-color; + border: 0; + border-radius: 50%; + height: $unit-3; + transition: transform .2s ease; + width: $unit-3; + } + &::-ms-thumb { + background: $primary-color; + border: 0; + border-radius: 50%; + height: $unit-3; + transition: transform .2s ease; + width: $unit-3; + } + + &:active { + &::-webkit-slider-thumb { + transform: scale(1.25); + } + &::-moz-range-thumb { + transform: scale(1.25); + } + &::-ms-thumb { + transform: scale(1.25); + } + } + + &:disabled, + &.disabled { + &::-webkit-slider-thumb { + background: $gray-color-light; + transform: scale(1); + } + &::-moz-range-thumb { + background: $gray-color-light; + transform: scale(1); + } + &::-ms-thumb { + background: $gray-color-light; + transform: scale(1); + } + } + + // Slider Track + &::-webkit-slider-runnable-track { + background: $bg-color-dark; + border-radius: $border-radius; + height: $unit-h; + width: 100%; + } + &::-moz-range-track { + background: $bg-color-dark; + border-radius: $border-radius; + height: $unit-h; + width: 100%; + } + &::-ms-track { + background: $bg-color-dark; + border-radius: $border-radius; + height: $unit-h; + width: 100%; + } + &::-ms-fill-lower { + background: $primary-color; + } +} |