diff options
1 files changed, 71 insertions, 0 deletions
| -rw-r--r-- | src/sliders.less | 71 |
diff --git a/src/sliders.less b/src/sliders.less new file mode 100644 index 0000000..520e9a1 --- /dev/null +++ b/src/sliders.less @@ -0,0 +1,71 @@ +// Sliders +// Credit: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ +.slider { + appearance: none; + background: transparent; + display: block; + width: 100%; + height: 2.4rem; + + // Slider Thumb + &::-webkit-slider-thumb { + -webkit-appearance: none; + background: @core-color; + border-radius: 50%; + height: 1.4rem; + margin-top: -.5rem; + transition: transform .2s ease; + width: 1.4rem; + } + &::-moz-range-thumb { + background: @core-color; + border: 0; + border-radius: 50%; + height: 1.4rem; + transition: transform .2s ease; + width: 1.4rem; + } + &::-ms-thumb { + background: @core-color; + border: 0; + border-radius: 50%; + height: 1.4rem; + transition: transform .2s ease; + width: 1.4rem; + } + + &:active { + &::-webkit-slider-thumb { + transform: scale(1.25); + } + &::-moz-range-thumb { + transform: scale(1.25); + } + &::-ms-thumb { + transform: scale(1.25); + } + } + + // Slider Track + &::-webkit-slider-runnable-track { + background: @core-border-color; + border-radius: @border-radius; + height: .4rem; + width: 100%; + } + &::-moz-range-track { + background: @core-border-color; + border-radius: @border-radius; + height: .4rem; + width: 100%; + } + &::-ms-track { + background: @core-border-color; + border-radius: @border-radius; + height: .4rem; + width: 100%; + } + &::-ms-fill-lower { + background: @core-color; + } +} |